@lumx/react 3.7.6-test.1 → 3.8.1-alpha.0

package/index.js

@@ -6,7 +6,7 @@ import noop from 'lodash/noop';
 import get from 'lodash/get';
 import isFunction from 'lodash/isFunction';
 import last from 'lodash/last';
-import { createPortal } from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
 import pull from 'lodash/pull';
 import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
@@ -17,6 +17,7 @@ import memoize from 'lodash/memoize';
 import castArray from 'lodash/castArray';
 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';
@@ -341,7 +342,7 @@ 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 mdiMenuDown='m7 10 5 5 5-5z';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';
+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);
@@ -1255,6 +1256,18 @@ const isComponentType = type => node => /*#__PURE__*/React.isValidElement(node)
  * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
  */
 
+/**
+ * Rectangle size
+ */
+
+/**
+ * Maybe a HTMLElement or a React ref of a HTMLElement
+ */
+
+/**
+ * A point coordinate in 2D space
+ */
+
 const _excluded$6 = ["linkAs"];
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -1589,6 +1602,11 @@ ButtonGroup.defaultProps = DEFAULT_PROPS$7;
 
 const _excluded$b = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
+/**
+ * Intermediate state of checkbox.
+ */
+const INTERMEDIATE_STATE = 'intermediate';
+
 /**
  * Defines the props of the component.
  */
@@ -1635,17 +1653,24 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       inputProps = {}
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$b);
+  const localInputRef = React.useRef(null);
   const inputId = useMemo(() => id || `${CLASSNAME$8.toLowerCase()}-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
     }
   };
+  const intermediateState = isChecked === INTERMEDIATE_STATE;
+  React.useEffect(() => {
+    const input = localInputRef.current;
+    if (input) input.indeterminate = intermediateState;
+  }, [intermediateState]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      isChecked,
+      // Whether state is intermediate class name will "-checked"
+      isChecked: intermediateState ? true : isChecked,
       isDisabled,
       isUnchecked: !isChecked,
       prefix: CLASSNAME$8,
@@ -1654,7 +1679,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__input-wrapper`
   }, /*#__PURE__*/React.createElement("input", _extends({
-    ref: inputRef,
+    ref: useMergeRefs(inputRef, localInputRef),
     type: "checkbox",
     id: inputId,
     className: `${CLASSNAME$8}__input-native`,
@@ -1664,7 +1689,8 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
     value: value,
     checked: isChecked,
     onChange: handleChange,
-    "aria-describedby": helper ? `${inputId}-helper` : undefined
+    "aria-describedby": helper ? `${inputId}-helper` : undefined,
+    "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked)
   }, inputProps)), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__input-placeholder`
   }, /*#__PURE__*/React.createElement("div", {
@@ -1672,7 +1698,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__input-indicator`
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: mdiCheck
+    icon: intermediateState ? mdiMinus : mdiCheck
   })))), /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$8}__content`
   }, label && /*#__PURE__*/React.createElement(InputLabel, {
@@ -7791,7 +7817,736 @@ ImageBlock.displayName = COMPONENT_NAME$x;
 ImageBlock.className = CLASSNAME$u;
 ImageBlock.defaultProps = DEFAULT_PROPS$q;
 
-const _excluded$z = ["className", "color", "colorVariant", "typography", "children", "wrap"];
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$y = 'ImageLightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$v = getRootClassName(COMPONENT_NAME$y);
+
+/**
+ * Observe element size (only works if it's size depends on the window size).
+ *
+ * (Not using ResizeObserver for better browser backward compat)
+ *
+ * @param elementRef Element to observe
+ * @return the size and a manual update callback
+ */
+function useElementSizeDependentOfWindowSize(elementRef) {
+  const [size, setSize] = React.useState(null);
+  const updateSize = React.useMemo(() => throttle(() => {
+    var _elementRef$current;
+    const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+    if (newSize) setSize(newSize);
+  }, 10), [elementRef]);
+  React.useEffect(() => {
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    return () => window.removeEventListener('resize', updateSize);
+  }, [updateSize]);
+  return [size, updateSize];
+}
+
+/** Get natural image size after load. */
+function useImageSize(imgRef, getInitialSize) {
+  const [imageSize, setImageSize] = React.useState(getInitialSize || null);
+  React.useEffect(() => {
+    const {
+      current: img
+    } = imgRef;
+    if (!img) {
+      return undefined;
+    }
+    const onLoad = () => setImageSize({
+      width: img.naturalWidth,
+      height: img.naturalHeight
+    });
+    img.addEventListener('load', onLoad);
+    return () => img.removeEventListener('load', onLoad);
+  }, [imgRef]);
+  return imageSize;
+}
+
+/** Check if user prefers reduced motion */
+function getPrefersReducedMotion() {
+  var _WINDOW$matchMedia;
+  return WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$matchMedia = WINDOW.matchMedia) === null || _WINDOW$matchMedia === void 0 ? void 0 : _WINDOW$matchMedia.call(WINDOW, '(prefers-reduced-motion: reduce)').matches;
+}
+
+/** Minimal recursive deep equal of JS values */
+function isEqual(obj1, obj2) {
+  if (obj1 === obj2) return true;
+  if (typeof obj1 === 'object' && typeof obj2 === 'object') {
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) return false;
+    return keys1.every(key1 => isEqual(obj1[key1], obj2[key1]));
+  }
+  return false;
+}
+
+/**
+ * Listen to mouse wheel + ctrl and multi-pointer pinch to zoom
+ */
+function usePointerZoom(scrollAreaRef, onScaleChange, animateScroll) {
+  const [isPointerZooming, setPointerZooming] = React.useState(false);
+  React.useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea || !onScaleChange) {
+      return undefined;
+    }
+    let animationFrame;
+    let zoomStateTimeoutId;
+    function updateScaleOnNextFrame(newScale, mousePosition) {
+      // Cancel previously scheduled frame
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Cancel previously scheduled zoom state change
+      if (zoomStateTimeoutId) clearTimeout(zoomStateTimeoutId);
+      function nextFrame() {
+        setPointerZooming(true);
+        onScaleChange === null || onScaleChange === void 0 ? void 0 : onScaleChange(newScale);
+        animationFrame = null;
+        // Wait a bit before indicating the pointer zooming is finished
+        zoomStateTimeoutId = setTimeout(() => setPointerZooming(false), 100);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+
+      // Animate scroll in parallel (centering on the current mouse position)
+      animateScroll(mousePosition, {
+        width: scrollArea.scrollWidth,
+        height: scrollArea.scrollHeight
+      });
+    }
+    function onWheel(event) {
+      if (!event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      const newScale = Math.exp(-event.deltaY / 50);
+
+      // Update scale on next frame (focused on the mouse position)
+      updateScaleOnNextFrame(newScale, {
+        x: event.pageX,
+        y: event.pageY
+      });
+    }
+    const activePointers = {};
+    let prevDistance = null;
+    let previousCenterPoint = null;
+    function onPointerDown(event) {
+      activePointers[event.pointerId] = event;
+    }
+    function onPointerMove(event) {
+      // Update pointer in cache
+      if (activePointers[event.pointerId]) {
+        activePointers[event.pointerId] = event;
+      }
+      const pointers = Object.values(activePointers);
+
+      // Make sure we run computation on one of the pointer in the group
+      if (pointers[0].pointerId !== event.pointerId) {
+        return;
+      }
+
+      // Centered point between all pointers
+      const centerPoint = {
+        x: pointers.reduce((x, _ref) => {
+          let {
+            clientX
+          } = _ref;
+          return x + clientX;
+        }, 0) / pointers.length,
+        y: pointers.reduce((y, _ref2) => {
+          let {
+            clientY
+          } = _ref2;
+          return y + clientY;
+        }, 0) / pointers.length
+      };
+
+      // Movement of the center point
+      const deltaCenterPoint = previousCenterPoint && {
+        left: previousCenterPoint.x - centerPoint.x,
+        top: previousCenterPoint.y - centerPoint.y
+      };
+
+      // Pan X & Y
+      if (deltaCenterPoint) {
+        // Apply movement of the center point to the scroll
+        scrollArea.scrollBy({
+          top: deltaCenterPoint.top / 2,
+          left: deltaCenterPoint.left / 2
+        });
+      }
+
+      // Pinch to zoom
+      if (pointers.length === 2) {
+        const [pointer1, pointer2] = pointers;
+        const distance = Math.hypot(pointer2.clientX - pointer1.clientX, pointer2.clientY - pointer1.clientY);
+        if (prevDistance && deltaCenterPoint) {
+          const delta = prevDistance - distance;
+          const absDelta = Math.abs(delta);
+
+          // Zoom only if we are "pinching" more than we are moving the pointers
+          if (absDelta > Math.abs(deltaCenterPoint.left) && absDelta > Math.abs(deltaCenterPoint.top)) {
+            // Update scale on next frame (focused on the center point between the two pointers)
+            const newScale = Math.exp(-delta / 100);
+            updateScaleOnNextFrame(newScale, centerPoint);
+          }
+        }
+        prevDistance = distance;
+      }
+      previousCenterPoint = centerPoint;
+    }
+    function onPointerUp(event) {
+      prevDistance = null;
+      previousCenterPoint = null;
+      delete activePointers[event.pointerId];
+    }
+    scrollArea.addEventListener('wheel', onWheel, {
+      passive: false
+    });
+    const isMultiTouch = navigator.maxTouchPoints >= 2;
+    if (isMultiTouch) {
+      scrollArea.addEventListener('pointerdown', onPointerDown);
+      scrollArea.addEventListener('pointermove', onPointerMove);
+      scrollArea.addEventListener('pointerup', onPointerUp);
+    }
+    return () => {
+      scrollArea.removeEventListener('wheel', onWheel);
+      if (isMultiTouch) {
+        scrollArea.removeEventListener('pointerdown', onPointerDown);
+        scrollArea.removeEventListener('pointermove', onPointerMove);
+        scrollArea.removeEventListener('pointerup', onPointerUp);
+      }
+    };
+  }, [animateScroll, onScaleChange, scrollAreaRef]);
+  return isPointerZooming;
+}
+
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+function useAnimateScroll(scrollAreaRef) {
+  return React.useMemo(() => {
+    let animationFrame = null;
+    return function animate(centerPoint, initialScrollAreaSize) {
+      const scrollArea = scrollAreaRef.current;
+      if (!scrollArea) {
+        return;
+      }
+
+      // Cancel previously running animation
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Center on the given point or else on the scroll area visual center
+      const clientHeightRatio = centerPoint !== null && centerPoint !== void 0 && centerPoint.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
+      const clientWidthRatio = centerPoint !== null && centerPoint !== void 0 && centerPoint.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
+      const initialScrollHeight = (initialScrollAreaSize === null || initialScrollAreaSize === void 0 ? void 0 : initialScrollAreaSize.height) || scrollArea.scrollHeight;
+      const initialScrollWidth = (initialScrollAreaSize === null || initialScrollAreaSize === void 0 ? void 0 : initialScrollAreaSize.width) || scrollArea.scrollWidth;
+      const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
+      const heightRatio = heightCenter / initialScrollHeight;
+      const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
+      const widthRatio = widthCenter / initialScrollWidth;
+      let prevScrollHeight = 0;
+      let prevScrollWidth = 0;
+      function nextFrame() {
+        const {
+          scrollHeight,
+          scrollWidth,
+          clientHeight,
+          clientWidth
+        } = scrollArea;
+
+        // Scroll area stopped expanding => stop animation
+        if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+          animationFrame = null;
+          return;
+        }
+
+        // Compute next scroll position
+        const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+        const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+        scrollArea.scrollTo({
+          top,
+          left
+        });
+        prevScrollHeight = scrollHeight;
+        prevScrollWidth = scrollWidth;
+        animationFrame = requestAnimationFrame(nextFrame);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+    };
+  }, [scrollAreaRef]);
+}
+
+/** Internal image slide component for ImageLightbox */
+const ImageSlide = /*#__PURE__*/React.memo(props => {
+  const {
+    isActive,
+    scale,
+    onScaleChange,
+    image: {
+      image,
+      imgRef: propImgRef,
+      imgProps,
+      alt,
+      loadingPlaceholderImageRef
+    }
+  } = props;
+
+  // Get scroll area size
+  const scrollAreaRef = React.useRef(null);
+  const [scrollAreaSize, updateSize] = useElementSizeDependentOfWindowSize(scrollAreaRef);
+  React.useEffect(() => {
+    // Update size when active
+    if (isActive) updateSize();
+  }, [isActive, updateSize]);
+
+  // Get image size
+  const imgRef = React.useRef(null);
+  const imageSize = useImageSize(imgRef, () => {
+    const width = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : imgProps.width, 10);
+    const height = Number.parseInt(imgProps === null || imgProps === void 0 ? void 0 : imgProps.height, 10);
+    return width && height ? {
+      width,
+      height
+    } : null;
+  });
+
+  // Calculate new image size with scale
+  const scaledImageSize = React.useMemo(() => {
+    if (!scrollAreaSize || !imageSize) {
+      return null;
+    }
+    const horizontalScale = scrollAreaSize.width / imageSize.width;
+    const verticalScale = scrollAreaSize.height / imageSize.height;
+    const baseScale = Math.min(1, Math.min(horizontalScale, verticalScale));
+    return {
+      width: imageSize.width * baseScale * (scale !== null && scale !== void 0 ? scale : 1),
+      height: imageSize.height * baseScale * (scale !== null && scale !== void 0 ? scale : 1)
+    };
+  }, [scrollAreaSize, imageSize, scale]);
+
+  // Animate scroll to preserve the center of the current visible window in the scroll area
+  const animateScroll = useAnimateScroll(scrollAreaRef);
+
+  // Zoom via mouse wheel or multi-touch pinch zoom
+  const isPointerZooming = usePointerZoom(scrollAreaRef, onScaleChange, animateScroll);
+
+  // Animate scroll on scale change
+  React.useLayoutEffect(() => {
+    if (scale && !isPointerZooming) {
+      animateScroll();
+    }
+  }, [isPointerZooming, scale, animateScroll]);
+  const isScrollable = scaledImageSize && scrollAreaSize && (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);
+  return /*#__PURE__*/React.createElement(SlideshowItem, {
+    ref: scrollAreaRef
+    // Make it accessible to keyboard nav when the zone is scrollable
+    ,
+    tabIndex: isScrollable ? 0 : undefined,
+    className: `${CLASSNAME$v}__image-slide`
+  }, /*#__PURE__*/React.createElement(Thumbnail, {
+    imgRef: useMergeRefs(imgRef, propImgRef),
+    image: image,
+    alt: alt,
+    className: `${CLASSNAME$v}__thumbnail`,
+    imgProps: _objectSpread2(_objectSpread2({}, imgProps), {}, {
+      style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), scaledImageSize || {
+        maxHeight: scrollAreaSize === null || scrollAreaSize === void 0 ? void 0 : scrollAreaSize.height,
+        maxWidth: scrollAreaSize === null || scrollAreaSize === void 0 ? void 0 : scrollAreaSize.width
+      }), {}, {
+        // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
+        transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined
+      })
+    }),
+    loadingPlaceholderImageRef: loadingPlaceholderImageRef
+  }));
+}, isEqual);
+
+const _excluded$z = ["image", "imgRef"];
+/** Internal image slideshow component for ImageLightbox */
+const ImageSlideshow = _ref => {
+  var _images$activeIndex, _images$activeIndex2, _images$activeIndex3;
+  let {
+    activeImageIndex,
+    images,
+    slideGroupLabel,
+    zoomInButtonProps,
+    zoomOutButtonProps,
+    slideshowControlsProps,
+    currentPaginationItemRef,
+    footerRef,
+    activeImageRef
+  } = _ref;
+  const {
+    activeIndex,
+    slideshowId,
+    setSlideshow,
+    slideshowSlidesId,
+    slidesCount,
+    onNextClick,
+    onPaginationClick,
+    onPreviousClick,
+    toggleAutoPlay
+  } = SlideshowControls.useSlideshowControls({
+    itemsCount: images.length,
+    activeIndex: activeImageIndex
+  });
+
+  // Image metadata (caption)
+  const title = (_images$activeIndex = images[activeIndex]) === null || _images$activeIndex === void 0 ? void 0 : _images$activeIndex.title;
+  const description = (_images$activeIndex2 = images[activeIndex]) === null || _images$activeIndex2 === void 0 ? void 0 : _images$activeIndex2.description;
+  const tags = (_images$activeIndex3 = images[activeIndex]) === null || _images$activeIndex3 === void 0 ? void 0 : _images$activeIndex3.tags;
+  const metadata = title || description || tags ? /*#__PURE__*/React.createElement(ImageCaption, {
+    theme: "dark",
+    as: "div",
+    title: title,
+    description: description,
+    tags: tags,
+    align: "center"
+  }) : null;
+
+  // Slideshow controls
+  const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /*#__PURE__*/React.createElement(SlideshowControls, _extends({
+    theme: "dark",
+    activeIndex: activeIndex,
+    slidesCount: slidesCount,
+    onNextClick: onNextClick,
+    onPreviousClick: onPreviousClick,
+    onPaginationClick: onPaginationClick
+  }, slideshowControlsProps, {
+    paginationItemProps: index => {
+      var _slideshowControlsPro;
+      const props = (slideshowControlsProps === null || slideshowControlsProps === void 0 ? void 0 : (_slideshowControlsPro = slideshowControlsProps.paginationItemProps) === null || _slideshowControlsPro === void 0 ? void 0 : _slideshowControlsPro.call(slideshowControlsProps, index)) || {};
+      return _objectSpread2(_objectSpread2({}, props), {}, {
+        ref: mergeRefs(props === null || props === void 0 ? void 0 : props.ref,
+        // Focus the active pagination item once on mount
+        activeIndex === index ? currentPaginationItemRef : undefined)
+      });
+    }
+  })) : null;
+
+  // Zoom controls
+  const [scale, setScale] = React.useState(undefined);
+  const zoomEnabled = zoomInButtonProps && zoomOutButtonProps;
+  const onScaleChange = React.useMemo(() => {
+    if (!zoomEnabled) return undefined;
+    return newScale => {
+      setScale(function () {
+        let prevScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+        return Math.max(1, newScale * prevScale);
+      });
+    };
+  }, [zoomEnabled]);
+  const zoomIn = React.useCallback(() => onScaleChange === null || onScaleChange === void 0 ? void 0 : onScaleChange(1.5), [onScaleChange]);
+  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);
+  }, [activeIndex]);
+  const zoomControls = zoomEnabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, _extends({}, zoomInButtonProps, {
+    theme: "dark",
+    emphasis: "low",
+    icon: mdiMagnifyPlusOutline,
+    onClick: zoomIn
+  })), /*#__PURE__*/React.createElement(IconButton, _extends({}, zoomOutButtonProps, {
+    theme: "dark",
+    emphasis: "low",
+    isDisabled: !scale || scale <= 1,
+    icon: mdiMagnifyMinusOutline,
+    onClick: zoomOut
+  })));
+  const getImgRef = React.useMemo(() => memoize((index, isActive) => {
+    return mergeRefs(images === null || images === void 0 ? void 0 : images[index].imgRef, isActive ? activeImageRef : undefined);
+  },
+  // memoize based on both arguments
+  function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return args.join();
+  }), [images, activeImageRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slides, {
+    activeIndex: activeIndex,
+    theme: "dark",
+    slideGroupLabel: slideGroupLabel,
+    fillHeight: true,
+    id: slideshowId,
+    ref: setSlideshow,
+    slidesId: slideshowSlidesId,
+    toggleAutoPlay: toggleAutoPlay
+  }, images.map((_ref2, index) => {
+    let {
+        image,
+        imgRef
+      } = _ref2,
+      imageProps = _objectWithoutProperties(_ref2, _excluded$z);
+    const isActive = index === activeIndex;
+    return /*#__PURE__*/React.createElement(ImageSlide, {
+      isActive: isActive,
+      key: image,
+      image: _objectSpread2(_objectSpread2({}, imageProps), {}, {
+        image,
+        imgRef: getImgRef(index, isActive)
+      }),
+      scale: isActive ? scale : undefined,
+      onScaleChange: onScaleChange
+    });
+  })), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/React.createElement(FlexBox, {
+    ref: footerRef,
+    className: `${CLASSNAME$v}__footer`,
+    orientation: "vertical",
+    vAlign: "center",
+    gap: "big"
+  }, metadata, /*#__PURE__*/React.createElement(FlexBox, {
+    className: `${CLASSNAME$v}__footer-actions`,
+    orientation: "horizontal",
+    gap: "regular"
+  }, slideShowControls, zoomControls)));
+};
+
+/** Unref a react ref or element */
+function unref(maybeElement) {
+  if (maybeElement instanceof HTMLElement) return maybeElement;
+  return maybeElement === null || maybeElement === void 0 ? void 0 : maybeElement.current;
+}
+
+function setTransitionViewName(elementRef, name) {
+  const element = unref(elementRef);
+  if (element) element.style.viewTransitionName = name;
+}
+
+/**
+ * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
+ * user preference.
+ *
+ * @param changes                callback containing the changes to apply within the view transition.
+ * @param setViewTransitionName  set the `viewTransitionName` style on a `source` & `target` to morph these elements.
+ */
+async function startViewTransition(_ref) {
+  var _document, _document$startViewTr;
+  let {
+    changes,
+    viewTransitionName
+  } = _ref;
+  const start = (_document = document) === null || _document === void 0 ? void 0 : (_document$startViewTr = _document.startViewTransition) === null || _document$startViewTr === void 0 ? void 0 : _document$startViewTr.bind(document);
+  const prefersReducedMotion = getPrefersReducedMotion();
+  const {
+    flushSync
+  } = ReactDOM;
+  if (prefersReducedMotion || !start || !flushSync || !(viewTransitionName !== null && viewTransitionName !== void 0 && viewTransitionName.source) || !(viewTransitionName !== null && viewTransitionName !== void 0 && viewTransitionName.target)) {
+    // Skip, apply changes without a transition
+    changes();
+    return;
+  }
+
+  // Set transition name on source element
+  setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+
+  // Start view transition, apply changes & flush to DOM
+  await start(() => {
+    // Un-set transition name on source element
+    setTransitionViewName(viewTransitionName.source, null);
+    flushSync(changes);
+
+    // Set transition name on target element
+    setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+  }).updateCallbackDone;
+
+  // Un-set transition name on target element
+  setTransitionViewName(viewTransitionName.target, null);
+}
+
+/** 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 = {
+  isOpen: false,
+  images: [],
+  parentElement: /*#__PURE__*/React.createRef()
+};
+/**
+ * Set up an ImageLightbox with images and triggers.
+ *
+ * - Associate a trigger with the lightbox to properly focus the trigger on close
+ * - 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
+ */
+function useImageLightbox(initialProps) {
+  const {
+      images = []
+    } = initialProps,
+    otherProps = _objectWithoutProperties(initialProps, _excluded$A);
+  const imagesPropsRef = React.useRef(images);
+  React.useEffect(() => {
+    imagesPropsRef.current = images.map(props => _objectSpread2({
+      imgRef: /*#__PURE__*/React.createRef()
+    }, props));
+  }, [images]);
+  const currentImageRef = React.useRef(null);
+  const [imageLightboxProps, setImageLightboxProps] = React.useState(() => _objectSpread2(_objectSpread2({}, EMPTY_PROPS), otherProps));
+  const getTriggerProps = React.useMemo(() => {
+    const triggerImageRefs = {};
+    async function close() {
+      const currentImage = currentImageRef.current;
+      if (!currentImage) {
+        return;
+      }
+      const currentIndex = imagesPropsRef.current.findIndex(_ref => {
+        let {
+          imgRef
+        } = _ref;
+        return (imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === currentImage;
+      });
+      await startViewTransition({
+        changes() {
+          // Close lightbox
+          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2({}, prevProps), {}, {
+            isOpen: false
+          }));
+        },
+        // Morph from the image in lightbox to the image in trigger
+        viewTransitionName: {
+          source: currentImageRef,
+          target: triggerImageRefs[currentIndex],
+          name: CLASSNAME$v
+        }
+      });
+    }
+    async function open(triggerElement) {
+      var _triggerImageRefs;
+      let {
+        activeImageIndex
+      } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      // If we find an image inside the trigger, animate it in transition with the opening image
+      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) => {
+        if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
+          return _objectSpread2(_objectSpread2({}, image), {}, {
+            loadingPlaceholderImageRef: {
+              current: triggerImage
+            }
+          });
+        }
+        return image;
+      });
+      await startViewTransition({
+        changes: () => {
+          // Open lightbox with setup props
+          setImageLightboxProps(prevProps => _objectSpread2(_objectSpread2({}, prevProps), {}, {
+            activeImageRef: currentImageRef,
+            parentElement: {
+              current: triggerElement
+            },
+            isOpen: true,
+            onClose: () => {
+              var _prevProps$onClose;
+              close();
+              prevProps === null || prevProps === void 0 ? void 0 : (_prevProps$onClose = prevProps.onClose) === null || _prevProps$onClose === void 0 ? void 0 : _prevProps$onClose.call(prevProps);
+            },
+            images: imagesWithFallbackSize,
+            activeImageIndex: activeImageIndex || 0
+          }));
+        },
+        // Morph from the image in trigger to the image in lightbox
+        viewTransitionName: {
+          source: triggerImage,
+          target: currentImageRef,
+          name: CLASSNAME$v
+        }
+      });
+    }
+    return memoize(options => ({
+      ref(element) {
+        // Track trigger image ref if any
+        if ((options === null || options === void 0 ? void 0 : options.activeImageIndex) !== undefined && element) {
+          triggerImageRefs[options.activeImageIndex] = {
+            current: findImage(element)
+          };
+        }
+      },
+      onClick(e) {
+        open(e.target, options);
+      }
+    }));
+  }, []);
+  return {
+    getTriggerProps,
+    imageLightboxProps
+  };
+}
+
+const _excluded$B = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
+const Inner = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      isOpen,
+      closeButtonProps,
+      onClose,
+      parentElement,
+      activeImageIndex,
+      slideshowControlsProps,
+      slideGroupLabel,
+      images,
+      zoomOutButtonProps,
+      zoomInButtonProps,
+      activeImageRef: propImageRef
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+  const currentPaginationItemRef = React.useRef(null);
+  const footerRef = React.useRef(null);
+  const imageRef = React.useRef(null);
+  const clickAwayChildrenRefs = React.useRef([imageRef, footerRef]);
+  return /*#__PURE__*/React.createElement(Lightbox, _extends({
+    ref: ref,
+    className: classnames(className, CLASSNAME$v),
+    parentElement: parentElement,
+    isOpen: isOpen,
+    onClose: onClose,
+    closeButtonProps: closeButtonProps,
+    focusElement: currentPaginationItemRef
+  }, forwardedProps), /*#__PURE__*/React.createElement(ClickAwayProvider, {
+    childrenRefs: clickAwayChildrenRefs,
+    callback: onClose
+  }, /*#__PURE__*/React.createElement(ImageSlideshow, {
+    activeImageIndex: activeImageIndex,
+    slideGroupLabel: slideGroupLabel,
+    slideshowControlsProps: slideshowControlsProps,
+    images: images,
+    zoomInButtonProps: zoomInButtonProps,
+    zoomOutButtonProps: zoomOutButtonProps,
+    footerRef: footerRef,
+    activeImageRef: mergeRefs(propImageRef, imageRef),
+    currentPaginationItemRef: currentPaginationItemRef
+  })));
+});
+Inner.displayName = COMPONENT_NAME$y;
+Inner.className = CLASSNAME$v;
+
+/**
+ * ImageLightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ImageLightbox = Object.assign(Inner, {
+  useImageLightbox
+});
+
+const _excluded$C = ["className", "color", "colorVariant", "typography", "children", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -7800,12 +8555,12 @@ const _excluded$z = ["className", "color", "colorVariant", "typography", "childr
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'InlineList';
+const COMPONENT_NAME$z = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = getRootClassName(COMPONENT_NAME$y);
+const CLASSNAME$w = getRootClassName(COMPONENT_NAME$z);
 
 /**
  * Component default props.
@@ -7828,7 +8583,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   const fontColorClassName = color && getFontColorClassName(color, colorVariant);
   const typographyClassName = typography && getTypographyClassName(typography);
   return (
@@ -7836,7 +8591,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     React.createElement("ul", _extends({}, forwardedProps, {
       ref: ref,
-      className: classnames(className, CLASSNAME$v, wrap && `${CLASSNAME$v}--wrap`, fontColorClassName, typographyClassName)
+      className: classnames(className, CLASSNAME$w, wrap && `${CLASSNAME$w}--wrap`, fontColorClassName, typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list"
@@ -7849,17 +8604,17 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
         React.createElement("li", {
           key: key,
           role: "listitem",
-          className: `${CLASSNAME$v}__item`
+          className: `${CLASSNAME$w}__item`
         }, index !== 0 && /*#__PURE__*/React.createElement("span", {
-          className: `${CLASSNAME$v}__item-separator`,
+          className: `${CLASSNAME$w}__item-separator`,
           "aria-hidden": "true"
         }, '\u00A0•\u00A0'), child)
       );
     }))
   );
 });
-InlineList.displayName = COMPONENT_NAME$y;
-InlineList.className = CLASSNAME$v;
+InlineList.displayName = COMPONENT_NAME$z;
+InlineList.className = CLASSNAME$w;
 InlineList.defaultProps = DEFAULT_PROPS$r;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -7874,7 +8629,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$A = ["children", "className", "kind", "theme"];
+const _excluded$D = ["children", "className", "kind", "theme"];
 
 /**
  * Defines the props of the component.
@@ -7883,12 +8638,12 @@ const _excluded$A = ["children", "className", "kind", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'InputHelper';
+const COMPONENT_NAME$A = 'InputHelper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = getRootClassName(COMPONENT_NAME$z);
+const CLASSNAME$x = getRootClassName(COMPONENT_NAME$A);
 
 /**
  * Component default props.
@@ -7912,7 +8667,7 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
       kind,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   const {
     color
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
@@ -7920,17 +8675,17 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$w,
+      prefix: CLASSNAME$x,
       color,
       theme
     }))
   }), children);
 });
-InputHelper.displayName = COMPONENT_NAME$z;
-InputHelper.className = CLASSNAME$w;
+InputHelper.displayName = COMPONENT_NAME$A;
+InputHelper.className = CLASSNAME$x;
 InputHelper.defaultProps = DEFAULT_PROPS$s;
 
-const _excluded$B = ["children", "className", "htmlFor", "isRequired", "theme"];
+const _excluded$E = ["children", "className", "htmlFor", "isRequired", "theme"];
 
 /**
  * Defines the props of the component.
@@ -7939,12 +8694,12 @@ const _excluded$B = ["children", "className", "htmlFor", "isRequired", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'InputLabel';
+const COMPONENT_NAME$B = 'InputLabel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = getRootClassName(COMPONENT_NAME$A);
+const CLASSNAME$y = getRootClassName(COMPONENT_NAME$B);
 
 /**
  * Component default props.
@@ -7968,23 +8723,23 @@ const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
       isRequired,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/React.createElement("label", _extends({
     ref: ref
   }, forwardedProps, {
     htmlFor: htmlFor,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$x,
+      prefix: CLASSNAME$y,
       isRequired,
       theme
     }))
   }), children);
 });
-InputLabel.displayName = COMPONENT_NAME$A;
-InputLabel.className = CLASSNAME$x;
+InputLabel.displayName = COMPONENT_NAME$B;
+InputLabel.className = CLASSNAME$y;
 InputLabel.defaultProps = DEFAULT_PROPS$t;
 
-const _excluded$C = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
+const _excluded$F = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -7993,12 +8748,12 @@ const _excluded$C = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLab
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Lightbox';
+const COMPONENT_NAME$C = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = getRootClassName(COMPONENT_NAME$B);
+const CLASSNAME$z = getRootClassName(COMPONENT_NAME$C);
 
 /**
  * Lightbox component.
@@ -8024,7 +8779,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -8085,7 +8840,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
     role: "dialog",
     tabIndex: -1,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$y,
+      prefix: CLASSNAME$z,
       isHidden: !isOpen,
       isShown: isOpen || isVisible,
       theme
@@ -8094,7 +8849,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
       zIndex
     }
   }), closeButtonProps && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$y}__close`
+    className: `${CLASSNAME$z}__close`
   }, /*#__PURE__*/React.createElement(IconButton, _extends({}, closeButtonProps, {
     ref: closeButtonRef,
     emphasis: "low",
@@ -8108,14 +8863,14 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
     childrenRefs: clickAwayRefs
   }, /*#__PURE__*/React.createElement("div", {
     ref: childrenRef,
-    className: `${CLASSNAME$y}__wrapper`,
+    className: `${CLASSNAME$z}__wrapper`,
     role: "presentation"
   }, children))), document.body);
 });
-Lightbox.displayName = COMPONENT_NAME$B;
-Lightbox.className = CLASSNAME$y;
+Lightbox.displayName = COMPONENT_NAME$C;
+Lightbox.className = CLASSNAME$z;
 
-const _excluded$D = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+const _excluded$G = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
 
 /**
  * Defines the props of the component.
@@ -8124,12 +8879,12 @@ const _excluded$D = ["children", "className", "color", "colorVariant", "disabled
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'Link';
+const COMPONENT_NAME$D = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = getRootClassName(COMPONENT_NAME$C);
+const CLASSNAME$A = getRootClassName(COMPONENT_NAME$D);
 const getIconSize = typography => {
   switch (typography) {
     case Typography.display1:
@@ -8178,18 +8933,18 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       typography
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   const renderedChildren = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React.createElement(Icon, {
     icon: leftIcon,
-    className: `${CLASSNAME$z}__left-icon`,
+    className: `${CLASSNAME$A}__left-icon`,
     size: getIconSize(typography)
   }), children && /*#__PURE__*/React.createElement("span", {
-    className: classnames(`${CLASSNAME$z}__content`, {
+    className: classnames(`${CLASSNAME$A}__content`, {
       [`lumx-typography-${typography}`]: typography
     })
   }, children), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React.createElement(Icon, {
     icon: rightIcon,
-    className: `${CLASSNAME$z}__right-icon`,
+    className: `${CLASSNAME$A}__right-icon`,
     size: getIconSize(typography)
   })), [leftIcon, typography, children, rightIcon]);
 
@@ -8204,7 +8959,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       ref: ref,
       disabled: isDisabled,
       className: classnames(className, handleBasicClasses({
-        prefix: CLASSNAME$z,
+        prefix: CLASSNAME$A,
         color,
         colorVariant
       }))
@@ -8216,17 +8971,17 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     href,
     target,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$z,
+      prefix: CLASSNAME$A,
       color,
       colorVariant
     })),
     ref: ref
   }), renderedChildren);
 });
-Link.displayName = COMPONENT_NAME$C;
-Link.className = CLASSNAME$z;
+Link.displayName = COMPONENT_NAME$D;
+Link.className = CLASSNAME$A;
 
-const _excluded$E = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
+const _excluded$H = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
 
 /**
  * Defines the props of the component.
@@ -8235,12 +8990,12 @@ const _excluded$E = ["className", "description", "link", "linkAs", "linkProps",
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'LinkPreview';
+const COMPONENT_NAME$E = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = getRootClassName(COMPONENT_NAME$D);
+const CLASSNAME$B = getRootClassName(COMPONENT_NAME$E);
 
 /**
  * Component default props.
@@ -8271,21 +9026,21 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       titleHeading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
   const TitleHeading = titleHeading;
   return /*#__PURE__*/React.createElement("article", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$A,
+      prefix: CLASSNAME$B,
       size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
       theme
     }))
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$A}__wrapper`
+    className: `${CLASSNAME$B}__wrapper`
   }, thumbnailProps && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$A}__thumbnail`
+    className: `${CLASSNAME$B}__thumbnail`
   }, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
     linkAs: linkAs,
     linkProps: _objectSpread2(_objectSpread2({}, linkProps), {}, {
@@ -8297,9 +9052,9 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
     aspectRatio: AspectRatio.free,
     fillHeight: true
   }))), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$A}__container`
+    className: `${CLASSNAME$B}__container`
   }, title && /*#__PURE__*/React.createElement(TitleHeading, {
-    className: `${CLASSNAME$A}__title`
+    className: `${CLASSNAME$B}__title`
   }, /*#__PURE__*/React.createElement(Link, _extends({}, linkProps, {
     linkAs: linkAs,
     target: "_blank",
@@ -8307,12 +9062,12 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
     color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
     colorVariant: ColorVariant.N
   }), title)), description && /*#__PURE__*/React.createElement("p", {
-    className: `${CLASSNAME$A}__description`
+    className: `${CLASSNAME$B}__description`
   }, description), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$A}__link`
+    className: `${CLASSNAME$B}__link`
   }, /*#__PURE__*/React.createElement(Link, _extends({}, linkProps, {
     linkAs: linkAs,
-    className: classnames(`${CLASSNAME$A}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
+    className: classnames(`${CLASSNAME$B}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
     target: "_blank",
     href: link,
     color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -8322,11 +9077,11 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
     tabIndex: title ? '-1' : undefined
   }), link)))));
 });
-LinkPreview.displayName = COMPONENT_NAME$D;
-LinkPreview.className = CLASSNAME$A;
+LinkPreview.displayName = COMPONENT_NAME$E;
+LinkPreview.className = CLASSNAME$B;
 LinkPreview.defaultProps = DEFAULT_PROPS$u;
 
-const _excluded$F = ["className"];
+const _excluded$I = ["className"];
 
 /**
  * Defines the props of the component.
@@ -8335,12 +9090,12 @@ const _excluded$F = ["className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'ListDivider';
+const COMPONENT_NAME$F = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = getRootClassName(COMPONENT_NAME$E);
+const CLASSNAME$C = getRootClassName(COMPONENT_NAME$F);
 
 /**
  * ListDivider component.
@@ -8353,19 +9108,19 @@ const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$B
+      prefix: CLASSNAME$C
     }))
   }));
 });
-ListDivider.displayName = COMPONENT_NAME$E;
-ListDivider.className = CLASSNAME$B;
+ListDivider.displayName = COMPONENT_NAME$F;
+ListDivider.className = CLASSNAME$C;
 
-const _excluded$G = ["children", "className"];
+const _excluded$J = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -8374,12 +9129,12 @@ const _excluded$G = ["children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'ListSubheader';
+const COMPONENT_NAME$G = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = getRootClassName(COMPONENT_NAME$F);
+const CLASSNAME$D = getRootClassName(COMPONENT_NAME$G);
 
 /**
  * ListSubheader component.
@@ -8393,19 +9148,19 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$C
+      prefix: CLASSNAME$D
     }))
   }), children);
 });
-ListSubheader.displayName = COMPONENT_NAME$F;
-ListSubheader.className = CLASSNAME$C;
+ListSubheader.displayName = COMPONENT_NAME$G;
+ListSubheader.className = CLASSNAME$D;
 
-const _excluded$H = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
+const _excluded$K = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
 
 /**
  * Defines the props of the component.
@@ -8414,12 +9169,12 @@ const _excluded$H = ["children", "className", "hasBackground", "kind", "icon", "
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'Message';
+const COMPONENT_NAME$H = 'Message';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = getRootClassName(COMPONENT_NAME$G);
+const CLASSNAME$E = getRootClassName(COMPONENT_NAME$H);
 
 /**
  * Associative map from message kind to color and icon.
@@ -8459,7 +9214,7 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const {
     color,
     icon
@@ -8474,27 +9229,27 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
     className: classnames(className, handleBasicClasses({
       color,
       hasBackground,
-      prefix: CLASSNAME$D
+      prefix: CLASSNAME$E
     }))
   }, forwardedProps), (customIcon || icon) && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$D}__icon`,
+    className: `${CLASSNAME$E}__icon`,
     icon: customIcon || icon,
     size: Size.xs,
     color: color
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$D}__text`
+    className: `${CLASSNAME$E}__text`
   }, children), isCloseButtonDisplayed && /*#__PURE__*/React.createElement(IconButton, {
-    className: `${CLASSNAME$D}__close-button`,
+    className: `${CLASSNAME$E}__close-button`,
     icon: mdiClose,
     onClick: onClick,
     label: closeButtonLabel,
     emphasis: Emphasis.low
   }));
 });
-Message.displayName = COMPONENT_NAME$G;
-Message.className = CLASSNAME$D;
+Message.displayName = COMPONENT_NAME$H;
+Message.className = CLASSNAME$E;
 
-const _excluded$I = ["className", "theme", "thumbnails", "onImageClick"],
+const _excluded$L = ["className", "theme", "thumbnails", "onImageClick"],
   _excluded2$1 = ["image", "onClick", "align"];
 
 /**
@@ -8504,12 +9259,12 @@ const _excluded$I = ["className", "theme", "thumbnails", "onImageClick"],
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'Mosaic';
+const COMPONENT_NAME$I = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = getRootClassName(COMPONENT_NAME$H);
+const CLASSNAME$F = getRootClassName(COMPONENT_NAME$I);
 
 /**
  * Component default props.
@@ -8532,7 +9287,7 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
       thumbnails,
       onImageClick
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const handleImageClick = useMemo(() => {
     if (!onImageClick) return undefined;
     return (index, onClick) => event => {
@@ -8544,16 +9299,16 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$E,
+      prefix: CLASSNAME$F,
       theme
     }), {
-      [`${CLASSNAME$E}--has-1-thumbnail`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 1,
-      [`${CLASSNAME$E}--has-2-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 2,
-      [`${CLASSNAME$E}--has-3-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 3,
-      [`${CLASSNAME$E}--has-4-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) >= 4
+      [`${CLASSNAME$F}--has-1-thumbnail`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 1,
+      [`${CLASSNAME$F}--has-2-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 2,
+      [`${CLASSNAME$F}--has-3-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 3,
+      [`${CLASSNAME$F}--has-4-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) >= 4
     })
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$E}__wrapper`
+    className: `${CLASSNAME$F}__wrapper`
   }, take(thumbnails, 4).map((thumbnail, index) => {
     const {
         image,
@@ -8563,7 +9318,7 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
       thumbnailProps = _objectWithoutProperties(thumbnail, _excluded2$1);
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: `${CLASSNAME$E}__thumbnail`
+      className: `${CLASSNAME$F}__thumbnail`
     }, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
       align: align || Alignment.left,
       image: image,
@@ -8572,12 +9327,12 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
       fillHeight: true,
       onClick: (handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(index, onClick)) || onClick
     })), thumbnails.length > 4 && index === 3 && /*#__PURE__*/React.createElement("div", {
-      className: `${CLASSNAME$E}__overlay`
+      className: `${CLASSNAME$F}__overlay`
     }, /*#__PURE__*/React.createElement("span", null, "+", thumbnails.length - 4)));
   })));
 });
-Mosaic.displayName = COMPONENT_NAME$H;
-Mosaic.className = CLASSNAME$E;
+Mosaic.displayName = COMPONENT_NAME$I;
+Mosaic.className = CLASSNAME$F;
 Mosaic.defaultProps = DEFAULT_PROPS$v;
 
 const ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -8587,7 +9342,7 @@ function forwardRefPolymorphic(render) {
   return /*#__PURE__*/React.forwardRef(render);
 }
 
-const _excluded$J = ["className", "icon", "label", "isCurrentPage", "as"];
+const _excluded$M = ["className", "icon", "label", "isCurrentPage", "as"];
 
 /** Make `href` required when `as` is `a` */
 
@@ -8598,12 +9353,12 @@ const _excluded$J = ["className", "icon", "label", "isCurrentPage", "as"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'NavigationItem';
+const COMPONENT_NAME$J = 'NavigationItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = getRootClassName(COMPONENT_NAME$I);
+const CLASSNAME$G = getRootClassName(COMPONENT_NAME$J);
 const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
       className,
@@ -8612,7 +9367,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
       isCurrentPage,
       as: Element = 'a'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   const theme = useContext(ThemeContext);
   const {
     tooltipLabel,
@@ -8623,7 +9378,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   } : {};
   return /*#__PURE__*/React.createElement("li", {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$F,
+      prefix: CLASSNAME$G,
       theme
     }))
   }, /*#__PURE__*/React.createElement(Tooltip, {
@@ -8631,41 +9386,41 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     placement: Placement.TOP
   }, /*#__PURE__*/React.createElement(Element, _extends({
     className: handleBasicClasses({
-      prefix: `${CLASSNAME$F}__link`,
+      prefix: `${CLASSNAME$G}__link`,
       isSelected: isCurrentPage
     }),
     ref: ref,
     "aria-current": isCurrentPage ? 'page' : undefined
   }, buttonProps, forwardedProps), icon ? /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$F}__icon`,
+    className: `${CLASSNAME$G}__icon`,
     icon: icon,
     size: Size.xs,
     theme: theme
   }) : null, /*#__PURE__*/React.createElement(Text, {
     as: "span",
     truncate: true,
-    className: `${CLASSNAME$F}__label`,
+    className: `${CLASSNAME$G}__label`,
     ref: labelRef
   }, label))));
 }), {
-  displayName: COMPONENT_NAME$I,
-  className: CLASSNAME$F
+  displayName: COMPONENT_NAME$J,
+  className: CLASSNAME$G
 });
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation.vertical
 });
 
-const _excluded$K = ["children", "className", "label", "icon"];
+const _excluded$N = ["children", "className", "label", "icon"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'NavigationSection';
+const COMPONENT_NAME$K = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = getRootClassName(COMPONENT_NAME$J);
+const CLASSNAME$H = getRootClassName(COMPONENT_NAME$K);
 const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -8673,7 +9428,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
       label,
       icon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$K);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef(null);
   const sectionId = useMemo(() => uniqueId('section'), []);
@@ -8683,15 +9438,15 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   const theme = useContext(ThemeContext);
   const isDropdown = orientation === Orientation.horizontal;
   return /*#__PURE__*/React.createElement("li", _extends({
-    className: classnames(className, CLASSNAME$G, CLASSNAME$F, handleBasicClasses({
-      prefix: CLASSNAME$F,
+    className: classnames(className, CLASSNAME$H, CLASSNAME$G, handleBasicClasses({
+      prefix: CLASSNAME$G,
       theme
     })),
     ref: ref
   }, forwardedProps), /*#__PURE__*/React.createElement("button", {
     "aria-controls": sectionId,
     "aria-expanded": isOpen,
-    className: classnames(`${CLASSNAME$F}__link`),
+    className: classnames(`${CLASSNAME$G}__link`),
     ref: buttonRef,
     onClick: event => {
       setIsOpen(!isOpen);
@@ -8699,16 +9454,16 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
     },
     type: "button"
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$F}__icon`,
+    className: `${CLASSNAME$G}__icon`,
     icon: icon,
     size: Size.xs
   }) : null, /*#__PURE__*/React.createElement(Text, {
     as: "span",
     truncate: true,
-    className: `${CLASSNAME$F}__label`,
+    className: `${CLASSNAME$G}__label`,
     ref: ref
   }, label), /*#__PURE__*/React.createElement(Icon, {
-    className: classnames(`${CLASSNAME$F}__icon`, `${CLASSNAME$G}__chevron`),
+    className: classnames(`${CLASSNAME$G}__icon`, `${CLASSNAME$H}__chevron`),
     icon: isOpen ? mdiChevronUp : mdiChevronDown
   })), isOpen && (isDropdown ? /*#__PURE__*/React.createElement(Popover, {
     anchorRef: buttonRef,
@@ -8723,31 +9478,31 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   }, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: Theme.light
   }, /*#__PURE__*/React.createElement("ul", {
-    className: `${CLASSNAME$G}__drawer--popover`,
+    className: `${CLASSNAME$H}__drawer--popover`,
     id: sectionId
   }, /*#__PURE__*/React.createElement(NavigationContext.Provider, {
     value: {
       orientation: Orientation.vertical
     }
   }, children)))) : /*#__PURE__*/React.createElement("ul", {
-    className: `${CLASSNAME$G}__drawer`,
+    className: `${CLASSNAME$H}__drawer`,
     id: sectionId
   }, children)));
 }), {
-  displayName: COMPONENT_NAME$J,
-  className: CLASSNAME$G
+  displayName: COMPONENT_NAME$K,
+  className: CLASSNAME$H
 });
 
-const _excluded$L = ["children", "className", "theme", "orientation"];
+const _excluded$O = ["children", "className", "theme", "orientation"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'Navigation';
+const COMPONENT_NAME$L = 'Navigation';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = getRootClassName(COMPONENT_NAME$K);
+const CLASSNAME$I = getRootClassName(COMPONENT_NAME$L);
 const Navigation = Object.assign(
 /*#__PURE__*/
 // eslint-disable-next-line react/display-name
@@ -8758,12 +9513,12 @@ forwardRef((props, ref) => {
       theme,
       orientation
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$O);
   return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
     value: theme
   }, /*#__PURE__*/React.createElement("nav", _extends({
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$H,
+      prefix: CLASSNAME$I,
       theme,
       orientation
     })),
@@ -8773,11 +9528,11 @@ forwardRef((props, ref) => {
       orientation
     }
   }, /*#__PURE__*/React.createElement("ul", {
-    className: `${CLASSNAME$H}__list`
+    className: `${CLASSNAME$I}__list`
   }, children))));
 }), {
-  displayName: COMPONENT_NAME$K,
-  className: CLASSNAME$H,
+  displayName: COMPONENT_NAME$L,
+  className: CLASSNAME$I,
   defaultProps: {
     theme: Theme.light,
     orientation: Orientation.vertical
@@ -8809,7 +9564,7 @@ const NOTIFICATION_CONFIGURATION = {
   }
 };
 
-const _excluded$M = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
+const _excluded$P = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
 
 /**
  * Defines the props of the component.
@@ -8818,12 +9573,12 @@ const _excluded$M = ["actionLabel", "className", "content", "isOpen", "onActionC
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Notification';
+const COMPONENT_NAME$M = 'Notification';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = getRootClassName(COMPONENT_NAME$L);
+const CLASSNAME$J = getRootClassName(COMPONENT_NAME$M);
 
 /**
  * Component default props.
@@ -8856,7 +9611,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       usePortal,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$P);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -8888,21 +9643,21 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       hasAction,
       isHidden: !isOpen,
-      prefix: CLASSNAME$I
+      prefix: CLASSNAME$J
     })),
     onClick: onClick,
     style: _objectSpread2(_objectSpread2({}, style), {}, {
       zIndex
     })
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$I}__icon`
+    className: `${CLASSNAME$J}__icon`
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     size: Size.s
   })), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$I}__content`
+    className: `${CLASSNAME$J}__content`
   }, content), hasAction && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$I}__action`
+    className: `${CLASSNAME$J}__action`
   }, /*#__PURE__*/React.createElement(Button, {
     emphasis: Emphasis.medium,
     theme: theme,
@@ -8910,11 +9665,11 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement("span", null, actionLabel))));
   return usePortal ? /*#__PURE__*/createPortal(notification, document.body) : notification;
 });
-Notification.displayName = COMPONENT_NAME$L;
-Notification.className = CLASSNAME$I;
+Notification.displayName = COMPONENT_NAME$M;
+Notification.className = CLASSNAME$J;
 Notification.defaultProps = DEFAULT_PROPS$w;
 
-const _excluded$N = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
+const _excluded$Q = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
 
 /**
  * PopoverDialog props.
@@ -8924,12 +9679,12 @@ const _excluded$N = ["children", "isOpen", "focusElement", "aria-label", "label"
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'PopoverDialog';
+const COMPONENT_NAME$N = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = getRootClassName(COMPONENT_NAME$M);
+const CLASSNAME$K = getRootClassName(COMPONENT_NAME$N);
 
 /**
  * Component default props.
@@ -8952,11 +9707,11 @@ const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
       label = ariaLabel,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   return /*#__PURE__*/React.createElement(Popover, _extends({}, forwardedProps, {
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$J
+      prefix: CLASSNAME$K
     })),
     role: "dialog",
     "aria-modal": "true"
@@ -8972,11 +9727,11 @@ const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
     withFocusTrap: true
   }), children);
 });
-PopoverDialog.displayName = COMPONENT_NAME$M;
-PopoverDialog.className = CLASSNAME$J;
+PopoverDialog.displayName = COMPONENT_NAME$N;
+PopoverDialog.className = CLASSNAME$K;
 PopoverDialog.defaultProps = DEFAULT_PROPS$x;
 
-const _excluded$O = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
+const _excluded$R = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
 
 /**
  * Defines the props of the component.
@@ -8985,12 +9740,12 @@ const _excluded$O = ["actions", "attachments", "author", "className", "meta", "o
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'PostBlock';
+const COMPONENT_NAME$O = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = getRootClassName(COMPONENT_NAME$N);
+const CLASSNAME$L = getRootClassName(COMPONENT_NAME$O);
 
 /**
  * Component default props.
@@ -9022,61 +9777,61 @@ const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
       thumbnailProps,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$O);
+    forwardedProps = _objectWithoutProperties(props, _excluded$R);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$K,
+      prefix: CLASSNAME$L,
       orientation,
       theme
     }))
   }, forwardedProps), thumbnailProps && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__thumbnail`
+    className: `${CLASSNAME$L}__thumbnail`
   }, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
     theme: theme,
     variant: ThumbnailVariant.rounded
   }))), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__wrapper`
+    className: `${CLASSNAME$L}__wrapper`
   }, author && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__author`
+    className: `${CLASSNAME$L}__author`
   }, author), title && /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: `${CLASSNAME$K}__title`,
+    className: `${CLASSNAME$L}__title`,
     onClick: onClick
   }, title), meta && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$K}__meta`
+    className: `${CLASSNAME$L}__meta`
   }, meta), isObject(text) && text.__html ?
   /*#__PURE__*/
   // eslint-disable-next-line react/no-danger
   React.createElement("p", {
     dangerouslySetInnerHTML: text,
-    className: `${CLASSNAME$K}__text`
+    className: `${CLASSNAME$L}__text`
   }) : /*#__PURE__*/React.createElement("p", {
-    className: `${CLASSNAME$K}__text`
+    className: `${CLASSNAME$L}__text`
   }, text), attachments && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__attachments`
+    className: `${CLASSNAME$L}__attachments`
   }, attachments), (tags || actions) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__toolbar`
+    className: `${CLASSNAME$L}__toolbar`
   }, tags && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__tags`
+    className: `${CLASSNAME$L}__tags`
   }, tags), actions && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$K}__actions`
+    className: `${CLASSNAME$L}__actions`
   }, actions))));
 });
-PostBlock.displayName = COMPONENT_NAME$N;
-PostBlock.className = CLASSNAME$K;
+PostBlock.displayName = COMPONENT_NAME$O;
+PostBlock.className = CLASSNAME$L;
 PostBlock.defaultProps = DEFAULT_PROPS$y;
 
-const _excluded$P = ["className", "theme"];
+const _excluded$S = ["className", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'ProgressLinear';
+const COMPONENT_NAME$P = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = getRootClassName(COMPONENT_NAME$O);
+const CLASSNAME$M = getRootClassName(COMPONENT_NAME$P);
 
 /**
  * Component default props.
@@ -9097,12 +9852,12 @@ const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$P);
+    forwardedProps = _objectWithoutProperties(props, _excluded$S);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$L,
+      prefix: CLASSNAME$M,
       theme
     }))
   }), /*#__PURE__*/React.createElement("div", {
@@ -9111,11 +9866,11 @@ const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
     className: "lumx-progress-linear__line2"
   }));
 });
-ProgressLinear.displayName = COMPONENT_NAME$O;
-ProgressLinear.className = CLASSNAME$L;
+ProgressLinear.displayName = COMPONENT_NAME$P;
+ProgressLinear.className = CLASSNAME$M;
 ProgressLinear.defaultProps = DEFAULT_PROPS$z;
 
-const _excluded$Q = ["className", "theme", "size"];
+const _excluded$T = ["className", "theme", "size"];
 
 /**
  * Progress sizes.
@@ -9128,12 +9883,12 @@ const _excluded$Q = ["className", "theme", "size"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'ProgressCircular';
+const COMPONENT_NAME$Q = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = getRootClassName(COMPONENT_NAME$P);
+const CLASSNAME$N = getRootClassName(COMPONENT_NAME$Q);
 
 /**
  * Component default props.
@@ -9156,12 +9911,12 @@ const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$T);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$M,
+      prefix: CLASSNAME$N,
       theme,
       size
     }))
@@ -9181,11 +9936,11 @@ const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
     strokeWidth: "5"
   })));
 });
-ProgressCircular.displayName = COMPONENT_NAME$P;
-ProgressCircular.className = CLASSNAME$M;
+ProgressCircular.displayName = COMPONENT_NAME$Q;
+ProgressCircular.className = CLASSNAME$N;
 ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
-const _excluded$R = ["className", "theme", "variant"];
+const _excluded$U = ["className", "theme", "variant"];
 
 /**
  * Progress variants.
@@ -9202,12 +9957,12 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'Progress';
+const COMPONENT_NAME$R = 'Progress';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = getRootClassName(COMPONENT_NAME$Q);
+const CLASSNAME$O = getRootClassName(COMPONENT_NAME$R);
 
 /**
  * Component default props.
@@ -9231,12 +9986,12 @@ const Progress = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$R);
+    forwardedProps = _objectWithoutProperties(props, _excluded$U);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$N,
+      prefix: CLASSNAME$O,
       theme,
       variant
     }))
@@ -9246,8 +10001,8 @@ const Progress = /*#__PURE__*/forwardRef((props, ref) => {
     theme: theme
   }));
 });
-Progress.displayName = COMPONENT_NAME$Q;
-Progress.className = CLASSNAME$N;
+Progress.displayName = COMPONENT_NAME$R;
+Progress.className = CLASSNAME$O;
 Progress.defaultProps = DEFAULT_PROPS$B;
 
 const INIT_STATE = {
@@ -9369,7 +10124,7 @@ const useTabProviderContextState = () => {
   return context === null || context === void 0 ? void 0 : context[0];
 };
 
-const _excluded$S = ["children", "onChange"];
+const _excluded$V = ["children", "onChange"];
 const DEFAULT_PROPS$C = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -9391,7 +10146,7 @@ const ProgressTrackerProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$S);
+    propState = _objectWithoutProperties(props, _excluded$V);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -9495,7 +10250,7 @@ const useRovingTabIndex = _ref => {
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$T = ["aria-label", "children", "className"];
+const _excluded$W = ["aria-label", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -9504,12 +10259,12 @@ const _excluded$T = ["aria-label", "children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'ProgressTracker';
+const COMPONENT_NAME$S = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = getRootClassName(COMPONENT_NAME$R);
+const CLASSNAME$P = getRootClassName(COMPONENT_NAME$S);
 
 /**
  * Component default props.
@@ -9532,7 +10287,7 @@ const ProgressTracker = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$T);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
   const stepListRef = React.useRef(null);
   useRovingTabIndex({
     parentRef: stepListRef,
@@ -9548,20 +10303,20 @@ const ProgressTracker = /*#__PURE__*/forwardRef((props, ref) => {
     ref: mergeRefs(ref, stepListRef)
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$O
+      prefix: CLASSNAME$P
     }))
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$O}__steps`,
+    className: `${CLASSNAME$P}__steps`,
     role: "tablist",
     "aria-label": ariaLabel
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$O}__background-bar`,
+    className: `${CLASSNAME$P}__background-bar`,
     style: {
       left: `${backgroundPosition}%`,
       right: `${backgroundPosition}%`
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$O}__foreground-bar`,
+    className: `${CLASSNAME$P}__foreground-bar`,
     style: {
       left: `${backgroundPosition}%`,
       right: `${backgroundPosition}%`,
@@ -9569,11 +10324,11 @@ const ProgressTracker = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }));
 });
-ProgressTracker.displayName = COMPONENT_NAME$R;
-ProgressTracker.className = CLASSNAME$O;
+ProgressTracker.displayName = COMPONENT_NAME$S;
+ProgressTracker.className = CLASSNAME$P;
 ProgressTracker.defaultProps = DEFAULT_PROPS$D;
 
-const _excluded$U = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$X = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -9582,12 +10337,12 @@ const _excluded$U = ["className", "disabled", "hasError", "helper", "id", "isAct
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'ProgressTrackerStep';
+const COMPONENT_NAME$T = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = getRootClassName(COMPONENT_NAME$S);
+const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$T);
 
 /**
  * Component default props.
@@ -9618,7 +10373,7 @@ const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$U);
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -9655,7 +10410,7 @@ const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$P,
+      prefix: CLASSNAME$Q,
       hasError,
       isActive,
       isClickable: state && !isDisabled,
@@ -9670,22 +10425,22 @@ const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-selected": isActive,
     "aria-controls": state === null || state === void 0 ? void 0 : state.tabPanelId
   }), /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$P}__state`,
+    className: `${CLASSNAME$Q}__state`,
     icon: getIcon(),
     size: Size.s
   }), /*#__PURE__*/React.createElement(InputLabel, {
     htmlFor: (state === null || state === void 0 ? void 0 : state.tabId) || '',
-    className: `${CLASSNAME$P}__label`
+    className: `${CLASSNAME$Q}__label`
   }, label), helper && /*#__PURE__*/React.createElement(InputHelper, {
     kind: hasError ? Kind.error : Kind.info,
-    className: `${CLASSNAME$P}__helper`
+    className: `${CLASSNAME$Q}__helper`
   }, helper));
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$S;
-ProgressTrackerStep.className = CLASSNAME$P;
+ProgressTrackerStep.displayName = COMPONENT_NAME$T;
+ProgressTrackerStep.className = CLASSNAME$Q;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$E;
 
-const _excluded$V = ["children", "id", "className", "isActive"];
+const _excluded$Y = ["children", "id", "className", "isActive"];
 
 /**
  * Defines the props of the component.
@@ -9694,12 +10449,12 @@ const _excluded$V = ["children", "id", "className", "isActive"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$U = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = `${CSS_PREFIX}-step-panel`;
+const CLASSNAME$R = `${CSS_PREFIX}-step-panel`;
 
 /**
  * Component default props.
@@ -9722,7 +10477,7 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$V);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -9730,7 +10485,7 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$Q,
+      prefix: CLASSNAME$R,
       isActive
     })),
     role: "tabpanel",
@@ -9738,11 +10493,11 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": state === null || state === void 0 ? void 0 : state.tabId
   }), (!(state !== null && state !== void 0 && state.isLazy) || isActive) && children);
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$T;
-ProgressTrackerStepPanel.className = CLASSNAME$Q;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$U;
+ProgressTrackerStepPanel.className = CLASSNAME$R;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$F;
 
-const _excluded$W = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$Z = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -9751,12 +10506,12 @@ const _excluded$W = ["checked", "className", "disabled", "helper", "id", "inputR
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'RadioButton';
+const COMPONENT_NAME$V = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = getRootClassName(COMPONENT_NAME$U);
+const CLASSNAME$S = getRootClassName(COMPONENT_NAME$V);
 
 /**
  * Component default props.
@@ -9789,8 +10544,8 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
-  const inputId = useMemo(() => id || `${CLASSNAME$R.toLowerCase()}-${uid()}`, [id]);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
+  const inputId = useMemo(() => id || `${CLASSNAME$S.toLowerCase()}-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
       onChange(value, name, event);
@@ -9803,14 +10558,14 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       isChecked,
       isDisabled,
       isUnchecked: !isChecked,
-      prefix: CLASSNAME$R,
+      prefix: CLASSNAME$S,
       theme
     }))
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$R}__input-wrapper`
+    className: `${CLASSNAME$S}__input-wrapper`
   }, /*#__PURE__*/React.createElement("input", _extends({
     ref: inputRef,
-    className: `${CLASSNAME$R}__input-native`,
+    className: `${CLASSNAME$S}__input-native`,
     disabled: isDisabled,
     id: inputId,
     tabIndex: isDisabled ? -1 : 0,
@@ -9821,28 +10576,28 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: handleChange,
     "aria-describedby": helper ? `${inputId}-helper` : undefined
   }, inputProps)), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$R}__input-placeholder`
+    className: `${CLASSNAME$S}__input-placeholder`
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$R}__input-background`
+    className: `${CLASSNAME$S}__input-background`
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$R}__input-indicator`
+    className: `${CLASSNAME$S}__input-indicator`
   }))), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$R}__content`
+    className: `${CLASSNAME$S}__content`
   }, label && /*#__PURE__*/React.createElement(InputLabel, {
     htmlFor: inputId,
     theme: theme,
-    className: `${CLASSNAME$R}__label`
+    className: `${CLASSNAME$S}__label`
   }, label), helper && /*#__PURE__*/React.createElement(InputHelper, {
     id: `${inputId}-helper`,
     theme: theme,
-    className: `${CLASSNAME$R}__helper`
+    className: `${CLASSNAME$S}__helper`
   }, helper)));
 });
-RadioButton.displayName = COMPONENT_NAME$U;
-RadioButton.className = CLASSNAME$R;
+RadioButton.displayName = COMPONENT_NAME$V;
+RadioButton.className = CLASSNAME$S;
 RadioButton.defaultProps = DEFAULT_PROPS$G;
 
-const _excluded$X = ["children", "className"];
+const _excluded$_ = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -9851,12 +10606,12 @@ const _excluded$X = ["children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'RadioGroup';
+const COMPONENT_NAME$W = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = getRootClassName(COMPONENT_NAME$V);
+const CLASSNAME$T = getRootClassName(COMPONENT_NAME$W);
 
 /**
  * RadioGroup component.
@@ -9870,17 +10625,17 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$_);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$S
+      prefix: CLASSNAME$T
     }))
   }), children);
 });
-RadioGroup.displayName = COMPONENT_NAME$V;
-RadioGroup.className = CLASSNAME$S;
+RadioGroup.displayName = COMPONENT_NAME$W;
+RadioGroup.className = CLASSNAME$T;
 
 /**
  * Listen on element focus to store the focus status.
@@ -9914,13 +10669,13 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$Y = ["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$W = 'Select';
+const COMPONENT_NAME$X = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$T = getRootClassName(COMPONENT_NAME$W);
+const CLASSNAME$U = getRootClassName(COMPONENT_NAME$X);
 
 /** The default value of props. */
 const DEFAULT_PROPS$H = {
@@ -9954,7 +10709,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
       value,
       variant = DEFAULT_PROPS$H.variant
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$$);
   const selectId = useMemo(() => id || `select-${uid()}`, [id]);
   const anchorRef = useRef(null);
   const selectRef = useRef(null);
@@ -9988,7 +10743,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
       isFocus,
       isOpen,
       isValid,
-      prefix: CLASSNAME$T,
+      prefix: CLASSNAME$U,
       theme: theme === Theme.light ? Theme.light : Theme.dark
     }))
   }, /*#__PURE__*/React.createElement(SelectElement, _extends({}, forwardedProps, {
@@ -10019,22 +10774,22 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     onInfiniteScroll: onInfiniteScroll,
     ref: dropdownRef
   }, children), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
-    className: `${CLASSNAME$T}__helper`,
+    className: `${CLASSNAME$U}__helper`,
     kind: Kind.error,
     theme: theme
   }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
-    className: `${CLASSNAME$T}__helper`,
+    className: `${CLASSNAME$U}__helper`,
     theme: theme
   }, helper));
 };
 
-const _excluded$Z = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasError", "hasInputClear", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$10 = ["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$X = 'Select';
+const COMPONENT_NAME$Y = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$U = getRootClassName(COMPONENT_NAME$X);
+const CLASSNAME$V = getRootClassName(COMPONENT_NAME$Y);
 
 /** The default value of props. */
 const DEFAULT_PROPS$I = {
@@ -10068,36 +10823,36 @@ const SelectField = _ref => {
       variant,
       selectElementRef
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$Z);
+    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$U}__header`
+    className: `${CLASSNAME$V}__header`
   }, /*#__PURE__*/React.createElement(InputLabel, {
     htmlFor: id,
-    className: `${CLASSNAME$U}__label`,
+    className: `${CLASSNAME$V}__label`,
     isRequired: isRequired,
     theme: theme
   }, label)), /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(anchorRef, selectElementRef),
     id: id,
-    className: `${CLASSNAME$U}__wrapper`,
+    className: `${CLASSNAME$V}__wrapper`,
     onClick: onInputClick,
     onKeyDown: handleKeyboardNav,
     tabIndex: isDisabled ? undefined : 0,
     "aria-disabled": isDisabled || undefined
   }, forwardedProps), icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$U}__input-icon`,
+    className: `${CLASSNAME$V}__input-icon`,
     color: theme === Theme.dark ? 'light' : undefined,
     icon: icon,
     size: Size.xs
   }), /*#__PURE__*/React.createElement("div", {
-    className: classnames([`${CLASSNAME$U}__input-native`, isEmpty && placeholder && `${CLASSNAME$U}__input-native--placeholder`])
+    className: classnames([`${CLASSNAME$V}__input-native`, isEmpty && placeholder && `${CLASSNAME$V}__input-native--placeholder`])
   }, !isEmpty && /*#__PURE__*/React.createElement("span", null, selectedValueRender === null || selectedValueRender === void 0 ? void 0 : selectedValueRender(value)), isEmpty && placeholder && /*#__PURE__*/React.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$U}__input-validity`
+    className: `${CLASSNAME$V}__input-validity`
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
   })), hasInputClear && clearButtonProps && /*#__PURE__*/React.createElement(IconButton, _extends({}, clearButtonProps, {
-    className: `${CLASSNAME$U}__input-clear`,
+    className: `${CLASSNAME$V}__input-clear`,
     icon: mdiCloseCircle,
     emphasis: Emphasis.low,
     size: Size.s,
@@ -10105,7 +10860,7 @@ const SelectField = _ref => {
     onClick: onClear,
     onKeyDown: stopPropagation
   })), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$U}__input-indicator`
+    className: `${CLASSNAME$V}__input-indicator`
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: mdiMenuDown,
     size: Size.s
@@ -10137,26 +10892,26 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
     className: classnames(props.className, handleBasicClasses({
       hasInputClear,
       hasUnique: !props.isEmpty,
-      prefix: CLASSNAME$U
+      prefix: CLASSNAME$V
     })),
     hasInputClear,
     isEmpty: isEmpty$1
   }), ref);
 });
-Select.displayName = COMPONENT_NAME$X;
-Select.className = CLASSNAME$U;
+Select.displayName = COMPONENT_NAME$Y;
+Select.className = CLASSNAME$V;
 Select.defaultProps = DEFAULT_PROPS$I;
-Select.className = CLASSNAME$U;
+Select.className = CLASSNAME$V;
 
-const _excluded$_ = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$11 = ["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. */
 
 /** The display name of the component. */
-const COMPONENT_NAME$Y = 'Select';
+const COMPONENT_NAME$Z = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$V = getRootClassName(COMPONENT_NAME$Y);
+const CLASSNAME$W = getRootClassName(COMPONENT_NAME$Z);
 
 /** The default value of props. */
 const DEFAULT_PROPS$J = {
@@ -10199,38 +10954,38 @@ const SelectMultipleField = _ref => {
       variant,
       selectElementRef
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$_);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$11);
   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`
+    className: `${CLASSNAME$W}__header`
   }, /*#__PURE__*/React.createElement(InputLabel, {
     htmlFor: id,
-    className: `${CLASSNAME$V}__label`,
+    className: `${CLASSNAME$W}__label`,
     isRequired: isRequired,
     theme: theme
   }, label)), /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs(anchorRef, selectElementRef),
     id: id,
-    className: `${CLASSNAME$V}__wrapper`,
+    className: `${CLASSNAME$W}__wrapper`,
     onClick: onInputClick,
     onKeyDown: handleKeyboardNav,
     tabIndex: isDisabled ? undefined : 0,
     "aria-disabled": isDisabled || undefined
   }, forwardedProps), icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$V}__input-icon`,
+    className: `${CLASSNAME$W}__input-icon`,
     color: theme === Theme.dark ? 'light' : undefined,
     icon: icon,
     size: Size.xs
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$V}__chips`
+    className: `${CLASSNAME$W}__chips`
   }, !isEmpty && value.map((val, index) => selectedChipRender === null || selectedChipRender === void 0 ? void 0 : selectedChipRender(val, index, onClear, isDisabled, theme))), isEmpty && placeholder && /*#__PURE__*/React.createElement("div", {
-    className: classnames([`${CLASSNAME$V}__input-native`, `${CLASSNAME$V}__input-native--placeholder`])
+    className: classnames([`${CLASSNAME$W}__input-native`, `${CLASSNAME$W}__input-native--placeholder`])
   }, /*#__PURE__*/React.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$V}__input-validity`
+    className: `${CLASSNAME$W}__input-validity`
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
   })), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$V}__input-indicator`
+    className: `${CLASSNAME$W}__input-indicator`
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: mdiMenuDown,
     size: Size.s
@@ -10259,17 +11014,17 @@ const SelectMultiple = /*#__PURE__*/forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, _objectSpread2(_objectSpread2({}, props), {}, {
     className: classnames(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
-      prefix: CLASSNAME$V
+      prefix: CLASSNAME$W
     })),
     isEmpty: props.value.length === 0,
     isMultiple: true
   }), ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$Y;
-SelectMultiple.className = CLASSNAME$V;
+SelectMultiple.displayName = COMPONENT_NAME$Z;
+SelectMultiple.className = CLASSNAME$W;
 SelectMultiple.defaultProps = DEFAULT_PROPS$J;
 
-const _excluded$$ = ["children", "className", "theme"];
+const _excluded$12 = ["children", "className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -10278,12 +11033,12 @@ const _excluded$$ = ["children", "className", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'SideNavigation';
+const COMPONENT_NAME$_ = 'SideNavigation';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = getRootClassName(COMPONENT_NAME$Z);
+const CLASSNAME$X = getRootClassName(COMPONENT_NAME$_);
 
 /**
  * SideNavigation component.
@@ -10298,20 +11053,20 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$$);
+    forwardedProps = _objectWithoutProperties(props, _excluded$12);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/React.createElement("ul", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, theme === Theme.dark && 'lumx-color-font-light-N', handleBasicClasses({
-      prefix: CLASSNAME$W
+      prefix: CLASSNAME$X
     }))
   }), content);
 });
-SideNavigation.displayName = COMPONENT_NAME$Z;
-SideNavigation.className = CLASSNAME$W;
+SideNavigation.displayName = COMPONENT_NAME$_;
+SideNavigation.className = CLASSNAME$X;
 
-const _excluded$10 = ["linkAs", "href"];
+const _excluded$13 = ["linkAs", "href"];
 /**
  * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
  */
@@ -10320,7 +11075,7 @@ const renderButtonOrLink = function (props) {
       linkAs,
       href
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$10);
+    forwardedProps = _objectWithoutProperties(props, _excluded$13);
   for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     children[_key - 1] = arguments[_key];
   }
@@ -10330,7 +11085,7 @@ const renderButtonOrLink = function (props) {
   }, forwardedProps), ...children);
 };
 
-const _excluded$11 = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
+const _excluded$14 = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
 
 /**
  * Defines the props of the component.
@@ -10339,12 +11094,12 @@ const _excluded$11 = ["children", "className", "emphasis", "icon", "isOpen", "is
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'SideNavigationItem';
+const COMPONENT_NAME$$ = 'SideNavigationItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = getRootClassName(COMPONENT_NAME$_);
+const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$$);
 
 /**
  * Component default props.
@@ -10377,7 +11132,7 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
       toggleButtonProps,
       closeMode = 'unmount'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$11);
+    forwardedProps = _objectWithoutProperties(props, _excluded$14);
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
   const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
@@ -10396,22 +11151,22 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
       emphasis,
       isOpen: showChildren,
       isSelected,
-      prefix: CLASSNAME$X
+      prefix: CLASSNAME$Y
     }))
   }), shouldSplitActions ? /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$X}__wrapper`
+    className: `${CLASSNAME$Y}__wrapper`
   }, renderLink(_objectSpread2(_objectSpread2({
     linkAs
   }, linkProps), {}, {
-    className: `${CLASSNAME$X}__link`,
+    className: `${CLASSNAME$Y}__link`,
     onClick,
     tabIndex: 0
   }), icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$X}__icon`,
+    className: `${CLASSNAME$Y}__icon`,
     icon: icon,
     size: Size.xs
   }), /*#__PURE__*/React.createElement("span", null, label)), /*#__PURE__*/React.createElement(IconButton, _extends({}, toggleButtonProps, {
-    className: `${CLASSNAME$X}__toggle`,
+    className: `${CLASSNAME$Y}__toggle`,
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     size: Size.m,
     emphasis: Emphasis.low,
@@ -10419,27 +11174,27 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
   }, ariaProps))) : renderButtonOrLink(_objectSpread2(_objectSpread2({
     linkAs
   }, linkProps), {}, {
-    className: `${CLASSNAME$X}__link`,
+    className: `${CLASSNAME$Y}__link`,
     tabIndex: 0,
     onClick
   }, ariaProps), icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$X}__icon`,
+    className: `${CLASSNAME$Y}__icon`,
     icon: icon,
     size: Size.xs
   }), /*#__PURE__*/React.createElement("span", null, label), hasContent && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$X}__chevron`,
+    className: `${CLASSNAME$Y}__chevron`,
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     size: Size.xs
   })), (closeMode === 'hide' || showChildren) && /*#__PURE__*/React.createElement("ul", {
-    className: `${CLASSNAME$X}__children`,
+    className: `${CLASSNAME$Y}__children`,
     id: contentId
   }, content));
 });
-SideNavigationItem.displayName = COMPONENT_NAME$_;
-SideNavigationItem.className = CLASSNAME$X;
+SideNavigationItem.displayName = COMPONENT_NAME$$;
+SideNavigationItem.className = CLASSNAME$Y;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$K;
 
-const _excluded$12 = ["className", "size", "color", "theme"];
+const _excluded$15 = ["className", "size", "color", "theme"];
 
 /**
  * Defines the props of the component.
@@ -10452,12 +11207,12 @@ const DEFAULT_PROPS$L = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'SkeletonCircle';
+const COMPONENT_NAME$10 = 'SkeletonCircle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$$);
+const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$10);
 
 /**
  * SkeletonCircle component.
@@ -10473,23 +11228,23 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$15);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$Y,
+      prefix: CLASSNAME$Z,
       size,
       color,
       theme
     }))
   }));
 });
-SkeletonCircle.displayName = COMPONENT_NAME$$;
+SkeletonCircle.displayName = COMPONENT_NAME$10;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$L;
-SkeletonCircle.className = CLASSNAME$Y;
+SkeletonCircle.className = CLASSNAME$Z;
 
-const _excluded$13 = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
+const _excluded$16 = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
 
 /**
  * Skeleton variants.
@@ -10512,12 +11267,12 @@ const DEFAULT_PROPS$M = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'SkeletonRectangle';
+const COMPONENT_NAME$11 = 'SkeletonRectangle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$10);
+const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$11);
 
 /**
  * SkeletonRectangle component.
@@ -10536,12 +11291,12 @@ const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$13);
+    forwardedProps = _objectWithoutProperties(props, _excluded$16);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$Z,
+      prefix: CLASSNAME$_,
       aspectRatio,
       height: aspectRatio ? undefined : height,
       theme,
@@ -10550,14 +11305,14 @@ const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
       color
     }))
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$Z}__inner`
+    className: `${CLASSNAME$_}__inner`
   }));
 });
-SkeletonRectangle.displayName = COMPONENT_NAME$10;
-SkeletonRectangle.className = CLASSNAME$Z;
+SkeletonRectangle.displayName = COMPONENT_NAME$11;
+SkeletonRectangle.className = CLASSNAME$_;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$M;
 
-const _excluded$14 = ["className", "theme", "typography", "width", "color"];
+const _excluded$17 = ["className", "theme", "typography", "width", "color"];
 
 /**
  * Defines the props of the component.
@@ -10570,12 +11325,12 @@ const DEFAULT_PROPS$N = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'SkeletonTypography';
+const COMPONENT_NAME$12 = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$11);
+const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$12);
 
 /**
  * SkeletonTypography component.
@@ -10592,12 +11347,12 @@ const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$14);
+    forwardedProps = _objectWithoutProperties(props, _excluded$17);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$_,
+      prefix: CLASSNAME$$,
       theme,
       typography,
       color
@@ -10606,12 +11361,12 @@ const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
       width
     })
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$_}__inner`
+    className: `${CLASSNAME$$}__inner`
   }));
 });
-SkeletonTypography.displayName = COMPONENT_NAME$11;
+SkeletonTypography.displayName = COMPONENT_NAME$12;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$N;
-SkeletonTypography.className = CLASSNAME$_;
+SkeletonTypography.className = CLASSNAME$$;
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
@@ -10647,7 +11402,7 @@ const clamp = (value, min, max) => {
   return value;
 };
 
-const _excluded$15 = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
+const _excluded$18 = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
 
 /**
  * Defines the props of the component.
@@ -10656,12 +11411,12 @@ const _excluded$15 = ["className", "disabled", "helper", "hideMinMaxLabel", "id"
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'Slider';
+const COMPONENT_NAME$13 = 'Slider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$12);
+const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$13);
 
 /**
  * Component default props.
@@ -10722,7 +11477,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$15);
+    forwardedProps = _objectWithoutProperties(props, _excluded$18);
   const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
   const sliderRef = useRef(null);
@@ -10855,7 +11610,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$$,
+      prefix: CLASSNAME$10,
       theme,
       hasLabel: Boolean(label)
     })),
@@ -10864,30 +11619,30 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   }), label && /*#__PURE__*/React.createElement(InputLabel, {
     id: sliderLabelId,
     htmlFor: sliderId,
-    className: `${CLASSNAME$$}__label`,
+    className: `${CLASSNAME$10}__label`,
     theme: theme
   }, label), helper && /*#__PURE__*/React.createElement(InputHelper, {
-    className: `${CLASSNAME$$}__helper`,
+    className: `${CLASSNAME$10}__helper`,
     theme: theme
   }, helper), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$$}__ui-wrapper`
+    className: `${CLASSNAME$10}__ui-wrapper`
   }, !hideMinMaxLabel && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$$}__value-label ${CLASSNAME$$}__value-label--min`
+    className: `${CLASSNAME$10}__value-label ${CLASSNAME$10}__value-label--min`
   }, min), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$$}__wrapper`,
+    className: `${CLASSNAME$10}__wrapper`,
     ref: sliderRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$$}__track ${CLASSNAME$$}__track--background`
+    className: `${CLASSNAME$10}__track ${CLASSNAME$10}__track--background`
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$$}__track ${CLASSNAME$$}__track--active`,
+    className: `${CLASSNAME$10}__track ${CLASSNAME$10}__track--active`,
     style: {
       width: percentString
     }
   }), steps ? /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$$}__ticks`
+    className: `${CLASSNAME$10}__ticks`
   }, availableSteps.map((step, idx) => /*#__PURE__*/React.createElement("div", {
     key: `tick_${idx}`,
-    className: `${CLASSNAME$$}__tick`,
+    className: `${CLASSNAME$10}__tick`,
     style: {
       left: `${step * 100}%`
     }
@@ -10896,18 +11651,18 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": sliderLabelId,
     name: name,
     id: sliderId,
-    className: `${CLASSNAME$$}__handle`,
+    className: `${CLASSNAME$10}__handle`,
     style: {
       left: percentString
     },
     onKeyDown: handleKeyDown,
     disabled: isDisabled
   })), !hideMinMaxLabel && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$$}__value-label ${CLASSNAME$$}__value-label--max`
+    className: `${CLASSNAME$10}__value-label ${CLASSNAME$10}__value-label--max`
   }, max)));
 });
-Slider.displayName = COMPONENT_NAME$12;
-Slider.className = CLASSNAME$$;
+Slider.displayName = COMPONENT_NAME$13;
+Slider.className = CLASSNAME$10;
 Slider.defaultProps = DEFAULT_PROPS$O;
 
 /**
@@ -11228,7 +11983,7 @@ const useSlideFocusManagement = _ref => {
   }, [isSlideDisplayed, slideRef]);
 };
 
-const _excluded$16 = ["className", "children", "role", "label", "isDisplayed"];
+const _excluded$19 = ["className", "children", "role", "label", "isDisplayed"];
 
 /**
  * Defines the props of the component.
@@ -11237,12 +11992,12 @@ const _excluded$16 = ["className", "children", "role", "label", "isDisplayed"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'SlideshowItemGroup';
+const COMPONENT_NAME$14 = 'SlideshowItemGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$13);
+const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$14);
 const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
 
 /**
@@ -11260,7 +12015,7 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       isDisplayed
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$16);
+    forwardedProps = _objectWithoutProperties(props, _excluded$19);
   const groupRef = React.useRef(null);
   useSlideFocusManagement({
     isSlideDisplayed: isDisplayed,
@@ -11270,16 +12025,16 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
     ref: mergeRefs(groupRef, ref),
     role: role,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$10
+      prefix: CLASSNAME$11
     })),
     "aria-roledescription": "slide",
     "aria-label": label
   }, forwardedProps), children);
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$13;
-SlideshowItemGroup.className = CLASSNAME$10;
+SlideshowItemGroup.displayName = COMPONENT_NAME$14;
+SlideshowItemGroup.className = CLASSNAME$11;
 
-const _excluded$17 = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
+const _excluded$1a = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
 
 /**
  * Defines the props of the component.
@@ -11315,7 +12070,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
       slidesId,
       slideGroupLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$17);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
   // Number of slideshow items.
   const itemsCount = React.Children.count(children);
   const {
@@ -11397,7 +12152,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
 Slideshow.displayName = 'Slideshow';
 Slideshow.defaultProps = DEFAULT_PROPS$P;
 
-const _excluded$18 = ["className", "children"];
+const _excluded$1b = ["className", "children"];
 
 /**
  * Defines the props of the component.
@@ -11406,12 +12161,12 @@ const _excluded$18 = ["className", "children"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'SlideshowItem';
+const COMPONENT_NAME$15 = 'SlideshowItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$14);
+const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$15);
 
 /**
  * SlideshowItem component.
@@ -11425,16 +12180,16 @@ const SlideshowItem = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$18);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$11
+      prefix: CLASSNAME$12
     }))
   }, forwardedProps), children);
 });
-SlideshowItem.displayName = COMPONENT_NAME$14;
-SlideshowItem.className = CLASSNAME$11;
+SlideshowItem.displayName = COMPONENT_NAME$15;
+SlideshowItem.className = CLASSNAME$12;
 
 const isTouchDevice = () => 'ontouchstart' in window;
 
@@ -11493,7 +12248,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
   }, [activeIndex, slideCount]);
 }
 
-const _excluded$19 = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
+const _excluded$1c = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
   _excluded2$2 = ["className", "label"];
 
 /**
@@ -11503,12 +12258,12 @@ const _excluded$19 = ["activeIndex", "className", "nextButtonProps", "onNextClic
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'SlideshowControls';
+const COMPONENT_NAME$16 = 'SlideshowControls';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$15);
+const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$16);
 
 /**
  * Component default props.
@@ -11543,7 +12298,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       paginationItemLabel,
       paginationItemProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
   let parent;
   if (WINDOW) {
     // Checking window object to avoid errors in SSR.
@@ -11580,22 +12335,22 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$12,
+      prefix: CLASSNAME$13,
       theme
     }), {
-      [`${CLASSNAME$12}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
+      [`${CLASSNAME$13}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
     })
   }), /*#__PURE__*/React.createElement(IconButton, _extends({}, previousButtonProps, {
     icon: mdiChevronLeft,
-    className: `${CLASSNAME$12}__navigation`,
+    className: `${CLASSNAME$13}__navigation`,
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onPreviousClick
   })), /*#__PURE__*/React.createElement("div", {
     ref: paginationRef,
-    className: `${CLASSNAME$12}__pagination`
+    className: `${CLASSNAME$13}__pagination`
   }, /*#__PURE__*/React.createElement("div", _extends({
-    className: `${CLASSNAME$12}__pagination-items`,
+    className: `${CLASSNAME$13}__pagination-items`,
     style: wrapperStyle,
     role: "tablist"
   }, paginationProps), useMemo(() => range(slidesCount).map(index => {
@@ -11611,7 +12366,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
     const ariaLabel = label || (paginationItemLabel === null || paginationItemLabel === void 0 ? void 0 : paginationItemLabel(index)) || `${index + 1} / ${slidesCount}`;
     return /*#__PURE__*/React.createElement("button", _extends({
       className: classnames(handleBasicClasses({
-        prefix: `${CLASSNAME$12}__pagination-item`,
+        prefix: `${CLASSNAME$13}__pagination-item`,
         isActive,
         isOnEdge,
         isOutRange
@@ -11626,35 +12381,35 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
     }, itemProps));
   }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? /*#__PURE__*/React.createElement(IconButton, _extends({}, playButtonProps, {
     icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-    className: `${CLASSNAME$12}__play`,
+    className: `${CLASSNAME$13}__play`,
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low
   })) : null, /*#__PURE__*/React.createElement(IconButton, _extends({}, nextButtonProps, {
     icon: mdiChevronRight,
-    className: `${CLASSNAME$12}__navigation`,
+    className: `${CLASSNAME$13}__navigation`,
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onNextClick
   })));
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$15;
-InternalSlideshowControls.className = CLASSNAME$12;
+InternalSlideshowControls.displayName = COMPONENT_NAME$16;
+InternalSlideshowControls.className = CLASSNAME$13;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$Q;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS$1
 });
 
-const _excluded$1a = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
+const _excluded$1d = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'Slideshow';
+const COMPONENT_NAME$17 = 'Slideshow';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$16);
+const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$17);
 
 /**
  * Slides component.
@@ -11679,7 +12434,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
       hasControls,
       slideGroupLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
   const wrapperRef = React.useRef(null);
   const startIndexVisible = activeIndex;
   const endIndexVisible = startIndexVisible + 1;
@@ -11697,22 +12452,22 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$13,
+      prefix: CLASSNAME$14,
       theme
     }), {
-      [`${CLASSNAME$13}--fill-height`]: fillHeight,
-      [`${CLASSNAME$13}--group-by-${groupBy}`]: Boolean(groupBy)
+      [`${CLASSNAME$14}--fill-height`]: fillHeight,
+      [`${CLASSNAME$14}--group-by-${groupBy}`]: Boolean(groupBy)
     }),
     "aria-roledescription": "carousel"
   }), /*#__PURE__*/React.createElement("div", {
     id: slidesId,
-    className: `${CLASSNAME$13}__slides`,
+    className: `${CLASSNAME$14}__slides`,
     onMouseEnter: toggleAutoPlay,
     onMouseLeave: toggleAutoPlay,
     "aria-live": isAutoPlaying ? 'off' : 'polite'
   }, /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
-    className: `${CLASSNAME$13}__wrapper`,
+    className: `${CLASSNAME$14}__wrapper`,
     style: wrapperStyle
   }, groups.map((group, index) => /*#__PURE__*/React.createElement(SlideshowItemGroup, {
     key: index,
@@ -11722,10 +12477,10 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
     isDisplayed: index >= startIndexVisible && index < endIndexVisible
   }, group)))), afterSlides);
 });
-Slides.displayName = COMPONENT_NAME$16;
-Slides.className = CLASSNAME$13;
+Slides.displayName = COMPONENT_NAME$17;
+Slides.className = CLASSNAME$14;
 
-const _excluded$1b = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
+const _excluded$1e = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -11734,12 +12489,12 @@ const _excluded$1b = ["checked", "children", "className", "disabled", "helper",
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'Switch';
+const COMPONENT_NAME$18 = 'Switch';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$17);
+const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$18);
 
 /**
  * Component default props.
@@ -11773,7 +12528,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
@@ -11784,7 +12539,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$14,
+      prefix: CLASSNAME$15,
       isChecked,
       isDisabled,
       position,
@@ -11793,12 +12548,12 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     })),
     "aria-disabled": isDisabled
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$14}__input-wrapper`
+    className: `${CLASSNAME$15}__input-wrapper`
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
     role: "switch",
     id: inputId,
-    className: `${CLASSNAME$14}__input-native`,
+    className: `${CLASSNAME$15}__input-native`,
     name: name,
     value: value,
     disabled: isDisabled,
@@ -11807,28 +12562,28 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     onChange: handleChange,
     "aria-describedby": helper ? `${inputId}-helper` : undefined
   }, inputProps)), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$14}__input-placeholder`
+    className: `${CLASSNAME$15}__input-placeholder`
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$14}__input-background`
+    className: `${CLASSNAME$15}__input-background`
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$14}__input-indicator`
+    className: `${CLASSNAME$15}__input-indicator`
   }))), Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$14}__content`
+    className: `${CLASSNAME$15}__content`
   }, /*#__PURE__*/React.createElement(InputLabel, {
     htmlFor: inputId,
     theme: theme,
-    className: `${CLASSNAME$14}__label`
+    className: `${CLASSNAME$15}__label`
   }, children), !isEmpty(helper) && /*#__PURE__*/React.createElement(InputHelper, {
     id: `${inputId}-helper`,
     theme: theme,
-    className: `${CLASSNAME$14}__helper`
+    className: `${CLASSNAME$15}__helper`
   }, helper)));
 });
-Switch.displayName = COMPONENT_NAME$17;
-Switch.className = CLASSNAME$14;
+Switch.displayName = COMPONENT_NAME$18;
+Switch.className = CLASSNAME$15;
 Switch.defaultProps = DEFAULT_PROPS$R;
 
-const _excluded$1c = ["children", "className", "hasBefore", "hasDividers", "theme"];
+const _excluded$1f = ["children", "className", "hasBefore", "hasDividers", "theme"];
 
 /**
  * Defines the props of the component.
@@ -11837,12 +12592,12 @@ const _excluded$1c = ["children", "className", "hasBefore", "hasDividers", "them
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'Table';
+const COMPONENT_NAME$19 = 'Table';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$18);
+const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$19);
 
 /**
  * Component default props.
@@ -11866,23 +12621,23 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
       hasDividers,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
   return /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$15,
+      prefix: CLASSNAME$16,
       hasBefore,
       hasDividers,
       theme
     }))
   }), children);
 });
-Table.displayName = COMPONENT_NAME$18;
-Table.className = CLASSNAME$15;
+Table.displayName = COMPONENT_NAME$19;
+Table.className = CLASSNAME$16;
 Table.defaultProps = DEFAULT_PROPS$S;
 
-const _excluded$1d = ["children", "className"];
+const _excluded$1g = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -11891,12 +12646,12 @@ const _excluded$1d = ["children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'TableBody';
+const COMPONENT_NAME$1a = 'TableBody';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$19, true);
+const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$1a, true);
 
 /**
  * TableBody component.
@@ -11910,19 +12665,19 @@ const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
   return /*#__PURE__*/React.createElement("tbody", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$16
+      prefix: CLASSNAME$17
     }))
   }), children);
 });
-TableBody.displayName = COMPONENT_NAME$19;
-TableBody.className = CLASSNAME$16;
+TableBody.displayName = COMPONENT_NAME$1a;
+TableBody.className = CLASSNAME$17;
 
-const _excluded$1e = ["children", "className", "icon", "isSortable", "onHeaderClick", "sortOrder", "variant"];
+const _excluded$1h = ["children", "className", "icon", "isSortable", "onHeaderClick", "sortOrder", "variant"];
 
 /**
  * Table head cell sort order.
@@ -11946,12 +12701,12 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'TableCell';
+const COMPONENT_NAME$1b = 'TableCell';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$1a, true);
+const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1b, true);
 
 /**
  * Component default props.
@@ -11977,7 +12732,7 @@ const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
       sortOrder,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
 
   // Use button if clickable
   const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -11997,40 +12752,40 @@ const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     className: classnames(handleBasicClasses({
-      prefix: CLASSNAME$17,
+      prefix: CLASSNAME$18,
       isSortable,
       isSorted: isSortable && !!sortOrder
-    }), className, `${CLASSNAME$17}--head`),
+    }), className, `${CLASSNAME$18}--head`),
     "aria-sort": ariaSort
   }), /*#__PURE__*/React.createElement(Wrapper, _extends({
-    className: `${CLASSNAME$17}-wrapper`
+    className: `${CLASSNAME$18}-wrapper`
   }, wrapperProps), icon && !isSortable && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$17}-icon`,
+    className: `${CLASSNAME$18}-icon`,
     icon: icon,
     size: Size.xxs
   }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$17}-icon`,
+    className: `${CLASSNAME$18}-icon`,
     icon: mdiArrowUp,
     size: Size.xxs
   }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$17}-icon`,
+    className: `${CLASSNAME$18}-icon`,
     icon: mdiArrowDown,
     size: Size.xxs
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$17}-content`
+    className: `${CLASSNAME$18}-content`
   }, children))), variant === TableCellVariant.body && /*#__PURE__*/React.createElement("td", _extends({}, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$17
-    }), `${CLASSNAME$17}--body`)
+      prefix: CLASSNAME$18
+    }), `${CLASSNAME$18}--body`)
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$17}-content`
+    className: `${CLASSNAME$18}-content`
   }, children)));
 });
-TableCell.displayName = COMPONENT_NAME$1a;
-TableCell.className = CLASSNAME$17;
+TableCell.displayName = COMPONENT_NAME$1b;
+TableCell.className = CLASSNAME$18;
 TableCell.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$1f = ["children", "className"];
+const _excluded$1i = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -12039,12 +12794,12 @@ const _excluded$1f = ["children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'TableHeader';
+const COMPONENT_NAME$1c = 'TableHeader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1b, true);
+const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c, true);
 
 /**
  * Component default props.
@@ -12063,20 +12818,20 @@ const TableHeader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   return /*#__PURE__*/React.createElement("thead", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$18
+      prefix: CLASSNAME$19
     }))
   }), children);
 });
-TableHeader.displayName = COMPONENT_NAME$1b;
-TableHeader.className = CLASSNAME$18;
+TableHeader.displayName = COMPONENT_NAME$1c;
+TableHeader.className = CLASSNAME$19;
 TableHeader.defaultProps = DEFAULT_PROPS$U;
 
-const _excluded$1g = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
+const _excluded$1j = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
 
 /**
  * Defines the props of the component.
@@ -12085,12 +12840,12 @@ const _excluded$1g = ["children", "className", "disabled", "isClickable", "isDis
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'TableRow';
+const COMPONENT_NAME$1d = 'TableRow';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c, true);
+const CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1d, true);
 
 /**
  * Component default props.
@@ -12113,7 +12868,7 @@ const TableRow = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled = disabled,
       isSelected
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
   return /*#__PURE__*/React.createElement("tr", _extends({
     ref: ref,
     tabIndex: isClickable && !isDisabled ? 0 : -1
@@ -12122,16 +12877,16 @@ const TableRow = /*#__PURE__*/forwardRef((props, ref) => {
       isClickable: isClickable && !isDisabled,
       isDisabled,
       isSelected: isSelected && !isDisabled,
-      prefix: CLASSNAME$19
+      prefix: CLASSNAME$1a
     })),
     "aria-disabled": isDisabled
   }), children);
 });
-TableRow.displayName = COMPONENT_NAME$1c;
-TableRow.className = CLASSNAME$19;
+TableRow.displayName = COMPONENT_NAME$1d;
+TableRow.className = CLASSNAME$1a;
 TableRow.defaultProps = DEFAULT_PROPS$V;
 
-const _excluded$1h = ["children", "onChange"];
+const _excluded$1k = ["children", "onChange"];
 const DEFAULT_PROPS$W = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -12151,7 +12906,7 @@ const TabProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$1h);
+    propState = _objectWithoutProperties(props, _excluded$1k);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -12179,7 +12934,7 @@ const TabProvider = props => {
 };
 TabProvider.defaultProps = DEFAULT_PROPS$W;
 
-const _excluded$1i = ["aria-label", "children", "className", "layout", "position", "theme"];
+const _excluded$1l = ["aria-label", "children", "className", "layout", "position", "theme"];
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
   TabListLayout["clustered"] = "clustered";
   TabListLayout["fixed"] = "fixed";
@@ -12193,12 +12948,12 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'TabList';
+const COMPONENT_NAME$1e = 'TabList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = `${CSS_PREFIX}-tabs`;
+const CLASSNAME$1b = `${CSS_PREFIX}-tabs`;
 
 /**
  * Component default props.
@@ -12227,7 +12982,7 @@ const TabList = /*#__PURE__*/forwardRef((props, ref) => {
       position,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
   const tabListRef = React.useRef(null);
   useRovingTabIndex({
     parentRef: tabListRef,
@@ -12239,22 +12994,22 @@ const TabList = /*#__PURE__*/forwardRef((props, ref) => {
     ref: mergeRefs(ref, tabListRef)
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1a,
+      prefix: CLASSNAME$1b,
       layout,
       position,
       theme
     }))
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1a}__links`,
+    className: `${CLASSNAME$1b}__links`,
     role: "tablist",
     "aria-label": ariaLabel
   }, children));
 });
-TabList.displayName = COMPONENT_NAME$1d;
-TabList.className = CLASSNAME$1a;
+TabList.displayName = COMPONENT_NAME$1e;
+TabList.className = CLASSNAME$1b;
 TabList.defaultProps = DEFAULT_PROPS$X;
 
-const _excluded$1j = ["className", "disabled", "icon", "iconProps", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$1m = ["className", "disabled", "icon", "iconProps", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -12263,12 +13018,12 @@ const _excluded$1j = ["className", "disabled", "icon", "iconProps", "id", "isAct
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'Tab';
+const COMPONENT_NAME$1f = 'Tab';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = `${CSS_PREFIX}-tabs__link`;
+const CLASSNAME$1c = `${CSS_PREFIX}-tabs__link`;
 
 /**
  * Component default props.
@@ -12298,7 +13053,7 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -12326,7 +13081,7 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1b,
+      prefix: CLASSNAME$1c,
       isActive,
       isDisabled
     })),
@@ -12343,11 +13098,11 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
     size: Size.xs
   }, iconProps)), label && /*#__PURE__*/React.createElement("span", null, label));
 });
-Tab.displayName = COMPONENT_NAME$1e;
-Tab.className = CLASSNAME$1b;
+Tab.displayName = COMPONENT_NAME$1f;
+Tab.className = CLASSNAME$1c;
 Tab.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1k = ["children", "id", "className", "isActive"];
+const _excluded$1n = ["children", "id", "className", "isActive"];
 
 /**
  * Defines the props of the component.
@@ -12356,12 +13111,12 @@ const _excluded$1k = ["children", "id", "className", "isActive"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'TabPanel';
+const COMPONENT_NAME$1g = 'TabPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = `${CSS_PREFIX}-tab-panel`;
+const CLASSNAME$1d = `${CSS_PREFIX}-tab-panel`;
 
 /**
  * Component default props.
@@ -12384,7 +13139,7 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -12392,7 +13147,7 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1c,
+      prefix: CLASSNAME$1d,
       isActive
     })),
     role: "tabpanel",
@@ -12400,11 +13155,11 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-labelledby": state === null || state === void 0 ? void 0 : state.tabId
   }), (!(state !== null && state !== void 0 && state.isLazy) || isActive) && children);
 });
-TabPanel.displayName = COMPONENT_NAME$1f;
-TabPanel.className = CLASSNAME$1c;
+TabPanel.displayName = COMPONENT_NAME$1g;
+TabPanel.className = CLASSNAME$1d;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1l = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
+const _excluded$1o = ["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"];
 
 /**
@@ -12414,12 +13169,12 @@ const _excluded$1l = ["id", "isDisabled", "isRequired", "placeholder", "multilin
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'TextField';
+const COMPONENT_NAME$1h = 'TextField';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = getRootClassName(COMPONENT_NAME$1g);
+const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1h);
 
 /**
  * Default minimum number of rows in the multiline mode.
@@ -12489,7 +13244,7 @@ const renderInputNative = props => {
       hasError,
       describedById
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const ref = useRef(null);
 
@@ -12514,7 +13269,7 @@ const renderInputNative = props => {
   const Component = multiline ? 'textarea' : 'input';
   const inputProps = _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
     id,
-    className: multiline ? `${CLASSNAME$1d}__input-native ${CLASSNAME$1d}__input-native--textarea` : `${CLASSNAME$1d}__input-native ${CLASSNAME$1d}__input-native--text`,
+    className: multiline ? `${CLASSNAME$1e}__input-native ${CLASSNAME$1e}__input-native--textarea` : `${CLASSNAME$1e}__input-native ${CLASSNAME$1e}__input-native--text`,
     placeholder,
     value,
     name,
@@ -12635,31 +13390,31 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       isFocus: isFocus || forceFocusStyle,
       isValid,
-      prefix: CLASSNAME$1d,
+      prefix: CLASSNAME$1e,
       theme
     }))
   }, (label || maxLength) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1d}__header`
+    className: `${CLASSNAME$1e}__header`
   }, label && /*#__PURE__*/React.createElement(InputLabel, _extends({}, labelProps, {
     htmlFor: textFieldId,
-    className: `${CLASSNAME$1d}__label`,
+    className: `${CLASSNAME$1e}__label`,
     isRequired: isRequired,
     theme: theme
   }), label), maxLength && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1d}__char-counter`
+    className: `${CLASSNAME$1e}__char-counter`
   }, /*#__PURE__*/React.createElement("span", null, maxLength - valueLength), maxLength - valueLength === 0 && /*#__PURE__*/React.createElement(Icon, {
     icon: mdiAlertCircle,
     size: Size.xxs
   }))), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1d}__wrapper`,
+    className: `${CLASSNAME$1e}__wrapper`,
     ref: textFieldRef
   }, icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$1d}__input-icon`,
+    className: `${CLASSNAME$1e}__input-icon`,
     color: theme === Theme.dark ? 'light' : undefined,
     icon: icon,
     size: Size.xs
   }), chips && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1d}__chips`
+    className: `${CLASSNAME$1e}__chips`
   }, chips, renderInputNative(_objectSpread2({
     id: textFieldId,
     inputRef,
@@ -12680,7 +13435,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     hasError,
     describedById
   }, forwardedProps))), !chips && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1d}__input-wrapper`
+    className: `${CLASSNAME$1e}__input-wrapper`
   }, renderInputNative(_objectSpread2({
     id: textFieldId,
     inputRef,
@@ -12701,12 +13456,12 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     hasError,
     describedById
   }, forwardedProps))), (isValid || hasError) && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$1d}__input-validity`,
+    className: `${CLASSNAME$1e}__input-validity`,
     color: theme === Theme.dark ? 'light' : undefined,
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
   }), clearButtonProps && isNotEmpty && /*#__PURE__*/React.createElement(IconButton, _extends({}, clearButtonProps, {
-    className: `${CLASSNAME$1d}__input-clear`,
+    className: `${CLASSNAME$1e}__input-clear`,
     icon: mdiCloseCircle,
     emphasis: Emphasis.low,
     size: Size.s,
@@ -12714,20 +13469,20 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     onClick: handleClear,
     type: "button"
   })), afterElement && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1d}__after-element`
+    className: `${CLASSNAME$1e}__after-element`
   }, afterElement)), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
-    className: `${CLASSNAME$1d}__helper`,
+    className: `${CLASSNAME$1e}__helper`,
     kind: Kind.error,
     theme: theme,
     id: errorId
   }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
-    className: `${CLASSNAME$1d}__helper`,
+    className: `${CLASSNAME$1e}__helper`,
     theme: theme,
     id: helperId
   }, helper));
 });
-TextField.displayName = COMPONENT_NAME$1g;
-TextField.className = CLASSNAME$1d;
+TextField.displayName = COMPONENT_NAME$1h;
+TextField.className = CLASSNAME$1e;
 TextField.defaultProps = DEFAULT_PROPS$_;
 
 function getState(img, event) {
@@ -12780,6 +13535,7 @@ function shiftPosition(_ref) {
   const shift = startFocus / (scaledSize - containerSize);
   return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
+
 // Compute CSS properties to apply the focus point.
 const useFocusPointStyle = (_ref2, element, isLoaded) => {
   let {
@@ -12872,7 +13628,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "objectFit", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1p = ["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.
@@ -12881,12 +13637,12 @@ const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "cros
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Thumbnail';
+const COMPONENT_NAME$1i = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1h);
+const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
 
 /**
  * Component default props.
@@ -12905,6 +13661,7 @@ const DEFAULT_PROPS$$ = {
  * @return React element.
  */
 const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
+  var _loadingPlaceholderIm;
   const {
       align,
       alt,
@@ -12923,13 +13680,14 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading: isLoadingProp,
       objectFit,
       loading,
+      loadingPlaceholderImageRef,
       size,
       theme,
       variant,
       linkProps,
       linkAs
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
   const [imgElement, setImgElement] = useState();
 
   // Image loading state.
@@ -12963,12 +13721,20 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     wrapperProps.type = forwardedProps.type || 'button';
     wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
+
+  // If we have a loading placeholder image that is really loaded (complete)
+  const loadingPlaceholderImage = isLoading && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : (_loadingPlaceholderIm = loadingPlaceholderImageRef.current) === null || _loadingPlaceholderIm === void 0 ? void 0 : _loadingPlaceholderIm.complete) && (loadingPlaceholderImageRef === null || loadingPlaceholderImageRef === void 0 ? void 0 : loadingPlaceholderImageRef.current) || undefined;
+
+  // Set loading placeholder image as background
+  const loadingStyle = loadingPlaceholderImage ? {
+    backgroundImage: `url(${loadingPlaceholderImage.src})`
+  } : undefined;
   return /*#__PURE__*/React.createElement(Wrapper, _extends({}, wrapperProps, {
     ref: ref,
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
       align,
       aspectRatio,
-      prefix: CLASSNAME$1e,
+      prefix: CLASSNAME$1f,
       size,
       theme,
       variant,
@@ -12979,14 +13745,21 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       objectFit,
       hasBadge: !!badge
-    }), fillHeight && `${CLASSNAME$1e}--fill-height`)
+    }), fillHeight && `${CLASSNAME$1f}--fill-height`)
   }), /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$1e}__background`
-  }, /*#__PURE__*/React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2(_objectSpread2(_objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle),
-    ref: mergeRefs(setImgElement, propImgRef),
+    className: `${CLASSNAME$1f}__background`
+  }, /*#__PURE__*/React.createElement("img", _extends({
+    // Use placeholder image size
+    width: loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalWidth,
+    height: loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalHeight
+  }, imgProps, {
+    style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+      // Reserve space while loading (when possible)
+      width: isLoading ? (imgProps === null || imgProps === void 0 ? void 0 : imgProps.width) || (loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalWidth) : undefined
+    }, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle), loadingStyle),
+    ref: useMergeRefs(setImgElement, propImgRef),
     className: classnames(handleBasicClasses({
-      prefix: `${CLASSNAME$1e}__image`,
+      prefix: `${CLASSNAME$1f}__image`,
       isLoading,
       hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
     }), imgProps === null || imgProps === void 0 ? void 0 : imgProps.className),
@@ -12995,17 +13768,17 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     alt: alt,
     loading: loading
   })), !isLoading && hasError && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$1e}__fallback`
+    className: `${CLASSNAME$1f}__fallback`
   }, hasIconErrorFallback ? /*#__PURE__*/React.createElement(Icon, {
     icon: fallback,
     size: Size.xxs,
     theme: theme
   }) : fallback)), badge && /*#__PURE__*/React.cloneElement(badge, {
-    className: classnames(`${CLASSNAME$1e}__badge`, badge.props.className)
+    className: classnames(`${CLASSNAME$1f}__badge`, badge.props.className)
   }));
 });
-Thumbnail.displayName = COMPONENT_NAME$1h;
-Thumbnail.className = CLASSNAME$1e;
+Thumbnail.displayName = COMPONENT_NAME$1i;
+Thumbnail.className = CLASSNAME$1f;
 Thumbnail.defaultProps = DEFAULT_PROPS$$;
 
 /**
@@ -13043,7 +13816,7 @@ const ThumbnailObjectFit = {
   contain: 'contain'
 };
 
-const _excluded$1n = ["after", "before", "className", "label"];
+const _excluded$1q = ["after", "before", "className", "label"];
 
 /**
  * Defines the props of the component.
@@ -13052,12 +13825,12 @@ const _excluded$1n = ["after", "before", "className", "label"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Toolbar';
+const COMPONENT_NAME$1j = 'Toolbar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
+const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
 
 /**
  * Component default props.
@@ -13078,7 +13851,7 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       label
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -13086,18 +13859,18 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
       hasAfter: Boolean(after),
       hasBefore: Boolean(before),
       hasLabel: Boolean(label),
-      prefix: CLASSNAME$1f
+      prefix: CLASSNAME$1g
     }))
   }), before && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1f}__before`
+    className: `${CLASSNAME$1g}__before`
   }, before), label && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1f}__label`
+    className: `${CLASSNAME$1g}__label`
   }, label), after && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1f}__after`
+    className: `${CLASSNAME$1g}__after`
   }, after));
 });
-Toolbar.displayName = COMPONENT_NAME$1i;
-Toolbar.className = CLASSNAME$1f;
+Toolbar.displayName = COMPONENT_NAME$1j;
+Toolbar.className = CLASSNAME$1g;
 Toolbar.defaultProps = DEFAULT_PROPS$10;
 
 /**
@@ -13275,7 +14048,7 @@ function useTooltipOpen(delay, anchorElement) {
   };
 }
 
-const _excluded$1o = ["label", "children", "className", "delay", "placement", "forceOpen"];
+const _excluded$1r = ["label", "children", "className", "delay", "placement", "forceOpen"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -13286,12 +14059,12 @@ const _excluded$1o = ["label", "children", "className", "delay", "placement", "f
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Tooltip';
+const COMPONENT_NAME$1k = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
+const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
 
 /**
  * Component default props.
@@ -13322,7 +14095,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       forceOpen
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1r);
   // Disable in SSR or without a label.
   if (!DOCUMENT || !label) {
     return /*#__PURE__*/React.createElement(TooltipContextProvider, null, children);
@@ -13356,23 +14129,23 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     role: "tooltip",
     "aria-label": label,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1g,
+      prefix: CLASSNAME$1h,
       position
     })),
     style: styles.popper
   }, attributes.popper), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1g}__arrow`
+    className: `${CLASSNAME$1h}__arrow`
   }), /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1g}__inner`
+    className: `${CLASSNAME$1h}__inner`
   }, label.indexOf('\n') !== -1 ? label.split('\n').map(sentence => /*#__PURE__*/React.createElement("p", {
     key: sentence
   }, sentence)) : label)), document.body));
 });
-Tooltip.displayName = COMPONENT_NAME$1j;
-Tooltip.className = CLASSNAME$1g;
+Tooltip.displayName = COMPONENT_NAME$1k;
+Tooltip.className = CLASSNAME$1h;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1p = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
+const _excluded$1s = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
 
 /**
  * Uploader variants.
@@ -13398,12 +14171,12 @@ const UploaderVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Uploader';
+const COMPONENT_NAME$1l = 'Uploader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
+const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
 
 /**
  * Component default props.
@@ -13433,7 +14206,7 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
       variant,
       fileInputProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1s);
   // 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]);
@@ -13462,26 +14235,26 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
   }, wrapper.props, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
-      prefix: CLASSNAME$1h,
+      prefix: CLASSNAME$1i,
       size,
       theme,
       variant,
       isDragHovering
     }))
   }), /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$1h}__background`
+    className: `${CLASSNAME$1i}__background`
   }), /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$1h}__wrapper`
+    className: `${CLASSNAME$1i}__wrapper`
   }, icon && /*#__PURE__*/React.createElement(Icon, {
-    className: `${CLASSNAME$1h}__icon`,
+    className: `${CLASSNAME$1i}__icon`,
     icon: icon,
     size: Size.s
   }), label && /*#__PURE__*/React.createElement("span", {
-    className: `${CLASSNAME$1h}__label`
+    className: `${CLASSNAME$1i}__label`
   }, label)), fileInputProps && /*#__PURE__*/React.createElement("input", _extends({
     type: "file",
     id: inputId,
-    className: `${CLASSNAME$1h}__input`
+    className: `${CLASSNAME$1i}__input`
   }, fileInputProps, {
     onChange: onChange,
     onDragEnter: setDragHovering,
@@ -13489,11 +14262,11 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
     onDrop: unsetDragHovering
   })));
 });
-Uploader.displayName = COMPONENT_NAME$1k;
-Uploader.className = CLASSNAME$1h;
+Uploader.displayName = COMPONENT_NAME$1l;
+Uploader.className = CLASSNAME$1i;
 Uploader.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1q = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
+const _excluded$1t = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
 
 /**
  * User block sizes.
@@ -13506,12 +14279,12 @@ const _excluded$1q = ["avatarProps", "className", "fields", "linkProps", "linkAs
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'UserBlock';
+const COMPONENT_NAME$1m = 'UserBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
+const CLASSNAME$1j = getRootClassName(COMPONENT_NAME$1m);
 
 /**
  * Component default props.
@@ -13547,7 +14320,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1t);
   let componentSize = size;
 
   // Special case - When using vertical orientation force the size to be Sizes.l.
@@ -13563,7 +14336,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
     }
     let NameComponent = 'span';
     const nProps = _objectSpread2(_objectSpread2({}, nameProps), {}, {
-      className: classnames(`${CLASSNAME$1i}__name`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
+      className: classnames(`${CLASSNAME$1j}__name`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
     });
     if (isClickable) {
       NameComponent = Link;
@@ -13580,16 +14353,16 @@ 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", {
-    className: `${CLASSNAME$1i}__fields`
+    className: `${CLASSNAME$1j}__fields`
   }, fields.map((field, idx) => /*#__PURE__*/React.createElement("span", {
     key: idx,
-    className: `${CLASSNAME$1i}__field`
+    className: `${CLASSNAME$1j}__field`
   }, field)));
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1i,
+      prefix: CLASSNAME$1j,
       orientation,
       size: componentSize,
       theme,
@@ -13602,21 +14375,21 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
     linkProps: linkProps,
     alt: ""
   }, avatarProps, {
-    className: classnames(`${CLASSNAME$1i}__avatar`, avatarProps.className),
+    className: classnames(`${CLASSNAME$1j}__avatar`, avatarProps.className),
     size: componentSize,
     onClick: onClick,
     theme: theme
   })), (fields || name) && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1i}__wrapper`
+    className: `${CLASSNAME$1j}__wrapper`
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1i}__action`
+    className: `${CLASSNAME$1j}__action`
   }, simpleAction), shouldDisplayActions && multipleActions && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1i}__actions`
+    className: `${CLASSNAME$1j}__actions`
   }, multipleActions));
 });
-UserBlock.displayName = COMPONENT_NAME$1l;
-UserBlock.className = CLASSNAME$1i;
+UserBlock.displayName = COMPONENT_NAME$1m;
+UserBlock.className = CLASSNAME$1j;
 UserBlock.defaultProps = DEFAULT_PROPS$13;
 
-export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
+export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
 //# sourceMappingURL=index.js.map