@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-GXTBCX3M.js → chunk-H5MZ54PM.js}

@@ -26,14 +26,15 @@ var Steps = ({
   children,
   ...props
 }) => {
-  const containerClasses = tigercatCore.classNames(tigercatCore.getStepsContainerClasses(direction), className);
-  const handleStepClick = (index) => {
-    if (!clickable) {
-      return;
-    }
+  const containerClasses = React.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getStepsContainerClasses(direction), className),
+    [direction, className]
+  );
+  const handleStepClick = React.useCallback((index) => {
+    if (!clickable) return;
     onChange?.(index);
-  };
-  const contextValue = {
+  }, [clickable, onChange]);
+  const contextValue = React.useMemo(() => ({
     current,
     status,
     direction,
@@ -41,7 +42,7 @@ var Steps = ({
     simple,
     clickable,
     handleStepClick: clickable ? handleStepClick : void 0
-  };
+  }), [current, status, direction, size, simple, clickable, handleStepClick]);
   const totalCount = React__default.default.Children.count(children);
   const stepsWithProps = React__default.default.Children.map(children, (child, index) => {
     if (React__default.default.isValidElement(child) && child.type === StepsItem) {
@@ -52,10 +53,7 @@ var Steps = ({
     }
     return child;
   });
-  const mergedStyle = {
-    ...style ?? {}
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: containerClasses, style: mergedStyle, children: stepsWithProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: containerClasses, style, children: stepsWithProps }) });
 };
 var StepsItem = ({
   title,
@@ -85,18 +83,16 @@ var StepsItem = ({
   );
   const isClickable = !!stepsContext.handleStepClick && !disabled;
   const itemClasses = tigercatCore.classNames(
-    tigercatCore.getStepItemClasses(stepsContext.direction, isLast, stepsContext.simple),
+    tigercatCore.getStepItemClasses(stepsContext.direction, isLast),
     className
   );
   const iconClasses = tigercatCore.getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
-  const tailClasses = tigercatCore.getStepTailClasses(stepsContext.direction, stepStatus, isLast);
-  const contentClasses = tigercatCore.getStepContentClasses(stepsContext.direction, stepsContext.simple);
+  const tailClasses = tigercatCore.getStepTailClasses(stepsContext.direction, stepStatus, isLast, stepsContext.size, stepsContext.simple);
+  const contentClasses = tigercatCore.getStepContentClasses(stepsContext.direction);
   const titleClasses = tigercatCore.getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
   const descriptionClasses = tigercatCore.getStepDescriptionClasses(stepStatus, stepsContext.size);
-  const handleClick = (_event) => {
-    if (!isClickable) {
-      return;
-    }
+  const handleClick = () => {
+    if (!isClickable) return;
     stepsContext.handleStepClick?.(stepIndex);
   };
   const renderIcon = () => {
@@ -104,26 +100,7 @@ var StepsItem = ({
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, children: icon });
     }
     if (stepStatus === "finish") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          className: tigercatCore.stepFinishIconSvgClasses,
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: tigercatCore.stepFinishIconViewBox,
-          "aria-hidden": "true",
-          focusable: "false",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              strokeLinecap: tigercatCore.stepFinishIconPathStrokeLinecap,
-              strokeLinejoin: tigercatCore.stepFinishIconPathStrokeLinejoin,
-              strokeWidth: tigercatCore.stepFinishIconPathStrokeWidth,
-              d: tigercatCore.stepFinishIconPathD
-            }
-          )
-        }
-      ) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, "aria-hidden": "true", children: tigercatCore.stepFinishChar });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, children: stepIndex + 1 });
   };

package/dist/{chunk-4TWHENPT.js → chunk-HB2UYJBY.js}

@@ -19,11 +19,11 @@ var Dropdown = ({
   visible: controlledVisible,
   defaultVisible = false,
   closeOnClick = true,
+  showArrow = true,
   className,
   style,
   onVisibleChange,
   children,
-  onKeyDown,
   ...divProps
 }) => {
   const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
@@ -32,6 +32,9 @@ var Dropdown = ({
   const triggerRef = React.useRef(null);
   const floatingRef = React.useRef(null);
   const hoverTimerRef = React.useRef(null);
+  React.useEffect(() => {
+    tigercatCore.injectDropdownStyles();
+  }, []);
   const setVisible = React.useCallback(
     (newVisible) => {
       if (disabled && newVisible) return;
@@ -92,13 +95,12 @@ var Dropdown = ({
       }
     };
   }, []);
-  const containerClasses = tigercatCore.classNames(
-    tigercatCore.getDropdownContainerClasses(),
-    "tiger-dropdown-container",
-    className
+  const containerClasses = React.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getDropdownContainerClasses(), "tiger-dropdown-container", className),
+    [className]
   );
-  const triggerClasses = tigercatCore.getDropdownTriggerClasses(disabled);
-  const menuWrapperClasses = "absolute z-50";
+  const triggerClasses = React.useMemo(() => tigercatCore.getDropdownTriggerClasses(disabled), [disabled]);
+  const menuWrapperClasses = tigercatCore.classNames("absolute z-50", tigercatCore.DROPDOWN_ENTER_CLASS);
   const menuWrapperStyles = React.useMemo(
     () => ({
       position: "absolute",
@@ -108,10 +110,10 @@ var Dropdown = ({
     }),
     [x, y, placement]
   );
-  const contextValue = {
-    closeOnClick,
-    handleItemClick
-  };
+  const contextValue = React.useMemo(
+    () => ({ closeOnClick, handleItemClick }),
+    [closeOnClick, handleItemClick]
+  );
   const childrenArray = React__default.default.Children.toArray(children);
   let triggerElement = null;
   let menuElement = null;
@@ -128,19 +130,29 @@ var Dropdown = ({
       triggerElement = child;
     }
   });
-  const handleContainerKeyDown = (event) => {
-    onKeyDown?.(event);
-  };
+  const chevronNode = showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: tigercatCore.getDropdownChevronClasses(visible),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.DROPDOWN_CHEVRON_PATH })
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: containerRef,
       className: containerClasses,
       style,
-      onKeyDown: handleContainerKeyDown,
       ...divProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -150,7 +162,10 @@ var Dropdown = ({
             onMouseLeave: handleMouseLeave,
             "aria-haspopup": "menu",
             "aria-expanded": visible,
-            children: triggerElement
+            children: [
+              triggerElement,
+              chevronNode
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/{chunk-5HUYCSA4.mjs → chunk-HPXLUJFJ.mjs}

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
 import { getRadioGroupClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
@@ -22,13 +22,16 @@ var RadioGroup = ({
     `tiger-radio-group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
   );
   const groupName = name || generatedNameRef.current;
-  const handleChange = (newValue) => {
-    if (disabled) return;
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-    onChange?.(newValue);
-  };
+  const handleChange = useCallback(
+    (newValue) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [disabled, isControlled, onChange]
+  );
   const handleKeyDown = (event) => {
     if (disabled) return;
     if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft") {
@@ -52,20 +55,20 @@ var RadioGroup = ({
     nextInput.focus();
     nextInput.click();
   };
-  const contextValue = {
-    value: currentValue,
-    name: groupName,
-    disabled,
-    size,
-    onChange: handleChange
-  };
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      name: groupName,
+      disabled,
+      size,
+      onChange: handleChange
+    }),
+    [currentValue, groupName, disabled, size, handleChange]
+  );
   return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
-      className: getRadioGroupClasses({
-        className,
-        hasCustomClass: !!className
-      }),
+      className: getRadioGroupClasses({ className }),
       role: "radiogroup",
       onKeyDown: handleKeyDown,
       ...props,

package/dist/chunk-HQ3QOT7H.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/shared/icons.tsx
+var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: tigercatCore.icon24ViewBox,
+    stroke: "currentColor",
+    strokeWidth: tigercatCore.icon24StrokeWidth,
+    ...svgProps,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        strokeLinecap: tigercatCore.icon24PathStrokeLinecap,
+        strokeLinejoin: tigercatCore.icon24PathStrokeLinejoin,
+        d: path
+      }
+    )
+  }
+);
+var StatusIconWithLoading = ({ path, className, isLoading = false, spinnerClass = "" }) => {
+  const merged = tigercatCore.classNames(className, isLoading && spinnerClass);
+  return /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { path, className: merged });
+};
+
+exports.StatusIcon = StatusIcon;
+exports.StatusIconWithLoading = StatusIconWithLoading;

package/dist/chunk-I5TCE5E7.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Text.tsx
+var Text = ({
+  tag = "p",
+  size,
+  weight,
+  align,
+  color,
+  truncate,
+  italic,
+  underline,
+  lineThrough,
+  children,
+  className,
+  ...props
+}) => {
+  const textClasses = tigercatCore.classNames(
+    tigercatCore.getTextClasses({ size, weight, align, color, truncate, italic, underline, lineThrough }),
+    className
+  );
+  return React__default.default.createElement(tag, { ...props, className: textClasses }, children);
+};
+
+exports.Text = Text;

package/dist/{chunk-QFVE7GKD.js → chunk-IBYIPXIO.js}

@@ -32,27 +32,18 @@ var Menu = ({
   const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
   const handleSelect = react.useCallback(
     (key) => {
-      const newSelectedKeys = [key];
+      const newSelectedKeys = tigercatCore.replaceKeys(key, selectedKeys);
       if (controlledSelectedKeys === void 0) {
         setInternalSelectedKeys(newSelectedKeys);
       }
       onSelect?.(key, { selectedKeys: newSelectedKeys });
     },
-    [controlledSelectedKeys, onSelect]
+    [controlledSelectedKeys, selectedKeys, onSelect]
   );
   const handleOpenChange = react.useCallback(
     (key) => {
-      const isOpen = openKeys.includes(key);
-      let newOpenKeys;
-      if (isOpen) {
-        newOpenKeys = openKeys.filter((k) => k !== key);
-      } else {
-        if (multiple) {
-          newOpenKeys = [...openKeys, key];
-        } else {
-          newOpenKeys = [key];
-        }
-      }
+      const toggled = tigercatCore.toggleKey(key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
       if (controlledOpenKeys === void 0) {
         setInternalOpenKeys(newOpenKeys);
       }
@@ -77,19 +68,7 @@ var Menu = ({
     [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
   );
   react.useEffect(() => {
-    const root = menuRef.current;
-    if (!root) return;
-    const items = Array.from(
-      root.querySelectorAll('button[data-tiger-menuitem="true"]')
-    ).filter((el) => !el.disabled && !el.closest('[data-tiger-menu-hidden="true"]'));
-    if (items.length === 0) return;
-    const hasActive = items.some((el) => el.tabIndex === 0);
-    if (hasActive) return;
-    const selected = items.find((el) => el.dataset.tigerSelected === "true");
-    const active = selected ?? items[0];
-    items.forEach((el) => {
-      el.tabIndex = el === active ? 0 : -1;
-    });
+    if (menuRef.current) tigercatCore.initRovingTabIndex(menuRef.current);
   }, [mode, collapsed, selectedKeys, openKeys]);
   return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "ul",

package/dist/{chunk-3XXXM4OB.mjs → chunk-IGE44BIS.mjs}

@@ -29,9 +29,11 @@ var Form = forwardRef(
     const [errors, setErrors] = useState([]);
     const [formValues, setFormValues] = useState(model);
     const fieldRulesRef = React.useRef({});
+    const formValuesRef = React.useRef(model);
     React.useEffect(() => {
       setFormValues(model);
     }, [model]);
+    formValuesRef.current = model;
     const registerFieldRules = useCallback(
       (fieldName, nextRules) => {
         if (!fieldName) {
@@ -51,15 +53,36 @@ var Form = forwardRef(
       const merged = { ...fromForm, ...fromItems };
       return Object.keys(merged).length > 0 ? merged : void 0;
     }, [rules]);
+    const resolveFieldRules = useCallback(
+      (fieldName, rulesOverride) => {
+        return rulesOverride ?? fieldRulesRef.current[fieldName] ?? rules?.[fieldName];
+      },
+      [rules]
+    );
+    const runFieldValidation = useCallback(
+      async (fieldName, rulesOverride, trigger) => {
+        const fieldRules = resolveFieldRules(fieldName, rulesOverride);
+        if (!fieldRules) {
+          return null;
+        }
+        const currentValues = formValuesRef.current;
+        const value = getValueByPath(currentValues, fieldName);
+        return validateField(fieldName, value, fieldRules, currentValues, trigger);
+      },
+      [resolveFieldRules]
+    );
     const validateField$1 = useCallback(
       async (fieldName, rulesOverride, trigger) => {
-        const fieldRules = rulesOverride ?? fieldRulesRef.current[fieldName] ?? rules?.[fieldName];
+        const fieldRules = resolveFieldRules(fieldName, rulesOverride);
         if (!fieldRules) {
           return;
         }
-        const value = getValueByPath(formValues, fieldName);
-        const error = await validateField(fieldName, value, fieldRules, formValues, trigger);
+        const error = await runFieldValidation(fieldName, rulesOverride, trigger);
         setErrors((prevErrors) => {
+          const existing = prevErrors.find((e) => e.field === fieldName);
+          const existingMessage = existing?.message ?? null;
+          if (!error && !existingMessage) return prevErrors;
+          if (error && error === existingMessage) return prevErrors;
           const filtered = prevErrors.filter((e) => e.field !== fieldName);
           if (error) {
             return [...filtered, { field: fieldName, message: error }];
@@ -68,18 +91,49 @@ var Form = forwardRef(
         });
         onValidate?.(fieldName, !error, error);
       },
-      [rules, formValues, onValidate]
+      [resolveFieldRules, runFieldValidation, onValidate]
     );
-    const validate = useCallback(async () => {
+    const runValidation = useCallback(async () => {
       const effectiveRules = getEffectiveRules();
       if (!effectiveRules) {
         setErrors([]);
-        return true;
+        return { valid: true, errors: [] };
       }
-      const result = await validateForm(formValues, effectiveRules);
+      const result = await validateForm(formValuesRef.current, effectiveRules);
       setErrors(result.errors);
+      return result;
+    }, [getEffectiveRules]);
+    const validate = useCallback(async () => {
+      const result = await runValidation();
       return result.valid;
-    }, [getEffectiveRules, formValues]);
+    }, [runValidation]);
+    const validateFields = useCallback(
+      async (fieldNames) => {
+        if (!fieldNames || fieldNames.length === 0) {
+          return true;
+        }
+        const nextErrors = [];
+        const fieldSet = new Set(fieldNames);
+        for (const fieldName of fieldNames) {
+          const fieldRules = resolveFieldRules(fieldName);
+          if (!fieldRules) {
+            onValidate?.(fieldName, true, null);
+            continue;
+          }
+          const error = await runFieldValidation(fieldName);
+          if (error) {
+            nextErrors.push({ field: fieldName, message: error });
+          }
+          onValidate?.(fieldName, !error, error);
+        }
+        setErrors((prevErrors) => {
+          const filtered = prevErrors.filter((entry) => !fieldSet.has(entry.field));
+          return [...filtered, ...nextErrors];
+        });
+        return nextErrors.length === 0;
+      },
+      [resolveFieldRules, runFieldValidation, onValidate]
+    );
     const clearValidate = useCallback((fieldNames) => {
       if (!fieldNames) {
         setErrors([]);
@@ -129,31 +183,21 @@ var Form = forwardRef(
     const handleSubmit = useCallback(
       async (event) => {
         event.preventDefault();
-        const effectiveRules = getEffectiveRules();
-        if (!effectiveRules) {
-          setErrors([]);
-          onSubmit?.({ valid: true, values: formValues, errors: [] });
-          return;
-        }
-        const result = await validateForm(formValues, effectiveRules);
-        setErrors(result.errors);
-        onSubmit?.({
-          valid: result.valid,
-          values: formValues,
-          errors: result.errors
-        });
+        const result = await runValidation();
+        onSubmit?.({ ...result, values: formValuesRef.current });
       },
-      [getEffectiveRules, formValues, onSubmit]
+      [runValidation, onSubmit]
     );
     useImperativeHandle(
       ref,
       () => ({
         validate,
+        validateFields,
         validateField: validateField$1,
         clearValidate,
         resetFields
       }),
-      [validate, validateField$1, clearValidate, resetFields]
+      [validate, validateFields, validateField$1, clearValidate, resetFields]
     );
     const contextValue = useMemo(
       () => ({

package/dist/{chunk-XRFK2IXM.js → chunk-IHH2O7YK.js}

@@ -13,14 +13,13 @@ var Icon = ({
   size = "md",
   color = "currentColor",
   className,
+  style,
   children,
   ...props
 }) => {
-  const iconStyle = { ...props.style, color };
   const iconClasses = tigercatCore.classNames(tigercatCore.iconWrapperClasses, className);
-  const ariaLabel = props["aria-label"];
-  const ariaLabelledBy = props["aria-labelledby"];
-  const isDecorative = ariaLabel == null && ariaLabelledBy == null && props.role == null;
+  const iconStyle = { ...style, color };
+  const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
   const processedChildren = React__default.default.Children.map(children, (child) => {
     if (!React__default.default.isValidElement(child) || child.type !== "svg") {
       return child;
@@ -33,9 +32,9 @@ var Icon = ({
       viewBox: svgProps.viewBox ?? tigercatCore.SVG_DEFAULT_VIEWBOX_24,
       fill: svgProps.fill ?? tigercatCore.SVG_DEFAULT_FILL,
       stroke: svgProps.stroke ?? tigercatCore.SVG_DEFAULT_STROKE,
-      strokeWidth: svgProps.strokeWidth ?? 2,
-      strokeLinecap: svgProps.strokeLinecap ?? "round",
-      strokeLinejoin: svgProps.strokeLinejoin ?? "round"
+      strokeWidth: svgProps.strokeWidth ?? tigercatCore.iconSvgDefaultStrokeWidth,
+      strokeLinecap: svgProps.strokeLinecap ?? tigercatCore.iconSvgDefaultStrokeLinecap,
+      strokeLinejoin: svgProps.strokeLinejoin ?? tigercatCore.iconSvgDefaultStrokeLinejoin
     });
   });
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/chunk-IP3MAJSH.mjs

@@ -0,0 +1,55 @@
+import { usePopup } from './chunk-3PV2MDST.mjs';
+import { useRef, useMemo } from 'react';
+import { createFloatingIdFactory, classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var createTooltipId = createFloatingIdFactory("tooltip");
+var Tooltip = ({
+  visible,
+  defaultVisible = false,
+  content,
+  trigger = "hover",
+  placement = "top",
+  disabled = false,
+  offset = 8,
+  className,
+  style,
+  children,
+  onVisibleChange,
+  ...divProps
+}) => {
+  const tooltipIdRef = useRef(null);
+  if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
+  const tooltipId = tooltipIdRef.current;
+  const describedBy = content != null ? tooltipId : void 0;
+  const {
+    currentVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    floatingStyles,
+    triggerHandlers
+  } = usePopup({ visible, defaultVisible, disabled, trigger, placement, offset, onVisibleChange });
+  const containerClasses = useMemo(
+    () => classNames(getTooltipContainerClasses(), className),
+    [className]
+  );
+  const triggerClasses = useMemo(() => getTooltipTriggerClasses(disabled), [disabled]);
+  const contentClasses = useMemo(() => getTooltipContentClasses(), []);
+  if (!children) return null;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        "aria-describedby": describedBy,
+        ...triggerHandlers,
+        children
+      }
+    ),
+    currentVisible && /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content }) })
+  ] });
+};
+
+export { Tooltip };