@lumx/react 3.8.2-alpha.2 → 3.9.1-alpha.0

package/index.js

@@ -19,7 +19,6 @@ import pick from 'lodash/pick';
 import isInteger from 'lodash/isInteger';
 import throttle from 'lodash/throttle';
 import take from 'lodash/take';
-import uniqueId from 'lodash/uniqueId';
 import isObject from 'lodash/isObject';
 import range from 'lodash/range';
 import chunk from 'lodash/chunk';
@@ -344,20 +343,6 @@ var classnames = createCommonjsModule(function (module) {
 
 const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiArrowDown='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';const mdiArrowUp='M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';const mdiCheck='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';const mdiCheckCircle='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z';const mdiChevronDown='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';const mdiChevronLeft='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z';const mdiChevronRight='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z';const mdiChevronUp='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';const mdiClose='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';const mdiCloseCircle='M12 2a10 10 0 1 1 0 20 10 10 0 1 1 0-20m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z';const mdiDragVertical='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';const mdiImageBroken='M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';const mdiInformation='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiMagnifyMinusOutline='M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';const mdiMagnifyPlusOutline='m15.5 14 5 5-1.5 1.5-5-5v-.79l-.27-.28A6.5 6.5 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3 6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2z';const mdiMenuDown='m7 10 5 5 5-5z';const mdiMinus='M19 13H5v-2h14z';const mdiPauseCircleOutline='M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';const mdiPlayCircleOutline='M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';const mdiRadioboxBlank='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiRadioboxMarked='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
 
-var IDX=256, HEX=[], SIZE=256, BUFFER;
-while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
-
-function uid(len) {
-	var i=0, tmp=(len || 11);
-	if (!BUFFER || ((IDX + tmp) > SIZE*2)) {
-		for (BUFFER='',IDX=0; i < SIZE; i++) {
-			BUFFER += HEX[Math.random() * 256 | 0];
-		}
-	}
-
-	return BUFFER.substring(IDX, IDX++ + tmp);
-}
-
 /**
  * The prefix to use for the CSS classes.
  */
@@ -633,6 +618,20 @@ const getTypographyClassName = typography => {
   return `lumx-typography-${typography}`;
 };
 
+let i = 0;
+
+/**
+ * Generate a unique id (for use in a11y or other id based DOM linking).
+ *
+ * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
+ */
+function useId() {
+  return React.useMemo(() => {
+    i += 1;
+    return `:lumx${i}:`;
+  }, []);
+}
+
 const _excluded$1 = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
@@ -706,7 +705,8 @@ const AlertDialog = /*#__PURE__*/forwardRef((props, ref) => {
   } = CONFIG[kind] || {};
 
   // Define a unique ID to target title and description for aria attributes.
-  const uniqueId = React.useMemo(() => id || uid(), [id]);
+  const generatedId = useId();
+  const uniqueId = id || generatedId;
   const titleId = `${uniqueId}-title`;
   const descriptionId = `${uniqueId}-description`;
 
@@ -1654,7 +1654,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$b);
   const localInputRef = React.useRef(null);
-  const inputId = useMemo(() => id || `${CLASSNAME$8.toLowerCase()}-${uid()}`, [id]);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -2299,6 +2300,14 @@ const getYearDisplayName = locale => {
   return label;
 };
 
+function formatDayNumber(locale, date) {
+  const formattedDate = date.toLocaleDateString(locale, {
+    day: 'numeric'
+  });
+  if (formattedDate.match(/\d/)) return formattedDate.replace(/\D*(\d+)\D*/g, '$1');
+  return formattedDate;
+}
+
 /**
  * Defines the props of the component.
  */
@@ -2463,9 +2472,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
         onClick: () => onChange(date)
       }, /*#__PURE__*/React.createElement("span", {
         "aria-hidden": true
-      }, date.toLocaleDateString(locale, {
-        day: 'numeric'
-      })), /*#__PURE__*/React.createElement("span", {
+      }, formatDayNumber(locale, date)), /*#__PURE__*/React.createElement("span", {
         className: "visually-hidden"
       }, date.toLocaleDateString(locale, {
         day: 'numeric',
@@ -8256,7 +8263,7 @@ const ImageSlideshow = _ref => {
   const zoomOut = React.useCallback(() => onScaleChange === null || onScaleChange === void 0 ? void 0 : onScaleChange(0.5), [onScaleChange]);
   React.useEffect(() => {
     // Reset scale on slide change
-    if (activeIndex) setScale(undefined);
+    if (typeof activeIndex === 'number') setScale(undefined);
   }, [activeIndex]);
   const zoomControls = zoomEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({}, zoomInButtonProps, {
     theme: "dark",
@@ -8374,8 +8381,6 @@ async function startViewTransition(_ref) {
 /** Find image in element including the element */
 const findImage = element => element !== null && element !== void 0 && element.matches('img') ? element : (element === null || element === void 0 ? void 0 : element.querySelector('img')) || null;
 
-const _excluded$A = ["images"];
-
 /** Subset of the ImageLightboxProps managed by the useImageLightbox hook */
 
 const EMPTY_PROPS = {
@@ -8390,29 +8395,30 @@ const EMPTY_PROPS = {
  * - Associate a trigger with an image to display on open
  * - Automatically provide a view transition between an image trigger and the displayed image on open & close
  *
- * @param initialProps Images to display in the image lightbox
+ * @param props Images to display in the image lightbox
  */
-function useImageLightbox(initialProps) {
-  const {
-      images = []
-    } = initialProps,
-    otherProps = _objectWithoutProperties(initialProps, _excluded$A);
-  const imagesPropsRef = React.useRef(images);
+function useImageLightbox(props) {
+  const propsRef = React.useRef(props);
   React.useEffect(() => {
-    imagesPropsRef.current = images.map(props => _objectSpread2({
-      imgRef: /*#__PURE__*/React.createRef()
-    }, props));
-  }, [images]);
+    const newProps = _objectSpread2({}, props);
+    if (newProps !== null && newProps !== void 0 && newProps.images) {
+      newProps.images = newProps.images.map(image => _objectSpread2({
+        imgRef: /*#__PURE__*/React.createRef()
+      }, image));
+    }
+    propsRef.current = newProps;
+  }, [props]);
   const currentImageRef = React.useRef(null);
-  const [imageLightboxProps, setImageLightboxProps] = React.useState(() => _objectSpread2(_objectSpread2({}, EMPTY_PROPS), otherProps));
+  const [imageLightboxProps, setImageLightboxProps] = React.useState(() => _objectSpread2(_objectSpread2({}, EMPTY_PROPS), props));
   const getTriggerProps = React.useMemo(() => {
     const triggerImageRefs = {};
     async function close() {
+      var _propsRef$current, _propsRef$current$ima;
       const currentImage = currentImageRef.current;
       if (!currentImage) {
         return;
       }
-      const currentIndex = imagesPropsRef.current.findIndex(_ref => {
+      const currentIndex = (_propsRef$current = propsRef.current) === null || _propsRef$current === void 0 ? void 0 : (_propsRef$current$ima = _propsRef$current.images) === null || _propsRef$current$ima === void 0 ? void 0 : _propsRef$current$ima.findIndex(_ref => {
         let {
           imgRef
         } = _ref;
@@ -8434,7 +8440,7 @@ function useImageLightbox(initialProps) {
       });
     }
     async function open(triggerElement) {
-      var _triggerImageRefs;
+      var _triggerImageRefs, _propsRef$current2, _propsRef$current2$im;
       let {
         activeImageIndex
       } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -8442,7 +8448,7 @@ function useImageLightbox(initialProps) {
       const triggerImage = ((_triggerImageRefs = triggerImageRefs[activeImageIndex]) === null || _triggerImageRefs === void 0 ? void 0 : _triggerImageRefs.current) || findImage(triggerElement);
 
       // Inject the trigger image as loading placeholder for better loading state
-      const imagesWithFallbackSize = imagesPropsRef.current.map((image, idx) => {
+      const imagesWithFallbackSize = (_propsRef$current2 = propsRef.current) === null || _propsRef$current2 === void 0 ? void 0 : (_propsRef$current2$im = _propsRef$current2.images) === null || _propsRef$current2$im === void 0 ? void 0 : _propsRef$current2$im.map((image, idx) => {
         if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
           return _objectSpread2(_objectSpread2({}, image), {}, {
             loadingPlaceholderImageRef: {
@@ -8455,7 +8461,7 @@ function useImageLightbox(initialProps) {
       await startViewTransition({
         changes: () => {
           // Open lightbox with setup props
-          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2({}, prevProps), {}, {
+          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2(_objectSpread2({}, prevProps), propsRef.current), {}, {
             activeImageRef: currentImageRef,
             parentElement: {
               current: triggerElement
@@ -8498,7 +8504,7 @@ function useImageLightbox(initialProps) {
   };
 }
 
-const _excluded$B = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
+const _excluded$A = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
 const Inner = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -8514,7 +8520,7 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
       zoomInButtonProps,
       activeImageRef: propImageRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   const currentPaginationItemRef = React.useRef(null);
   const footerRef = React.useRef(null);
   const imageRef = React.useRef(null);
@@ -8564,7 +8570,7 @@ const ImageLightbox = Object.assign(Inner, {
   useImageLightbox
 });
 
-const _excluded$C = ["className", "color", "colorVariant", "typography", "children", "wrap"];
+const _excluded$B = ["className", "color", "colorVariant", "typography", "children", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -8601,7 +8607,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   const fontColorClassName = color && getFontColorClassName(color, colorVariant);
   const typographyClassName = typography && getTypographyClassName(typography);
   return (
@@ -8647,7 +8653,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$D = ["children", "className", "kind", "theme"];
+const _excluded$C = ["children", "className", "kind", "theme"];
 
 /**
  * Defines the props of the component.
@@ -8685,7 +8691,7 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
       kind,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   const {
     color
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
@@ -8703,7 +8709,7 @@ InputHelper.displayName = COMPONENT_NAME$A;
 InputHelper.className = CLASSNAME$x;
 InputHelper.defaultProps = DEFAULT_PROPS$s;
 
-const _excluded$E = ["children", "className", "htmlFor", "isRequired", "theme"];
+const _excluded$D = ["children", "className", "htmlFor", "isRequired", "theme"];
 
 /**
  * Defines the props of the component.
@@ -8741,7 +8747,7 @@ const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
       isRequired,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React.createElement("label", _extends({
     ref: ref
   }, forwardedProps, {
@@ -8757,7 +8763,7 @@ InputLabel.displayName = COMPONENT_NAME$B;
 InputLabel.className = CLASSNAME$y;
 InputLabel.defaultProps = DEFAULT_PROPS$t;
 
-const _excluded$F = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
+const _excluded$E = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -8797,7 +8803,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -8888,7 +8894,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
 Lightbox.displayName = COMPONENT_NAME$C;
 Lightbox.className = CLASSNAME$z;
 
-const _excluded$G = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+const _excluded$F = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
 
 /**
  * Defines the props of the component.
@@ -8951,7 +8957,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       typography
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   const renderedChildren = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React.createElement(Icon, {
     icon: leftIcon,
     className: `${CLASSNAME$A}__left-icon`,
@@ -8999,7 +9005,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
 Link.displayName = COMPONENT_NAME$D;
 Link.className = CLASSNAME$A;
 
-const _excluded$H = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
+const _excluded$G = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
 
 /**
  * Defines the props of the component.
@@ -9044,7 +9050,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       titleHeading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
   const TitleHeading = titleHeading;
   return /*#__PURE__*/React.createElement("article", _extends({
@@ -9099,7 +9105,7 @@ LinkPreview.displayName = COMPONENT_NAME$E;
 LinkPreview.className = CLASSNAME$B;
 LinkPreview.defaultProps = DEFAULT_PROPS$u;
 
-const _excluded$I = ["className"];
+const _excluded$H = ["className"];
 
 /**
  * Defines the props of the component.
@@ -9126,7 +9132,7 @@ const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9138,7 +9144,7 @@ const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
 ListDivider.displayName = COMPONENT_NAME$F;
 ListDivider.className = CLASSNAME$C;
 
-const _excluded$J = ["children", "className"];
+const _excluded$I = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -9166,7 +9172,7 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9178,7 +9184,7 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME$G;
 ListSubheader.className = CLASSNAME$D;
 
-const _excluded$K = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
+const _excluded$J = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
 
 /**
  * Defines the props of the component.
@@ -9203,7 +9209,7 @@ const CONFIG$1 = {
     icon: mdiAlert
   },
   [Kind.info]: {
-    color: ColorPalette.dark,
+    color: ColorPalette.blue,
     icon: mdiInformation
   },
   [Kind.success]: {
@@ -9232,7 +9238,7 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$K);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   const {
     color,
     icon
@@ -9267,7 +9273,7 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
 Message.displayName = COMPONENT_NAME$H;
 Message.className = CLASSNAME$E;
 
-const _excluded$L = ["className", "theme", "thumbnails", "onImageClick"],
+const _excluded$K = ["className", "theme", "thumbnails", "onImageClick"],
   _excluded2$1 = ["image", "onClick", "align"];
 
 /**
@@ -9305,7 +9311,7 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
       thumbnails,
       onImageClick
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const handleImageClick = useMemo(() => {
     if (!onImageClick) return undefined;
     return (index, onClick) => event => {
@@ -9360,7 +9366,7 @@ function forwardRefPolymorphic(render) {
   return /*#__PURE__*/React.forwardRef(render);
 }
 
-const _excluded$M = ["className", "icon", "label", "isCurrentPage", "as"];
+const _excluded$L = ["className", "icon", "label", "isCurrentPage", "as"];
 
 /** Make `href` required when `as` is `a` */
 
@@ -9385,7 +9391,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
       isCurrentPage,
       as: Element = 'a'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const theme = useContext(ThemeContext);
   const {
     tooltipLabel,
@@ -9429,7 +9435,7 @@ const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation.vertical
 });
 
-const _excluded$N = ["children", "className", "label", "icon"];
+const _excluded$M = ["children", "className", "label", "icon"];
 /**
  * Component display name.
  */
@@ -9446,10 +9452,10 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
       label,
       icon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef(null);
-  const sectionId = useMemo(() => uniqueId('section'), []);
+  const sectionId = useId();
   const {
     orientation
   } = useContext(NavigationContext) || {};
@@ -9511,7 +9517,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   className: CLASSNAME$H
 });
 
-const _excluded$O = ["children", "className", "theme", "orientation"];
+const _excluded$N = ["children", "className", "theme", "orientation"];
 /**
  * Component display name.
  */
@@ -9531,7 +9537,7 @@ forwardRef((props, ref) => {
       theme,
       orientation
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$O);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: theme
   }, /*#__PURE__*/React.createElement("nav", _extends({
@@ -9569,7 +9575,7 @@ const NOTIFICATION_CONFIGURATION = {
     icon: mdiAlert
   },
   info: {
-    color: 'dark',
+    color: 'blue',
     icon: mdiInformation
   },
   success: {
@@ -9582,7 +9588,7 @@ const NOTIFICATION_CONFIGURATION = {
   }
 };
 
-const _excluded$P = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
+const _excluded$O = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
 
 /**
  * Defines the props of the component.
@@ -9629,7 +9635,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       usePortal,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$P);
+    forwardedProps = _objectWithoutProperties(props, _excluded$O);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -9687,7 +9693,7 @@ Notification.displayName = COMPONENT_NAME$M;
 Notification.className = CLASSNAME$J;
 Notification.defaultProps = DEFAULT_PROPS$w;
 
-const _excluded$Q = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
+const _excluded$P = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
 
 /**
  * PopoverDialog props.
@@ -9725,7 +9731,7 @@ const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
       label = ariaLabel,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$P);
   return /*#__PURE__*/React.createElement(Popover, _extends({}, forwardedProps, {
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -9749,7 +9755,7 @@ PopoverDialog.displayName = COMPONENT_NAME$N;
 PopoverDialog.className = CLASSNAME$K;
 PopoverDialog.defaultProps = DEFAULT_PROPS$x;
 
-const _excluded$R = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
+const _excluded$Q = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
 
 /**
  * Defines the props of the component.
@@ -9795,7 +9801,7 @@ const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
       thumbnailProps,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$R);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -9840,7 +9846,7 @@ PostBlock.displayName = COMPONENT_NAME$O;
 PostBlock.className = CLASSNAME$L;
 PostBlock.defaultProps = DEFAULT_PROPS$y;
 
-const _excluded$S = ["className", "theme"];
+const _excluded$R = ["className", "theme"];
 /**
  * Component display name.
  */
@@ -9870,7 +9876,7 @@ const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$S);
+    forwardedProps = _objectWithoutProperties(props, _excluded$R);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9888,7 +9894,7 @@ ProgressLinear.displayName = COMPONENT_NAME$P;
 ProgressLinear.className = CLASSNAME$M;
 ProgressLinear.defaultProps = DEFAULT_PROPS$z;
 
-const _excluded$T = ["className", "theme", "size"];
+const _excluded$S = ["className", "theme", "size"];
 
 /**
  * Progress sizes.
@@ -9929,7 +9935,7 @@ const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$T);
+    forwardedProps = _objectWithoutProperties(props, _excluded$S);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9958,7 +9964,7 @@ ProgressCircular.displayName = COMPONENT_NAME$Q;
 ProgressCircular.className = CLASSNAME$N;
 ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
-const _excluded$U = ["className", "theme", "variant"];
+const _excluded$T = ["className", "theme", "variant"];
 
 /**
  * Progress variants.
@@ -10004,7 +10010,7 @@ const Progress = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$U);
+    forwardedProps = _objectWithoutProperties(props, _excluded$T);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10093,9 +10099,8 @@ const useTabProviderContext = (type, originalId) => {
   const [state, dispatch] = context;
 
   // Current tab or tab panel id.
-  const id = useMemo(() => originalId || `${type}-${uid()}`,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
+  const generatedId = useId();
+  const id = originalId || generatedId;
   useEffect(() => {
     // On mount: register tab or tab panel id.
     dispatch({
@@ -10142,7 +10147,7 @@ const useTabProviderContextState = () => {
   return context === null || context === void 0 ? void 0 : context[0];
 };
 
-const _excluded$V = ["children", "onChange"];
+const _excluded$U = ["children", "onChange"];
 const DEFAULT_PROPS$C = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -10164,7 +10169,7 @@ const ProgressTrackerProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$V);
+    propState = _objectWithoutProperties(props, _excluded$U);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -10268,7 +10273,7 @@ const useRovingTabIndex = _ref => {
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$W = ["aria-label", "children", "className"];
+const _excluded$V = ["aria-label", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -10305,7 +10310,7 @@ const ProgressTracker = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
+    forwardedProps = _objectWithoutProperties(props, _excluded$V);
   const stepListRef = React.useRef(null);
   useRovingTabIndex({
     parentRef: stepListRef,
@@ -10346,7 +10351,7 @@ ProgressTracker.displayName = COMPONENT_NAME$S;
 ProgressTracker.className = CLASSNAME$P;
 ProgressTracker.defaultProps = DEFAULT_PROPS$D;
 
-const _excluded$X = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$W = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -10391,7 +10396,7 @@ const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -10458,7 +10463,7 @@ ProgressTrackerStep.displayName = COMPONENT_NAME$T;
 ProgressTrackerStep.className = CLASSNAME$Q;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$E;
 
-const _excluded$Y = ["children", "id", "className", "isActive"];
+const _excluded$X = ["children", "id", "className", "isActive"];
 
 /**
  * Defines the props of the component.
@@ -10495,7 +10500,7 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -10515,7 +10520,7 @@ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$U;
 ProgressTrackerStepPanel.className = CLASSNAME$R;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$F;
 
-const _excluded$Z = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$Y = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -10562,8 +10567,9 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
-  const inputId = useMemo(() => id || `${CLASSNAME$S.toLowerCase()}-${uid()}`, [id]);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(value, name, event);
@@ -10615,7 +10621,7 @@ RadioButton.displayName = COMPONENT_NAME$V;
 RadioButton.className = CLASSNAME$S;
 RadioButton.defaultProps = DEFAULT_PROPS$G;
 
-const _excluded$_ = ["children", "className"];
+const _excluded$Z = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -10643,7 +10649,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$_);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10687,7 +10693,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$$ = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
+const _excluded$_ = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
 
 /** The display name of the component. */
 const COMPONENT_NAME$X = 'Select';
@@ -10727,8 +10733,9 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
       value,
       variant = DEFAULT_PROPS$H.variant
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$$);
-  const selectId = useMemo(() => id || `select-${uid()}`, [id]);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$_);
+  const generatedSelectId = useId();
+  const selectId = id || generatedSelectId;
   const anchorRef = useRef(null);
   const selectRef = useRef(null);
   const dropdownRef = useRef(null);
@@ -10801,7 +10808,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   }, helper));
 };
 
-const _excluded$10 = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasError", "hasInputClear", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$$ = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasError", "hasInputClear", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
 
 /** The display name of the component. */
 const COMPONENT_NAME$Y = 'Select';
@@ -10841,7 +10848,7 @@ const SelectField = _ref => {
       variant,
       selectElementRef
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$10);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$$);
   return /*#__PURE__*/React.createElement(React.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$V}__header`
   }, /*#__PURE__*/React.createElement(InputLabel, {
@@ -10921,7 +10928,7 @@ Select.className = CLASSNAME$V;
 Select.defaultProps = DEFAULT_PROPS$I;
 Select.className = CLASSNAME$V;
 
-const _excluded$11 = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$10 = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
 
 /** Defines the props of the component. */
 
@@ -10972,7 +10979,7 @@ const SelectMultipleField = _ref => {
       variant,
       selectElementRef
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$11);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$10);
   return /*#__PURE__*/React.createElement(React.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$W}__header`
   }, /*#__PURE__*/React.createElement(InputLabel, {
@@ -11042,7 +11049,7 @@ SelectMultiple.displayName = COMPONENT_NAME$Z;
 SelectMultiple.className = CLASSNAME$W;
 SelectMultiple.defaultProps = DEFAULT_PROPS$J;
 
-const _excluded$12 = ["children", "className", "theme"];
+const _excluded$11 = ["children", "className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -11071,7 +11078,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$11);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref
@@ -11084,7 +11091,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
 SideNavigation.displayName = COMPONENT_NAME$_;
 SideNavigation.className = CLASSNAME$X;
 
-const _excluded$13 = ["linkAs", "href"];
+const _excluded$12 = ["linkAs", "href"];
 /**
  * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
  */
@@ -11093,7 +11100,7 @@ const renderButtonOrLink = function (props) {
       linkAs,
       href
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$13);
+    forwardedProps = _objectWithoutProperties(props, _excluded$12);
   for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     children[_key - 1] = arguments[_key];
   }
@@ -11103,7 +11110,7 @@ const renderButtonOrLink = function (props) {
   }, forwardedProps), ...children);
 };
 
-const _excluded$14 = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
+const _excluded$13 = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
 
 /**
  * Defines the props of the component.
@@ -11150,12 +11157,12 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
       toggleButtonProps,
       closeMode = 'unmount'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$14);
+    forwardedProps = _objectWithoutProperties(props, _excluded$13);
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
   const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
-  const contentId = React.useMemo(uid, []);
+  const contentId = useId();
   const ariaProps = {};
   if (hasContent) {
     ariaProps['aria-expanded'] = !!showChildren;
@@ -11212,7 +11219,7 @@ SideNavigationItem.displayName = COMPONENT_NAME$$;
 SideNavigationItem.className = CLASSNAME$Y;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$K;
 
-const _excluded$15 = ["className", "size", "color", "theme"];
+const _excluded$14 = ["className", "size", "color", "theme"];
 
 /**
  * Defines the props of the component.
@@ -11246,7 +11253,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$15);
+    forwardedProps = _objectWithoutProperties(props, _excluded$14);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11262,7 +11269,7 @@ SkeletonCircle.displayName = COMPONENT_NAME$10;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$L;
 SkeletonCircle.className = CLASSNAME$Z;
 
-const _excluded$16 = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
+const _excluded$15 = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
 
 /**
  * Skeleton variants.
@@ -11309,7 +11316,7 @@ const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$16);
+    forwardedProps = _objectWithoutProperties(props, _excluded$15);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11330,7 +11337,7 @@ SkeletonRectangle.displayName = COMPONENT_NAME$11;
 SkeletonRectangle.className = CLASSNAME$_;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$M;
 
-const _excluded$17 = ["className", "theme", "typography", "width", "color"];
+const _excluded$16 = ["className", "theme", "typography", "width", "color"];
 
 /**
  * Defines the props of the component.
@@ -11365,7 +11372,7 @@ const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$17);
+    forwardedProps = _objectWithoutProperties(props, _excluded$16);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11420,7 +11427,7 @@ const clamp = (value, min, max) => {
   return value;
 };
 
-const _excluded$18 = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
+const _excluded$17 = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
 
 /**
  * Defines the props of the component.
@@ -11495,8 +11502,9 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$18);
-  const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
+    forwardedProps = _objectWithoutProperties(props, _excluded$17);
+  const generatedId = useId();
+  const sliderId = id || generatedId;
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
   const sliderRef = useRef(null);
 
@@ -11843,8 +11851,10 @@ const useSlideshowControls = _ref => {
     if (!onChange) return;
     onChange(currentIndex);
   }, [currentIndex, onChange]);
-  const slideshowId = useMemo(() => id || uniqueId('slideshow'), [id]);
-  const slideshowSlidesId = useMemo(() => slidesId || uniqueId('slideshow-slides'), [slidesId]);
+  const generatedSlideshowId = useId();
+  const slideshowId = id || generatedSlideshowId;
+  const generatedSlidesId = useId();
+  const slideshowSlidesId = slidesId || generatedSlidesId;
   const toggleAutoPlay = () => {
     if (isSlideshowAutoPlaying) {
       stopAutoPlay();
@@ -12001,7 +12011,7 @@ const useSlideFocusManagement = _ref => {
   }, [isSlideDisplayed, slideRef]);
 };
 
-const _excluded$19 = ["className", "children", "role", "label", "isDisplayed"];
+const _excluded$18 = ["className", "children", "role", "label", "isDisplayed"];
 
 /**
  * Defines the props of the component.
@@ -12033,7 +12043,7 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       isDisplayed
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$18);
   const groupRef = React.useRef(null);
   useSlideFocusManagement({
     isSlideDisplayed: isDisplayed,
@@ -12052,7 +12062,7 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
 SlideshowItemGroup.displayName = COMPONENT_NAME$14;
 SlideshowItemGroup.className = CLASSNAME$11;
 
-const _excluded$1a = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
+const _excluded$19 = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
 
 /**
  * Defines the props of the component.
@@ -12088,7 +12098,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
       slidesId,
       slideGroupLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$19);
   // Number of slideshow items.
   const itemsCount = React.Children.count(children);
   const {
@@ -12170,7 +12180,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
 Slideshow.displayName = 'Slideshow';
 Slideshow.defaultProps = DEFAULT_PROPS$P;
 
-const _excluded$1b = ["className", "children"];
+const _excluded$1a = ["className", "children"];
 
 /**
  * Defines the props of the component.
@@ -12198,7 +12208,7 @@ const SlideshowItem = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -12266,7 +12276,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
   }, [activeIndex, slideCount]);
 }
 
-const _excluded$1c = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
+const _excluded$1b = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
   _excluded2$2 = ["className", "label"];
 
 /**
@@ -12316,7 +12326,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       paginationItemLabel,
       paginationItemProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
   let parent;
   if (WINDOW) {
     // Checking window object to avoid errors in SSR.
@@ -12418,7 +12428,7 @@ const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS$1
 });
 
-const _excluded$1d = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
+const _excluded$1c = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
 /**
  * Component display name.
  */
@@ -12452,7 +12462,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
       hasControls,
       slideGroupLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
   const wrapperRef = React.useRef(null);
   const startIndexVisible = activeIndex;
   const endIndexVisible = startIndexVisible + 1;
@@ -12498,7 +12508,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
 Slides.displayName = COMPONENT_NAME$17;
 Slides.className = CLASSNAME$14;
 
-const _excluded$1e = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
+const _excluded$1d = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -12546,8 +12556,9 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
-  const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -12601,7 +12612,7 @@ Switch.displayName = COMPONENT_NAME$18;
 Switch.className = CLASSNAME$15;
 Switch.defaultProps = DEFAULT_PROPS$R;
 
-const _excluded$1f = ["children", "className", "hasBefore", "hasDividers", "theme"];
+const _excluded$1e = ["children", "className", "hasBefore", "hasDividers", "theme"];
 
 /**
  * Defines the props of the component.
@@ -12639,7 +12650,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
       hasDividers,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   return /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, forwardedProps, {
@@ -12655,7 +12666,7 @@ Table.displayName = COMPONENT_NAME$19;
 Table.className = CLASSNAME$16;
 Table.defaultProps = DEFAULT_PROPS$S;
 
-const _excluded$1g = ["children", "className"];
+const _excluded$1f = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -12683,7 +12694,7 @@ const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
   return /*#__PURE__*/React.createElement("tbody", _extends({
     ref: ref
   }, forwardedProps, {
@@ -12695,7 +12706,7 @@ const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
 TableBody.displayName = COMPONENT_NAME$1a;
 TableBody.className = CLASSNAME$17;
 
-const _excluded$1h = ["children", "className", "icon", "isSortable", "onHeaderClick", "sortOrder", "variant"];
+const _excluded$1g = ["children", "className", "icon", "isSortable", "onHeaderClick", "sortOrder", "variant"];
 
 /**
  * Table head cell sort order.
@@ -12750,7 +12761,7 @@ const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
       sortOrder,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
 
   // Use button if clickable
   const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -12803,7 +12814,7 @@ TableCell.displayName = COMPONENT_NAME$1b;
 TableCell.className = CLASSNAME$18;
 TableCell.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$1i = ["children", "className"];
+const _excluded$1h = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -12836,7 +12847,7 @@ const TableHeader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
   return /*#__PURE__*/React.createElement("thead", _extends({
     ref: ref
   }, forwardedProps, {
@@ -12849,7 +12860,7 @@ TableHeader.displayName = COMPONENT_NAME$1c;
 TableHeader.className = CLASSNAME$19;
 TableHeader.defaultProps = DEFAULT_PROPS$U;
 
-const _excluded$1j = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
+const _excluded$1i = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
 
 /**
  * Defines the props of the component.
@@ -12886,7 +12897,7 @@ const TableRow = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled = disabled,
       isSelected
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   return /*#__PURE__*/React.createElement("tr", _extends({
     ref: ref,
     tabIndex: isClickable && !isDisabled ? 0 : -1
@@ -12904,7 +12915,7 @@ TableRow.displayName = COMPONENT_NAME$1d;
 TableRow.className = CLASSNAME$1a;
 TableRow.defaultProps = DEFAULT_PROPS$V;
 
-const _excluded$1k = ["children", "onChange"];
+const _excluded$1j = ["children", "onChange"];
 const DEFAULT_PROPS$W = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -12924,7 +12935,7 @@ const TabProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$1k);
+    propState = _objectWithoutProperties(props, _excluded$1j);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -12952,7 +12963,7 @@ const TabProvider = props => {
 };
 TabProvider.defaultProps = DEFAULT_PROPS$W;
 
-const _excluded$1l = ["aria-label", "children", "className", "layout", "position", "theme"];
+const _excluded$1k = ["aria-label", "children", "className", "layout", "position", "theme"];
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
   TabListLayout["clustered"] = "clustered";
   TabListLayout["fixed"] = "fixed";
@@ -13000,7 +13011,7 @@ const TabList = /*#__PURE__*/forwardRef((props, ref) => {
       position,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   const tabListRef = React.useRef(null);
   useRovingTabIndex({
     parentRef: tabListRef,
@@ -13027,7 +13038,7 @@ TabList.displayName = COMPONENT_NAME$1e;
 TabList.className = CLASSNAME$1b;
 TabList.defaultProps = DEFAULT_PROPS$X;
 
-const _excluded$1m = ["className", "disabled", "icon", "iconProps", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$1l = ["className", "disabled", "icon", "iconProps", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -13071,7 +13082,7 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -13120,7 +13131,7 @@ Tab.displayName = COMPONENT_NAME$1f;
 Tab.className = CLASSNAME$1c;
 Tab.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1n = ["children", "id", "className", "isActive"];
+const _excluded$1m = ["children", "id", "className", "isActive"];
 
 /**
  * Defines the props of the component.
@@ -13157,7 +13168,7 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -13177,7 +13188,7 @@ TabPanel.displayName = COMPONENT_NAME$1g;
 TabPanel.className = CLASSNAME$1d;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1o = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
+const _excluded$1n = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
   _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "labelProps", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
@@ -13262,7 +13273,7 @@ const renderInputNative = props => {
       hasError,
       describedById
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const ref = useRef(null);
 
@@ -13349,7 +13360,8 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       afterElement
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2$3);
-  const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+  const generatedTextFieldId = useId();
+  const textFieldId = id || generatedTextFieldId;
   /** Keep a clean local input ref to manage focus */
   const localInputRef = useRef(null);
   /** Merge prop input ref and local input ref */
@@ -13360,8 +13372,8 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
    * we want to first use the most important one, which is the errorId. That way, screen readers will read first
    * the error and then the helper
    */
-  const helperId = helper ? `text-field-helper-${uid()}` : undefined;
-  const errorId = error ? `text-field-error-${uid()}` : undefined;
+  const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;
+  const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
   const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
   const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   const [isFocus, setFocus] = useState(false);
@@ -13646,7 +13658,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1p = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "loadingPlaceholderImageRef", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1o = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "loadingPlaceholderImageRef", "size", "theme", "variant", "linkProps", "linkAs"];
 
 /**
  * Defines the props of the component.
@@ -13705,7 +13717,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       linkProps,
       linkAs
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   const [imgElement, setImgElement] = useState();
 
   // Image loading state.
@@ -13834,7 +13846,7 @@ const ThumbnailObjectFit = {
   contain: 'contain'
 };
 
-const _excluded$1q = ["after", "before", "className", "label"];
+const _excluded$1p = ["after", "before", "className", "label"];
 
 /**
  * Defines the props of the component.
@@ -13869,7 +13881,7 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       label
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -13907,6 +13919,8 @@ const useInjectTooltipRef = (children, setAnchorElement, isOpen, id, label) => {
   // Only add description when open
   const describedBy = isOpen ? id : undefined;
   return useMemo(() => {
+    if (!label) return children;
+
     // Non-disabled element
     if ( /*#__PURE__*/React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
       const ref = mergeRefs(children.ref, setAnchorElement);
@@ -14066,7 +14080,7 @@ function useTooltipOpen(delay, anchorElement) {
   };
 }
 
-const _excluded$1r = ["label", "children", "className", "delay", "placement", "forceOpen"];
+const _excluded$1q = ["label", "children", "className", "delay", "placement", "forceOpen"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -14113,12 +14127,12 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       forceOpen
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1r);
-  // Disable in SSR or without a label.
-  if (!DOCUMENT || !label) {
-    return /*#__PURE__*/React.createElement(TooltipContextProvider, null, children);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
+  // Disable in SSR.
+  if (!DOCUMENT) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
-  const id = useMemo(() => `tooltip-${uid()}`, []);
+  const id = useId();
   const [popperElement, setPopperElement] = useState(null);
   const [anchorElement, setAnchorElement] = useState(null);
   const {
@@ -14138,7 +14152,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     isOpen: isActivated,
     onPopperMount
   } = useTooltipOpen(delay, anchorElement);
-  const isOpen = isActivated || forceOpen;
+  const isOpen = (isActivated || forceOpen) && !!label;
   const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipContextProvider, null, wrappedChildren), isOpen && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(ref, setPopperElement, onPopperMount)
@@ -14163,7 +14177,7 @@ Tooltip.displayName = COMPONENT_NAME$1k;
 Tooltip.className = CLASSNAME$1h;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1s = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
+const _excluded$1r = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
 
 /**
  * Uploader variants.
@@ -14224,10 +14238,11 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
       variant,
       fileInputProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1r);
   // Adjust to square aspect ratio when using circle variants.
   const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
-  const inputId = React.useMemo(() => (fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id) || uniqueId('uploader-input-'), [fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id]);
+  const generatedInputId = useId();
+  const inputId = (fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id) || generatedInputId;
   const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
   const wrapper = fileInputProps ? {
     Component: 'label',
@@ -14284,7 +14299,7 @@ Uploader.displayName = COMPONENT_NAME$1l;
 Uploader.className = CLASSNAME$1i;
 Uploader.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1t = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
+const _excluded$1s = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
 
 /**
  * User block sizes.
@@ -14338,7 +14353,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1s);
   let componentSize = size;
 
   // Special case - When using vertical orientation force the size to be Sizes.l.
@@ -14370,7 +14385,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return /*#__PURE__*/React.createElement(NameComponent, nProps, name);
   }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
-  const fieldsBlock = fields && componentSize !== Size.s && /*#__PURE__*/React.createElement("div", {
+  const fieldsBlock = fields && componentSize !== Size.s && componentSize !== Size.xs && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1j}__fields`
   }, fields.map((field, idx) => /*#__PURE__*/React.createElement("span", {
     key: idx,