@lumx/react 3.20.1-alpha.4 → 3.20.1-alpha.6

package/index.js

@@ -257,7 +257,7 @@ const ColorVariant = {
 
 /** ColorPalette with all possible color variant combination */
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -314,9 +314,9 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$1));
 
-var classNames = classnames.exports;
+var classNames$1 = classnames$1.exports;
 
 const mdiAlert = 'M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';
 
@@ -364,6 +364,67 @@ 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
 
 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 classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
 /**
  * Get the basic CSS class for the given type.
  *
@@ -391,7 +452,7 @@ function getBasicClass({
   return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
-const _excluded$1u = ["prefix"];
+const _excluded$1v = ["prefix"];
 
 /**
  * Enhance isEmpty method to also works with numbers.
@@ -421,7 +482,7 @@ function handleBasicClasses(_ref) {
   let {
       prefix
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1u);
+    props = _objectWithoutProperties(_ref, _excluded$1v);
   const otherClasses = {};
   if (!isEmpty(props)) {
     Object.keys(props).forEach(prop => {
@@ -500,7 +561,7 @@ function useId() {
  */
 const forwardRef = React__default.forwardRef;
 
-const _excluded$1t = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
+const _excluded$1u = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2$3 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
 /**
@@ -528,17 +589,17 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1n = 'AlertDialog';
+const COMPONENT_NAME$1o = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = getRootClassName(COMPONENT_NAME$1n);
+const CLASSNAME$1l = getRootClassName(COMPONENT_NAME$1o);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -559,12 +620,12 @@ const AlertDialog = forwardRef((props, ref) => {
       className,
       cancelProps,
       confirmProps,
-      kind = DEFAULT_PROPS$13.kind,
-      size = DEFAULT_PROPS$13.size,
+      kind = DEFAULT_PROPS$14.kind,
+      size = DEFAULT_PROPS$14.size,
       dialogProps,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1u);
   const cancelButtonRef = React__default.useRef(null);
   const confirmationButtonRef = React__default.useRef(null);
   const {
@@ -601,9 +662,9 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-labelledby': titleId,
       'aria-describedby': descriptionId
     }, dialogProps),
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       kind,
-      prefix: CLASSNAME$1k
+      prefix: CLASSNAME$1l
     }))
   }, forwardedProps), {}, {
     children: [/*#__PURE__*/jsx("header", {
@@ -645,9 +706,9 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   }));
 });
-AlertDialog.displayName = COMPONENT_NAME$1n;
-AlertDialog.className = CLASSNAME$1k;
-AlertDialog.defaultProps = DEFAULT_PROPS$13;
+AlertDialog.displayName = COMPONENT_NAME$1o;
+AlertDialog.className = CLASSNAME$1l;
+AlertDialog.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -703,7 +764,7 @@ function useTheme() {
   return React__default.useContext(ThemeContext);
 }
 
-const _excluded$1s = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
+const _excluded$1t = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
 /**
  * Resolve disabled state from props.
  * (handles `disabled`, `isDisabled` and `aria-disabled`)
@@ -718,7 +779,7 @@ function useDisableStateProps(props) {
       onClick,
       onChange
     } = props,
-    otherProps = _objectWithoutProperties(props, _excluded$1s);
+    otherProps = _objectWithoutProperties(props, _excluded$1t);
   const disabledStateContext = useDisabledStateContext();
   const disabledStateProps = {
     disabled: (disabledStateContext === null || disabledStateContext === void 0 ? void 0 : disabledStateContext.state) === 'disabled' || isDisabled,
@@ -736,21 +797,21 @@ function useDisableStateProps(props) {
   };
 }
 
-const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
+const _excluded$1s = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'Autocomplete';
+const COMPONENT_NAME$1n = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = getRootClassName(COMPONENT_NAME$1m);
+const CLASSNAME$1k = getRootClassName(COMPONENT_NAME$1n);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -772,13 +833,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-      anchorToInput = DEFAULT_PROPS$12.anchorToInput,
+      anchorToInput = DEFAULT_PROPS$13.anchorToInput,
       children,
       chips,
       className,
-      closeOnClick = DEFAULT_PROPS$12.closeOnClick,
-      closeOnClickAway = DEFAULT_PROPS$12.closeOnClickAway,
-      closeOnEscape = DEFAULT_PROPS$12.closeOnEscape,
+      closeOnClick = DEFAULT_PROPS$13.closeOnClick,
+      closeOnClickAway = DEFAULT_PROPS$13.closeOnClickAway,
+      closeOnEscape = DEFAULT_PROPS$13.closeOnEscape,
       error,
       fitToAnchorWidth,
       hasError,
@@ -799,20 +860,20 @@ const Autocomplete = forwardRef((props, ref) => {
       onInfiniteScroll,
       placeholder,
       placement,
-      shouldFocusOnClose = DEFAULT_PROPS$12.shouldFocusOnClose,
+      shouldFocusOnClose = DEFAULT_PROPS$13.shouldFocusOnClose,
       theme = defaultTheme,
       value,
       textFieldProps = {},
       focusAnchorOnClose
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1r);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1s);
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$1j),
+    className: classNames$1(className, CLASSNAME$1k),
     children: [/*#__PURE__*/jsx(TextField, _objectSpread2(_objectSpread2(_objectSpread2({}, textFieldProps), {}, {
       chips: chips,
       error: error,
@@ -851,25 +912,25 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   }));
 });
-Autocomplete.displayName = COMPONENT_NAME$1m;
-Autocomplete.className = CLASSNAME$1j;
-Autocomplete.defaultProps = DEFAULT_PROPS$12;
+Autocomplete.displayName = COMPONENT_NAME$1n;
+Autocomplete.className = CLASSNAME$1k;
+Autocomplete.defaultProps = DEFAULT_PROPS$13;
 
-const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
+const _excluded$1r = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'AutocompleteMultiple';
+const COMPONENT_NAME$1m = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
+const CLASSNAME$1j = getRootClassName(COMPONENT_NAME$1m);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$12 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -909,8 +970,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       chipsAlignment,
       className,
-      closeOnClickAway = DEFAULT_PROPS$11.closeOnClickAway,
-      closeOnEscape = DEFAULT_PROPS$11.closeOnEscape,
+      closeOnClickAway = DEFAULT_PROPS$12.closeOnClickAway,
+      closeOnEscape = DEFAULT_PROPS$12.closeOnEscape,
       fitToAnchorWidth,
       hasError,
       helper,
@@ -932,19 +993,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
       onKeyDown,
       placeholder,
       placement,
-      selectedChipRender = DEFAULT_PROPS$11.selectedChipRender,
+      selectedChipRender = DEFAULT_PROPS$12.selectedChipRender,
       shouldFocusOnClose,
       theme = defaultTheme,
       type,
       value,
-      values = DEFAULT_PROPS$11.values
+      values = DEFAULT_PROPS$12.values
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1q);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1r);
   return /*#__PURE__*/jsx(Autocomplete, _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
     anchorToInput: anchorToInput,
-    className: classNames(className, CLASSNAME$1i),
+    className: classNames$1(className, CLASSNAME$1j),
     name: name,
     value: value,
     onChange: onChange,
@@ -977,25 +1038,25 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   }));
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1l;
-AutocompleteMultiple.className = CLASSNAME$1i;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$11;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1m;
+AutocompleteMultiple.className = CLASSNAME$1j;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1p = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
+const _excluded$1q = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Avatar';
+const COMPONENT_NAME$1l = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
+const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   size: Size.m
 };
 
@@ -1018,23 +1079,23 @@ const Avatar = forwardRef((props, ref) => {
       linkAs,
       onClick,
       onKeyPress,
-      size = DEFAULT_PROPS$10.size,
+      size = DEFAULT_PROPS$11.size,
       theme = defaultTheme,
       thumbnailProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$1h,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$1i,
       size,
       theme
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, _objectSpread2(_objectSpread2({
       linkProps: linkProps,
       linkAs: linkAs,
-      className: `${CLASSNAME$1h}__thumbnail`,
+      className: `${CLASSNAME$1i}__thumbnail`,
       onClick: onClick,
       onKeyPress: onKeyPress
     }, thumbnailProps), {}, {
@@ -1044,33 +1105,33 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     })), actions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$1h}__actions`,
+      className: `${CLASSNAME$1i}__actions`,
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$1h}__badge`,
+      className: `${CLASSNAME$1i}__badge`,
       children: badge
     })]
   }));
 });
-Avatar.displayName = COMPONENT_NAME$1k;
-Avatar.className = CLASSNAME$1h;
-Avatar.defaultProps = DEFAULT_PROPS$10;
+Avatar.displayName = COMPONENT_NAME$1l;
+Avatar.className = CLASSNAME$1i;
+Avatar.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1o = ["children", "className", "color"];
+const _excluded$1p = ["children", "className", "color"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Badge';
+const COMPONENT_NAME$1k = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
+const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$10 = {
   color: ColorPalette.primary
 };
 
@@ -1085,52 +1146,52 @@ const Badge = forwardRef((props, ref) => {
   const {
       children,
       className,
-      color = DEFAULT_PROPS$$.color
+      color = DEFAULT_PROPS$10.color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$1g,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$1h,
       color
     })),
     children: children
   }));
 });
-Badge.displayName = COMPONENT_NAME$1j;
-Badge.className = CLASSNAME$1g;
-Badge.defaultProps = DEFAULT_PROPS$$;
+Badge.displayName = COMPONENT_NAME$1k;
+Badge.className = CLASSNAME$1h;
+Badge.defaultProps = DEFAULT_PROPS$10;
 
-const _excluded$1n = ["badge", "children", "className"];
+const _excluded$1o = ["badge", "children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'BadgeWrapper';
+const COMPONENT_NAME$1j = 'BadgeWrapper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
+const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
       badge,
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$1f),
+    className: classNames$1(className, CLASSNAME$1g),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$1f}__badge`,
+      className: `${CLASSNAME$1g}__badge`,
       children: badge
     })]
   }));
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1f;
+BadgeWrapper.className = CLASSNAME$1g;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1173,29 +1234,58 @@ const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.incl
  */
 const VISUALLY_HIDDEN = 'visually-hidden';
 
-const _excluded$1m = ["linkAs"];
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
+const _excluded$1n = ["children", "onClick", "disabled", "isDisabled", "aria-disabled", "as"];
 /**
- * Render link with default <a> HTML component or a custom one provided by `linkAs`.
- *
- * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
- *
- * @param linkAs    Custom link component.
- * @param children  Link children.
- * @return          A link.
+ * Render clickable element (link, button or custom element)
+ * (also does some basic disabled state handling)
  */
-const renderLink = (_ref, ...children) => {
-  let {
-      linkAs
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$1m);
-  return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
-};
+const RawClickable = forwardRefPolymorphic((props, ref) => {
+  const {
+      children,
+      onClick,
+      disabled,
+      isDisabled = disabled,
+      'aria-disabled': ariaDisabled,
+      as
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+  const isAnyDisabled = isDisabled || ariaDisabled === 'true' || ariaDisabled === true;
+  const Component = as;
+  let clickableProps;
+  if (Component === 'button') {
+    clickableProps = {
+      type: forwardedProps.type || 'button',
+      disabled: isDisabled
+    };
+  } else {
+    clickableProps = {
+      tabIndex: isDisabled ? '-1' : forwardedProps.tabIndex
+    };
+  }
+  return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref,
+    "aria-disabled": isAnyDisabled || undefined
+  }, forwardedProps), clickableProps), {}, {
+    onClick: event => {
+      if (isAnyDisabled) {
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    },
+    children: children
+  }));
+});
 
-const _excluded$1l = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "href", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
+const _excluded$1m = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "size", "theme", "variant", "fullWidth"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'ButtonRoot';
+const COMPONENT_NAME$1i = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;
 const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;
 
@@ -1213,7 +1303,7 @@ const renderButtonWrapper = props => {
     fullWidth
   } = props;
   const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
-  const wrapperClassName = classNames(handleBasicClasses({
+  const wrapperClassName = classNames$1(handleBasicClasses({
     color: adaptedColor,
     prefix: BUTTON_WRAPPER_CLASSNAME,
     variant,
@@ -1248,21 +1338,17 @@ const ButtonRoot = forwardRef((props, ref) => {
       color,
       emphasis,
       hasBackground,
-      href,
       isSelected,
       isActive,
       isFocused,
       isHovered,
       linkAs,
-      name,
       size,
-      target,
       theme,
       variant,
-      type = 'button',
       fullWidth
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1l);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1m);
   const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
   if (hasBackground) {
     return renderButtonWrapper(_objectSpread2(_objectSpread2({}, props), {}, {
@@ -1271,11 +1357,11 @@ const ButtonRoot = forwardRef((props, ref) => {
       color: adaptedColor
     }));
   }
-  const buttonClassName = classNames(className, handleBasicClasses({
+  const buttonClassName = classNames$1(className, handleBasicClasses({
     color: adaptedColor,
     emphasis,
     isSelected,
-    isDisabled: isAnyDisabled,
+    isDisabled: props.isDisabled || props['aria-disabled'],
     isActive,
     isFocused,
     isHovered,
@@ -1285,40 +1371,20 @@ const ButtonRoot = forwardRef((props, ref) => {
     variant,
     fullWidth
   }));
-
-  /**
-   * If the linkAs prop is used, we use the linkAs component instead of a <button>.
-   * If there is an href attribute, we display an <a> instead of a <button>.
-   *
-   * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
-   */
-  if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
-    return renderLink(_objectSpread2(_objectSpread2({
-      linkAs
-    }, forwardedProps), {}, {
-      'aria-label': ariaLabel,
-      href,
-      target,
-      className: buttonClassName,
-      ref: ref
-    }), children);
-  }
-  return /*#__PURE__*/jsx("button", _objectSpread2(_objectSpread2(_objectSpread2({}, forwardedProps), disabledStateProps), {}, {
+  return /*#__PURE__*/jsx(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
+    as: linkAs || (forwardedProps.href ? 'a' : 'button')
+  }, forwardedProps), disabledStateProps), {}, {
     "aria-disabled": isAnyDisabled,
     "aria-label": ariaLabel,
     ref: ref,
     className: buttonClassName,
-    name: name,
-    type:
-    // eslint-disable-next-line react/button-has-type
-    type,
     children: children
   }));
 });
-ButtonRoot.displayName = COMPONENT_NAME$1h;
+ButtonRoot.displayName = COMPONENT_NAME$1i;
 ButtonRoot.defaultProps = {};
 
-const _excluded$1k = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
+const _excluded$1l = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
 const ButtonEmphasis = Emphasis;
 
 /**
@@ -1328,17 +1394,17 @@ const ButtonEmphasis = Emphasis;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'Button';
+const COMPONENT_NAME$1h = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1g);
+const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1h);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1355,19 +1421,19 @@ const Button = forwardRef((props, ref) => {
   const {
       children,
       className,
-      emphasis = DEFAULT_PROPS$_.emphasis,
+      emphasis = DEFAULT_PROPS$$.emphasis,
       leftIcon,
       rightIcon,
-      size = DEFAULT_PROPS$_.size,
+      size = DEFAULT_PROPS$$.size,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
-  const buttonClassName = classNames(className, getBasicClass({
-    prefix: CLASSNAME$1e,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+  const buttonClassName = classNames$1(className, getBasicClass({
+    prefix: CLASSNAME$1f,
     type: 'hasLeftIcon',
     value: !isEmpty(leftIcon)
   }), getBasicClass({
-    prefix: CLASSNAME$1e,
+    prefix: CLASSNAME$1f,
     type: 'hasRightIcon',
     value: !isEmpty(rightIcon)
   }));
@@ -1401,25 +1467,25 @@ const Button = forwardRef((props, ref) => {
     })]
   }));
 });
-Button.displayName = COMPONENT_NAME$1g;
-Button.className = CLASSNAME$1e;
-Button.defaultProps = DEFAULT_PROPS$_;
+Button.displayName = COMPONENT_NAME$1h;
+Button.className = CLASSNAME$1f;
+Button.defaultProps = DEFAULT_PROPS$$;
 
-const _excluded$1j = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
+const _excluded$1k = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'IconButton';
+const COMPONENT_NAME$1g = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = getRootClassName(COMPONENT_NAME$1f);
+const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1g);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {
+const DEFAULT_PROPS$_ = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1434,16 +1500,16 @@ const DEFAULT_PROPS$Z = {
 const IconButton = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
-      emphasis = DEFAULT_PROPS$Z.emphasis,
+      emphasis = DEFAULT_PROPS$_.emphasis,
       image,
       icon,
       label,
-      size = DEFAULT_PROPS$Z.size,
+      size = DEFAULT_PROPS$_.size,
       theme = defaultTheme,
       tooltipProps,
       hideTooltip
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   return /*#__PURE__*/jsx(Tooltip, _objectSpread2(_objectSpread2({
     label: hideTooltip ? '' : label
   }, tooltipProps), {}, {
@@ -1469,25 +1535,25 @@ const IconButton = forwardRef((props, ref) => {
     }))
   }));
 });
-IconButton.displayName = COMPONENT_NAME$1f;
-IconButton.className = CLASSNAME$1d;
-IconButton.defaultProps = DEFAULT_PROPS$Z;
+IconButton.displayName = COMPONENT_NAME$1g;
+IconButton.className = CLASSNAME$1e;
+IconButton.defaultProps = DEFAULT_PROPS$_;
 
-const _excluded$1i = ["children", "className"];
+const _excluded$1j = ["children", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ButtonGroup';
+const COMPONENT_NAME$1f = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = getRootClassName(COMPONENT_NAME$1e);
+const CLASSNAME$1d = getRootClassName(COMPONENT_NAME$1f);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {};
+const DEFAULT_PROPS$Z = {};
 
 /**
  * ButtonGroup component.
@@ -1501,19 +1567,19 @@ const ButtonGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$1c),
+    className: classNames$1(className, CLASSNAME$1d),
     children: children
   }));
 });
-ButtonGroup.displayName = COMPONENT_NAME$1e;
-ButtonGroup.className = CLASSNAME$1c;
-ButtonGroup.defaultProps = DEFAULT_PROPS$Y;
+ButtonGroup.displayName = COMPONENT_NAME$1f;
+ButtonGroup.className = CLASSNAME$1d;
+ButtonGroup.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1h = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$1i = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 /**
  * Intermediate state of checkbox.
  */
@@ -1526,17 +1592,17 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'Checkbox';
+const COMPONENT_NAME$1e = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = getRootClassName(COMPONENT_NAME$1d);
+const CLASSNAME$1c = getRootClassName(COMPONENT_NAME$1e);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$Y = {};
 
 /**
  * Checkbox component.
@@ -1566,7 +1632,7 @@ const Checkbox = forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1h);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1i);
   const localInputRef = React__default.useRef(null);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
@@ -1583,21 +1649,21 @@ const Checkbox = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       // Whether state is intermediate class name will "-checked"
       isChecked: intermediateState ? true : isChecked,
       isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
-      prefix: CLASSNAME$1b,
+      prefix: CLASSNAME$1c,
       theme
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$1b}__input-wrapper`,
+      className: `${CLASSNAME$1c}__input-wrapper`,
       children: [/*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({
         ref: useMergeRefs(inputRef, localInputRef),
         type: "checkbox",
         id: inputId,
-        className: `${CLASSNAME$1b}__input-native`
+        className: `${CLASSNAME$1c}__input-native`
       }, disabledStateProps), {}, {
         name: name,
         value: value,
@@ -1607,35 +1673,35 @@ const Checkbox = forwardRef((props, ref) => {
         "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
         readOnly: inputProps.readOnly || disabledStateProps['aria-disabled']
       }, inputProps)), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$1b}__input-placeholder`,
+        className: `${CLASSNAME$1c}__input-placeholder`,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$1b}__input-background`
+          className: `${CLASSNAME$1c}__input-background`
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$1b}__input-indicator`,
+          className: `${CLASSNAME$1c}__input-indicator`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$1b}__content`,
+      className: `${CLASSNAME$1c}__content`,
       children: [label && /*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
-        className: `${CLASSNAME$1b}__label`,
+        className: `${CLASSNAME$1c}__label`,
         theme: theme,
         children: label
       }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
-        className: `${CLASSNAME$1b}__helper`,
+        className: `${CLASSNAME$1c}__helper`,
         theme: theme,
         children: helper
       })]
     })]
   }));
 });
-Checkbox.displayName = COMPONENT_NAME$1d;
-Checkbox.className = CLASSNAME$1b;
-Checkbox.defaultProps = DEFAULT_PROPS$X;
+Checkbox.displayName = COMPONENT_NAME$1e;
+Checkbox.className = CLASSNAME$1c;
+Checkbox.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1779,21 +1845,21 @@ function detectHorizontalSwipe(touchSurface, handleSwipe) {
   };
 }
 
-const _excluded$1g = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
+const _excluded$1h = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'Chip';
+const COMPONENT_NAME$1d = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1c);
+const CLASSNAME$1b = getRootClassName(COMPONENT_NAME$1d);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$X = {
   size: Size.m
 };
 
@@ -1823,12 +1889,12 @@ const Chip = forwardRef((props, ref) => {
       onAfterClick,
       onBeforeClick,
       onClick,
-      size = DEFAULT_PROPS$W.size,
+      size = DEFAULT_PROPS$X.size,
       theme = defaultTheme,
       href,
       onKeyDown
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1g);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1h);
   const hasAfterClick = isFunction(onAfterClick);
   const hasBeforeClick = isFunction(onBeforeClick);
   const hasOnClick = isFunction(props.onClick);
@@ -1854,14 +1920,14 @@ const Chip = forwardRef((props, ref) => {
     }, forwardedProps), {}, {
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames(className, handleBasicClasses({
+      className: classNames$1(className, handleBasicClasses({
         clickable: isClickable,
         color: chipColor,
         isDisabled: isAnyDisabled,
         hasAfter: Boolean(after),
         hasBefore: Boolean(before),
         highlighted: Boolean(isHighlighted),
-        prefix: CLASSNAME$1a,
+        prefix: CLASSNAME$1b,
         selected: Boolean(isSelected),
         size,
         unselected: Boolean(!isSelected)
@@ -1873,20 +1939,20 @@ const Chip = forwardRef((props, ref) => {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: classNames(`${CLASSNAME$1a}__before`, {
-          [`${CLASSNAME$1a}__before--is-clickable`]: hasBeforeClick
+        className: classNames$1(`${CLASSNAME$1b}__before`, {
+          [`${CLASSNAME$1b}__before--is-clickable`]: hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$1a}__label`,
+        className: `${CLASSNAME$1b}__label`,
         children: children
       }), after &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: classNames(`${CLASSNAME$1a}__after`, {
-          [`${CLASSNAME$1a}__after--is-clickable`]: hasAfterClick
+        className: classNames$1(`${CLASSNAME$1b}__after`, {
+          [`${CLASSNAME$1b}__after--is-clickable`]: hasAfterClick
         }),
         onClick: handleOnAfterClick,
         children: after
@@ -1894,9 +1960,9 @@ const Chip = forwardRef((props, ref) => {
     }))
   );
 });
-Chip.displayName = COMPONENT_NAME$1c;
-Chip.className = CLASSNAME$1a;
-Chip.defaultProps = DEFAULT_PROPS$W;
+Chip.displayName = COMPONENT_NAME$1d;
+Chip.className = CLASSNAME$1b;
+Chip.defaultProps = DEFAULT_PROPS$X;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1949,21 +2015,21 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
   };
 };
 
-const _excluded$1f = ["align", "children", "className"];
+const _excluded$1g = ["align", "children", "className"];
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {};
+const DEFAULT_PROPS$W = {};
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ChipGroup';
+const COMPONENT_NAME$1c = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1b);
+const CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1c);
 
 /**
  * ChipGroup component.
@@ -1978,22 +2044,22 @@ const InternalChipGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$19),
+    className: classNames$1(className, CLASSNAME$1a),
     children: children
   }));
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1b;
-InternalChipGroup.className = CLASSNAME$19;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$V;
+InternalChipGroup.displayName = COMPONENT_NAME$1c;
+InternalChipGroup.className = CLASSNAME$1a;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$W;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
 
-const _excluded$1e = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
+const _excluded$1f = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
 /**
  * Comment block variants.
  */
@@ -2009,17 +2075,17 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'CommentBlock';
+const COMPONENT_NAME$1b = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1a);
+const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1b);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2049,76 +2115,76 @@ const CommentBlock = forwardRef((props, ref) => {
       onMouseLeave,
       text,
       theme = defaultTheme,
-      variant = DEFAULT_PROPS$U.variant
+      variant = DEFAULT_PROPS$V.variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       hasChildren: hasChildren && isOpen,
       hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
       hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
       isRelevant,
-      prefix: CLASSNAME$18,
+      prefix: CLASSNAME$19,
       theme
     }))
   }, forwardedProps), {}, {
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$18}__wrapper`,
+      className: `${CLASSNAME$19}__wrapper`,
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$18}__avatar`,
+        className: `${CLASSNAME$19}__avatar`,
         children: /*#__PURE__*/jsx(Avatar, _objectSpread2(_objectSpread2({}, avatarProps), {}, {
           size: Size.m,
           onClick: onClick
         }))
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$18}__container`,
+        className: `${CLASSNAME$19}__container`,
         children: [/*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME$18}__content`,
+          className: `${CLASSNAME$19}__content`,
           children: [/*#__PURE__*/jsxs("div", {
-            className: `${CLASSNAME$18}__meta`,
+            className: `${CLASSNAME$19}__meta`,
             children: [name &&
             /*#__PURE__*/
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
             jsx("span", {
-              className: `${CLASSNAME$18}__name`,
+              className: `${CLASSNAME$19}__name`,
               onClick: onClick,
               onMouseEnter: onMouseEnter,
               onMouseLeave: onMouseLeave,
               children: name
             }), headerActions && /*#__PURE__*/jsx("span", {
-              className: `${CLASSNAME$18}__header-actions`,
+              className: `${CLASSNAME$19}__header-actions`,
               children: headerActions
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME$18}__text`,
+            className: `${CLASSNAME$19}__text`,
             children: text
           }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
             label: fullDate,
             placement: "top",
             children: /*#__PURE__*/jsx("span", {
-              className: `${CLASSNAME$18}__date`,
+              className: `${CLASSNAME$19}__date`,
               children: date
             })
           }) : /*#__PURE__*/jsx("span", {
-            className: `${CLASSNAME$18}__date`,
+            className: `${CLASSNAME$19}__date`,
             children: date
           }))]
         }), hasActions && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$18}__actions`,
+          className: `${CLASSNAME$19}__actions`,
           children: actions
         })]
       })]
     }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$18}__children`,
+      className: `${CLASSNAME$19}__children`,
       children: children
     })]
   }));
 });
-CommentBlock.displayName = COMPONENT_NAME$1a;
-CommentBlock.className = CLASSNAME$18;
-CommentBlock.defaultProps = DEFAULT_PROPS$U;
+CommentBlock.displayName = COMPONENT_NAME$1b;
+CommentBlock.className = CLASSNAME$19;
+CommentBlock.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2138,12 +2204,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'DatePicker';
+const COMPONENT_NAME$1a = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$19);
+const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1a);
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -2369,7 +2435,7 @@ function formatDayNumber(locale, date) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'DatePickerControlled';
+const COMPONENT_NAME$19 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2456,10 +2522,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$17}`,
+    className: `${CLASSNAME$18}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
-      className: `${CLASSNAME$17}__toolbar`,
+      className: `${CLASSNAME$18}__toolbar`,
       after: /*#__PURE__*/jsx(IconButton, _objectSpread2(_objectSpread2({}, nextButtonProps), {}, {
         emphasis: Emphasis.low,
         icon: mdiChevronRight,
@@ -2477,7 +2543,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
-          className: `${CLASSNAME$17}__month`,
+          className: `${CLASSNAME$18}__month`,
           orientation: "horizontal",
           hAlign: "center",
           gap: "regular",
@@ -2492,7 +2558,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
             min: 0,
             onBlur: updateYear,
             onKeyPress: updateYearOnEnterPressed,
-            className: `${CLASSNAME$17}__year`
+            className: `${CLASSNAME$18}__year`
           }, "year") : /*#__PURE__*/jsx(Text, {
             as: "p",
             children: part
@@ -2500,17 +2566,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
         })]
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$17}__calendar`,
+      className: `${CLASSNAME$18}__calendar`,
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$17}__week-days ${CLASSNAME$17}__days-wrapper`,
+        className: `${CLASSNAME$18}__week-days ${CLASSNAME$18}__days-wrapper`,
         children: weekDays.map(({
           letter,
           number,
           long
         }) => /*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME$17}__day-wrapper`,
+          className: `${CLASSNAME$18}__day-wrapper`,
           children: [/*#__PURE__*/jsx("span", {
-            className: `${CLASSNAME$17}__week-day`,
+            className: `${CLASSNAME$18}__week-day`,
             "aria-hidden": true,
             children: letter.toLocaleUpperCase()
           }), /*#__PURE__*/jsx("span", {
@@ -2519,7 +2585,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           })]
         }, number))
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$17}__month-days ${CLASSNAME$17}__days-wrapper`,
+        className: `${CLASSNAME$18}__month-days ${CLASSNAME$18}__days-wrapper`,
         children: weeks.flatMap((week, weekIndex) => {
           return weekDays.map((weekDay, dayIndex) => {
             const {
@@ -2530,11 +2596,11 @@ const DatePickerControlled = forwardRef((props, ref) => {
             const isToday = !isOutOfRange && date && isSameDay(date, new Date());
             const isSelected = date && value && isSameDay(value, date);
             return /*#__PURE__*/jsx("div", {
-              className: `${CLASSNAME$17}__day-wrapper`,
+              className: `${CLASSNAME$18}__day-wrapper`,
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: classNames(`${CLASSNAME$17}__month-day`, {
-                  [`${CLASSNAME$17}__month-day--is-today`]: isToday
+                className: classNames$1(`${CLASSNAME$18}__month-day`, {
+                  [`${CLASSNAME$18}__month-day--is-today`]: isToday
                 }),
                 disabled: isOutOfRange,
                 isSelected: isSelected,
@@ -2559,10 +2625,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$18;
-DatePickerControlled.className = CLASSNAME$17;
+DatePickerControlled.displayName = COMPONENT_NAME$19;
+DatePickerControlled.className = CLASSNAME$18;
 
-const _excluded$1d = ["defaultMonth", "locale", "value", "onChange"];
+const _excluded$1e = ["defaultMonth", "locale", "value", "onChange"];
 /**
  * DatePicker component.
  *
@@ -2577,7 +2643,7 @@ const DatePicker = forwardRef((props, ref) => {
       value,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   let referenceDate = value || defaultMonth || new Date();
   if (!isDateValid(referenceDate)) {
     // eslint-disable-next-line no-console
@@ -2603,8 +2669,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   }));
 });
-DatePicker.displayName = COMPONENT_NAME$19;
-DatePicker.className = CLASSNAME$17;
+DatePicker.displayName = COMPONENT_NAME$1a;
+DatePicker.className = CLASSNAME$18;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -2614,11 +2680,11 @@ const useBooleanState = defaultValue => {
   return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };
 
-const _excluded$1c = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
+const _excluded$1d = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'DatePickerField';
+const COMPONENT_NAME$18 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2643,7 +2709,7 @@ const DatePickerField = forwardRef((props, ref) => {
       previousButtonProps,
       value
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1d);
   const anchorRef = useRef(null);
   const [isOpen, close,, toggleOpen] = useBooleanState(false);
   const handleKeyboardNav = useCallback(evt => {
@@ -2707,7 +2773,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$17;
+DatePickerField.displayName = COMPONENT_NAME$18;
 
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
@@ -3191,24 +3257,24 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
   return isVisible || isComponentVisible;
 };
 
-const _excluded$1b = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
+const _excluded$1c = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
 const isHeader$1 = isComponent('header');
 const isFooter$1 = isComponent('footer');
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'Dialog';
+const COMPONENT_NAME$17 = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$16);
+const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$17);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   size: Size.big,
   disableBodyScroll: true
 };
@@ -3240,15 +3306,15 @@ const Dialog = forwardRef((props, ref) => {
       parentElement,
       contentRef,
       preventAutoClose,
-      size = DEFAULT_PROPS$T.size,
+      size = DEFAULT_PROPS$U.size,
       zIndex,
       dialogProps,
       onVisibilityChange,
-      disableBodyScroll = DEFAULT_PROPS$T.disableBodyScroll,
+      disableBodyScroll = DEFAULT_PROPS$U.disableBodyScroll,
       preventCloseOnClick,
       preventCloseOnEscape
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = React__default.useRef(isOpen);
@@ -3315,24 +3381,24 @@ const Dialog = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
       ref: mergeRefs(rootRef, ref)
     }, forwardedProps), {}, {
-      className: classNames(className, handleBasicClasses({
+      className: classNames$1(className, handleBasicClasses({
         isHidden: !isOpen,
         isLoading,
         isShown: isOpen || isVisible,
-        prefix: CLASSNAME$16,
+        prefix: CLASSNAME$17,
         size
       })),
       style: {
         zIndex
       },
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$16}__overlay`
+        className: `${CLASSNAME$17}__overlay`
       }), /*#__PURE__*/jsx(HeadingLevelProvider, {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
           children: /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
-            className: `${CLASSNAME$16}__container`,
+            className: `${CLASSNAME$17}__container`,
             role: "dialog",
             "aria-modal": "true"
           }, dialogProps), {}, {
@@ -3341,26 +3407,26 @@ const Dialog = forwardRef((props, ref) => {
               childrenRefs: clickAwayRefs,
               parentRef: rootRef,
               children: /*#__PURE__*/jsxs("section", {
-                className: `${CLASSNAME$16}__wrapper`,
+                className: `${CLASSNAME$17}__wrapper`,
                 ref: wrapperRef,
                 children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", _objectSpread2(_objectSpread2({}, headerChildProps), {}, {
-                  className: classNames(`${CLASSNAME$16}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$16}__header--has-divider`, headerChildProps === null || headerChildProps === void 0 ? void 0 : headerChildProps.className),
+                  className: classNames$1(`${CLASSNAME$17}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$17}__header--has-divider`, headerChildProps === null || headerChildProps === void 0 ? void 0 : headerChildProps.className),
                   children: [header, headerChildContent]
                 })), /*#__PURE__*/jsxs("div", {
                   ref: mergeRefs(contentRef, localContentRef),
-                  className: `${CLASSNAME$16}__content`,
+                  className: `${CLASSNAME$17}__content`,
                   children: [/*#__PURE__*/jsx("div", {
-                    className: `${CLASSNAME$16}__sentinel ${CLASSNAME$16}__sentinel--top`,
+                    className: `${CLASSNAME$17}__sentinel ${CLASSNAME$17}__sentinel--top`,
                     ref: setSentinelTop
                   }), content, /*#__PURE__*/jsx("div", {
-                    className: `${CLASSNAME$16}__sentinel ${CLASSNAME$16}__sentinel--bottom`,
+                    className: `${CLASSNAME$17}__sentinel ${CLASSNAME$17}__sentinel--bottom`,
                     ref: setSentinelBottom
                   })]
                 }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", _objectSpread2(_objectSpread2({}, footerChildProps), {}, {
-                  className: classNames(`${CLASSNAME$16}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$16}__footer--has-divider`, footerChildProps === null || footerChildProps === void 0 ? void 0 : footerChildProps.className),
+                  className: classNames$1(`${CLASSNAME$17}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$17}__footer--has-divider`, footerChildProps === null || footerChildProps === void 0 ? void 0 : footerChildProps.className),
                   children: [footer, footerChildContent]
                 })), isLoading && /*#__PURE__*/jsx("div", {
-                  className: `${CLASSNAME$16}__progress-overlay`,
+                  className: `${CLASSNAME$17}__progress-overlay`,
                   children: /*#__PURE__*/jsx(Progress, {
                     variant: ProgressVariant.circular
                   })
@@ -3373,25 +3439,25 @@ const Dialog = forwardRef((props, ref) => {
     }))
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$16;
-Dialog.className = CLASSNAME$16;
-Dialog.defaultProps = DEFAULT_PROPS$T;
+Dialog.displayName = COMPONENT_NAME$17;
+Dialog.className = CLASSNAME$17;
+Dialog.defaultProps = DEFAULT_PROPS$U;
 
-const _excluded$1a = ["className", "theme"];
+const _excluded$1b = ["className", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'Divider';
+const COMPONENT_NAME$16 = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$15);
+const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$16);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$T = {};
 
 /**
  * Divider component.
@@ -3406,30 +3472,30 @@ const Divider = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
   return /*#__PURE__*/jsx("hr", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$15,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$16,
       theme
     }))
   }));
 });
-Divider.displayName = COMPONENT_NAME$15;
-Divider.className = CLASSNAME$15;
-Divider.defaultProps = DEFAULT_PROPS$S;
+Divider.displayName = COMPONENT_NAME$16;
+Divider.className = CLASSNAME$16;
+Divider.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$19 = ["className", "theme"];
+const _excluded$1a = ["className", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'DragHandle';
+const COMPONENT_NAME$15 = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$14);
+const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$15);
 
 /**
  * DragHandle component.
@@ -3444,12 +3510,12 @@ const DragHandle = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$14,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$15,
       theme
     })),
     children: /*#__PURE__*/jsx(Icon, {
@@ -3459,8 +3525,8 @@ const DragHandle = forwardRef((props, ref) => {
     })
   }));
 });
-DragHandle.displayName = COMPONENT_NAME$14;
-DragHandle.className = CLASSNAME$14;
+DragHandle.displayName = COMPONENT_NAME$15;
+DragHandle.className = CLASSNAME$15;
 
 const INITIAL_INDEX$1 = -1;
 
@@ -3626,21 +3692,39 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
+const _excluded$19 = ["linkAs"];
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+const renderLink = (_ref, ...children) => {
+  let {
+      linkAs
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$19);
+  return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+};
+
 const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'ListItem';
+const COMPONENT_NAME$14 = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$13);
+const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$14);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$S = {
   size: Size.regular
 };
 
@@ -3679,7 +3763,7 @@ const ListItem = forwardRef((props, ref) => {
       linkProps = {},
       linkRef,
       onItemSelected,
-      size = DEFAULT_PROPS$R.size
+      size = DEFAULT_PROPS$S.size
     } = otherProps,
     forwardedProps = _objectWithoutProperties(otherProps, _excluded$18);
   const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -3690,21 +3774,21 @@ const ListItem = forwardRef((props, ref) => {
   }, [role, onItemSelected]);
   const content = /*#__PURE__*/jsxs(Fragment, {
     children: [before && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$13}__before`,
+      className: `${CLASSNAME$14}__before`,
       children: before
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$13}__content`,
+      className: `${CLASSNAME$14}__content`,
       children: children
     }), after && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$13}__after`,
+      className: `${CLASSNAME$14}__after`,
       children: after
     })]
   });
   return /*#__PURE__*/jsx("li", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$13,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$14,
       size
     })),
     children: isClickable({
@@ -3718,8 +3802,8 @@ const ListItem = forwardRef((props, ref) => {
       'aria-disabled': isAnyDisabled
     }, linkProps), {}, {
       href: isAnyDisabled ? undefined : linkProps.href,
-      className: classNames(handleBasicClasses({
-        prefix: `${CLASSNAME$13}__link`,
+      className: classNames$1(handleBasicClasses({
+        prefix: `${CLASSNAME$14}__link`,
         isHighlighted,
         isSelected,
         isDisabled: isAnyDisabled
@@ -3731,14 +3815,14 @@ const ListItem = forwardRef((props, ref) => {
     /*#__PURE__*/
     /* Non clickable list item */
     jsx("div", {
-      className: `${CLASSNAME$13}__wrapper`,
+      className: `${CLASSNAME$14}__wrapper`,
       children: content
     })
   }));
 });
-ListItem.displayName = COMPONENT_NAME$13;
-ListItem.className = CLASSNAME$13;
-ListItem.defaultProps = DEFAULT_PROPS$R;
+ListItem.displayName = COMPONENT_NAME$14;
+ListItem.className = CLASSNAME$14;
+ListItem.defaultProps = DEFAULT_PROPS$S;
 
 var reactIs = {exports: {}};
 
@@ -4173,17 +4257,17 @@ const _excluded$17 = ["children", "className", "isClickable", "itemPadding", "on
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'List';
+const COMPONENT_NAME$13 = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$12);
+const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$13);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   tabIndex: -1
 };
 
@@ -4202,7 +4286,7 @@ const InternalList = forwardRef((props, ref) => {
       isClickable,
       itemPadding,
       onListItemSelected,
-      tabIndex = DEFAULT_PROPS$Q.tabIndex
+      tabIndex = DEFAULT_PROPS$R.tabIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$17);
   const listElementRef = useRef(null);
@@ -4216,8 +4300,8 @@ const InternalList = forwardRef((props, ref) => {
   });
   const clickable = hasClickableItem || isClickable;
   return /*#__PURE__*/jsx("ul", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$12,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$13,
       itemPadding: itemPadding !== null && itemPadding !== void 0 ? itemPadding : clickable ? Size.big : undefined
     })),
     tabIndex: tabIndex,
@@ -4225,13 +4309,16 @@ const InternalList = forwardRef((props, ref) => {
     children: items
   }));
 });
-InternalList.displayName = COMPONENT_NAME$12;
-InternalList.className = CLASSNAME$12;
-InternalList.defaultProps = DEFAULT_PROPS$Q;
+InternalList.displayName = COMPONENT_NAME$13;
+InternalList.className = CLASSNAME$13;
+InternalList.defaultProps = DEFAULT_PROPS$R;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
 
+/**
+ * HOC component wrapping a component to skip render if predicate return falsy
+ */
 const skipRender = (predicate, Component) => {
   const Wrapper = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     if (!DOCUMENT) {
@@ -6648,17 +6735,17 @@ const _excluded$16 = ["anchorRef", "as", "children", "className", "closeOnClickA
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'Popover';
+const COMPONENT_NAME$12 = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$11);
+const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$12);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {
+const DEFAULT_PROPS$Q = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6676,24 +6763,24 @@ const _InnerPopover = forwardRef((props, ref) => {
       className,
       closeOnClickAway,
       closeOnEscape,
-      elevation = DEFAULT_PROPS$P.elevation,
+      elevation = DEFAULT_PROPS$Q.elevation,
       focusElement,
       hasArrow,
       isOpen,
       onClose,
       parentElement,
-      usePortal = DEFAULT_PROPS$P.usePortal,
-      focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
+      usePortal = DEFAULT_PROPS$Q.usePortal,
+      focusAnchorOnClose = DEFAULT_PROPS$Q.focusAnchorOnClose,
       withFocusTrap,
       boundaryRef,
       fitToAnchorWidth,
       fitWithinViewportHeight,
       focusTrapZoneElement,
       offset,
-      placement = DEFAULT_PROPS$P.placement,
+      placement = DEFAULT_PROPS$Q.placement,
       style,
       theme,
-      zIndex = DEFAULT_PROPS$P.zIndex
+      zIndex = DEFAULT_PROPS$Q.zIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$16);
   const popoverRef = useRef(null);
@@ -6733,8 +6820,8 @@ const _InnerPopover = forwardRef((props, ref) => {
     enabled: usePortal,
     children: /*#__PURE__*/jsxs(Component, _objectSpread2(_objectSpread2(_objectSpread2({}, forwardedProps), {}, {
       ref: mergedRefs,
-      className: classNames(className, handleBasicClasses({
-        prefix: CLASSNAME$11,
+      className: classNames$1(className, handleBasicClasses({
+        prefix: CLASSNAME$12,
         theme,
         elevation: Math.min(elevation || 0, 5),
         position,
@@ -6747,7 +6834,7 @@ const _InnerPopover = forwardRef((props, ref) => {
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: setArrowElement,
-          className: `${CLASSNAME$11}__arrow`,
+          className: `${CLASSNAME$12}__arrow`,
           style: styles.arrow,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
@@ -6764,7 +6851,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     }))
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$11;
+_InnerPopover.displayName = COMPONENT_NAME$12;
 
 /**
  * Popover component.
@@ -6776,9 +6863,9 @@ _InnerPopover.displayName = COMPONENT_NAME$11;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$11;
-Popover.className = CLASSNAME$11;
-Popover.defaultProps = DEFAULT_PROPS$P;
+Popover.displayName = COMPONENT_NAME$12;
+Popover.className = CLASSNAME$12;
+Popover.defaultProps = DEFAULT_PROPS$Q;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6825,17 +6912,17 @@ const _excluded$15 = ["anchorRef", "children", "className", "closeOnClick", "clo
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Dropdown';
+const COMPONENT_NAME$11 = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
+const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$11);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$P = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6858,18 +6945,18 @@ const Dropdown = forwardRef((props, ref) => {
       anchorRef,
       children,
       className,
-      closeOnClick = DEFAULT_PROPS$O.closeOnClick,
-      closeOnClickAway = DEFAULT_PROPS$O.closeOnClickAway,
-      closeOnEscape = DEFAULT_PROPS$O.closeOnEscape,
-      fitToAnchorWidth = DEFAULT_PROPS$O.fitToAnchorWidth,
-      fitWithinViewportHeight = DEFAULT_PROPS$O.fitWithinViewportHeight,
+      closeOnClick = DEFAULT_PROPS$P.closeOnClick,
+      closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
+      closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
+      fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
+      fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
       isOpen,
       offset,
-      focusAnchorOnClose = DEFAULT_PROPS$O.focusAnchorOnClose,
+      focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
       onClose,
       onInfiniteScroll,
-      placement = DEFAULT_PROPS$O.placement,
-      shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
+      placement = DEFAULT_PROPS$P.placement,
+      shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
       zIndex
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$15);
@@ -6894,7 +6981,7 @@ const Dropdown = forwardRef((props, ref) => {
   }, forwardedProps), {}, {
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames(className, CLASSNAME$10),
+    className: classNames$1(className, CLASSNAME$11),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -6907,31 +6994,31 @@ const Dropdown = forwardRef((props, ref) => {
     placement: placement,
     zIndex: zIndex,
     children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$10}__menu`,
+      className: `${CLASSNAME$11}__menu`,
       ref: innerRef,
       children: popperElement
     })
   })) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$10;
-Dropdown.className = CLASSNAME$10;
-Dropdown.defaultProps = DEFAULT_PROPS$O;
+Dropdown.displayName = COMPONENT_NAME$11;
+Dropdown.className = CLASSNAME$11;
+Dropdown.defaultProps = DEFAULT_PROPS$P;
 
 const _excluded$14 = ["className", "closeMode", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'ExpansionPanel';
+const COMPONENT_NAME$10 = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
+const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6949,7 +7036,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      closeMode = DEFAULT_PROPS$N.closeMode,
+      closeMode = DEFAULT_PROPS$O.closeMode,
       children: anyChildren,
       hasBackground,
       hasHeaderDivider,
@@ -6970,7 +7057,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   // Either take the header in children or create one with the label.
   const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
   const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: `${CLASSNAME$$}__label`,
+    className: `${CLASSNAME$10}__label`,
     children: label
   });
   const toggleOpen = event => {
@@ -6986,14 +7073,14 @@ const ExpansionPanel = forwardRef((props, ref) => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classNames(className, handleBasicClasses({
+  const rootClassName = classNames$1(className, handleBasicClasses({
     hasBackground,
     hasHeader: Boolean(!isEmpty(headerProps.children)),
     hasHeaderDivider,
     isClose: !isOpen,
     isDraggable: Boolean(dragHandle),
     isOpen,
-    prefix: CLASSNAME$$,
+    prefix: CLASSNAME$10,
     theme
   }));
   const wrapperRef = useRef(null);
@@ -7030,16 +7117,16 @@ const ExpansionPanel = forwardRef((props, ref) => {
   }, forwardedProps), {}, {
     className: rootClassName,
     children: [/*#__PURE__*/jsxs("header", {
-      className: `${CLASSNAME$$}__header`,
+      className: `${CLASSNAME$10}__header`,
       onClick: toggleOpen,
       children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$$}__header-drag`,
+        className: `${CLASSNAME$10}__header-drag`,
         children: dragHandle
       }), /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, headerProps), {}, {
-        className: `${CLASSNAME$$}__header-content`,
+        className: `${CLASSNAME$10}__header-content`,
         children: headerContent
       })), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$$}__header-toggle`,
+        className: `${CLASSNAME$10}__header-toggle`,
         children: /*#__PURE__*/jsx(IconButton, _objectSpread2(_objectSpread2({}, toggleButtonProps), {}, {
           color: color,
           emphasis: Emphasis.low,
@@ -7048,29 +7135,29 @@ const ExpansionPanel = forwardRef((props, ref) => {
         }))
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$$}__wrapper`,
+      className: `${CLASSNAME$10}__wrapper`,
       ref: wrapperRef,
       children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$$}__container`,
+        className: `${CLASSNAME$10}__container`,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$$}__content`,
+          className: `${CLASSNAME$10}__content`,
           children: content
         }), footer && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$$}__footer`,
+          className: `${CLASSNAME$10}__footer`,
           children: footer
         })]
       })
     })]
   }));
 });
-ExpansionPanel.displayName = COMPONENT_NAME$$;
-ExpansionPanel.className = CLASSNAME$$;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
+ExpansionPanel.displayName = COMPONENT_NAME$10;
+ExpansionPanel.className = CLASSNAME$10;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
 
 const _excluded$13 = ["label", "icon", "color", "className", "theme", "truncate"];
-const COMPONENT_NAME$_ = 'Flag';
-const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
-const DEFAULT_PROPS$M = {};
+const COMPONENT_NAME$$ = 'Flag';
+const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
+const DEFAULT_PROPS$N = {};
 
 /**
  * Flag component.
@@ -7093,8 +7180,8 @@ const Flag = forwardRef((props, ref) => {
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$_,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$$,
       color: flagColor,
       isTruncated
     })),
@@ -7102,30 +7189,30 @@ const Flag = forwardRef((props, ref) => {
     children: [icon && /*#__PURE__*/jsx(Icon, {
       icon: icon,
       size: Size.xxs,
-      className: `${CLASSNAME$_}__icon`
+      className: `${CLASSNAME$$}__icon`
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
       truncate: isTruncated,
       typography: "overline",
-      className: `${CLASSNAME$_}__label`,
+      className: `${CLASSNAME$$}__label`,
       children: label
     })]
   }));
 });
-Flag.displayName = COMPONENT_NAME$_;
-Flag.className = CLASSNAME$_;
-Flag.defaultProps = DEFAULT_PROPS$M;
+Flag.displayName = COMPONENT_NAME$$;
+Flag.className = CLASSNAME$$;
+Flag.defaultProps = DEFAULT_PROPS$N;
 
 const _excluded$12 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'FlexBox';
+const COMPONENT_NAME$_ = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
+const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
 
 /**
  * FlexBox component.
@@ -7152,34 +7239,34 @@ const FlexBox = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$Z,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$_,
       orientation: orientation !== null && orientation !== void 0 ? orientation : wrap || hAlign || vAlign ? Orientation.horizontal : null,
       vAlign,
       hAlign,
       gap
-    }), wrap && `${CLASSNAME$Z}--wrap`, fillSpace && `${CLASSNAME$Z}--fill-space`, noShrink && `${CLASSNAME$Z}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$Z}--margin-auto-${align}`)),
+    }), wrap && `${CLASSNAME$_}--wrap`, fillSpace && `${CLASSNAME$_}--fill-space`, noShrink && `${CLASSNAME$_}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$_}--margin-auto-${align}`)),
     children: children
   }));
 });
-FlexBox.displayName = COMPONENT_NAME$Z;
-FlexBox.className = CLASSNAME$Z;
+FlexBox.displayName = COMPONENT_NAME$_;
+FlexBox.className = CLASSNAME$_;
 
 const _excluded$11 = ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'GenericBlock';
+const COMPONENT_NAME$Z = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
+const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$M = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -7210,8 +7297,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       children,
       actions,
       actionsProps,
-      gap = DEFAULT_PROPS$L.gap,
-      orientation = DEFAULT_PROPS$L.orientation,
+      gap = DEFAULT_PROPS$M.gap,
+      orientation = DEFAULT_PROPS$M.orientation,
       contentProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$11);
@@ -7230,7 +7317,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, CLASSNAME$Y),
+    className: classNames$1(className, CLASSNAME$Z),
     gap: gap,
     orientation: orientation
   }, forwardedProps), {}, {
@@ -7239,7 +7326,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       vAlign: forwardedProps.vAlign,
       hAlign: forwardedProps.hAlign
     }, figureProps), sections.figureChildProps), {}, {
-      className: classNames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.className, `${CLASSNAME$Y}__figure`),
+      className: classNames$1(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.className, `${CLASSNAME$Z}__figure`),
       children: [figure, (_sections$figureChild4 = sections.figureChildProps) === null || _sections$figureChild4 === void 0 ? void 0 : _sections$figureChild4.children]
     })), (((_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.children) || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, _objectSpread2(_objectSpread2(_objectSpread2({
       ref: (_sections$contentChil2 = sections.contentChild) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.ref,
@@ -7248,21 +7335,21 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       vAlign: forwardedProps.vAlign,
       hAlign: forwardedProps.hAlign
     }, contentProps), sections.contentChildProps), {}, {
-      className: classNames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.className, `${CLASSNAME$Y}__content`),
+      className: classNames$1(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.className, `${CLASSNAME$Z}__content`),
       children: [(_sections$contentChil4 = sections.contentChildProps) === null || _sections$contentChil4 === void 0 ? void 0 : _sections$contentChil4.children, sections.otherChildren]
     })), (actions || ((_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.children)) && /*#__PURE__*/jsxs(FlexBox, _objectSpread2(_objectSpread2(_objectSpread2({
       ref: (_sections$actionsChil2 = sections.actionsChild) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.ref,
       vAlign: forwardedProps.vAlign,
       hAlign: forwardedProps.hAlign
     }, actionsProps), sections.actionsChildProps), {}, {
-      className: classNames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.className, `${CLASSNAME$Y}__actions`),
+      className: classNames$1(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.className, `${CLASSNAME$Z}__actions`),
       children: [actions, (_sections$actionsChil4 = sections.actionsChildProps) === null || _sections$actionsChil4 === void 0 ? void 0 : _sections$actionsChil4.children]
     }))]
   }));
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$Y;
-BaseGenericBlock.className = CLASSNAME$Y;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$L;
+BaseGenericBlock.displayName = COMPONENT_NAME$Z;
+BaseGenericBlock.className = CLASSNAME$Z;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$M;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7334,17 +7421,17 @@ const _excluded$10 = ["as", "children", "className", "color", "colorVariant", "n
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'Text';
+const COMPONENT_NAME$Y = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
+const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * Text component.
@@ -7390,20 +7477,20 @@ const Text = forwardRef((props, ref) => {
   } = useOverflowTooltipLabel(children);
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({
     ref: useMergeRefs(ref, labelRef),
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$X,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$Y,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
-    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$X}--no-wrap`),
+    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$Y}--no-wrap`),
     title: tooltipLabel,
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
   }, forwardedProps), {}, {
     children: wrapChildrenIconWithSpaces(children)
   }));
 });
-Text.displayName = COMPONENT_NAME$X;
-Text.className = CLASSNAME$X;
-Text.defaultProps = DEFAULT_PROPS$K;
+Text.displayName = COMPONENT_NAME$Y;
+Text.className = CLASSNAME$Y;
+Text.defaultProps = DEFAULT_PROPS$L;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -7441,17 +7528,17 @@ const _excluded$$ = ["children", "as", "className"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'Heading';
+const COMPONENT_NAME$X = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
+const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * Renders a heading component.
@@ -7471,16 +7558,16 @@ const Heading = forwardRef((props, ref) => {
   const computedHeadingElement = as || headingElement;
   return /*#__PURE__*/jsx(Text, _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, CLASSNAME$W),
+    className: classNames$1(className, CLASSNAME$X),
     as: computedHeadingElement,
     typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   }, forwardedProps), {}, {
     children: children
   }));
 });
-Heading.displayName = COMPONENT_NAME$W;
-Heading.className = CLASSNAME$W;
-Heading.defaultProps = DEFAULT_PROPS$J;
+Heading.displayName = COMPONENT_NAME$X;
+Heading.className = CLASSNAME$X;
+Heading.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Provide a new heading level context.
@@ -7509,17 +7596,17 @@ const _excluded$_ = ["children", "className", "gutter", "hAlign", "orientation",
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'Grid';
+const COMPONENT_NAME$W = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
+const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {
+const DEFAULT_PROPS$J = {
   orientation: Orientation.horizontal,
   wrap: 'nowrap'
 };
@@ -7537,20 +7624,20 @@ const Grid = forwardRef((props, ref) => {
       className,
       gutter,
       hAlign,
-      orientation = DEFAULT_PROPS$I.orientation,
+      orientation = DEFAULT_PROPS$J.orientation,
       vAlign,
-      wrap = DEFAULT_PROPS$I.wrap
+      wrap = DEFAULT_PROPS$J.wrap
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$_);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, `${CLASSNAME$V}-container`, {
-      [`${CLASSNAME$V}--h-align-${hAlign}`]: hAlign
+    className: classNames$1(className, `${CLASSNAME$W}-container`, {
+      [`${CLASSNAME$W}--h-align-${hAlign}`]: hAlign
     }, {
-      [`${CLASSNAME$V}--v-align-${vAlign}`]: vAlign
+      [`${CLASSNAME$W}--v-align-${vAlign}`]: vAlign
     }, handleBasicClasses({
-      prefix: CLASSNAME$V,
+      prefix: CLASSNAME$W,
       orientation,
       wrap,
       gutter
@@ -7558,20 +7645,20 @@ const Grid = forwardRef((props, ref) => {
     children: children
   }));
 });
-Grid.displayName = COMPONENT_NAME$V;
-Grid.className = CLASSNAME$V;
-Grid.defaultProps = DEFAULT_PROPS$I;
+Grid.displayName = COMPONENT_NAME$W;
+Grid.className = CLASSNAME$W;
+Grid.defaultProps = DEFAULT_PROPS$J;
 
 const _excluded$Z = ["children", "className", "width", "align", "order"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'GridItem';
+const COMPONENT_NAME$V = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
+const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
 
 /**
  * GridItem component.
@@ -7592,8 +7679,8 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$U,
+    className: classNames$1(className, handleBasicClasses({
+      prefix: CLASSNAME$V,
       width,
       order,
       align
@@ -7601,24 +7688,24 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   }));
 });
-GridItem.displayName = COMPONENT_NAME$U;
-GridItem.className = CLASSNAME$U;
+GridItem.displayName = COMPONENT_NAME$V;
+GridItem.className = CLASSNAME$V;
 
 const _excluded$Y = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'GridColumn';
+const COMPONENT_NAME$U = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
+const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7642,7 +7729,7 @@ const GridColumn = forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$Y);
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
     ref: ref,
-    className: classNames(className, CLASSNAME$T),
+    className: classNames$1(className, CLASSNAME$U),
     style: _objectSpread2(_objectSpread2({}, style), {}, {
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
       ['--lumx-grid-column-columns']: maxColumns,
@@ -7651,11 +7738,77 @@ const GridColumn = forwardRef((props, ref) => {
     children: children
   }));
 });
-GridColumn.displayName = COMPONENT_NAME$T;
-GridColumn.className = CLASSNAME$T;
-GridColumn.defaultProps = DEFAULT_PROPS$H;
+GridColumn.displayName = COMPONENT_NAME$U;
+GridColumn.className = CLASSNAME$U;
+GridColumn.defaultProps = DEFAULT_PROPS$I;
+
+const _excluded$X = ["className", "kind", "theme"];
+const INPUT_HELPER_CONFIGURATION$1 = {
+  error: {
+    color: 'red'
+  },
+  success: {
+    color: 'green'
+  },
+  warning: {
+    color: 'yellow'
+  }
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$T = 'InputHelper';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$H = {
+  kind: Kind.info
+};
+
+/**
+ * InputHelper component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InputHelper$1 = (props, options) => {
+  const defaultTheme = Theme.light;
+  const {
+      className,
+      kind = DEFAULT_PROPS$H.kind,
+      theme = defaultTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+  const childrenToRender = options && options.slots && options.slots.default ? options.slots.default() : props.children;
+  const {
+    color
+  } = INPUT_HELPER_CONFIGURATION$1[kind] || {};
+  return /*#__PURE__*/jsx("p", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$T,
+      color,
+      theme
+    })),
+    children: childrenToRender
+  }));
+};
+InputHelper$1.displayName = COMPONENT_NAME$T;
+InputHelper$1.className = CLASSNAME$T;
+InputHelper$1.defaultProps = DEFAULT_PROPS$H;
 
-const _excluded$X = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt", "ref"];
+const _excluded$W = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt", "ref"];
 /**
  * Component display name.
  */
@@ -7679,6 +7832,7 @@ const DEFAULT_PROPS$G = {};
  * @return React element.
  */
 const Icon$1 = props => {
+  console.log(props);
   const {
       className,
       color: propColor,
@@ -7690,7 +7844,7 @@ const Icon$1 = props => {
       alt,
       ref
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
   // Color
@@ -7716,7 +7870,7 @@ const Icon$1 = props => {
   } else if (hasShape) {
     iconSize = Size.m;
   }
-  return /*#__PURE__*/jsx("i", _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/jsxs("i", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
     className: classNames(className, handleBasicClasses({
@@ -7727,7 +7881,9 @@ const Icon$1 = props => {
       theme,
       size: iconSize
     }), !hasShape && `${CLASSNAME$S}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$S}--has-dark-layer`, `${CLASSNAME$S}--path`),
-    children: /*#__PURE__*/jsx("svg", {
+    children: [/*#__PURE__*/jsx(InputHelper$1, {
+      children: "test"
+    }), /*#__PURE__*/jsx("svg", {
       "aria-hidden": alt ? undefined : 'true',
       role: alt ? 'img' : undefined,
       "aria-label": alt,
@@ -7742,7 +7898,7 @@ const Icon$1 = props => {
         d: icon,
         fill: "currentColor"
       })
-    })
+    })]
   }));
 };
 Icon$1.displayName = COMPONENT_NAME$S;
@@ -7801,7 +7957,7 @@ const ImageCaption = props => {
   };
   return /*#__PURE__*/jsxs(FlexBox, {
     as: as,
-    className: classNames(baseClassName && `${baseClassName}__wrapper`),
+    className: classNames$1(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
     vAlign: align,
@@ -7809,22 +7965,22 @@ const ImageCaption = props => {
     gap: "regular",
     children: [(title || description) && /*#__PURE__*/jsxs(Text, _objectSpread2(_objectSpread2({
       as: "p",
-      className: classNames(baseClassName && `${baseClassName}__caption`),
+      className: classNames$1(baseClassName && `${baseClassName}__caption`),
       truncate: truncate
     }, baseColor), {}, {
       children: [title && /*#__PURE__*/jsx(Text, _objectSpread2(_objectSpread2(_objectSpread2({}, titleProps), {}, {
         as: "span",
-        className: classNames(titleProps === null || titleProps === void 0 ? void 0 : titleProps.className, baseClassName && `${baseClassName}__title`),
+        className: classNames$1(titleProps === null || titleProps === void 0 ? void 0 : titleProps.className, baseClassName && `${baseClassName}__title`),
         typography: "subtitle1"
       }, titleColor), {}, {
         children: title
       })), ' ', description && /*#__PURE__*/jsx(Text, _objectSpread2(_objectSpread2({}, descriptionProps), {}, {
         as: "span",
-        className: classNames(descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.className, baseClassName && `${baseClassName}__description`),
+        className: classNames$1(descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.className, baseClassName && `${baseClassName}__description`),
         typography: "body1"
       }, descriptionContent))]
     })), tags && /*#__PURE__*/jsx(FlexBox, {
-      className: classNames(baseClassName && `${baseClassName}__tags`),
+      className: classNames$1(baseClassName && `${baseClassName}__tags`),
       orientation: "horizontal",
       vAlign: align,
       children: tags
@@ -7832,7 +7988,7 @@ const ImageCaption = props => {
   });
 };
 
-const _excluded$W = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
+const _excluded$V = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
 const ImageBlockCaptionPosition = {
   below: 'below',
   over: 'over'
@@ -7891,11 +8047,11 @@ const ImageBlock = forwardRef((props, ref) => {
       title,
       titleProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
+    forwardedProps = _objectWithoutProperties(props, _excluded$V);
   return /*#__PURE__*/jsxs("figure", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$R,
       captionPosition,
       align,
@@ -7903,7 +8059,7 @@ const ImageBlock = forwardRef((props, ref) => {
       theme
     }), fillHeight && `${CLASSNAME$R}--fill-height`),
     children: [/*#__PURE__*/jsx(Thumbnail, _objectSpread2(_objectSpread2({}, thumbnailProps), {}, {
-      className: classNames(`${CLASSNAME$R}__image`, thumbnailProps === null || thumbnailProps === void 0 ? void 0 : thumbnailProps.className),
+      className: classNames$1(`${CLASSNAME$R}__image`, thumbnailProps === null || thumbnailProps === void 0 ? void 0 : thumbnailProps.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -8272,7 +8428,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   });
 }, isEqual);
 
-const _excluded$V = ["image", "imgRef"];
+const _excluded$U = ["image", "imgRef"];
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -8378,7 +8534,7 @@ const ImageSlideshow = ({
             image,
             imgRef
           } = _ref,
-          imageProps = _objectWithoutProperties(_ref, _excluded$V);
+          imageProps = _objectWithoutProperties(_ref, _excluded$U);
         const isActive = index === activeIndex;
         return /*#__PURE__*/jsx(ImageSlide, {
           isActive: isActive,
@@ -8590,7 +8746,7 @@ function useImageLightbox(props) {
   };
 }
 
-const _excluded$U = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
+const _excluded$T = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
 const Inner = forwardRef((props, ref) => {
   const {
       className,
@@ -8606,7 +8762,7 @@ const Inner = forwardRef((props, ref) => {
       zoomInButtonProps,
       activeImageRef: propImageRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$U);
+    forwardedProps = _objectWithoutProperties(props, _excluded$T);
   const currentPaginationItemRef = React__default.useRef(null);
   const footerRef = React__default.useRef(null);
   const imageRef = React__default.useRef(null);
@@ -8621,7 +8777,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, CLASSNAME$Q),
+    className: classNames$1(className, CLASSNAME$Q),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -8664,7 +8820,7 @@ const ImageLightbox = Object.assign(Inner, {
   useImageLightbox
 });
 
-const _excluded$T = ["className", "color", "colorVariant", "typography", "children", "wrap"];
+const _excluded$S = ["className", "color", "colorVariant", "typography", "children", "wrap"];
 /**
  * Component display name.
  */
@@ -8696,14 +8852,14 @@ const InlineList = forwardRef((props, ref) => {
       children,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$T);
+    forwardedProps = _objectWithoutProperties(props, _excluded$S);
   const typographyClassName = typography && getTypographyClassName(typography);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     jsx("ul", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
       ref: ref,
-      className: classNames(className, CLASSNAME$P, wrap && `${CLASSNAME$P}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
+      className: classNames$1(className, CLASSNAME$P, wrap && `${CLASSNAME$P}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list",
@@ -8743,7 +8899,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$S = ["children", "className", "kind", "theme"];
+const _excluded$R = ["children", "className", "kind", "theme"];
 /**
  * Component display name.
  */
@@ -8776,14 +8932,14 @@ const InputHelper = forwardRef((props, ref) => {
       kind = DEFAULT_PROPS$D.kind,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$S);
+    forwardedProps = _objectWithoutProperties(props, _excluded$R);
   const {
     color
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
   return /*#__PURE__*/jsx("p", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$O,
       color,
       theme
@@ -8795,7 +8951,7 @@ InputHelper.displayName = COMPONENT_NAME$O;
 InputHelper.className = CLASSNAME$O;
 InputHelper.defaultProps = DEFAULT_PROPS$D;
 
-const _excluded$R = ["children", "className", "htmlFor", "isRequired", "theme", "typography"];
+const _excluded$Q = ["children", "className", "htmlFor", "isRequired", "theme", "typography"];
 /**
  * Component display name.
  */
@@ -8828,13 +8984,13 @@ const InputLabel = forwardRef((props, ref) => {
       theme = defaultTheme,
       typography
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$R);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   const typographyClass = typography && getTypographyClassName(typography);
   return /*#__PURE__*/jsx("label", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
     htmlFor: htmlFor,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$N,
       isRequired,
       theme,
@@ -8847,7 +9003,7 @@ InputLabel.displayName = COMPONENT_NAME$N;
 InputLabel.className = CLASSNAME$N;
 InputLabel.defaultProps = DEFAULT_PROPS$C;
 
-const _excluded$Q = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
+const _excluded$P = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 /**
  * Component display name.
  */
@@ -8882,7 +9038,7 @@ const Lightbox = forwardRef((props, ref) => {
       theme,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$P);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -8940,7 +9096,7 @@ const Lightbox = forwardRef((props, ref) => {
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
-      className: classNames(className, handleBasicClasses({
+      className: classNames$1(className, handleBasicClasses({
         prefix: CLASSNAME$M,
         isHidden: !isOpen,
         isShown: isOpen || isVisible,
@@ -8982,7 +9138,7 @@ const Lightbox = forwardRef((props, ref) => {
 Lightbox.displayName = COMPONENT_NAME$M;
 Lightbox.className = CLASSNAME$M;
 
-const _excluded$P = ["children", "className", "color", "colorVariant", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+const _excluded$O = ["children", "className", "color", "colorVariant", "leftIcon", "rightIcon", "typography", "linkAs"];
 /**
  * Component display name.
  */
@@ -9002,7 +9158,6 @@ const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
  */
 const Link = forwardRef((props, ref) => {
   const {
-    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
@@ -9011,29 +9166,18 @@ const Link = forwardRef((props, ref) => {
       className,
       color: propColor,
       colorVariant: propColorVariant,
-      href,
       leftIcon,
-      linkAs,
       rightIcon,
-      target,
-      typography
+      typography,
+      linkAs
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$P);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$O);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-  const isLink = linkAs || href;
-  const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
-  const baseProps = {};
-  if (Component === 'button') {
-    baseProps.type = 'button';
-    Object.assign(baseProps, disabledStateProps);
-  } else if (isLink) {
-    baseProps.href = href;
-    baseProps.target = target;
-  }
-  return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2(_objectSpread2({
-    ref: ref
-  }, forwardedProps), baseProps), {}, {
-    className: classNames(className, handleBasicClasses({
+  return /*#__PURE__*/jsx(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref,
+    as: linkAs || (forwardedProps.href ? 'a' : 'button')
+  }, forwardedProps), disabledStateProps), {}, {
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$L,
       color,
       colorVariant,
@@ -9056,7 +9200,7 @@ const Link = forwardRef((props, ref) => {
 Link.displayName = COMPONENT_NAME$L;
 Link.className = CLASSNAME$L;
 
-const _excluded$O = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
+const _excluded$N = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
 /**
  * Component display name.
  */
@@ -9096,13 +9240,13 @@ const LinkPreview = forwardRef((props, ref) => {
       title,
       titleHeading = DEFAULT_PROPS$B.titleHeading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$O);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
   const TitleHeading = titleHeading;
   return /*#__PURE__*/jsx("article", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$K,
       size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
       theme
@@ -9141,7 +9285,7 @@ const LinkPreview = forwardRef((props, ref) => {
           className: `${CLASSNAME$K}__link`,
           children: /*#__PURE__*/jsx(Link, _objectSpread2(_objectSpread2({}, linkProps), {}, {
             linkAs: linkAs,
-            className: classNames(`${CLASSNAME$K}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
+            className: classNames$1(`${CLASSNAME$K}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
             target: "_blank",
             href: link,
             color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -9160,7 +9304,7 @@ LinkPreview.displayName = COMPONENT_NAME$K;
 LinkPreview.className = CLASSNAME$K;
 LinkPreview.defaultProps = DEFAULT_PROPS$B;
 
-const _excluded$N = ["className"];
+const _excluded$M = ["className"];
 /**
  * Component display name.
  */
@@ -9182,17 +9326,17 @@ const ListDivider = forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   return /*#__PURE__*/jsx("li", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$J)
+    className: classNames$1(className, CLASSNAME$J)
   }));
 });
 ListDivider.displayName = COMPONENT_NAME$J;
 ListDivider.className = CLASSNAME$J;
 
-const _excluded$M = ["children", "className"];
+const _excluded$L = ["children", "className"];
 /**
  * Component display name.
  */
@@ -9215,18 +9359,18 @@ const ListSubheader = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   return /*#__PURE__*/jsx("li", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$I),
+    className: classNames$1(className, CLASSNAME$I),
     children: children
   }));
 });
 ListSubheader.displayName = COMPONENT_NAME$I;
 ListSubheader.className = CLASSNAME$I;
 
-const _excluded$L = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
+const _excluded$K = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
 /**
  * Component display name.
  */
@@ -9275,7 +9419,7 @@ const Message = forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const {
     color,
     icon
@@ -9287,7 +9431,7 @@ const Message = forwardRef((props, ref) => {
   const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       color,
       hasBackground,
       prefix: CLASSNAME$H
@@ -9313,7 +9457,7 @@ const Message = forwardRef((props, ref) => {
 Message.displayName = COMPONENT_NAME$H;
 Message.className = CLASSNAME$H;
 
-const _excluded$K = ["className", "theme", "thumbnails", "onImageClick"],
+const _excluded$J = ["className", "theme", "thumbnails", "onImageClick"],
   _excluded2$2 = ["image", "onClick", "align"];
 /**
  * Component display name.
@@ -9345,7 +9489,7 @@ const Mosaic = forwardRef((props, ref) => {
       thumbnails,
       onImageClick
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$K);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   const handleImageClick = useMemo(() => {
     if (!onImageClick) return undefined;
     return (index, onClick) => event => {
@@ -9356,7 +9500,7 @@ const Mosaic = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$G,
       theme
     }), {
@@ -9398,10 +9542,7 @@ Mosaic.displayName = COMPONENT_NAME$G;
 Mosaic.className = CLASSNAME$G;
 Mosaic.defaultProps = DEFAULT_PROPS$A;
 
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-const forwardRefPolymorphic = React__default.forwardRef;
-
-const _excluded$J = ["className", "icon", "label", "isCurrentPage", "as"];
+const _excluded$I = ["className", "icon", "label", "isCurrentPage", "as"];
 /**
  * Component display name.
  */
@@ -9419,31 +9560,29 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
       isCurrentPage,
       as: Element = 'a'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   const theme = useTheme();
   const {
     tooltipLabel,
     labelRef
   } = useOverflowTooltipLabel(label);
-  const buttonProps = Element === 'button' ? {
-    type: 'button'
-  } : {};
   return /*#__PURE__*/jsx("li", {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$F,
       theme
     })),
     children: /*#__PURE__*/jsx(Tooltip, {
       label: tooltipLabel,
       placement: Placement.TOP,
-      children: /*#__PURE__*/jsxs(Element, _objectSpread2(_objectSpread2(_objectSpread2({
+      children: /*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2({
+        as: Element,
         className: handleBasicClasses({
           prefix: `${CLASSNAME$F}__link`,
           isSelected: isCurrentPage
         }),
         ref: ref,
         "aria-current": isCurrentPage ? 'page' : undefined
-      }, buttonProps), forwardedProps), {}, {
+      }, forwardedProps), {}, {
         children: [icon ? /*#__PURE__*/jsx(Icon, {
           className: `${CLASSNAME$F}__icon`,
           icon: icon,
@@ -9468,7 +9607,7 @@ const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation.vertical
 });
 
-const _excluded$I = ["children", "className", "label", "icon"];
+const _excluded$H = ["children", "className", "label", "icon"];
 /**
  * Component display name.
  */
@@ -9485,7 +9624,7 @@ const NavigationSection = forwardRef((props, ref) => {
       label,
       icon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef(null);
   const sectionId = useId();
@@ -9495,21 +9634,22 @@ const NavigationSection = forwardRef((props, ref) => {
   const theme = useTheme();
   const isDropdown = orientation === Orientation.horizontal;
   return /*#__PURE__*/jsxs("li", {
-    className: classNames(className, CLASSNAME$E, CLASSNAME$F, handleBasicClasses({
+    className: classNames$1(className, CLASSNAME$E, CLASSNAME$F, handleBasicClasses({
       prefix: CLASSNAME$F,
       theme
     })),
     ref: ref,
-    children: [/*#__PURE__*/jsxs("button", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
+    children: [/*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2({
+      as: "button"
+    }, forwardedProps), {}, {
       "aria-controls": sectionId,
       "aria-expanded": isOpen,
-      className: classNames(`${CLASSNAME$F}__link`),
+      className: classNames$1(`${CLASSNAME$F}__link`),
       ref: buttonRef,
       onClick: event => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
-      type: "button",
       children: [icon ? /*#__PURE__*/jsx(Icon, {
         className: `${CLASSNAME$F}__icon`,
         icon: icon,
@@ -9521,7 +9661,7 @@ const NavigationSection = forwardRef((props, ref) => {
         ref: ref,
         children: label
       }), /*#__PURE__*/jsx(Icon, {
-        className: classNames(`${CLASSNAME$F}__icon`, `${CLASSNAME$E}__chevron`),
+        className: classNames$1(`${CLASSNAME$F}__icon`, `${CLASSNAME$E}__chevron`),
         icon: isOpen ? mdiChevronUp : mdiChevronDown
       })]
     })), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -9557,7 +9697,7 @@ const NavigationSection = forwardRef((props, ref) => {
 NavigationSection.displayName = COMPONENT_NAME$E;
 NavigationSection.className = CLASSNAME$E;
 
-const _excluded$H = ["children", "className", "theme", "orientation"];
+const _excluded$G = ["children", "className", "theme", "orientation"];
 /**
  * Component display name.
  */
@@ -9582,11 +9722,11 @@ const Navigation = forwardRef((props, ref) => {
       theme = defaultTheme,
       orientation = DEFAULT_PROPS$z.orientation
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   return /*#__PURE__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", _objectSpread2(_objectSpread2({
-      className: classNames(className, handleBasicClasses({
+      className: classNames$1(className, handleBasicClasses({
         prefix: CLASSNAME$D,
         theme,
         orientation
@@ -9635,7 +9775,7 @@ const NOTIFICATION_CONFIGURATION = {
   }
 };
 
-const _excluded$G = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
+const _excluded$F = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
 /**
  * Component display name.
  */
@@ -9677,7 +9817,7 @@ const Notification = forwardRef((props, ref) => {
       usePortal = DEFAULT_PROPS$y.usePortal,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -9704,7 +9844,7 @@ const Notification = forwardRef((props, ref) => {
       ref: mergeRefs(ref, rootRef),
       role: "alert"
     }, forwardedProps), {}, {
-      className: classNames(className, handleBasicClasses({
+      className: classNames$1(className, handleBasicClasses({
         color,
         hasAction,
         isHidden: !isOpen,
@@ -9741,7 +9881,7 @@ Notification.displayName = COMPONENT_NAME$C;
 Notification.className = CLASSNAME$C;
 Notification.defaultProps = DEFAULT_PROPS$y;
 
-const _excluded$F = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
+const _excluded$E = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
 /**
  * Component display name.
  */
@@ -9773,10 +9913,10 @@ const PopoverDialog = forwardRef((props, ref) => {
       label = ariaLabel,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/jsx(Popover, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
     ref: ref,
-    className: classNames(className, CLASSNAME$B),
+    className: classNames$1(className, CLASSNAME$B),
     role: "dialog",
     "aria-modal": "true"
     /**
@@ -9799,7 +9939,7 @@ PopoverDialog.displayName = COMPONENT_NAME$B;
 PopoverDialog.className = CLASSNAME$B;
 PopoverDialog.defaultProps = DEFAULT_PROPS$x;
 
-const _excluded$E = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
+const _excluded$D = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
 /**
  * Component display name.
  */
@@ -9840,10 +9980,10 @@ const PostBlock = forwardRef((props, ref) => {
       thumbnailProps,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$A,
       orientation,
       theme
@@ -9897,7 +10037,7 @@ PostBlock.displayName = COMPONENT_NAME$A;
 PostBlock.className = CLASSNAME$A;
 PostBlock.defaultProps = DEFAULT_PROPS$w;
 
-const _excluded$D = ["className", "theme"];
+const _excluded$C = ["className", "theme"];
 /**
  * Component display name.
  */
@@ -9926,11 +10066,11 @@ const ProgressLinear = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$z,
       theme
     })),
@@ -9945,7 +10085,7 @@ ProgressLinear.displayName = COMPONENT_NAME$z;
 ProgressLinear.className = CLASSNAME$z;
 ProgressLinear.defaultProps = DEFAULT_PROPS$v;
 
-const _excluded$C = ["className", "theme", "size", "display"];
+const _excluded$B = ["className", "theme", "size", "display"];
 /**
  * Component display name.
  */
@@ -9979,12 +10119,12 @@ const ProgressCircular = forwardRef((props, ref) => {
       size = DEFAULT_PROPS$u.size,
       display = DEFAULT_PROPS$u.display
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   const Element = display === 'block' ? 'div' : 'span';
   return /*#__PURE__*/jsxs(Element, _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$y,
       theme,
       size,
@@ -10012,7 +10152,7 @@ ProgressCircular.displayName = COMPONENT_NAME$y;
 ProgressCircular.className = CLASSNAME$y;
 ProgressCircular.defaultProps = DEFAULT_PROPS$u;
 
-const _excluded$B = ["className", "theme", "variant"];
+const _excluded$A = ["className", "theme", "variant"];
 const ProgressVariant = {
   linear: 'linear',
   circular: 'circular'
@@ -10054,11 +10194,11 @@ const Progress = forwardRef((props, ref) => {
       theme = defaultTheme,
       variant = DEFAULT_PROPS$t.variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$x,
       theme,
       variant
@@ -10192,7 +10332,7 @@ const useTabProviderContextState = () => {
   return context === null || context === void 0 ? void 0 : context[0];
 };
 
-const _excluded$A = ["children", "onChange"];
+const _excluded$z = ["children", "onChange"];
 const DEFAULT_PROPS$s = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -10214,7 +10354,7 @@ const ProgressTrackerProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$A);
+    propState = _objectWithoutProperties(props, _excluded$z);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -10318,7 +10458,7 @@ const useRovingTabIndex = ({
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$z = ["aria-label", "children", "className"];
+const _excluded$y = ["aria-label", "children", "className"];
 /**
  * Component display name.
  */
@@ -10350,7 +10490,7 @@ const ProgressTracker = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$y);
   const stepListRef = React__default.useRef(null);
   useRovingTabIndex({
     parentRef: stepListRef,
@@ -10365,7 +10505,7 @@ const ProgressTracker = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: mergeRefs(ref, stepListRef)
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$w),
+    className: classNames$1(className, CLASSNAME$w),
     children: [/*#__PURE__*/jsx("div", {
       className: `${CLASSNAME$w}__steps`,
       role: "tablist",
@@ -10391,7 +10531,7 @@ ProgressTracker.displayName = COMPONENT_NAME$w;
 ProgressTracker.className = CLASSNAME$w;
 ProgressTracker.defaultProps = DEFAULT_PROPS$r;
 
-const _excluded$y = ["className", "hasError", "helper", "id", "isActive", "isComplete", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$x = ["className", "hasError", "helper", "id", "isActive", "isComplete", "label", "onFocus", "onKeyPress", "tabIndex"];
 /**
  * Component display name.
  */
@@ -10433,7 +10573,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$y);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$x);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -10469,7 +10609,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
   }, forwardedProps), {}, {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$v,
       hasError,
       isActive,
@@ -10503,7 +10643,7 @@ ProgressTrackerStep.displayName = COMPONENT_NAME$v;
 ProgressTrackerStep.className = CLASSNAME$v;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$q;
 
-const _excluded$x = ["children", "id", "className", "isActive"];
+const _excluded$w = ["children", "id", "className", "isActive"];
 /**
  * Component display name.
  */
@@ -10535,14 +10675,14 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$u,
       isActive
     })),
@@ -10556,7 +10696,7 @@ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$u;
 ProgressTrackerStepPanel.className = CLASSNAME$u;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$p;
 
-const _excluded$w = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$v = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 /**
  * Component display name.
  */
@@ -10600,7 +10740,7 @@ const RadioButton = forwardRef((props, ref) => {
       value,
       inputProps
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$w);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$v);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -10611,7 +10751,7 @@ const RadioButton = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       isChecked,
       isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
@@ -10660,7 +10800,7 @@ RadioButton.displayName = COMPONENT_NAME$t;
 RadioButton.className = CLASSNAME$t;
 RadioButton.defaultProps = DEFAULT_PROPS$o;
 
-const _excluded$v = ["children", "className"];
+const _excluded$u = ["children", "className"];
 /**
  * Component display name.
  */
@@ -10683,11 +10823,11 @@ const RadioGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$s),
+    className: classNames$1(className, CLASSNAME$s),
     children: children
   }));
 });
@@ -10718,7 +10858,7 @@ function useListenFocus(ref) {
   return isFocus;
 }
 
-const _excluded$u = ["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$t = ["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$r = 'Select';
 
@@ -10752,7 +10892,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
       value,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$u);
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   const generatedSelectId = useId();
   const selectId = id || generatedSelectId;
   const anchorRef = useRef(null);
@@ -10777,7 +10917,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
   useFocusTrap(isOpen && dropdownRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, selectRef),
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       hasError,
       hasLabel: Boolean(label),
       hasPlaceholder: Boolean(placeholder),
@@ -10839,7 +10979,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$t = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasError", "hasInputClear", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$s = ["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$q = 'Select';
@@ -10881,7 +11021,7 @@ const SelectField = props => {
       variant,
       selectElementRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
@@ -10908,7 +11048,7 @@ const SelectField = props => {
           icon: icon,
           size: Size.xs
         }), /*#__PURE__*/jsxs("div", {
-          className: classNames([`${CLASSNAME$q}__input-native`, isEmpty && placeholder && `${CLASSNAME$q}__input-native--placeholder`]),
+          className: classNames$1([`${CLASSNAME$q}__input-native`, isEmpty && placeholder && `${CLASSNAME$q}__input-native--placeholder`]),
           children: [!isEmpty && /*#__PURE__*/jsx("span", {
             children: selectedValueRender === null || selectedValueRender === void 0 ? void 0 : selectedValueRender(value)
           }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
@@ -10968,7 +11108,7 @@ const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, _objectSpread2(_objectSpread2(_objectSpread2({}, DEFAULT_PROPS$n), props), {}, {
-    className: classNames(props.className, handleBasicClasses({
+    className: classNames$1(props.className, handleBasicClasses({
       hasInputClear,
       hasUnique: !props.isEmpty,
       prefix: CLASSNAME$q
@@ -10982,7 +11122,7 @@ Select.className = CLASSNAME$q;
 Select.defaultProps = DEFAULT_PROPS$n;
 Select.className = CLASSNAME$q;
 
-const _excluded$s = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$r = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
 /** The display name of the component. */
 const COMPONENT_NAME$p = 'Select';
 
@@ -11032,7 +11172,7 @@ const SelectMultipleField = props => {
       variant,
       selectElementRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
@@ -11062,7 +11202,7 @@ const SelectMultipleField = props => {
           className: `${CLASSNAME$p}__chips`,
           children: !isEmpty && value.map((val, index) => selectedChipRender === null || selectedChipRender === void 0 ? void 0 : selectedChipRender(val, index, onClear, isDisabled, theme))
         }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
-          className: classNames([`${CLASSNAME$p}__input-native`, `${CLASSNAME$p}__input-native--placeholder`]),
+          className: classNames$1([`${CLASSNAME$p}__input-native`, `${CLASSNAME$p}__input-native--placeholder`]),
           children: /*#__PURE__*/jsx("span", {
             children: placeholder
           })
@@ -11114,7 +11254,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, _objectSpread2(_objectSpread2(_objectSpread2({}, DEFAULT_PROPS$m), props), {}, {
-    className: classNames(props.className, handleBasicClasses({
+    className: classNames$1(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
       prefix: CLASSNAME$p
     })),
@@ -11126,7 +11266,7 @@ SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$p;
 SelectMultiple.defaultProps = DEFAULT_PROPS$m;
 
-const _excluded$r = ["children", "className", "theme"];
+const _excluded$q = ["children", "className", "theme"];
 /**
  * Component display name.
  */
@@ -11151,34 +11291,18 @@ const SideNavigation = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/jsx("ul", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$o),
+    className: classNames$1(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$o),
     children: content
   }));
 });
 SideNavigation.displayName = COMPONENT_NAME$o;
 SideNavigation.className = CLASSNAME$o;
 
-const _excluded$q = ["linkAs", "href"];
-/**
- * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
- */
-const renderButtonOrLink = (props, ...children) => {
-  const {
-      linkAs,
-      href
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
-  if (linkAs || href) return renderLink(props, ...children);
-  return /*#__PURE__*/React__default.createElement('button', _objectSpread2({
-    type: 'button'
-  }, forwardedProps), ...children);
-};
-
 const _excluded$p = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
 /**
  * Component display name.
@@ -11236,7 +11360,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("li", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       emphasis,
       isOpen: showChildren,
       isSelected,
@@ -11244,18 +11368,18 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })),
     children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
       className: `${CLASSNAME$n}__wrapper`,
-      children: [renderLink(_objectSpread2(_objectSpread2({
-        linkAs
+      children: [/*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2({
+        as: linkAs || (linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button')
       }, linkProps), {}, {
         className: `${CLASSNAME$n}__link`,
-        onClick,
-        tabIndex: 0
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$n}__icon`,
-        icon: icon,
-        size: Size.xs
-      }), /*#__PURE__*/jsx("span", {
-        children: label
+        onClick: onClick,
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME$n}__icon`,
+          icon: icon,
+          size: Size.xs
+        }), /*#__PURE__*/jsx("span", {
+          children: label
+        })]
       })), /*#__PURE__*/jsx(IconButton, _objectSpread2(_objectSpread2({}, toggleButtonProps), {}, {
         className: `${CLASSNAME$n}__toggle`,
         icon: isOpen ? mdiChevronUp : mdiChevronDown,
@@ -11263,22 +11387,23 @@ const SideNavigationItem = forwardRef((props, ref) => {
         emphasis: Emphasis.low,
         onClick: onActionClick
       }, ariaProps))]
-    }) : renderButtonOrLink(_objectSpread2(_objectSpread2({
-      linkAs
+    }) : /*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
+      as: linkAs || (linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button')
     }, linkProps), {}, {
       className: `${CLASSNAME$n}__link`,
-      tabIndex: 0,
-      onClick
-    }, ariaProps), icon && /*#__PURE__*/jsx(Icon, {
-      className: `${CLASSNAME$n}__icon`,
-      icon: icon,
-      size: Size.xs
-    }), /*#__PURE__*/jsx("span", {
-      children: label
-    }), hasContent && /*#__PURE__*/jsx(Icon, {
-      className: `${CLASSNAME$n}__chevron`,
-      icon: isOpen ? mdiChevronUp : mdiChevronDown,
-      size: Size.xs
+      onClick: onClick
+    }, ariaProps), {}, {
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        className: `${CLASSNAME$n}__icon`,
+        icon: icon,
+        size: Size.xs
+      }), /*#__PURE__*/jsx("span", {
+        children: label
+      }), hasContent && /*#__PURE__*/jsx(Icon, {
+        className: `${CLASSNAME$n}__chevron`,
+        icon: isOpen ? mdiChevronUp : mdiChevronDown,
+        size: Size.xs
+      })]
     })), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
       className: `${CLASSNAME$n}__children`,
       id: contentId,
@@ -11322,7 +11447,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$m,
       size,
       color,
@@ -11381,7 +11506,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$l,
       aspectRatio,
       height: aspectRatio ? undefined : height,
@@ -11432,7 +11557,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$k,
       theme,
       typography,
@@ -11686,7 +11811,7 @@ const Slider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$j,
       theme,
       hasLabel: Boolean(label)
@@ -12096,7 +12221,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: mergeRefs(groupRef, ref),
     role: role,
-    className: classNames(className, CLASSNAME$i),
+    className: classNames$1(className, CLASSNAME$i),
     "aria-roledescription": "slide",
     "aria-label": label
   }, forwardedProps), {}, {
@@ -12247,7 +12372,7 @@ const SlideshowItem = forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: classNames(className, CLASSNAME$h)
+    className: classNames$1(className, CLASSNAME$h)
   }, forwardedProps), {}, {
     children: children
   }));
@@ -12393,7 +12518,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$g,
       theme
     }), {
@@ -12425,7 +12550,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
             itemProps = _objectWithoutProperties(_ref, _excluded2$1);
           const ariaLabel = label || (paginationItemLabel === null || paginationItemLabel === void 0 ? void 0 : paginationItemLabel(index)) || `${index + 1} / ${slidesCount}`;
           return /*#__PURE__*/jsx("button", _objectSpread2({
-            className: classNames(handleBasicClasses({
+            className: classNames$1(handleBasicClasses({
               prefix: `${CLASSNAME$g}__pagination-item`,
               isActive,
               isOnEdge,
@@ -12514,7 +12639,7 @@ const Slides = forwardRef((props, ref) => {
     id: id,
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$f,
       theme
     }), {
@@ -12603,7 +12728,7 @@ const Switch = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$e,
       isChecked,
       isDisabled: isAnyDisabled,
@@ -12690,7 +12815,7 @@ const Table = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("table", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$d,
       hasBefore,
       hasDividers,
@@ -12730,7 +12855,7 @@ const TableBody = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("tbody", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$c),
+    className: classNames$1(className, CLASSNAME$c),
     children: children
   }));
 });
@@ -12808,7 +12933,7 @@ const TableCell = forwardRef((props, ref) => {
     children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", _objectSpread2(_objectSpread2({
       ref: ref
     }, forwardedProps), {}, {
-      className: classNames(handleBasicClasses({
+      className: classNames$1(handleBasicClasses({
         prefix: CLASSNAME$b,
         isSortable,
         isSorted: isSortable && !!sortOrder
@@ -12835,7 +12960,7 @@ const TableCell = forwardRef((props, ref) => {
         })]
       }))
     })), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
-      className: classNames(className, CLASSNAME$b, `${CLASSNAME$b}--body`),
+      className: classNames$1(className, CLASSNAME$b, `${CLASSNAME$b}--body`),
       children: /*#__PURE__*/jsx("div", {
         className: `${CLASSNAME$b}-content`,
         children: children
@@ -12879,7 +13004,7 @@ const TableHeader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("thead", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, CLASSNAME$a),
+    className: classNames$1(className, CLASSNAME$a),
     children: children
   }));
 });
@@ -12927,7 +13052,7 @@ const TableRow = forwardRef((props, ref) => {
     ref: ref,
     tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       isClickable: isClickable && !isAnyDisabled,
       isDisabled: isAnyDisabled,
       isSelected: isSelected && !isAnyDisabled,
@@ -13056,7 +13181,7 @@ const TabList = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: mergeRefs(ref, tabListRef)
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$8,
       layout,
       position,
@@ -13142,7 +13267,7 @@ const Tab = forwardRef((props, ref) => {
   }, forwardedProps), {}, {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$7,
       isActive,
       isDisabled: isAnyDisabled
@@ -13208,7 +13333,7 @@ const TabPanel = forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps), {}, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME$6,
       isActive
     })),
@@ -13438,7 +13563,7 @@ const TextField = forwardRef((props, ref) => {
   };
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       hasChips: Boolean(chips),
       hasError: !isValid && hasError,
       hasIcon: Boolean(icon),
@@ -13725,7 +13850,8 @@ const Thumbnail = forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
   const {
     isAnyDisabled,
-    otherProps
+    otherProps,
+    disabledStateProps
   } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
@@ -13775,17 +13901,18 @@ const Thumbnail = forwardRef((props, ref) => {
     imageErrorStyle.display = 'none';
   }
   const isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
-  const isButton = !!forwardedProps.onClick;
-  const isClickable = !isAnyDisabled && (isButton || isLink);
-  let Wrapper = 'div';
+  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
+  const Wrapper = isClickable ? RawClickable : 'div';
   const wrapperProps = _objectSpread2({}, forwardedProps);
-  if (!isAnyDisabled && isLink) {
-    Wrapper = linkAs || 'a';
-    Object.assign(wrapperProps, linkProps);
-  } else if (!isAnyDisabled && isButton) {
-    Wrapper = 'button';
-    wrapperProps.type = forwardedProps.type || 'button';
-    wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
+  if (isClickable) {
+    Object.assign(wrapperProps, {
+      as: linkAs || (linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button')
+    }, disabledStateProps);
+    if (isLink) {
+      Object.assign(wrapperProps, linkProps);
+    } else {
+      wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
+    }
   }
 
   // If we have a loading placeholder image that is really loaded (complete)
@@ -13797,7 +13924,7 @@ const Thumbnail = forwardRef((props, ref) => {
   } : undefined;
   return /*#__PURE__*/jsxs(Wrapper, _objectSpread2(_objectSpread2({}, wrapperProps), {}, {
     ref: ref,
-    className: classNames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
+    className: classNames$1(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
       align,
       aspectRatio,
       prefix: CLASSNAME$4,
@@ -13824,7 +13951,7 @@ const Thumbnail = forwardRef((props, ref) => {
           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({
+        className: classNames$1(handleBasicClasses({
           prefix: `${CLASSNAME$4}__image`,
           isLoading,
           hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
@@ -13842,7 +13969,7 @@ const Thumbnail = forwardRef((props, ref) => {
         }) : fallback
       })]
     }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
-      className: classNames(`${CLASSNAME$4}__badge`, badge.props.className)
+      className: classNames$1(`${CLASSNAME$4}__badge`, badge.props.className)
     })]
   }));
 });
@@ -13919,7 +14046,7 @@ const Toolbar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       hasAfter: Boolean(after),
       hasBefore: Boolean(before),
       hasLabel: Boolean(label),
@@ -14231,7 +14358,7 @@ const Tooltip = forwardRef((props, ref) => {
       }, forwardedProps), {}, {
         id: id,
         role: "tooltip",
-        className: classNames(className, handleBasicClasses({
+        className: classNames$1(className, handleBasicClasses({
           prefix: CLASSNAME$2,
           position,
           isInitializing: !((_styles$popper = styles.popper) !== null && _styles$popper !== void 0 && _styles$popper.transform)
@@ -14355,7 +14482,7 @@ const Uploader = forwardRef((props, ref) => {
     ref: ref
   }, wrapper.props), forwardedProps), {}, {
     onClick: handleClick,
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
       prefix: CLASSNAME$1,
       size,
@@ -14457,7 +14584,7 @@ const UserBlock = forwardRef((props, ref) => {
     }
     let NameComponent = 'span';
     const nProps = _objectSpread2(_objectSpread2({}, nameProps), {}, {
-      className: classNames(`${CLASSNAME}__name`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
+      className: classNames$1(`${CLASSNAME}__name`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
     });
     if (isClickable) {
       NameComponent = Link;
@@ -14486,7 +14613,7 @@ const UserBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
-    className: classNames(className, handleBasicClasses({
+    className: classNames$1(className, handleBasicClasses({
       prefix: CLASSNAME,
       orientation,
       size: componentSize,
@@ -14500,7 +14627,7 @@ const UserBlock = forwardRef((props, ref) => {
       linkProps: linkProps,
       alt: ""
     }, avatarProps), {}, {
-      className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
+      className: classNames$1(`${CLASSNAME}__avatar`, avatarProps.className),
       size: componentSize,
       onClick: onClick,
       theme: theme