@kaizen/components 1.68.6 → 1.68.8

package/dist/esm/__future__/Icon/Icon.mjs

@@ -11,9 +11,9 @@ var MaterialIcon = function (_a) {
     className = _a.className,
     restProps = __rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
   return /*#__PURE__*/React.createElement("span", __assign({
-    className: classnames(styles["material-symbols-outlined"], styles.icon, isFilled && styles.filled, className),
+    className: classnames(styles['material-symbols-outlined'], styles.icon, isFilled && styles.filled, className),
     "aria-hidden": isPresentational,
-    role: isPresentational ? undefined : "img",
+    role: isPresentational ? undefined : 'img',
     "aria-label": alt
   }, restProps), children);
 };

package/dist/esm/__future__/Icon/constants.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 var handledRtlIcons = {
-  checklist: "checklist_rtl",
-  format_list_numbered: "format_list_numbered_rtl"
+  checklist: 'checklist_rtl',
+  format_list_numbered: 'format_list_numbered_rtl'
 };
 export { handledRtlIcons };

package/dist/esm/__future__/Select/Select.mjs

@@ -42,13 +42,14 @@ const Select = /*#__PURE__*/function () {
       selectedKey = _a.selectedKey,
       description = _a.description,
       _c = _a.placeholder,
-      placeholder = _c === void 0 ? "" : _c,
+      placeholder = _c === void 0 ? '' : _c,
       isDisabled = _a.isDisabled,
       portalContainerId = _a.portalContainerId,
       restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
-    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var fallbackId = useId();
+    var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
     var descriptionId = "".concat(id, "--description");
     var popoverId = "".concat(id, "--popover");
     var disabledKeys = getDisabledKeysFromItems(items);
@@ -57,7 +58,7 @@ const Select = /*#__PURE__*/function () {
       items: items,
       children: transformSelectItemToCollectionElement,
       disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys,
-      selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey,
+      selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
       description: description,
       placeholder: placeholder,
       isDisabled: isDisabled
@@ -75,9 +76,9 @@ const Select = /*#__PURE__*/function () {
     // We use role=combobox, meaning screen readers will read the value.
     // So we're modifying the `aria-labelledby` property to remove the value element id.
     // Issue: https://github.com/adobe/react-spectrum/issues/4091
-    var reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"];
+    var reactAriaLabelledBy = reactAriaTriggerProps['aria-labelledby'];
     var triggerProps = __assign(__assign({}, reactAriaTriggerProps), {
-      "aria-labelledby": reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(" ") + 1)
+      'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
     });
     var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
     var selectToggleProps = __assign(__assign({}, buttonProps), {
@@ -98,9 +99,9 @@ const Select = /*#__PURE__*/function () {
     useEffect(function () {
       if (portalContainerId) {
         var portalElement = document.getElementById(portalContainerId);
-        portalElement && setPortalContainer(portalElement);
+        if (portalElement) setPortalContainer(portalElement);
       }
-    }, []);
+    }, [portalContainerId]);
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(!isFullWidth && styles.notFullWidth, classNameOverride)
     }, /*#__PURE__*/React.createElement(HiddenSelect, {
@@ -128,7 +129,7 @@ const Select = /*#__PURE__*/function () {
       reversed: isReversed
     }))));
   };
-  Select.displayName = "Select";
+  Select.displayName = 'Select';
   Select.Section = ListBoxSection;
   Select.SectionDivider = SectionDivider;
   Select.Option = Option;

package/dist/esm/__future__/Select/context/SelectContext.mjs

@@ -3,7 +3,7 @@ var SelectContext = /*#__PURE__*/React.createContext(null);
 var useSelectContext = function () {
   var context = useContext(SelectContext);
   if (!context) {
-    throw new Error("useSelectContext must be used within the SelectContext.Provider");
+    throw new Error('useSelectContext must be used within the SelectContext.Provider');
   }
   return context;
 };

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs

@@ -13,7 +13,7 @@ import styles from './ListBox.module.scss.mjs';
 var getOptionKeyFromCollection = function (state) {
   if (state.selectedItem) {
     return state.selectedItem.key;
-  } else if (state.focusStrategy === "last") {
+  } else if (state.focusStrategy === 'last') {
     return state.collection.getLastKey();
   }
   return state.collection.getFirstKey();
@@ -25,7 +25,7 @@ var safeQuerySelector = function (selector) {
     return document.querySelector(selector);
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.error("Kaizen querySelector failed:", error);
+    console.error('Kaizen querySelector failed:', error);
     return null;
   }
 };
@@ -58,13 +58,15 @@ const ListBox = /*#__PURE__*/function () {
           (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
       }
+      // Only run this effect for checking the first successful render
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isClientReady]);
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,
       className: classnames(styles.listBox, classNameOverride)
     }, listBoxProps, restProps), children);
   };
-  ListBox.displayName = "ListBox";
+  ListBox.displayName = 'ListBox';
   return ListBox;
 }();
 export { ListBox };

package/dist/esm/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs

@@ -8,8 +8,8 @@ const ListBoxSection = /*#__PURE__*/function () {
   const ListBoxSection = function (_a) {
     var section = _a.section;
     var _b = useListBoxSection({
-        heading: section.rendered,
-        "aria-label": section["aria-label"]
+        'heading': section.rendered,
+        'aria-label': section['aria-label']
       }),
       itemProps = _b.itemProps,
       headingProps = _b.headingProps,
@@ -30,7 +30,7 @@ const ListBoxSection = /*#__PURE__*/function () {
       });
     }))));
   };
-  ListBoxSection.displayName = "ListBoxSection";
+  ListBoxSection.displayName = 'ListBoxSection';
   return ListBoxSection;
 }();
 export { ListBoxSection };

package/dist/esm/__future__/Select/subcomponents/ListItem/ListItem.mjs

@@ -4,7 +4,7 @@ import { Option } from '../Option/Option.mjs';
 const ListItem = /*#__PURE__*/function () {
   const ListItem = function (_a) {
     var item = _a.item;
-    return item.type === "section" ? ( /*#__PURE__*/React.createElement(ListBoxSection, {
+    return item.type === 'section' ? ( /*#__PURE__*/React.createElement(ListBoxSection, {
       key: item.key,
       section: item
     })) : ( /*#__PURE__*/React.createElement(Option, {
@@ -12,7 +12,7 @@ const ListItem = /*#__PURE__*/function () {
       item: item
     }));
   };
-  ListItem.displayName = "ListItem";
+  ListItem.displayName = 'ListItem';
   return ListItem;
 }();
 export { ListItem };

package/dist/esm/__future__/Select/subcomponents/ListItems/ListItems.mjs

@@ -14,7 +14,7 @@ const ListItems = /*#__PURE__*/function () {
       });
     }));
   };
-  ListItems.displayName = "ListItems";
+  ListItems.displayName = 'ListItems';
   return ListItems;
 }();
 export { ListItems };

package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs

@@ -25,7 +25,7 @@ const Option = /*#__PURE__*/function () {
       focusProps = _c.focusProps;
     return /*#__PURE__*/React.createElement("li", __assign({}, mergeProps(restOptionProps, focusProps, props, {
       onPointerUp: function (e) {
-        if (e.pointerType === "touch") {
+        if (e.pointerType === 'touch') {
           // On touch devices, the listbox closes too quickly so below elements will trigger their pointer events.
           // Slow it down a bit to prevent the appearance of propagation.
           setTimeout(function () {
@@ -46,7 +46,7 @@ const Option = /*#__PURE__*/function () {
       isPresentational: true
     })));
   };
-  Option.displayName = "Option";
+  Option.displayName = 'Option';
   return Option;
 }();
 export { Option };

package/dist/esm/__future__/Select/subcomponents/Overlay/Overlay.mjs

@@ -33,7 +33,7 @@ const Overlay = /*#__PURE__*/function () {
       onDismiss: state.close
     })));
   };
-  Overlay.displayName = "Overlay";
+  Overlay.displayName = 'Overlay';
   return Overlay;
 }();
 export { Overlay };

package/dist/esm/__future__/Select/subcomponents/SectionDivider/SectionDivider.mjs

@@ -8,7 +8,7 @@ const SectionDivider = /*#__PURE__*/function () {
       variant: "canvas"
     });
   };
-  SectionDivider.displayName = "SectionDivider";
+  SectionDivider.displayName = 'SectionDivider';
   return SectionDivider;
 }();
 export { SectionDivider };

package/dist/esm/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.mjs

@@ -20,11 +20,11 @@ const SelectPopoverContents = /*#__PURE__*/function () {
       menuProps: menuProps
     }, children ? children({
       items: itemNodes
-    }) : ( /*#__PURE__*/React.createElement(ListItems, {
+    }) : /*#__PURE__*/React.createElement(ListItems, {
       items: itemNodes
-    })))));
+    }))));
   };
-  SelectPopoverContents.displayName = "Select.PopoverContents";
+  SelectPopoverContents.displayName = 'Select.PopoverContents';
   return SelectPopoverContents;
 }();
 export { SelectPopoverContents };

package/dist/esm/__future__/Select/subcomponents/SelectToggle/SelectToggle.mjs

@@ -12,7 +12,7 @@ const SelectToggle = /*#__PURE__*/function () {
       valueProps = _a.valueProps,
       isOpen = _a.isOpen,
       _b = _a.placeholder,
-      placeholder = _b === void 0 ? "Select" : _b,
+      placeholder = _b === void 0 ? 'Select' : _b,
       status = _a.status,
       isDisabled = _a.isDisabled,
       isReversed = _a.isReversed,
@@ -28,16 +28,16 @@ const SelectToggle = /*#__PURE__*/function () {
       role: "combobox"
     }, restProps, {
       ref: ref,
-      className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === "error" && styles.error, status === "caution" && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
+      className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === 'error' && styles.error, status === 'caution' && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
     }), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
       className: styles.value
     }), value !== null && value !== void 0 ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
-      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      name: isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
       isPresentational: true,
       className: styles.icon
     })));
   });
-  SelectToggle.displayName = "SelectToggle";
+  SelectToggle.displayName = 'SelectToggle';
   return SelectToggle;
 }();
 export { SelectToggle };

package/dist/esm/__future__/Select/utils/isSelectOptionGroup.mjs

@@ -1,4 +1,4 @@
 var isSelectOptionGroup = function (item) {
-  return item.hasOwnProperty("options") && Array.isArray(item.options);
+  return Object.prototype.hasOwnProperty.call(item, 'options') && Array.isArray(item.options);
 };
 export { isSelectOptionGroup };

package/dist/esm/__future__/Tabs/subcomponents/Tab/Tab.mjs

@@ -23,7 +23,7 @@ var Tab = function (props) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children, badge && ( /*#__PURE__*/React.createElement("span", {
       className: styles.badge
     }, /*#__PURE__*/React.createElement(Badge, {
-      variant: isSelected || isFocusVisible || isHovered ? "active" : "default"
+      variant: isSelected || isFocusVisible || isHovered ? 'active' : 'default'
     }, badge))));
   });
 };

package/dist/esm/__future__/Tabs/subcomponents/TabList/TabList.mjs

@@ -13,7 +13,7 @@ var TabList = function (props) {
     noPadding = _a === void 0 ? false : _a,
     children = props.children,
     className = props.className,
-    restProps = __rest(props, ["aria-label", "noPadding", "children", "className"]);
+    restProps = __rest(props, ['aria-label', "noPadding", "children", "className"]);
   return /*#__PURE__*/React.createElement(TabList$1, __assign({
     "aria-label": ariaLabel,
     className: classnames(styles.tabList, className, noPadding && styles.noPadding)

package/dist/esm/__future__/Tag/RemovableTag/RemovableTag.mjs

@@ -19,7 +19,7 @@ const RemovableTag = /*#__PURE__*/function () {
     // color={color}
     , __assign({}, removeButtonProps)));
   };
-  RemovableTag.displayName = "RemovableTag";
+  RemovableTag.displayName = 'RemovableTag';
   return RemovableTag;
 }();
 export { RemovableTag };

package/dist/esm/__future__/Tag/RemovableTag/subcomponents/RemoveButton.mjs

@@ -20,7 +20,7 @@ const RemoveButton = /*#__PURE__*/function () {
       isPresentational: true
     }));
   };
-  RemoveButton.displayName = "RemoveButton";
+  RemoveButton.displayName = 'RemoveButton';
   return RemoveButton;
 }();
 export { RemoveButton };

package/dist/esm/__future__/Tag/Tag/Tag.mjs

@@ -8,7 +8,7 @@ const Tag = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       icon = _a.icon,
       _b = _a.color,
-      color = _b === void 0 ? "gray" : _b,
+      color = _b === void 0 ? 'gray' : _b,
       restProps = __rest(_a, ["children", "classNameOverride", "icon", "color"]);
     return /*#__PURE__*/React.createElement("span", __assign({
       className: classnames(styles.tag, styles[color], classNameOverride)
@@ -16,7 +16,7 @@ const Tag = /*#__PURE__*/function () {
       className: styles.iconContainer
     }, icon), children);
   };
-  Tag.displayName = "Tag";
+  Tag.displayName = 'Tag';
   return Tag;
 }();
 export { Tag };

package/dist/esm/__overlays__/Tooltip/v1/Tooltip.mjs

@@ -6,7 +6,7 @@ import { usePopper } from 'react-popper';
 import { useAnimation, AnimationProvider } from './subcomponents/AppearanceAnim.mjs';
 import { isSemanticElement } from './utils/isSemanticElement.mjs';
 import styles from './Tooltip.module.scss.mjs';
-var positionToPlacement = new Map([["above", "top"], ["below", "bottom"], ["left", "left"], ["right", "right"]]);
+var positionToPlacement = new Map([['above', 'top'], ['below', 'bottom'], ['left', 'left'], ['right', 'right']]);
 // Sync with Tooltip.scss
 var arrowHeight = 7;
 var arrowWidth = 14;
@@ -16,7 +16,7 @@ var TooltipContent = function (_a) {
     referenceElement = _a.referenceElement,
     tooltipId = _a.tooltipId,
     _b = _a.mood,
-    mood = _b === void 0 ? "default" : _b;
+    mood = _b === void 0 ? 'default' : _b;
   var _c = useState(null),
     popperElement = _c[0],
     setPopperElement = _c[1];
@@ -25,7 +25,7 @@ var TooltipContent = function (_a) {
     setArrowElement = _d[1];
   var _e = usePopper(referenceElement, popperElement, {
       modifiers: [{
-        name: "arrow",
+        name: 'arrow',
         options: {
           element: arrowElement,
           // Ensures that the arrow doesn't go too far to the left or right
@@ -33,12 +33,12 @@ var TooltipContent = function (_a) {
           padding: arrowWidth / 2 + 10
         }
       }, {
-        name: "offset",
+        name: 'offset',
         options: {
           offset: [0, arrowHeight + 6]
         }
       }, {
-        name: "preventOverflow",
+        name: 'preventOverflow',
         options: {
           // Makes sure that the tooltip isn't flush up against the end of the
           // viewport
@@ -48,11 +48,11 @@ var TooltipContent = function (_a) {
           tetherOffset: 50
         }
       }, {
-        name: "flip",
+        name: 'flip',
         options: {
           padding: 8,
           altBoundary: true,
-          fallbackPlacements: ["left", "top", "bottom", "right"]
+          fallbackPlacements: ['left', 'top', 'bottom', 'right']
         }
       }],
       placement: position ? positionToPlacement.get(position) : undefined
@@ -87,12 +87,12 @@ var TooltipContent = function (_a) {
 var renderChildren = function (content, tooltipId, hasActiveTooltip) {
   if (isSemanticElement(content)) {
     return /*#__PURE__*/cloneElement(content, {
-      "aria-describedby": hasActiveTooltip ? tooltipId : undefined
+      'aria-describedby': hasActiveTooltip ? tooltipId : undefined
     });
   }
   // We don't want to block them from this but just provide context for better a11y guidance
   // eslint-disable-next-line no-console
-  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.");
+  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 () {
@@ -100,16 +100,16 @@ const Tooltip = /*#__PURE__*/function () {
     var children = _a.children,
       text = _a.text,
       _b = _a.display,
-      display = _b === void 0 ? "block" : _b,
+      display = _b === void 0 ? 'block' : _b,
       _c = _a.position,
-      position = _c === void 0 ? "above" : _c,
+      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;
+      mood = _e === void 0 ? 'default' : _e;
     var _f = useState(isInitiallyVisible),
       isHover = _f[0],
       setIsHover = _f[1];
@@ -135,20 +135,20 @@ const Tooltip = /*#__PURE__*/function () {
     useEffect(function () {
       if (portalSelector && !portalSelectorElementRef.current) {
         // eslint-disable-next-line no-console
-        console.warn("The portal could not be created using the selector: " + portalSelector);
+        console.warn('The portal could not be created using the selector: ' + portalSelector);
       }
     }, [portalSelectorElementRef, portalSelector]);
     var getDisplayClassName = function () {
       switch (display) {
-        case "inline":
+        case 'inline':
           return styles.displayInline;
-        case "block":
+        case 'block':
           return styles.displayBlock;
-        case "inline-block":
+        case 'inline-block':
           return styles.displayInlineBlock;
-        case "flex":
+        case 'flex':
           return styles.displayFlex;
-        case "inline-flex":
+        case 'inline-flex':
           return styles.displayInlineFlex;
         default:
           return undefined;
@@ -174,7 +174,7 @@ const Tooltip = /*#__PURE__*/function () {
       }
     }, renderChildren(children, tooltipId, hasActiveTooltip)), portalSelector && portalSelectorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(tooltip, portalSelectorElementRef.current) : tooltip));
   };
-  Tooltip.displayName = "Tooltip";
+  Tooltip.displayName = 'Tooltip';
   return Tooltip;
 }();
 export { Tooltip };

package/dist/esm/__overlays__/Tooltip/v1/subcomponents/AppearanceAnim.mjs

@@ -63,7 +63,7 @@ var AnimationProvider = function (_a) {
 var useAnimation = function () {
   var context = React.useContext(AnimationContext);
   if (!context) {
-    throw new Error("useAnimation must be used within a AnimationProvider");
+    throw new Error('useAnimation must be used within a AnimationProvider');
   }
   return context;
 };

package/dist/esm/__overlays__/Tooltip/v1/utils/isSemanticElement.mjs

@@ -1,9 +1,10 @@
 import React from 'react';
 
 // Noting that this is contingent on our displayName for our components -  this something we control
-var allowedDisplayNames = ["Button", "IconButton", "FilterButtonBase"];
+var allowedDisplayNames = ['Button', 'IconButton', 'FilterButtonBase'];
 function extractDisplayName(type) {
-  return type.displayName || type.name || "Unknown";
+  var _a, _b;
+  return (_b = (_a = type.displayName) !== null && _a !== void 0 ? _a : type.name) !== null && _b !== void 0 ? _b : 'Unknown';
 }
 /**
  *  Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers
@@ -12,15 +13,15 @@ var isSemanticElement = function (element) {
   if (! /*#__PURE__*/React.isValidElement(element)) return false;
   var props = element.props,
     type = element.type;
-  if ("role" in props) {
-    return props.role !== "presentation" && props.role !== "none";
+  if ('role' in props) {
+    return props.role !== 'presentation' && props.role !== 'none';
   }
-  if (typeof type !== "string") {
+  if (typeof type !== 'string') {
     // As we are only checking whether this matches to our allowedDisplayNames
     // type casting should be fine
     var displayName = extractDisplayName(type);
     return allowedDisplayNames.includes(displayName);
   }
-  return !(type === "div" || type === "span");
+  return !(type === 'div' || type === 'span');
 };
 export { extractDisplayName, isSemanticElement };

package/dist/esm/__overlays__/Tooltip/v3/Tooltip.mjs

@@ -11,36 +11,40 @@ import { useReversedColors } from '../../../__utilities__/ReversedColors/v3/Reve
 /**
  * A tooltip displays a description of an element on hover or focus.
  */
-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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip$1, __assign({
-    ref: ref,
-    offset: 8
-  }, props, {
-    className: mergeClassNames(styles.tooltip, className, reverseColors && styles.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" ? children({
-    placement: "center",
-    isEntering: false,
-    isExiting: false,
-    state: contextState,
-    defaultChildren: undefined
-  }) : children)) : null);
-});
+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(styles.tooltip, className, reverseColors && styles.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;
+}();
 export { Tooltip };

package/dist/esm/__utilities__/useIsClientReady/useIsClientReady.mjs

@@ -9,7 +9,7 @@ var useIsClientReady = function () {
     isClientReady = _a[0],
     setIsClientReady = _a[1];
   useEffect(function () {
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       setIsClientReady(true);
     }
   }, []);

package/dist/esm/utils/getNodeText.mjs

@@ -2,10 +2,10 @@ import React from 'react';
 
 // Adapted from https://stackoverflow.com/a/60564620
 var getNodeText = function (node) {
-  if (!node) return "";
-  if (typeof node === "string" || typeof node === "number") return node;
-  if (node instanceof Array) return node.map(getNodeText).join("");
+  if (!node) return '';
+  if (typeof node === 'string' || typeof node === 'number') return node;
+  if (node instanceof Array) return node.map(getNodeText).join('');
   if ( /*#__PURE__*/React.isValidElement(node)) return getNodeText(node.props.children);
-  return "";
+  return '';
 };
 export { getNodeText };

package/dist/esm/utils/hostedAssets.mjs

@@ -1,4 +1,4 @@
-var ORIGIN_BASE_URL = "https://d1e7r7b0lb8p4d.cloudfront.net";
+var ORIGIN_BASE_URL = 'https://d1e7r7b0lb8p4d.cloudfront.net';
 /**
  * Returns the full URL of the asset at `path` managed by the
  * `kaizen-design-system-assets` service.
@@ -9,6 +9,6 @@ var ORIGIN_BASE_URL = "https://d1e7r7b0lb8p4d.cloudfront.net";
  * @see https://github.com/cultureamp/kaizen-design-system-assets/
  */
 var assetUrl = function (path) {
-  return [ORIGIN_BASE_URL, path].join("/");
+  return [ORIGIN_BASE_URL, path].join('/');
 };
 export { assetUrl };

package/dist/esm/utils/isRefObject.mjs

@@ -1,4 +1,4 @@
 var isRefObject = function (ref) {
-  return ref !== null && "current" in ref;
+  return ref !== null && 'current' in ref;
 };
 export { isRefObject };