@kaizen/components 3.3.1 → 3.3.3

package/dist/esm/src/TitleBlock/subcomponents/TitleBlockMenuItem.mjs

@@ -1,31 +1,28 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { MenuItem } from '../../MenuV1/index.mjs';
 import modules_19515229 from './TitleBlockMenuItem.module.scss.mjs';
-const TitleBlockMenuItem = /*#__PURE__*/function () {
-  const TitleBlockMenuItem = function (props) {
-    var className = classnames(modules_19515229.menuItem, modules_19515229.destructive && modules_19515229['menuItem--destructive'], modules_19515229.disabled && modules_19515229['menuItem--disabled'], modules_19515229.isActive && modules_19515229['menuItem--active']);
-    if ('component' in props) {
-      var CustomMenuItem = props.component,
-        label = props.label,
-        icon = props.icon,
-        otherProps = __rest(props, ["component", "label", "icon"]);
-      var wrappedLabel = /*#__PURE__*/React.createElement("span", {
-        className: modules_19515229.menuItem__Label
-      }, label);
-      var iconNode = icon && /*#__PURE__*/React.createElement("span", {
-        className: modules_19515229.menuItem__Icon
-      }, icon);
-      return /*#__PURE__*/React.createElement("li", {
-        className: modules_19515229.menuListItem
-      }, /*#__PURE__*/React.createElement(CustomMenuItem, __assign({}, otherProps, {
-        className: className
-      }), iconNode, wrappedLabel));
-    }
-    return /*#__PURE__*/React.createElement(MenuItem, __assign({}, props));
-  };
-  TitleBlockMenuItem.displayName = 'TitleBlockMenuItem';
-  return TitleBlockMenuItem;
-}();
+var TitleBlockMenuItem = function (props) {
+  var className = classnames(modules_19515229.menuItem, modules_19515229.destructive && modules_19515229['menuItem--destructive'], modules_19515229.disabled && modules_19515229['menuItem--disabled'], modules_19515229.isActive && modules_19515229['menuItem--active']);
+  if ('component' in props) {
+    var CustomMenuItem = props.component,
+      label = props.label,
+      icon = props.icon,
+      otherProps = __rest(props, ["component", "label", "icon"]);
+    var wrappedLabel = /*#__PURE__*/React__default.createElement("span", {
+      className: modules_19515229.menuItem__Label
+    }, label);
+    var iconNode = icon && /*#__PURE__*/React__default.createElement("span", {
+      className: modules_19515229.menuItem__Icon
+    }, icon);
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: modules_19515229.menuListItem
+    }, /*#__PURE__*/React__default.createElement(CustomMenuItem, __assign({}, otherProps, {
+      className: className
+    }), iconNode, wrappedLabel));
+  }
+  return /*#__PURE__*/React__default.createElement(MenuItem, __assign({}, props));
+};
+TitleBlockMenuItem.displayName = 'TitleBlockMenuItem';
 export { TitleBlockMenuItem };

package/dist/esm/src/TitleBlock/subcomponents/Toolbar.mjs

@@ -1,31 +1,28 @@
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import modules_b2e3cb74 from './Toolbar.module.scss.mjs';
 
 // Toolbar should eventually be broken out
 // into its own component since it's a generic
 // grouping component for buttons/dropdowns/etc
-const Toolbar = /*#__PURE__*/function () {
-  const Toolbar = function (_a) {
-    var items = _a.items,
-      _b = _a.noGap,
-      noGap = _b === void 0 ? false : _b,
-      automationId = _a.automationId;
-    if (!items || (items === null || items === void 0 ? void 0 : items.length) === 0) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: modules_b2e3cb74.toolbar,
-      "data-automation-id": automationId,
-      "data-testid": automationId
-    }, items.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(modules_b2e3cb74.toolbarItem, noGap && modules_b2e3cb74.noGap),
-        key: item.key
-      }, item.node);
-    }));
-  };
-  Toolbar.displayName = 'Toolbar';
-  return Toolbar;
-}();
+var Toolbar = function (_a) {
+  var items = _a.items,
+    _b = _a.noGap,
+    noGap = _b === void 0 ? false : _b,
+    automationId = _a.automationId;
+  if (!items || (items === null || items === void 0 ? void 0 : items.length) === 0) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: modules_b2e3cb74.toolbar,
+    "data-automation-id": automationId,
+    "data-testid": automationId
+  }, items.map(function (item) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classnames(modules_b2e3cb74.toolbarItem, noGap && modules_b2e3cb74.noGap),
+      key: item.key
+    }, item.node);
+  }));
+};
+Toolbar.displayName = 'Toolbar';
 export { Toolbar };

package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs

@@ -1,35 +1,32 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../Icon/Icon.mjs';
 import modules_9d3ee063 from './ToggleSwitch.module.css.mjs';
-const ToggleSwitch = /*#__PURE__*/function () {
-  const ToggleSwitch = function (_a) {
-    var toggledStatus = _a.toggledStatus,
-      onToggle = _a.onToggle,
-      reversed = _a.reversed,
-      disabled = _a.disabled,
-      restProps = __rest(_a, ["toggledStatus", "onToggle", "reversed", "disabled"]);
-    var isOn = toggledStatus === 'on';
-    return /*#__PURE__*/React.createElement("span", {
-      className: classnames(isOn ? modules_9d3ee063.on : modules_9d3ee063.off, reversed && modules_9d3ee063.reversed)
-    }, /*#__PURE__*/React.createElement("input", __assign({
-      type: "checkbox",
-      className: classnames(modules_9d3ee063.checkbox, disabled && modules_9d3ee063.disabled),
-      checked: isOn ? true : false,
-      onChange: onToggle,
-      disabled: disabled
-    }, restProps)), /*#__PURE__*/React.createElement("span", {
-      className: classnames(modules_9d3ee063.track, disabled && modules_9d3ee063.disabled)
-    }, /*#__PURE__*/React.createElement("span", {
-      className: modules_9d3ee063.thumb
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "check",
-      isPresentational: true,
-      className: modules_9d3ee063.checkIcon
-    }))));
-  };
-  ToggleSwitch.displayName = 'ToggleSwitch';
-  return ToggleSwitch;
-}();
+var ToggleSwitch = function (_a) {
+  var toggledStatus = _a.toggledStatus,
+    onToggle = _a.onToggle,
+    reversed = _a.reversed,
+    disabled = _a.disabled,
+    restProps = __rest(_a, ["toggledStatus", "onToggle", "reversed", "disabled"]);
+  var isOn = toggledStatus === 'on';
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: classnames(isOn ? modules_9d3ee063.on : modules_9d3ee063.off, reversed && modules_9d3ee063.reversed)
+  }, /*#__PURE__*/React__default.createElement("input", __assign({
+    type: "checkbox",
+    className: classnames(modules_9d3ee063.checkbox, disabled && modules_9d3ee063.disabled),
+    checked: isOn ? true : false,
+    onChange: onToggle,
+    disabled: disabled
+  }, restProps)), /*#__PURE__*/React__default.createElement("span", {
+    className: classnames(modules_9d3ee063.track, disabled && modules_9d3ee063.disabled)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: modules_9d3ee063.thumb
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "check",
+    isPresentational: true,
+    className: modules_9d3ee063.checkIcon
+  }))));
+};
+ToggleSwitch.displayName = 'ToggleSwitch';
 export { ToggleSwitch };

package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import classnames from 'classnames';
 import { FieldGroup } from '../../FieldGroup/FieldGroup.mjs';
 import { Label } from '../../Label/Label.mjs';
@@ -10,42 +10,39 @@ import modules_6134abfe from './ToggleSwitchField.module.css.mjs';
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075638160/Toggle+Switch Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-toggleswitch-ield--docs Storybook}
  */
-const ToggleSwitchField = /*#__PURE__*/function () {
-  const ToggleSwitchField = function (_a) {
-    var propsId = _a.id,
-      labelText = _a.labelText,
-      _b = _a.labelPosition,
-      labelPosition = _b === void 0 ? 'start' : _b,
-      toggledStatus = _a.toggledStatus,
-      disabled = _a.disabled,
-      reversed = _a.reversed,
-      inline = _a.inline,
-      fullWidth = _a.fullWidth,
-      restProps = __rest(_a, ["id", "labelText", "labelPosition", "toggledStatus", "disabled", "reversed", "inline", "fullWidth"]);
-    var fallbackId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
-    return /*#__PURE__*/React.createElement(FieldGroup, {
-      id: "".concat(id, "-field-group"),
-      inline: inline,
-      classNameOverride: classnames(modules_6134abfe.container, fullWidth && modules_6134abfe.fullWidth, toggledStatus === 'on' && modules_6134abfe.on)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: modules_6134abfe.inner
-    }, /*#__PURE__*/React.createElement(Label, {
-      id: "".concat(id, "-field-label"),
-      htmlFor: "".concat(id, "-field-toggle"),
-      labelText: labelText,
-      labelType: "toggle",
-      labelPosition: labelPosition,
-      disabled: disabled,
-      reversed: reversed
-    }, /*#__PURE__*/React.createElement(ToggleSwitch, __assign({
-      id: "".concat(id, "-field-toggle"),
-      disabled: disabled,
-      reversed: reversed,
-      toggledStatus: toggledStatus
-    }, restProps)))));
-  };
-  ToggleSwitchField.displayName = 'ToggleSwitchField';
-  return ToggleSwitchField;
-}();
+var ToggleSwitchField = function (_a) {
+  var propsId = _a.id,
+    labelText = _a.labelText,
+    _b = _a.labelPosition,
+    labelPosition = _b === void 0 ? 'start' : _b,
+    toggledStatus = _a.toggledStatus,
+    disabled = _a.disabled,
+    reversed = _a.reversed,
+    inline = _a.inline,
+    fullWidth = _a.fullWidth,
+    restProps = __rest(_a, ["id", "labelText", "labelPosition", "toggledStatus", "disabled", "reversed", "inline", "fullWidth"]);
+  var fallbackId = useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
+  return /*#__PURE__*/React__default.createElement(FieldGroup, {
+    id: "".concat(id, "-field-group"),
+    inline: inline,
+    classNameOverride: classnames(modules_6134abfe.container, fullWidth && modules_6134abfe.fullWidth, toggledStatus === 'on' && modules_6134abfe.on)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: modules_6134abfe.inner
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    id: "".concat(id, "-field-label"),
+    htmlFor: "".concat(id, "-field-toggle"),
+    labelText: labelText,
+    labelType: "toggle",
+    labelPosition: labelPosition,
+    disabled: disabled,
+    reversed: reversed
+  }, /*#__PURE__*/React__default.createElement(ToggleSwitch, __assign({
+    id: "".concat(id, "-field-toggle"),
+    disabled: disabled,
+    reversed: reversed,
+    toggledStatus: toggledStatus
+  }, restProps)))));
+};
+ToggleSwitchField.displayName = 'ToggleSwitchField';
 export { ToggleSwitchField };

package/dist/esm/src/Tooltip/OverlayArrow.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { OverlayArrow as OverlayArrow$1 } from 'react-aria-components';
 import 'use-debounce';
 import { useReversedColors } from '../utils/ReversedColors/ReversedColors.mjs';
@@ -12,13 +12,13 @@ import modules_48dfd58d from './OverlayArrow.module.css.mjs';
  */
 var OverlayArrow = function (props) {
   var reverseColors = useReversedColors();
-  return /*#__PURE__*/React.createElement(OverlayArrow$1, __assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(OverlayArrow$1, __assign({}, props, {
     className: mergeClassNames(modules_48dfd58d.overlayArrow, reverseColors && modules_48dfd58d.reversed, props.className)
-  }), /*#__PURE__*/React.createElement("svg", {
+  }), /*#__PURE__*/React__default.createElement("svg", {
     width: 8,
     height: 8,
     viewBox: "0 0 8 8"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default.createElement("path", {
     d: "M0 0 L4 4 L8 0"
   })));
 };

package/dist/esm/src/Tooltip/Tooltip.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef, useContext, useState, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useContext, useState, useLayoutEffect } from 'react';
 import { useContextProps, TooltipContext, TooltipTriggerStateContext, Tooltip as Tooltip$1 } from 'react-aria-components';
 export { TooltipContext } from 'react-aria-components';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
@@ -12,40 +12,37 @@ import modules_e4619b04 from './Tooltip.module.css.mjs';
 /**
  * A tooltip displays a description of an element on hover or focus.
  */
-const Tooltip = /*#__PURE__*/function () {
-  const Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
-    var children = _a.children,
-      className = _a.className,
-      props = __rest(_a, ["children", "className"]);
-    var triggerRef = useContextProps(__assign({
-      children: children,
-      className: className
-    }, props), ref, TooltipContext)[0].triggerRef;
-    var contextState = useContext(TooltipTriggerStateContext);
-    var reverseColors = useReversedColors();
-    var _b = useState(false),
-      shouldInlineHiddenContent = _b[0],
-      setShouldInlineHiddenContent = _b[1];
-    useLayoutEffect(function () {
-      var _a;
-      setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-inline-hidden-content')));
-    }, [triggerRef]);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip$1, __assign({
-      ref: ref,
-      offset: 8
-    }, props, {
-      className: mergeClassNames(modules_e4619b04.tooltip, className, reverseColors && modules_e4619b04.reversed)
-    }), function (renderProps) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverlayArrow, null), typeof children === 'function' ? children(renderProps) : children);
-    }), shouldInlineHiddenContent ? (/*#__PURE__*/React.createElement(VisuallyHidden, null, typeof children === 'function' ? contextState && children({
-      placement: 'center',
-      isEntering: false,
-      isExiting: false,
-      state: contextState,
-      defaultChildren: undefined
-    }) : children)) : null);
-  });
-  Tooltip.displayName = 'Tooltip';
-  return Tooltip;
-}();
+var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest(_a, ["children", "className"]);
+  var triggerRef = useContextProps(__assign({
+    children: children,
+    className: className
+  }, props), ref, TooltipContext)[0].triggerRef;
+  var contextState = useContext(TooltipTriggerStateContext);
+  var reverseColors = useReversedColors();
+  var _b = useState(false),
+    shouldInlineHiddenContent = _b[0],
+    setShouldInlineHiddenContent = _b[1];
+  useLayoutEffect(function () {
+    var _a;
+    setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-inline-hidden-content')));
+  }, [triggerRef]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip$1, __assign({
+    ref: ref,
+    offset: 8
+  }, props, {
+    className: mergeClassNames(modules_e4619b04.tooltip, className, reverseColors && modules_e4619b04.reversed)
+  }), function (renderProps) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(OverlayArrow, null), typeof children === 'function' ? children(renderProps) : children);
+  }), shouldInlineHiddenContent ? (/*#__PURE__*/React__default.createElement(VisuallyHidden, null, typeof children === 'function' ? contextState && children({
+    placement: 'center',
+    isEntering: false,
+    isExiting: false,
+    state: contextState,
+    defaultChildren: undefined
+  }) : children)) : null);
+});
+Tooltip.displayName = 'Tooltip';
 export { Tooltip };

package/dist/esm/src/Tooltip/TooltipTrigger.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
 
 /**
@@ -8,7 +8,7 @@ import { TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
  * relative to the trigger.
  */
 var TooltipTrigger = function (props) {
-  return /*#__PURE__*/React.createElement(TooltipTrigger$1, __assign({
+  return /*#__PURE__*/React__default.createElement(TooltipTrigger$1, __assign({
     delay: 300,
     closeDelay: 300
   }, props));

package/dist/esm/src/TooltipV1/Tooltip.mjs

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React, { useState, useId, useRef, useEffect, cloneElement } from 'react';
+import React__default, { useState, useId, useRef, useEffect, cloneElement } from 'react';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
 import { usePopper } from 'react-popper';
@@ -63,24 +63,24 @@ var TooltipContent = function (_a) {
     isVisible = _f.isVisible,
     isAnimIn = _f.isAnimIn,
     isAnimOut = _f.isAnimOut;
-  return isVisible || isAnimOut || isAnimIn ? (/*#__PURE__*/React.createElement("div", __assign({
+  return isVisible || isAnimOut || isAnimIn ? (/*#__PURE__*/React__default.createElement("div", __assign({
     ref: setPopperElement,
     className: modules_16974fb0.tooltip,
     style: popperStyles.popper
   }, attributes.popper, {
     role: "tooltip",
     id: tooltipId
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(modules_16974fb0.tooltipContent, modules_16974fb0[mood])
-  }, text), /*#__PURE__*/React.createElement("div", {
+  }, text), /*#__PURE__*/React__default.createElement("div", {
     ref: setArrowElement,
     className: modules_16974fb0.arrow,
     style: popperStyles.arrow
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: modules_16974fb0.arrowInner
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: classnames(modules_16974fb0.arrowMain, modules_16974fb0[mood])
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: modules_16974fb0.arrowShadow
   }))))) : null;
 };
@@ -95,86 +95,83 @@ var renderChildren = function (content, tooltipId, hasActiveTooltip) {
   console.warn('<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly.');
   return content;
 };
-const Tooltip = /*#__PURE__*/function () {
-  const Tooltip = function (_a) {
-    var children = _a.children,
-      text = _a.text,
-      _b = _a.display,
-      display = _b === void 0 ? 'block' : _b,
-      _c = _a.position,
-      position = _c === void 0 ? 'above' : _c,
-      classNameOverride = _a.classNameOverride,
-      portalSelector = _a.portalSelector,
-      animationDuration = _a.animationDuration,
-      _d = _a.isInitiallyVisible,
-      isInitiallyVisible = _d === void 0 ? false : _d,
-      _e = _a.mood,
-      mood = _e === void 0 ? 'default' : _e;
-    var _f = useState(isInitiallyVisible),
-      isHover = _f[0],
-      setIsHover = _f[1];
-    var _g = useState(false),
-      isFocus = _g[0],
-      setIsFocus = _g[1];
-    var _h = useState(null),
-      referenceElement = _h[0],
-      setReferenceElement = _h[1];
-    var tooltipId = useId();
-    var hasActiveTooltip = isHover || isFocus;
-    var tooltip = /*#__PURE__*/React.createElement(TooltipContent, {
-      text: text,
-      position: position,
-      referenceElement: referenceElement,
-      tooltipId: tooltipId,
-      mood: mood
-    });
-    var portalSelectorElementRef = useRef(null);
-    useEffect(function () {
-      portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
-    }, [portalSelector]);
-    useEffect(function () {
-      if (portalSelector && !portalSelectorElementRef.current) {
-        // eslint-disable-next-line no-console
-        console.warn('The portal could not be created using the selector: ' + portalSelector);
-      }
-    }, [portalSelectorElementRef, portalSelector]);
-    var getDisplayClassName = function () {
-      switch (display) {
-        case 'inline':
-          return modules_16974fb0.displayInline;
-        case 'block':
-          return modules_16974fb0.displayBlock;
-        case 'inline-block':
-          return modules_16974fb0.displayInlineBlock;
-        case 'flex':
-          return modules_16974fb0.displayFlex;
-        case 'inline-flex':
-          return modules_16974fb0.displayInlineFlex;
-        default:
-          return undefined;
-      }
-    };
-    return /*#__PURE__*/React.createElement(AnimationProvider, {
-      isVisible: hasActiveTooltip,
-      animationDuration: animationDuration
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      ref: setReferenceElement,
-      className: classnames(classNameOverride, getDisplayClassName()),
-      onMouseEnter: function () {
-        return setIsHover(true);
-      },
-      onMouseLeave: function () {
-        return setIsHover(false);
-      },
-      onFocusCapture: function () {
-        return setIsFocus(true);
-      },
-      onBlurCapture: function () {
-        return setIsFocus(false);
-      }
-    }, renderChildren(children, tooltipId, hasActiveTooltip)), portalSelector && portalSelectorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(tooltip, portalSelectorElementRef.current) : tooltip));
+var Tooltip = function (_a) {
+  var children = _a.children,
+    text = _a.text,
+    _b = _a.display,
+    display = _b === void 0 ? 'block' : _b,
+    _c = _a.position,
+    position = _c === void 0 ? 'above' : _c,
+    classNameOverride = _a.classNameOverride,
+    portalSelector = _a.portalSelector,
+    animationDuration = _a.animationDuration,
+    _d = _a.isInitiallyVisible,
+    isInitiallyVisible = _d === void 0 ? false : _d,
+    _e = _a.mood,
+    mood = _e === void 0 ? 'default' : _e;
+  var _f = useState(isInitiallyVisible),
+    isHover = _f[0],
+    setIsHover = _f[1];
+  var _g = useState(false),
+    isFocus = _g[0],
+    setIsFocus = _g[1];
+  var _h = useState(null),
+    referenceElement = _h[0],
+    setReferenceElement = _h[1];
+  var tooltipId = useId();
+  var hasActiveTooltip = isHover || isFocus;
+  var tooltip = /*#__PURE__*/React__default.createElement(TooltipContent, {
+    text: text,
+    position: position,
+    referenceElement: referenceElement,
+    tooltipId: tooltipId,
+    mood: mood
+  });
+  var portalSelectorElementRef = useRef(null);
+  useEffect(function () {
+    portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
+  }, [portalSelector]);
+  useEffect(function () {
+    if (portalSelector && !portalSelectorElementRef.current) {
+      // eslint-disable-next-line no-console
+      console.warn('The portal could not be created using the selector: ' + portalSelector);
+    }
+  }, [portalSelectorElementRef, portalSelector]);
+  var getDisplayClassName = function () {
+    switch (display) {
+      case 'inline':
+        return modules_16974fb0.displayInline;
+      case 'block':
+        return modules_16974fb0.displayBlock;
+      case 'inline-block':
+        return modules_16974fb0.displayInlineBlock;
+      case 'flex':
+        return modules_16974fb0.displayFlex;
+      case 'inline-flex':
+        return modules_16974fb0.displayInlineFlex;
+      default:
+        return undefined;
+    }
   };
-  Tooltip.displayName = 'Tooltip';
-  return Tooltip;
-}();
+  return /*#__PURE__*/React__default.createElement(AnimationProvider, {
+    isVisible: hasActiveTooltip,
+    animationDuration: animationDuration
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    ref: setReferenceElement,
+    className: classnames(classNameOverride, getDisplayClassName()),
+    onMouseEnter: function () {
+      return setIsHover(true);
+    },
+    onMouseLeave: function () {
+      return setIsHover(false);
+    },
+    onFocusCapture: function () {
+      return setIsFocus(true);
+    },
+    onBlurCapture: function () {
+      return setIsFocus(false);
+    }
+  }, renderChildren(children, tooltipId, hasActiveTooltip)), portalSelector && portalSelectorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(tooltip, portalSelectorElementRef.current) : tooltip));
+};
+Tooltip.displayName = 'Tooltip';
 export { Tooltip };

package/dist/esm/src/TooltipV1/subcomponents/AppearanceAnim.mjs

@@ -1,8 +1,8 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 var ANIM_DURATION_MS = 400;
-var AnimationContext = /*#__PURE__*/React.createContext({
+var AnimationContext = /*#__PURE__*/React__default.createContext({
   isVisible: false,
   isAnimIn: false,
   isAnimOut: false
@@ -52,7 +52,7 @@ var AnimationProvider = function (_a) {
       trackAnimInCompleted();
     }
   }
-  return /*#__PURE__*/React.createElement(AnimationContext.Provider, __assign({
+  return /*#__PURE__*/React__default.createElement(AnimationContext.Provider, __assign({
     value: {
       isVisible: isVisible,
       isAnimOut: isAnimOut,
@@ -61,7 +61,7 @@ var AnimationProvider = function (_a) {
   }, otherProps));
 };
 var useAnimation = function () {
-  var context = React.useContext(AnimationContext);
+  var context = React__default.useContext(AnimationContext);
   if (!context) {
     throw new Error('useAnimation must be used within a AnimationProvider');
   }