@carbon/react 1.63.2 → 1.64.0

package/es/components/Menu/MenuItem.js

@@ -8,7 +8,8 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
+import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
@@ -23,9 +24,6 @@ import { match } from '../../internal/keyboard/match.js';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CaretLeft, _CaretRight;
-const hoverIntentDelay = 150; // in ms
-const leaveIntentDelay = 300; // in ms
-
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -38,19 +36,37 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     shortcut,
     ...rest
   } = _ref;
+  const [submenuOpen, setSubmenuOpen] = useState(false);
+  const [rtl, setRtl] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context: floatingContext
+  } = useFloating({
+    open: submenuOpen,
+    onOpenChange: setSubmenuOpen,
+    placement: rtl ? 'left-start' : 'right-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset({
+      mainAxis: -6,
+      crossAxis: -6
+    })]
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useHover(floatingContext, {
+    delay: 100,
+    enabled: true,
+    handleClose: safePolygon({
+      requireIntent: false
+    })
+  })]);
   const prefix = usePrefix();
   const context = useContext(MenuContext);
   const menuItem = useRef(null);
-  const ref = useMergedRefs([forwardRef, menuItem]);
-  const [boundaries, setBoundaries] = useState({
-    x: -1,
-    y: -1
-  });
-  const [rtl, setRtl] = useState(false);
+  const ref = useMergedRefs([forwardRef, menuItem, refs.setReference]);
   const hasChildren = Boolean(children);
-  const [submenuOpen, setSubmenuOpen] = useState(false);
-  const hoverIntentTimeout = useRef(null);
-  const leaveIntentTimeout = useRef(null);
   const isDisabled = disabled && !hasChildren;
   const isDanger = kind === 'danger' && !hasChildren;
   function registerItem() {
@@ -66,31 +82,10 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     if (!menuItem.current) {
       return;
     }
-    const {
-      x,
-      y,
-      width,
-      height
-    } = menuItem.current.getBoundingClientRect();
-    if (rtl) {
-      setBoundaries({
-        x: [-x, x - width],
-        y: [y, y + height]
-      });
-    } else {
-      setBoundaries({
-        x: [x, x + width],
-        y: [y, y + height]
-      });
-    }
     setSubmenuOpen(true);
   }
   function closeSubmenu() {
     setSubmenuOpen(false);
-    setBoundaries({
-      x: -1,
-      y: -1
-    });
   }
   function handleClick(e) {
     if (!isDisabled) {
@@ -104,27 +99,6 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       }
     }
   }
-  function handleMouseEnter() {
-    if (leaveIntentTimeout.current) {
-      // When mouse reenters before closing keep sub menu open
-      clearTimeout(leaveIntentTimeout.current);
-      leaveIntentTimeout.current = null;
-    }
-    hoverIntentTimeout.current = setTimeout(() => {
-      openSubmenu();
-    }, hoverIntentDelay);
-  }
-  function handleMouseLeave() {
-    if (hoverIntentTimeout.current) {
-      clearTimeout(hoverIntentTimeout.current);
-      // Avoid closing the sub menu as soon as mouse leaves
-      // prevents accidental closure due to scroll bar
-      leaveIntentTimeout.current = setTimeout(() => {
-        closeSubmenu();
-        menuItem.current?.focus();
-      }, leaveIntentDelay);
-    }
-  }
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
       openSubmenu();
@@ -169,7 +143,18 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       });
     }
   }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
-  return /*#__PURE__*/React__default.createElement("li", _extends({
+  useEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current && style !== 'position') {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating]);
+  return /*#__PURE__*/React__default.createElement(FloatingFocusManager, {
+    context: floatingContext,
+    order: ['reference', 'floating'],
+    modal: false
+  }, /*#__PURE__*/React__default.createElement("li", _extends({
     role: "menuitem"
   }, rest, {
     ref: ref,
@@ -179,10 +164,8 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     "aria-haspopup": hasChildren ?? undefined,
     "aria-expanded": hasChildren ? submenuOpen : undefined,
     onClick: handleClick,
-    onMouseEnter: hasChildren ? handleMouseEnter : undefined,
-    onMouseLeave: hasChildren ? handleMouseLeave : undefined,
     onKeyDown: handleKeyDown
-  }), /*#__PURE__*/React__default.createElement("div", {
+  }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
   }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
@@ -192,16 +175,15 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     className: `${prefix}--menu-item__shortcut`
   }, shortcut), hasChildren && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__shortcut`
-  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, {
+  }, rtl ? _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null)) : _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null))), /*#__PURE__*/React__default.createElement(Menu, _extends({
     label: label,
     open: submenuOpen,
     onClose: () => {
       closeSubmenu();
       menuItem.current?.focus();
     },
-    x: boundaries.x,
-    y: boundaries.y
-  }, children)));
+    ref: refs.setFloating
+  }, getFloatingProps()), children))));
 });
 MenuItem.propTypes = {
   /**

package/es/components/Modal/Modal.js

@@ -229,7 +229,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
 
   // Slug is always size `sm`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm'
     });

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
+import React__default, { useContext, useState, useLayoutEffect, useRef, useMemo, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -164,20 +164,23 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     setPrevOpen(open);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const sortedItems = sortItems(filterItems(items, {
-    itemToString,
-    inputValue
-  }), {
-    selectedItems: {
-      top: controlledSelectedItems,
-      fixed: [],
-      'top-after-reopen': topItems
-    }[selectionFeedback],
-    itemToString,
-    compareItems,
-    locale
-  });
+  // memoize sorted items to reduce unnecessary expensive sort on rerender
+  const sortedItems = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return sortItems(filterItems(items, {
+      itemToString,
+      inputValue
+    }), {
+      selectedItems: {
+        top: controlledSelectedItems,
+        fixed: [],
+        'top-after-reopen': topItems
+      }[selectionFeedback],
+      itemToString,
+      compareItems,
+      locale
+    });
+  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, compareItems, locale]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -217,9 +220,15 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
       setTopItems(controlledSelectedItems);
     }
   }, [controlledSelectedItems, isOpen, setTopItems]);
+  const validateHighlightFocus = () => {
+    if (controlledSelectedItems.length > 0) {
+      setHighlightedIndex(0);
+    }
+  };
   function handleMenuChange(forceIsOpen) {
     const nextIsOpen = forceIsOpen ?? !isOpen;
     setIsOpen(nextIsOpen);
+    validateHighlightFocus();
     if (onMenuChange) {
       onMenuChange(nextIsOpen);
     }
@@ -237,9 +246,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   } = useCombobox({
     isOpen,
     items: sortedItems,
+    // defaultHighlightedIndex: 0, // after selection, highlight the first item.
     itemToString,
-    defaultHighlightedIndex: 0,
-    // after selection, highlight the first item.
     id,
     labelId,
     menuId,
@@ -284,24 +292,37 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
         return changes;
       case FunctionToggleMenu:
       case ToggleButtonClick:
+        validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
-            ...changes,
-            highlightedIndex: 0
+            ...changes
           };
         }
-        return changes;
+        return {
+          ...changes,
+          highlightedIndex: null
+        };
       case InputChange:
         if (onInputValueChange) {
           onInputValueChange(changes.inputValue);
         }
         setInputValue(changes.inputValue ?? '');
         setIsOpen(true);
-        return changes;
+        return {
+          ...changes,
+          highlightedIndex: 0
+        };
       case InputClick:
+        validateHighlightFocus();
+        if (changes.isOpen && !changes.selectedItem) {
+          return {
+            ...changes
+          };
+        }
         return {
           ...changes,
-          isOpen: false
+          isOpen: false,
+          highlightedIndex: null
         };
       case MenuMouseLeave:
         return {
@@ -385,7 +406,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/MultiSelect/MultiSelect.js

@@ -311,7 +311,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         setIsOpenWrapper(changes.isOpen || false);
         return {
           ...changes,
-          highlightedIndex: 0
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : undefined
         };
       case ItemClick:
         setHighlightedIndex(changes.selectedItem);
@@ -386,7 +386,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -506,7 +506,8 @@ MultiSelect.propTypes = {
   clearSelectionText: PropTypes.string,
   /**
    * Provide a compare function that is used to determine the ordering of
-   * options. See 'sortItems' for more control.
+   * options. See 'sortItems' for more control. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   compareItems: PropTypes.func,
   /**
@@ -560,7 +561,8 @@ MultiSelect.propTypes = {
   /**
    * Helper function passed to downshift that allows the library to render a
    * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
+   * from a given item to serve as the item label in the list. Consider
+   * declaring function with `useCallback` to prevent unnecessary re-renders.
    */
   itemToString: PropTypes.func,
   /**

package/es/components/NumberInput/NumberInput.js

@@ -163,9 +163,17 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
   const Icon = normalizedProps.icon;
   function handleStepperClick(event, direction) {
     if (inputRef.current) {
-      direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
+      const currentValue = Number(inputRef.current.value);
+      let newValue = direction === 'up' ? currentValue + step : currentValue - step;
+      if (min !== undefined) {
+        newValue = Math.max(newValue, min);
+      }
+      if (max !== undefined) {
+        newValue = Math.min(newValue, max);
+      }
+      const currentInputValue = inputRef.current ? inputRef.current.value : '';
       const state = {
-        value: allowEmpty && inputRef.current.value === '' ? '' : Number(inputRef.current.value),
+        value: allowEmpty && currentInputValue === '' && step === 0 ? '' : newValue,
         direction: direction
       };
       setValue(state.value);
@@ -180,7 +188,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });
@@ -188,7 +196,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
 
   // Need to update the internal value when the revert button is clicked
   let isRevertActive;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     isRevertActive = normalizedSlug.props.revertActive;
   }
   useEffect(() => {

package/es/components/OverflowMenu/OverflowMenu.js

@@ -405,7 +405,8 @@ class OverflowMenu extends React__default.Component {
       id: id,
       ref: mergeRefs(this._triggerRef, ref),
       size: size,
-      label: iconDescription
+      label: iconDescription,
+      kind: "ghost"
     }), /*#__PURE__*/React__default.createElement(IconElement, iconProps)), open && this.state.hasMountedTrigger && wrappedMenuBody));
   }
 }

package/es/components/OverflowMenu/next/index.js

@@ -96,7 +96,8 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     onMouseDown: handleMousedown,
     ref: floatingRef,
     label: label,
-    align: tooltipAlignment
+    align: tooltipAlignment,
+    kind: "ghost"
   }, /*#__PURE__*/React__default.createElement(IconElement, {
     className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default.createElement(Menu, {

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -101,7 +101,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini',
       kind: 'default'

package/es/components/RadioTile/RadioTile.js

@@ -71,7 +71,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs'
     });

package/es/components/Select/Select.js

@@ -125,7 +125,7 @@ const Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref)
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Tabs/Tabs.js

@@ -11,7 +11,7 @@ import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
-import React__default, { useState, useRef, useCallback, useEffect, forwardRef, useLayoutEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -787,7 +787,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
   };
   useEvent(dismissIconRef, 'mouseover', onDismissIconMouseEnter);
   useEvent(dismissIconRef, 'mouseleave', onDismissIconMouseLeave);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     function handler() {
       const elementTabId = document.getElementById(`${id}`) || tabRef.current;
       if (elementTabId?.closest(`.${prefix}--tabs--vertical`)) {
@@ -1128,7 +1128,7 @@ function TabPanels(_ref11) {
   const prefix = usePrefix();
   const refs = useRef([]);
   const hiddenStates = useRef([]);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const tabContainer = refs.current[0]?.previousElementSibling;
     const isVertical = tabContainer?.classList.contains(`${prefix}--tabs--vertical`);
     const parentHasHeight = tabContainer?.parentElement?.style.height;

package/es/components/Tag/DismissibleTag.js

@@ -50,7 +50,7 @@ const DismissibleTag = _ref => {
     }
   };
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm',
       kind: 'inline'

package/es/components/Tag/OperationalTag.js

@@ -52,7 +52,7 @@ const OperationalTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm',
       kind: 'inline'

package/es/components/Tag/SelectableTag.js

@@ -43,7 +43,7 @@ const SelectableTag = _ref => {
     setIsEllipsisApplied(isEllipsisActive(newElement));
   }, [prefix, tagRef]);
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm',
       kind: 'inline'
@@ -65,6 +65,7 @@ const SelectableTag = _ref => {
       leaveDelayMs: 0,
       onMouseEnter: () => false
     }, /*#__PURE__*/React__default.createElement(Tag, _extends({
+      "aria-pressed": selectedTag,
       ref: tagRef,
       slug: slug,
       size: size,
@@ -79,6 +80,7 @@ const SelectableTag = _ref => {
     }, text), normalizedSlug));
   }
   return /*#__PURE__*/React__default.createElement(Tag, _extends({
+    "aria-pressed": selectedTag,
     ref: tagRef,
     slug: slug,
     size: size,

package/es/components/Tag/Tag.js

@@ -89,7 +89,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
 
   // Slug is always size `md` and `inline`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug' && !isInteractiveTag) {
+  if (slug && slug['type']?.displayName === 'AILabel' && !isInteractiveTag) {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'sm',
       kind: 'inline'

package/es/components/TextArea/TextArea.js

@@ -255,7 +255,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/TextInput/PasswordInput.js

@@ -148,6 +148,11 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
   if (tooltipPosition === 'right' || tooltipPosition === 'left') {
     align = tooltipPosition;
   }
+  if (!hidePasswordLabel || hidePasswordLabel.trim() === '') {
+    console.warn('Warning: The "hidePasswordLabel" should not be blank.');
+  } else if (!showPasswordLabel || showPasswordLabel.trim() === '') {
+    console.warn('Warning: The "showPasswordLabel" should not be blank.');
+  }
   const input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,

package/es/components/TextInput/TextInput.js

@@ -181,7 +181,7 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
 
   // Slug is always size `mini`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'mini'
     });

package/es/components/Tile/Tile.js

@@ -269,7 +269,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   // Slug is always size `xs`
   const slugRef = useRef(null);
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs',
       ref: slugRef
@@ -495,7 +495,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
 
   // Slug is always size `xs`
   let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'Slug') {
+  if (slug && slug['type']?.displayName === 'AILabel') {
     normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
       size: 'xs'
     });