@ringcentral/spring-ui 1.11.2 → 1.13.0

package/chunks/ShowHideEye.js

@@ -1,56 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { motionTransition } from '@ringcentral/spring-theme';
-import { motion } from 'framer-motion';
-import { I as Icon } from './Icon.js';
-import 'react';
-import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
-
-const topEyelidVariants = {
-    show: {
-        d: 'M 17.5 12.25 C 16.75 10.25 13.8 7 10 7 C 6.2 7 3.25 10.25 2.5 12.25',
-    },
-    hide: {
-        d: 'M 17.5 6.75 C 16.75 8.75 14 12.2 10 12.2 C 6 12.2 3.25 8.75 2.5 6.75',
-    },
-};
-const bottomEyelidVariants = {
-    show: {
-        d: 'M 17.5 11.75 C 16.75 13.75 13.8 17 10 17 C 6.2 17 3.25 13.75 2.5 11.75',
-    },
-    hide: {
-        d: 'M 17.5 6.75 C 16.75 8.75 14 12.2 10 12.2 C 6 12.2 3.25 8.75 2.5 6.75',
-    },
-};
-const eyelashVariants = {
-    show: {
-        d: 'M 10 4.5 L 10 1.5 M 4 6.35 L 2.5 3.7 M 16 6.35 L 17.5 3.7',
-    },
-    hide: {
-        d: 'M 10 15.5 L 10 18.5 M 16 13.75 L 17.5 16.4 M 4 13.75 L 2.5 16.4',
-    },
-};
-const ShowHideEye = (props) => {
-    const { classes, size = 'medium', hide = false, className, ...rest } = props;
-    const cls = useClasses('show-hide-eye', classes, className);
-    const transition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const pupilShowTransition = useMotionSafeTransition({
-        delay: 0.05,
-    });
-    const pupilHideTransition = useMotionSafeTransition({
-        duration: 0.1,
-    });
-    const pupilVariants = {
-        show: {
-            ry: 3.75,
-            transition: pupilShowTransition,
-        },
-        hide: {
-            ry: 0,
-            transition: pupilHideTransition,
-        },
-    };
-    return (jsx(Icon, { ...rest, size: size, className: cls('root'), children: jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', animate: hide ? 'hide' : 'show', transition: transition, children: [jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: topEyelidVariants, transition: transition, fill: "transparent" }), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: bottomEyelidVariants, transition: transition, fill: "transparent" }), jsx(motion.ellipse, { initial: false, cx: 10, cy: 10.5, rx: 3.75, fill: "currentColor", variants: pupilVariants }), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', strokeLinecap: 'butt', variants: eyelashVariants, transition: transition, fill: "transparent" })] }) }));
-};
-
-export { ShowHideEye as S };

package/chunks/SlideIn.js

@@ -1,19 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
-import '@ringcentral/spring-theme';
-import { g as getSlideIn } from './getSlideIn.js';
-
-const SlideIn = (props) => {
-    const { toggle, toggleOnTransition, toggleOffTransition, children, from = 'right', ...rest } = props;
-    const prefersReducedMotion = usePrefersReducedMotion();
-    return (jsx(motion.div, { ...getSlideIn({
-            toggle,
-            from,
-            prefersReducedMotion,
-            toggleOnTransition,
-            toggleOffTransition,
-        }), ...rest, children: children }));
-};
-
-export { SlideIn as S };

package/chunks/SortableArrow.js

@@ -1,73 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { motion } from 'framer-motion';
-import { motionTransition } from '@ringcentral/spring-theme';
-import { I as Icon } from './Icon.js';
-import 'react';
-import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
-
-const topCaretVariants = {
-    initial: {
-        d: 'M 5 7.5 L 10 2.5 L 15 7.5',
-        opacity: 1,
-    },
-    asc: {
-        d: 'M 4.75 9.5 L 10 4 L 15.25 9.5',
-        opacity: 1,
-    },
-    desc: {
-        d: 'M 10 9.5 L 10 4.5 L 10 9.5',
-        opacity: 0,
-        transition: {
-            ease: 'easeOut',
-            duration: 0.15,
-        },
-    },
-};
-const topLineVariants = {
-    initial: {
-        d: 'M 10 2.5 L 10 2.5',
-        opacity: 0,
-    },
-    asc: {
-        d: 'M 10 4.5 L 10 15.5',
-        opacity: 1,
-    },
-};
-const bottomLineVariants = {
-    initial: {
-        d: 'M 10 17.5 L 10 17.5',
-        opacity: 0,
-    },
-    desc: {
-        d: 'M 10 15.5 L 10 4.5',
-        opacity: 1,
-    },
-};
-const bottomCaretVariants = {
-    initial: {
-        d: 'M 5 12.5 L 10 17.5 L 15 12.5',
-        opacity: 1,
-    },
-    asc: {
-        d: 'M 10 10.5 L 10 15.5 L 10 10.5',
-        opacity: 0,
-        transition: {
-            ease: 'easeOut',
-            duration: 0.15,
-        },
-    },
-    desc: {
-        d: 'M 4.75 10.5 L 10 16 L 15.25 10.5',
-        opacity: 1,
-    },
-};
-const SortableArrow = (props) => {
-    const { classes, size = 'medium', direction = false, className, ...rest } = props;
-    const cls = useClasses('sortable-arrow', classes, className);
-    const caretTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
-    const lineTransition = useMotionSafeTransition(motionTransition['neutral-01-fast']);
-    return (jsx(Icon, { ...rest, size: size, className: cls('root'), children: jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', animate: direction || 'initial', children: [jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', variants: topCaretVariants, transition: caretTransition, fill: "transparent" }), direction !== 'desc' && (jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: 'square', variants: topLineVariants, transition: lineTransition, fill: "transparent" })), direction !== 'asc' && (jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: 'square', variants: bottomLineVariants, transition: lineTransition, fill: "transparent" })), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', variants: bottomCaretVariants, transition: caretTransition, fill: "transparent" })] }) }));
-};
-
-export { SortableArrow as S };

package/chunks/Squircle.js

@@ -1,31 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, isValidElement, cloneElement } from 'react';
-import { useClasses, useId } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-
-const SQUIRCLE_PATH = 'M 0.5 0 C 0.879 0 1 0.121 1 0.5 C 1 0.879 0.879 1 0.5 1 C 0.121 1 0 0.879 0 0.5 C 0 0.121 0.121 0 0.5 0 Z';
-const Squircle = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Squircle' });
-    const { component = 'div', focusVisible, active, children: childrenProp, className, classes, interactive = true, fillShape: fillShapeProp = false, ...rest } = props;
-    const children = React.Children.toArray(childrenProp);
-    const firstChild = children[0];
-    const fillShape = fillShapeProp &&
-        firstChild &&
-        isValidElement(firstChild);
-    const cls = useClasses('squircle', classes, className);
-    const clipId = useId('sui-squircle-clip', true);
-    const showFocusRing = interactive && focusVisible;
-    const Root = component;
-    return (jsxs(Root, { className: cls('root', { active, interactive }), ...rest, ref: ref, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", viewBox: "0 0 1 1", children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: SQUIRCLE_PATH }) }) }) }), !fillShape && (jsx("svg", { className: cls('content'), xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 1 1', children: jsx("path", { clipPath: `url(#${clipId})`, d: SQUIRCLE_PATH, vectorEffect: "non-scaling-stroke" }) })), showFocusRing && (jsx("svg", { className: cls('ring'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1 1", overflow: "visible", children: jsx("path", { d: SQUIRCLE_PATH, fillOpacity: 0, vectorEffect: "non-scaling-stroke" }) })), fillShape
-                ? cloneElement(firstChild, {
-                    style: {
-                        ...firstChild.props.style,
-                        with: '100%',
-                        height: '100%',
-                        clipPath: `url(#${clipId})`,
-                    },
-                })
-                : children] }));
-});
-
-export { Squircle as S };

package/chunks/StatusIndicator.js

@@ -1,20 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useClasses } from '@ringcentral/spring-base';
-import { MinusBoldMd, CheckBoldSm } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { I as Icon } from './Icon.js';
-
-const IconSizeMap = {
-    large: 'small',
-    medium: 'xsmall',
-    small: 'xsmall',
-};
-const StatusIndicator = (inProps) => {
-    const props = useThemeProps({ props: inProps, name: 'StatusIndicator' });
-    const { classes, className, size = 'medium', variant = 'available', ...rest } = props;
-    const cls = useClasses('status-indicator', classes, className);
-    return (jsxs("div", { className: cls('root', size, variant), ...rest, children: [variant === 'dnd' && (jsx(Icon, { symbol: MinusBoldMd, size: IconSizeMap[size] })), variant === 'available' && (jsx(Icon, { symbol: CheckBoldSm, size: IconSizeMap[size] }))] }));
-};
-StatusIndicator.displayName = 'SuiStatusIndicator';
-
-export { StatusIndicator as S };

package/chunks/StepConnector.js

@@ -1,21 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { b as useStepperContext, u as useStepContext } from './StepperContext.js';
-
-const StepConnector = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'StepConnector' });
-    const { classes, className, children, ...rest } = props;
-    const cls = useClasses('step-connector', classes, className);
-    const { orientation = 'horizontal' } = useStepperContext();
-    const { active, disabled, completed } = useStepContext();
-    return (jsx("div", { "aria-hidden": true, className: cls('root', orientation, {
-            active,
-            completed,
-            disabled,
-        }), ...rest, ref: ref, children: jsx("span", { className: cls('line', `line-${orientation}`) }) }));
-});
-StepConnector.displayName = 'SuiStepConnector';
-
-export { StepConnector as S };

package/chunks/StepIcon.js

@@ -1,43 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { AlertFilledMd, AlertMd, CheckBoldMd, CheckMd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { I as Icon } from './Icon.js';
-
-const StepIcon = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'StepIcon' });
-    const { classes, className, children, active = false, completed = false, error = false, disabled = false, variant = 'contained', icon, symbol, ...rest } = props;
-    const cls = useClasses('step-icon', classes, className);
-    if (symbol) {
-        return (jsx("span", { className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
-                current: active,
-                completed,
-                error,
-                disabled,
-            }), ...rest, ref: ref, children: jsx(Icon, { className: cls('icon'), size: "xsmall", symbol: symbol }) }));
-    }
-    if (typeof icon === 'number' || typeof icon === 'string') {
-        let content;
-        if (error) {
-            content = (jsx(Icon, { className: cls('icon'), size: "large", symbol: variant === 'contained' ? AlertFilledMd : AlertMd }));
-        }
-        else if (completed) {
-            content =
-                variant === 'contained' ? (jsx(Icon, { className: cls('icon'), size: "xsmall", symbol: CheckBoldMd })) : (jsx(Icon, { className: cls('icon'), size: "large", symbol: CheckMd }));
-        }
-        else {
-            content = (jsx("span", { className: cls('text', active && 'text-current'), children: icon }));
-        }
-        return (jsx("span", { className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
-                current: active,
-                completed,
-                error,
-                disabled,
-            }), ...rest, ref: ref, children: content }));
-    }
-    return icon;
-});
-StepIcon.displayName = 'SuiStepIcon';
-
-export { StepIcon as S };

package/chunks/StepLabel.js

@@ -1,29 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { useClasses } from '@ringcentral/spring-base';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import clsx from 'clsx';
-import { b as useStepperContext, u as useStepContext } from './StepperContext.js';
-import { S as StepIcon } from './StepIcon.js';
-
-const StepLabel = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'StepLabel' });
-    const { classes, className, children, error = false, icon: iconProp, optional, labelProps = {}, StepIconComponent: StepIconComponentProp, StepIconProps, ...rest } = props;
-    const cls = useClasses('step-label', classes, className);
-    const { orientation = 'horizontal' } = useStepperContext();
-    const { active, disabled, completed, icon: iconContext, id, connector, index, last, variant, } = useStepContext();
-    const icon = iconProp || iconContext;
-    let StepIconComponent = StepIconComponentProp;
-    if (icon && !StepIconComponent) {
-        StepIconComponent = StepIcon;
-    }
-    return (jsxs("span", { id: id, className: cls('root', orientation, {
-            current: active,
-            completed,
-            disabled,
-            error,
-        }), ...rest, ref: ref, children: [index !== 0 ? connector : null, StepIconComponent ? (jsx("span", { className: cls('icon-container', `${orientation}-icon-container`), children: jsx(StepIconComponent, { completed: completed, active: active, error: error, disabled: disabled, icon: icon, variant: variant, ...StepIconProps }) })) : null, jsxs("span", { className: cls('label-container', `${orientation}-label-container`, error && 'error-label-container', { disabled }), children: [children ? (jsx("span", { ...labelProps, className: clsx(cls('label', `${orientation}-label`, active && 'current-label', error && 'error-label', { disabled, completed }), labelProps?.className), children: children })) : null, optional] }), !last ? connector : null] }));
-});
-StepLabel.displayName = 'SuiStepLabel';
-
-export { StepLabel as S };

package/chunks/StepperContext.js

@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const StepContext = createContext({});
-const useStepContext = () => useContext(StepContext);
-
-const StepperContext = createContext({});
-const useStepperContext = () => useContext(StepperContext);
-
-export { StepContext as S, StepperContext as a, useStepperContext as b, useStepContext as u };

package/chunks/TableContext.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TableContext = createContext({});
-const useTableContext = () => useContext(TableContext);
-
-export { TableContext as T, useTableContext as u };

package/chunks/Tablelvl2Context.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const Tablelvl2Context = createContext({});
-const useTablelvl2Context = () => useContext(Tablelvl2Context);
-
-export { Tablelvl2Context as T, useTablelvl2Context as u };

package/chunks/TabsContext.js

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TabsContext = createContext({});
-const useTabsContext = () => useContext(TabsContext);
-
-export { TabsContext as T, useTabsContext as u };

package/chunks/TextField.js

@@ -1,110 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { useInput } from '@mui/base';
-import { useId, useClasses, useControlled, useEventCallback, combineProps, useForkRef } from '@ringcentral/spring-base';
-import { Xmd } from '@ringcentral/spring-icon';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import 'framer-motion';
-import './Icon.js';
-import { S as ShowHideEye } from './ShowHideEye.js';
-import { u as useHelperTextId, F as FormField } from './useHelperTextId.js';
-import { I as IconButton } from './IconButtonLabel.js';
-
-const TextFieldComponent = (inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'TextField' });
-    const { classes, className, clearBtn = true, clearText = 'clear', showCharacterCount = false, useNativeClearBtn = false, size, endAdornment, fullWidth, helperText: helperTextProp, inputProps, label, onClear, placeholder: placeholderProp, RootProps, startAdornment, type, variant = 'outlined', inputComponent: InputComponent = 'input', autoFocus, ClearButtonProps, id: idProp, onKeyDown, onKeyUp, readOnly, onClick, focused, FormHelperTextProps, showMaskValueToggleButton = type === 'password', maskValue: maskValueProps, MaskValueButtonProps, ShowHideEyeIconProps, } = props;
-    const placeholder = placeholderProp || ' ';
-    const defaultId = useId();
-    const id = idProp ?? inputProps?.id ?? defaultId;
-    const cls = useClasses('text-field', classes, className);
-    const { disabled, required, error, getInputProps } = useInput(props);
-    const states = { disabled, required, error, focused };
-    const idForHelperText = useHelperTextId({
-        helperText: helperTextProp,
-        id,
-        FormHelperTextProps,
-    });
-    const widgetProps = getInputProps({
-        'aria-describedby': idForHelperText,
-        ...inputProps,
-        placeholder,
-        id,
-        type,
-    });
-    const inputRef = useRef();
-    const handlerClear = (e) => {
-        if (disabled)
-            return;
-        const el = inputRef.current;
-        if (el) {
-            onClear?.(e);
-            const host = Object.getPrototypeOf(el);
-            Object.getOwnPropertyDescriptor(host, 'value')?.set?.call(el, '');
-            el.focus();
-            el.dispatchEvent(new InputEvent('input', { bubbles: true }));
-        }
-    };
-    let helperText = helperTextProp;
-    if (showCharacterCount &&
-        inputProps?.maxLength !== undefined &&
-        props.value !== undefined) {
-        helperText = (jsxs("div", { className: cls('helper-text'), children: [jsx("span", { children: helperText }), jsxs("span", { children: [props.value?.length ?? 0, "/", inputProps.maxLength] })] }));
-    }
-    const [maskValue, setMaskValue] = useControlled({
-        controlled: maskValueProps,
-        default: false,
-        name: 'TextField',
-        state: 'showPassword',
-    });
-    let inputType = type;
-    const shouldShowMaskToggleButton = showMaskValueToggleButton && type === 'password';
-    const isSearchInput = type === 'search';
-    const shouldHideNativeClear = isSearchInput && !useNativeClearBtn;
-    if (shouldShowMaskToggleButton) {
-        if (maskValue) {
-            inputType = 'text';
-        }
-        else {
-            inputType = 'password';
-        }
-    }
-    const handleMaskValueChange = useEventCallback(() => {
-        setMaskValue(!maskValue);
-        if (props.onMaskValueChange) {
-            props.onMaskValueChange(!maskValue);
-        }
-    });
-    return (jsxs(FormField, { ...combineProps({
-            classes: {
-                root: cls('root', {
-                    'full-width': fullWidth,
-                    'hide-native-clear': shouldHideNativeClear,
-                }),
-                content: cls('form-field-content'),
-                outlined: cls('outlined'),
-                standard: cls('standard'),
-                quiet: cls('quiet'),
-            },
-            contentProps: {
-                onClick: (e) => {
-                    onClick?.(e);
-                    if (e.target === e.currentTarget && !disabled) {
-                        inputRef.current?.focus();
-                    }
-                },
-            },
-        }, RootProps), ...states, htmlFor: id, label: label, ref: ref, helperText: helperText, variant: variant, size: size, FormHelperTextProps: { id: idForHelperText, ...FormHelperTextProps }, children: [startAdornment && (jsx("div", { className: cls('start-adornment'), children: startAdornment })), jsx(InputComponent, { readOnly: readOnly, autoComplete: "off", autoFocus: autoFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...widgetProps, className: cls('input'), ref: useForkRef(widgetProps.ref, inputRef), type: inputType }), clearBtn && (jsx(IconButton, { symbol: Xmd, shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", title: clearText, "aria-label": clearText, disabled: disabled, ...combineProps({
-                    className: cls('clear'),
-                    onClick: handlerClear,
-                }, ClearButtonProps) })), shouldShowMaskToggleButton && (jsx(IconButton, { disabled: disabled, shape: 'squircle', background: false, color: 'neutral', variant: "icon", size: "small", ...combineProps({
-                    className: cls('mask-value-button'),
-                    onClick: handleMaskValueChange,
-                    'aria-label': maskValue ? 'eye-visible' : 'eye',
-                }, MaskValueButtonProps), children: jsx(ShowHideEye, { hide: !maskValue, size: ShowHideEyeIconProps?.size ??
-                        MaskValueButtonProps?.iconSize ??
-                        'small', ...ShowHideEyeIconProps }) })), endAdornment && (jsx("div", { className: cls('end-adornment'), children: endAdornment }))] }));
-};
-const TextField = forwardRef(TextFieldComponent);
-TextField.displayName = 'SuiTextField';
-
-export { TextField as T };

package/chunks/Tooltip.js

@@ -1,217 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useThemeProps } from '@ringcentral/spring-theme';
-import { AnimatePresence } from 'framer-motion';
-import { useRef, useEffect, cloneElement, forwardRef } from 'react';
-import { logInDev, useWindowContext, useId, useControlled, useIsFocusVisible, useForkRef, useEventListener, useClasses, combineProps } from '@ringcentral/spring-base';
-import clsx from 'clsx';
-import { I as Icon } from './Icon.js';
-import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
-import { g as getFade } from './getFade.js';
-import { Popper } from '../Popper.js';
-import { P as PopperPaper } from './PopperPaper.js';
-
-const ARIA_DESCRIBEDBY = 'aria-describedby';
-const ARIA_LABEL = 'aria-label';
-const ARIA_LABELLEDBY = 'aria-labelledby';
-const HTML_TITLE = 'title';
-let hasWarnedTriggerWhenDisabledNonStringTitle = false;
-function computeTooltipA11y({ title, describeChild, triggerWhenDisabled, open, tooltipId, child, }) {
-    const nameOrDescProps = {};
-    const disabledOverrides = {};
-    const titleIsString = typeof title === 'string';
-    const childProps = child.props;
-    const hasAriaDescribedBy = ARIA_DESCRIBEDBY in childProps;
-    const hasAriaLabel = ARIA_LABEL in childProps;
-    const hasAriaLabelledBy = ARIA_LABELLEDBY in childProps;
-    const hasUserTitle = HTML_TITLE in childProps;
-    if (process.env.NODE_ENV !== 'production' &&
-        triggerWhenDisabled &&
-        !titleIsString &&
-        title != null &&
-        !hasUserTitle &&
-        !hasWarnedTriggerWhenDisabledNonStringTitle) {
-        hasWarnedTriggerWhenDisabledNonStringTitle = true;
-        logInDev({
-            scope: 'Tooltip',
-            level: 'warn',
-            message: 'Using Tooltip with `triggerWhenDisabled` and a non-string `title` is not fully accessible. Use a string `title` when explaining why a control is disabled.',
-        });
-    }
-    if (describeChild) {
-        if (!hasAriaDescribedBy) {
-            if (!hasUserTitle) {
-                nameOrDescProps.title =
-                    !open && titleIsString ? title : null;
-            }
-            else if (open) {
-                nameOrDescProps.title = null;
-            }
-            nameOrDescProps[ARIA_DESCRIBEDBY] = open ? tooltipId : null;
-        }
-    }
-    else {
-        if (titleIsString && !hasAriaLabel) {
-            nameOrDescProps[ARIA_LABEL] = title;
-            nameOrDescProps.title = null;
-        }
-        else if (!titleIsString && !hasAriaLabelledBy && title) {
-            nameOrDescProps[ARIA_LABELLEDBY] = open ? tooltipId : null;
-            if (open) {
-                nameOrDescProps.title = null;
-            }
-        }
-        else if (open) {
-            nameOrDescProps.title = null;
-        }
-    }
-    if (triggerWhenDisabled) {
-        if (open) {
-            if (!hasAriaDescribedBy) {
-                disabledOverrides[ARIA_DESCRIBEDBY] = tooltipId;
-            }
-            disabledOverrides.title = null;
-        }
-        else if (titleIsString) {
-            disabledOverrides.title = title;
-        }
-    }
-    return { nameOrDescProps, disabledOverrides };
-}
-
-const getDelayTime = (delay) => {
-    if (!delay)
-        return null;
-    if (delay === true)
-        return 1500;
-    return delay;
-};
-const TooltipTrigger = (props, ref) => {
-    const { renderTooltip, children, open: openProp, delay = false, onOpenStateChange, triggerWhenDisabled, triggerWrapperProps, disableFocusListener, tooltipId: tooltipIdProp, title, describeChild = false, } = props;
-    const anchorRef = useRef(null);
-    const didInitiateWithTouch = useRef(false);
-    const { document } = useWindowContext();
-    const generatedId = useId();
-    const tooltipId = tooltipIdProp ?? generatedId;
-    const [open, setOpen] = useControlled({
-        controlled: openProp,
-        default: false,
-        name: 'Tooltip',
-        state: 'open',
-    });
-    const { isFocusVisibleRef, onFocus: handleFocusVisible, onBlur: handleBlurVisible, ref: focusVisibleRef, } = useIsFocusVisible();
-    const handleAnchorRef = useForkRef(anchorRef, focusVisibleRef, children.ref);
-    const delayTimerRef = useRef();
-    useEffect(() => () => {
-        clearTimeout(delayTimerRef.current);
-    }, []);
-    const handleOpen = (e) => {
-        const delayTime = getDelayTime(delay);
-        if (delayTime) {
-            delayTimerRef.current = setTimeout(() => {
-                setOpen(true);
-                onOpenStateChange?.(e, true);
-            }, delayTime);
-        }
-        else {
-            setOpen(true);
-            onOpenStateChange?.(e, true);
-        }
-    };
-    const handleClose = (e) => {
-        clearTimeout(delayTimerRef.current);
-        delayTimerRef.current = undefined;
-        setOpen(false);
-        onOpenStateChange?.(e, false);
-    };
-    useEventListener(anchorRef, 'mouseenter', (e) => {
-        if (didInitiateWithTouch.current) {
-            didInitiateWithTouch.current = false;
-            return;
-        }
-        if (anchorRef.current) {
-            anchorRef.current.removeAttribute('title');
-        }
-        handleOpen(e);
-    });
-    useEventListener(anchorRef, 'mouseleave', (e) => {
-        handleClose(e);
-    });
-    useEventListener(anchorRef, 'touchstart', (e) => {
-        didInitiateWithTouch.current = true;
-    }, {
-        passive: true,
-    });
-    useEventListener(anchorRef, 'focus', (e) => {
-        if (disableFocusListener)
-            return;
-        handleFocusVisible(e);
-        if (isFocusVisibleRef.current === true) {
-            handleOpen(e);
-        }
-    });
-    useEventListener(anchorRef, 'blur', (e) => {
-        handleBlurVisible(e);
-        if (isFocusVisibleRef.current === false) {
-            handleClose(e);
-        }
-    });
-    useEventListener(open ? document : null, 'keydown', (e) => {
-        if (e.key === 'Escape') {
-            handleClose(e);
-        }
-    });
-    const { nameOrDescProps, disabledOverrides } = computeTooltipA11y({
-        title,
-        describeChild,
-        triggerWhenDisabled,
-        open,
-        tooltipId,
-        child: children,
-    });
-    return (jsxs(Fragment, { children: [triggerWhenDisabled ? (jsx("span", { ...triggerWrapperProps, className: clsx('sui-tooltip-trigger-wrapper', triggerWrapperProps?.className), ref: handleAnchorRef, children: cloneElement(children, disabledOverrides) })) : (cloneElement(children, {
-                ref: handleAnchorRef,
-                ...nameOrDescProps,
-            })), renderTooltip(open, () => anchorRef.current, tooltipId)] }));
-};
-TooltipTrigger.displayName = 'SuiTooltipTrigger';
-
-const TooltipView = forwardRef((props, ref) => {
-    const { className, icon, size = 'small', classes, children, placement = 'bottom', PopperProps, color = 'neutral', anchorEl, motionProps, tooltipForceHide = false, disableInteractions = true, PopperPaperProps: popperPaperPropsProp, } = props;
-    const prefersReducedMotion = usePrefersReducedMotion();
-    const cls = useClasses('tooltip-view', classes, className);
-    const padding = PopperProps?.padding;
-    const popperPadding = typeof padding === 'object'
-        ? {
-            top: padding.top ?? 16,
-            right: padding.right ?? 16,
-            bottom: padding.bottom ?? 16,
-            left: padding.left ?? 16,
-        }
-        : (padding ?? 16);
-    return (jsx(Popper, { role: "tooltip", placement: placement, offset: 4, ...PopperProps, padding: popperPadding, className: cls('root', {
-            'force-hide': tooltipForceHide,
-            'disable-interactions': disableInteractions,
-        }), anchorEl: anchorEl, arrowHeight: 6, arrowPadding: 8, ref: ref, children: ({ arrowRef, arrowStyle }) => (jsxs(PopperPaper, { ...(motionProps ?? getFade({ prefersReducedMotion })), ...combineProps({
-                arrowRef,
-                arrowStyle,
-                classes: {
-                    root: cls('paper', color),
-                    content: cls('paper-content', `paper-content-${size}`),
-                },
-            }, popperPaperPropsProp), children: [icon && jsx(Icon, { symbol: icon, size: "small", className: cls('icon') }), jsx("div", { className: cls('content', `content-${size}`), children: children })] })) }));
-});
-TooltipView.displayName = 'SuiTooltipView';
-
-const Tooltip = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Tooltip' });
-    const { children, open: openProp, delay, onOpenStateChange, title, disableFocusListener, disableBackdropAnimation, triggerWhenDisabled, triggerWrapperProps, PopperProps, describeChild = false, ...rest } = props;
-    const renderTooltip = (open, getAnchorEl, tooltipId) => {
-        const effectiveOpen = open && !(!title && title !== 0);
-        const content = effectiveOpen ? (jsx(TooltipView, { disableInteractions: openProp === undefined, ...rest, PopperProps: { ...PopperProps, id: tooltipId }, anchorEl: getAnchorEl, ref: ref, children: title })) : null;
-        return disableBackdropAnimation ? (jsx(Fragment, { children: content })) : (jsx(AnimatePresence, { children: content }));
-    };
-    return (jsx(TooltipTrigger, { disableFocusListener: disableFocusListener, open: openProp, delay: delay, onOpenStateChange: onOpenStateChange, renderTooltip: renderTooltip, triggerWhenDisabled: triggerWhenDisabled, triggerWrapperProps: triggerWrapperProps, tooltipId: PopperProps?.id, title: title, describeChild: describeChild, children: children }));
-});
-Tooltip.displayName = 'SuiTooltip';
-
-export { Tooltip as T, TooltipTrigger as a, TooltipView as b };