@lumx/react 3.18.2-alpha.4 → 3.19.1-alpha.0

package/index.js

@@ -26,35 +26,81 @@ import isObject from 'lodash/isObject';
 import set from 'lodash/set';
 
 /**
- * See SCSS variable $lumx-color-palette
+ * The down key code.
  */
-const ColorPalette = {
-  primary: 'primary',
-  secondary: 'secondary',
-  blue: 'blue',
-  dark: 'dark',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
-  light: 'light',
-  grey: 'grey'
-};
+const DOWN_KEY_CODE = 40;
+
 /**
- * See SCSS variable $lumx-color-variants
+ * The enter/return key code.
  */
-const ColorVariant = {
-  D1: 'D1',
-  D2: 'D2',
-  L1: 'L1',
-  L2: 'L2',
-  L3: 'L3',
-  L4: 'L4',
-  L5: 'L5',
-  L6: 'L6',
-  N: 'N'
+const ENTER_KEY_CODE = 13;
+
+/**
+ * The space key code.
+ */
+const SPACE_KEY_CODE = 32;
+
+/**
+ * The escape key code.
+ */
+const ESCAPE_KEY_CODE = 27;
+
+/**
+ * The left key code.
+ */
+const LEFT_KEY_CODE = 37;
+
+/**
+ * The right key code.
+ */
+const RIGHT_KEY_CODE = 39;
+
+/**
+ * The tab key code.
+ */
+const TAB_KEY_CODE = 9;
+
+/**
+ * The up key code.
+ */
+const UP_KEY_CODE = 38;
+
+/**
+ * The up key code.
+ */
+const BACKSPACE_KEY_CODE = 8;
+
+/**
+ * The prefix to use for the CSS classes.
+ */
+const CSS_PREFIX = 'lumx';
+
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+const DIALOG_TRANSITION_DURATION = 400;
+const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+const NOTIFICATION_TRANSITION_DURATION = 200;
+const SLIDESHOW_TRANSITION_DURATION = 5000;
+
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+const TOOLTIP_HOVER_DELAY = {
+  open: 500,
+  close: 500
 };
 
-/** ColorPalette with all possible color variant combination */
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+const TOOLTIP_LONG_PRESS_DELAY = {
+  open: 250,
+  close: 3000
+};
 
 /**
  * Alignments.
@@ -179,6 +225,36 @@ const WhiteSpace = {
   'pre-line': 'pre-line',
   'break-spaces': 'break-spaces'
 };
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+const ColorPalette = {
+  primary: 'primary',
+  secondary: 'secondary',
+  blue: 'blue',
+  dark: 'dark',
+  green: 'green',
+  yellow: 'yellow',
+  red: 'red',
+  light: 'light',
+  grey: 'grey'
+};
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+const ColorVariant = {
+  D1: 'D1',
+  D2: 'D2',
+  L1: 'L1',
+  L2: 'L2',
+  L3: 'L3',
+  L4: 'L4',
+  L5: 'L5',
+  L6: 'L6',
+  N: 'N'
+};
+
+/** ColorPalette with all possible color variant combination */
 
 var classnames = {exports: {}};
 
@@ -287,21 +363,6 @@ 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';
 
-const _excluded$1u = ["prefix"];
-
-/**
- * Enhance isEmpty method to also works with numbers.
- *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
- */
-const _isEmpty = value => {
-  if (typeof value === 'number') {
-    return value === 0;
-  }
-  return isEmpty(value);
-};
-
 /**
  * Get the basic CSS class for the given type.
  *
@@ -329,6 +390,21 @@ function getBasicClass({
   return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
+const _excluded$1t = ["prefix"];
+
+/**
+ * Enhance isEmpty method to also works with numbers.
+ *
+ * @param  value The value to check.
+ * @return Whether the input value is empty or != 0.
+ */
+const _isEmpty = value => {
+  if (typeof value === 'number') {
+    return value === 0;
+  }
+  return isEmpty(value);
+};
+
 /**
  * Return all basic LumX CSS classes which are available for every components.
  *
@@ -344,7 +420,7 @@ function handleBasicClasses(_ref) {
   let {
       prefix
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1u);
+    props = _objectWithoutProperties(_ref, _excluded$1t);
   const otherClasses = {};
   if (!isEmpty(props)) {
     Object.keys(props).forEach(prop => {
@@ -358,161 +434,6 @@ function handleBasicClasses(_ref) {
   return classNames(prefix, otherClasses);
 }
 
-/**
- * Checks whether or not the browser support passive events.
- * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
- */
-function isPassiveEventAvailable() {
-  let supportsPassiveOption = false;
-  try {
-    const opts = Object.defineProperty({}, 'passive', {
-      get() {
-        supportsPassiveOption = true;
-      }
-    });
-    window.addEventListener('testPassiveEventSupport', noop, opts);
-    window.removeEventListener('testPassiveEventSupport', noop, opts);
-  } catch (e) {
-    // ignored
-  }
-  return supportsPassiveOption;
-}
-
-/**
- * Detects horizontal swipe direction without blocking the browser scroll using passive event.
- * @see http://javascriptkit.com/javatutors/touchevents2.shtml
- * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
- */
-function detectHorizontalSwipe(touchSurface, handleSwipe) {
-  let startX;
-  let startY;
-  // Required min distance traveled to be considered swipe.
-  const threshold = 150;
-  // Maximum distance allowed at the same time in perpendicular direction.
-  const restraint = 150;
-  // Maximum time allowed to travel that distance.
-  const allowedTime = 300;
-  let elapsedTime;
-  let startTime;
-  let finished;
-  const onTouchStart = evt => {
-    const [touch] = Array.from(evt.changedTouches);
-    startX = touch.pageX;
-    startY = touch.pageY;
-    // Record time when finger first makes contact with surface.
-    startTime = new Date().getTime();
-    finished = false;
-  };
-  const onTouchMove = evt => {
-    if (finished) {
-      return;
-    }
-    elapsedTime = new Date().getTime() - startTime;
-    if (elapsedTime > allowedTime) {
-      // Touch swipe too long to be considered.
-      return;
-    }
-    const [touch] = Array.from(evt.changedTouches);
-    // Get horizontal dist traveled by finger while in contact with surface.
-    const distX = touch.pageX - startX;
-    // Get vertical dist traveled by finger while in contact with surface.
-    const distY = touch.pageY - startY;
-    if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
-      // Swipe is not horizontal.
-      return;
-    }
-    // Swipe direction.
-    const direction = distX < 0 ? 'left' : 'right';
-    handleSwipe(direction);
-    finished = true;
-  };
-
-  // Activate passive event if possible for better scrolling performance.
-  const eventOptions = isPassiveEventAvailable() ? {
-    passive: true
-  } : false;
-  touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
-  touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
-  return () => {
-    touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
-    touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
-  };
-}
-/**
- * Make sure the pressed key is the enter key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-function onEnterPressed(handler) {
-  return evt => {
-    if (evt.key !== 'Enter') {
-      return;
-    }
-    handler(evt);
-  };
-}
-
-/**
- * Make sure the pressed key is the escape key before calling the callback.
- *
- * @param  handler The handler to call on enter/return press.
- * @return The decorated function.
- */
-function onEscapePressed(handler) {
-  return evt => {
-    if (evt.key !== 'Escape') {
-      return;
-    }
-    handler(evt);
-  };
-}
-
-/**
- * Handle button key pressed (Enter + Space).
- *
- * @param  handler The handler to call.
- * @return The decorated function.
- */
-function onButtonPressed(handler) {
-  return evt => {
-    if (evt.key !== 'Enter' && evt.key !== ' ') {
-      return;
-    }
-    handler(evt);
-  };
-}
-
-/**
- * The prefix to use for the CSS classes.
- */
-const CSS_PREFIX = 'lumx';
-
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-const DIALOG_TRANSITION_DURATION = 400;
-const NOTIFICATION_TRANSITION_DURATION = 200;
-
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-const TOOLTIP_HOVER_DELAY = {
-  open: 500,
-  close: 500
-};
-
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-const TOOLTIP_LONG_PRESS_DELAY = {
-  open: 250,
-  close: 3000
-};
-
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
 
@@ -542,6 +463,13 @@ const getTypographyClassName = typography => {
   return `lumx-typography-${typography}`;
 };
 
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
+
 /**
  * Returns the classname associated to the given color and variant.
  * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
@@ -552,13 +480,6 @@ function fontColorClass(propColor, propColorVariant) {
   return `lumx-color-font-${color}-${colorVariant}`;
 }
 
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-function resolveColorWithVariants(colorWithVariants, colorVariant) {
-  if (!colorWithVariants) return [undefined, colorVariant];
-  const [color, baseColorVariant] = colorWithVariants.split('-');
-  return [color, colorVariant || baseColorVariant];
-}
-
 let i = 0;
 
 /**
@@ -578,7 +499,7 @@ function useId() {
  */
 const forwardRef = React__default.forwardRef;
 
-const _excluded$1t = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
+const _excluded$1s = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2$3 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
 /**
@@ -642,7 +563,7 @@ const AlertDialog = forwardRef((props, ref) => {
       dialogProps,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1s);
   const cancelButtonRef = React__default.useRef(null);
   const confirmationButtonRef = React__default.useRef(null);
   const {
@@ -769,7 +690,7 @@ function useTheme() {
   return React__default.useContext(ThemeContext);
 }
 
-const _excluded$1s = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
+const _excluded$1r = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
 /**
  * Resolve disabled state from props.
  * (handles `disabled`, `isDisabled` and `aria-disabled`)
@@ -784,7 +705,7 @@ function useDisableStateProps(props) {
       onClick,
       onChange
     } = props,
-    otherProps = _objectWithoutProperties(props, _excluded$1s);
+    otherProps = _objectWithoutProperties(props, _excluded$1r);
   const disabledStateContext = useDisabledStateContext();
   const disabledStateProps = {
     disabled: (disabledStateContext === null || disabledStateContext === void 0 ? void 0 : disabledStateContext.state) === 'disabled' || isDisabled,
@@ -802,7 +723,7 @@ 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$1q = ["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"];
 
 /**
  * Defines the props of the component.
@@ -876,7 +797,7 @@ const Autocomplete = forwardRef((props, ref) => {
       textFieldProps = {},
       focusAnchorOnClose
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1r);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1q);
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
@@ -924,7 +845,7 @@ Autocomplete.displayName = COMPONENT_NAME$1m;
 Autocomplete.className = CLASSNAME$1j;
 Autocomplete.defaultProps = DEFAULT_PROPS$12;
 
-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$1p = ["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"];
 
 /**
  * Defines the props of the component.
@@ -1013,7 +934,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
       value,
       values = DEFAULT_PROPS$11.values
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1q);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1p);
   return /*#__PURE__*/React__default.createElement(Autocomplete, _extends({
     ref: ref
   }, forwardedProps, {
@@ -1054,7 +975,7 @@ AutocompleteMultiple.displayName = COMPONENT_NAME$1l;
 AutocompleteMultiple.className = CLASSNAME$1i;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1p = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
+const _excluded$1o = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
 
 /**
  * Avatar sizes.
@@ -1104,7 +1025,7 @@ const Avatar = forwardRef((props, ref) => {
       theme = defaultTheme,
       thumbnailProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1135,7 +1056,7 @@ Avatar.displayName = COMPONENT_NAME$1k;
 Avatar.className = CLASSNAME$1h;
 Avatar.defaultProps = DEFAULT_PROPS$10;
 
-const _excluded$1o = ["children", "className", "color"];
+const _excluded$1n = ["children", "className", "color"];
 
 /**
  * Defines the props of the component.
@@ -1171,7 +1092,7 @@ const Badge = forwardRef((props, ref) => {
       className,
       color = DEFAULT_PROPS$$.color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1185,7 +1106,7 @@ Badge.displayName = COMPONENT_NAME$1j;
 Badge.className = CLASSNAME$1g;
 Badge.defaultProps = DEFAULT_PROPS$$;
 
-const _excluded$1n = ["badge", "children", "className"];
+const _excluded$1m = ["badge", "children", "className"];
 /**
  * Component display name.
  */
@@ -1201,7 +1122,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1254,25 +1175,53 @@ 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$1l = ["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$1l);
+  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__*/React__default.createElement(Component, _extends({
+    ref: ref,
+    "aria-disabled": isAnyDisabled
+  }, forwardedProps, clickableProps, {
+    onClick: event => {
+      if (isAnyDisabled) {
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  }), 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$1k = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "size", "theme", "variant", "fullWidth"];
 
 /**
  * Button size definition.
@@ -1333,21 +1282,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$1k);
   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), {}, {
@@ -1360,7 +1305,7 @@ const ButtonRoot = forwardRef((props, ref) => {
     color: adaptedColor,
     emphasis,
     isSelected,
-    isDisabled: isAnyDisabled,
+    isDisabled: props.isDisabled || props['aria-disabled'],
     isActive,
     isFocused,
     isHovered,
@@ -1370,39 +1315,19 @@ 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__*/React__default.createElement("button", _extends({}, forwardedProps, disabledStateProps, {
+  return /*#__PURE__*/React__default.createElement(RawClickable, _extends({
+    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
+    className: buttonClassName
   }), children);
 });
 ButtonRoot.displayName = COMPONENT_NAME$1h;
 ButtonRoot.defaultProps = {};
 
-const _excluded$1k = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
+const _excluded$1j = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
 
 /**
  * Button emphasis definition.
@@ -1450,7 +1375,7 @@ const Button = forwardRef((props, ref) => {
       size = DEFAULT_PROPS$_.size,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
   const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasLeftIcon',
@@ -1489,7 +1414,7 @@ Button.displayName = COMPONENT_NAME$1g;
 Button.className = CLASSNAME$1e;
 Button.defaultProps = DEFAULT_PROPS$_;
 
-const _excluded$1j = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
+const _excluded$1i = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
 /**
  * Component display name.
  */
@@ -1527,7 +1452,7 @@ const IconButton = forwardRef((props, ref) => {
       tooltipProps,
       hideTooltip
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   return /*#__PURE__*/React__default.createElement(Tooltip, _extends({
     label: hideTooltip ? '' : label
   }, tooltipProps), /*#__PURE__*/React__default.createElement(ButtonRoot, _extends({
@@ -1553,7 +1478,7 @@ IconButton.displayName = COMPONENT_NAME$1f;
 IconButton.className = CLASSNAME$1d;
 IconButton.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1i = ["children", "className"];
+const _excluded$1h = ["children", "className"];
 
 /**
  * Defines the props of the component
@@ -1586,7 +1511,7 @@ const ButtonGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1597,7 +1522,7 @@ ButtonGroup.displayName = COMPONENT_NAME$1e;
 ButtonGroup.className = CLASSNAME$1c;
 ButtonGroup.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1h = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$1g = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 /**
  * Intermediate state of checkbox.
  */
@@ -1650,7 +1575,7 @@ const Checkbox = forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1h);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1g);
   const localInputRef = React__default.useRef(null);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
@@ -1730,7 +1655,118 @@ function useStopPropagation(handler) {
   }, [handler]);
 }
 
-const _excluded$1g = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
+/**
+ * Make sure the pressed key is the enter key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEnterPressed(handler) {
+  return evt => {
+    if (evt.key !== 'Enter') {
+      return;
+    }
+    handler(evt);
+  };
+}
+
+/**
+ * Make sure the pressed key is the escape key before calling the callback.
+ *
+ * @param  handler The handler to call on enter/return press.
+ * @return The decorated function.
+ */
+function onEscapePressed(handler) {
+  return evt => {
+    if (evt.key !== 'Escape') {
+      return;
+    }
+    handler(evt);
+  };
+}
+
+/**
+ * Checks whether or not the browser support passive events.
+ * @see https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/dom/passiveeventlisteners.js
+ */
+function isPassiveEventAvailable() {
+  let supportsPassiveOption = false;
+  try {
+    const opts = Object.defineProperty({}, 'passive', {
+      get() {
+        supportsPassiveOption = true;
+      }
+    });
+    window.addEventListener('testPassiveEventSupport', noop, opts);
+    window.removeEventListener('testPassiveEventSupport', noop, opts);
+  } catch (e) {
+    // ignored
+  }
+  return supportsPassiveOption;
+}
+
+/**
+ * Detects horizontal swipe direction without blocking the browser scroll using passive event.
+ * @see http://javascriptkit.com/javatutors/touchevents2.shtml
+ * @see https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+ */
+function detectHorizontalSwipe(touchSurface, handleSwipe) {
+  let startX;
+  let startY;
+  // Required min distance traveled to be considered swipe.
+  const threshold = 150;
+  // Maximum distance allowed at the same time in perpendicular direction.
+  const restraint = 150;
+  // Maximum time allowed to travel that distance.
+  const allowedTime = 300;
+  let elapsedTime;
+  let startTime;
+  let finished;
+  const onTouchStart = evt => {
+    const [touch] = Array.from(evt.changedTouches);
+    startX = touch.pageX;
+    startY = touch.pageY;
+    // Record time when finger first makes contact with surface.
+    startTime = new Date().getTime();
+    finished = false;
+  };
+  const onTouchMove = evt => {
+    if (finished) {
+      return;
+    }
+    elapsedTime = new Date().getTime() - startTime;
+    if (elapsedTime > allowedTime) {
+      // Touch swipe too long to be considered.
+      return;
+    }
+    const [touch] = Array.from(evt.changedTouches);
+    // Get horizontal dist traveled by finger while in contact with surface.
+    const distX = touch.pageX - startX;
+    // Get vertical dist traveled by finger while in contact with surface.
+    const distY = touch.pageY - startY;
+    if (!(Math.abs(distX) >= threshold && Math.abs(distY) <= restraint)) {
+      // Swipe is not horizontal.
+      return;
+    }
+    // Swipe direction.
+    const direction = distX < 0 ? 'left' : 'right';
+    handleSwipe(direction);
+    finished = true;
+  };
+
+  // Activate passive event if possible for better scrolling performance.
+  const eventOptions = isPassiveEventAvailable() ? {
+    passive: true
+  } : false;
+  touchSurface.addEventListener('touchstart', onTouchStart, eventOptions);
+  touchSurface.addEventListener('touchmove', onTouchMove, eventOptions);
+  return () => {
+    touchSurface.removeEventListener('touchstart', onTouchStart, eventOptions);
+    touchSurface.removeEventListener('touchmove', onTouchMove, eventOptions);
+  };
+}
+
+const _excluded$1f = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
 
 /**
  * Chip sizes.
@@ -1788,7 +1824,7 @@ const Chip = forwardRef((props, ref) => {
       href,
       onKeyDown
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1g);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1f);
   const hasAfterClick = isFunction(onAfterClick);
   const hasBeforeClick = isFunction(onBeforeClick);
   const hasOnClick = isFunction(props.onClick);
@@ -1905,7 +1941,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
   };
 };
 
-const _excluded$1f = ["align", "children", "className"];
+const _excluded$1e = ["align", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -1939,7 +1975,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1953,7 +1989,7 @@ 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$1d = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
 /**
  * Comment block variants.
  */
@@ -2011,7 +2047,7 @@ const CommentBlock = forwardRef((props, ref) => {
       theme = defaultTheme,
       variant = DEFAULT_PROPS$U.variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
@@ -2499,7 +2535,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
 DatePickerControlled.displayName = COMPONENT_NAME$18;
 DatePickerControlled.className = CLASSNAME$17;
 
-const _excluded$1d = ["defaultMonth", "locale", "value", "onChange"];
+const _excluded$1c = ["defaultMonth", "locale", "value", "onChange"];
 /**
  * DatePicker component.
  *
@@ -2514,7 +2550,7 @@ const DatePicker = forwardRef((props, ref) => {
       value,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
   let referenceDate = value || defaultMonth || new Date();
   if (!isDateValid(referenceDate)) {
     // eslint-disable-next-line no-console
@@ -2551,7 +2587,7 @@ const useBooleanState = defaultValue => {
   return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };
 
-const _excluded$1c = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
+const _excluded$1b = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
 /**
  * Defines the props of the component.
@@ -2585,7 +2621,7 @@ const DatePickerField = forwardRef((props, ref) => {
       previousButtonProps,
       value
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1b);
   const anchorRef = useRef(null);
   const [isOpen, close,, toggleOpen] = useBooleanState(false);
   const handleKeyboardNav = useCallback(evt => {
@@ -3130,7 +3166,7 @@ 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$1a = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
 
 /**
  * Defines the props of the component.
@@ -3192,7 +3228,7 @@ const Dialog = forwardRef((props, ref) => {
       preventCloseOnClick,
       preventCloseOnEscape
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = React__default.useRef(isOpen);
@@ -3308,7 +3344,7 @@ Dialog.displayName = COMPONENT_NAME$16;
 Dialog.className = CLASSNAME$16;
 Dialog.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$1a = ["className", "theme"];
+const _excluded$19 = ["className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -3342,7 +3378,7 @@ const Divider = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$19);
   return /*#__PURE__*/React__default.createElement("hr", _extends({
     ref: ref
   }, forwardedProps, {
@@ -3356,7 +3392,7 @@ Divider.displayName = COMPONENT_NAME$15;
 Divider.className = CLASSNAME$15;
 Divider.defaultProps = DEFAULT_PROPS$S;
 
-const _excluded$19 = ["className", "theme"];
+const _excluded$18 = ["className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -3385,7 +3421,7 @@ const DragHandle = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$18);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -3566,7 +3602,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
-const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
+const _excluded$17 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 
 /**
  * Defines the props of the component.
@@ -3626,13 +3662,7 @@ const ListItem = forwardRef((props, ref) => {
       onItemSelected,
       size = DEFAULT_PROPS$R.size
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$18);
-  const role = linkAs || linkProps.href ? 'link' : 'button';
-  const onKeyDown = useMemo(() => {
-    if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
-    if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected);
-    return undefined;
-  }, [role, onItemSelected]);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$17);
   const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, before && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$13}__before`
   }, before), /*#__PURE__*/React__default.createElement("div", {
@@ -3650,24 +3680,21 @@ const ListItem = forwardRef((props, ref) => {
   }), isClickable({
     linkProps,
     onItemSelected
-  }) ? (/* Clickable list item */
-  renderLink(_objectSpread2(_objectSpread2({
-    linkAs,
-    tabIndex: !disabledStateProps.disabled ? 0 : undefined,
-    role,
-    'aria-disabled': isAnyDisabled
-  }, linkProps), {}, {
-    href: isAnyDisabled ? undefined : linkProps.href,
+  }) ?
+  /*#__PURE__*/
+  /* Clickable list item */
+  React__default.createElement(RawClickable, _extends({
+    as: linkAs || linkProps.href ? 'a' : 'button'
+  }, linkProps, disabledStateProps, {
     className: classNames(handleBasicClasses({
       prefix: `${CLASSNAME$13}__link`,
       isHighlighted,
       isSelected,
       isDisabled: isAnyDisabled
     })),
-    onClick: isAnyDisabled ? undefined : onItemSelected,
-    onKeyDown: isAnyDisabled ? undefined : onKeyDown,
+    onClick: onItemSelected,
     ref: linkRef
-  }), content)) :
+  }), content) :
   /*#__PURE__*/
   /* Non clickable list item */
   React__default.createElement("div", {
@@ -4107,7 +4134,7 @@ const useInteractiveList = options => {
   }, [items, activeItemIndex, onListItemSelected]);
 };
 
-const _excluded$17 = ["children", "className", "isClickable", "itemPadding", "onListItemSelected", "tabIndex"];
+const _excluded$16 = ["children", "className", "isClickable", "itemPadding", "onListItemSelected", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -4147,7 +4174,7 @@ const InternalList = forwardRef((props, ref) => {
       onListItemSelected,
       tabIndex = DEFAULT_PROPS$Q.tabIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$17);
+    forwardedProps = _objectWithoutProperties(props, _excluded$16);
   const listElementRef = useRef(null);
   const {
     items,
@@ -6589,7 +6616,7 @@ function usePopoverStyle({
   };
 }
 
-const _excluded$16 = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZoneElement", "offset", "placement", "style", "theme", "zIndex"];
+const _excluded$15 = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZoneElement", "offset", "placement", "style", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6645,7 +6672,7 @@ const _InnerPopover = forwardRef((props, ref) => {
       theme,
       zIndex = DEFAULT_PROPS$P.zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$16);
+    forwardedProps = _objectWithoutProperties(props, _excluded$15);
   const popoverRef = useRef(null);
   const {
     styles,
@@ -6764,7 +6791,7 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
   }, [callback, callbackOnMount]);
 };
 
-const _excluded$15 = ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"];
+const _excluded$14 = ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6820,7 +6847,7 @@ const Dropdown = forwardRef((props, ref) => {
       shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$15);
+    forwardedProps = _objectWithoutProperties(props, _excluded$14);
   const innerRef = useRef(null);
   const listElement = useRef(null);
   useInfiniteScroll(innerRef, onInfiniteScroll);
@@ -6863,7 +6890,7 @@ Dropdown.displayName = COMPONENT_NAME$10;
 Dropdown.className = CLASSNAME$10;
 Dropdown.defaultProps = DEFAULT_PROPS$O;
 
-const _excluded$14 = ["className", "closeMode", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
+const _excluded$13 = ["className", "closeMode", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
 
 /**
  * Defines the props of the component.
@@ -6912,7 +6939,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
       theme = defaultTheme,
       toggleButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$14);
+    forwardedProps = _objectWithoutProperties(props, _excluded$13);
   const children = Children.toArray(anyChildren);
 
   // Partition children by types.
@@ -7008,7 +7035,7 @@ ExpansionPanel.displayName = COMPONENT_NAME$$;
 ExpansionPanel.className = CLASSNAME$$;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
 
-const _excluded$13 = ["label", "icon", "color", "className", "theme", "truncate"];
+const _excluded$12 = ["label", "icon", "color", "className", "theme", "truncate"];
 const COMPONENT_NAME$_ = 'Flag';
 const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
 const DEFAULT_PROPS$M = {};
@@ -7030,7 +7057,7 @@ const Flag = forwardRef((props, ref) => {
       theme = defaultTheme,
       truncate
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$13);
+    forwardedProps = _objectWithoutProperties(props, _excluded$12);
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
   const isTruncated = !!truncate;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, forwardedProps, {
@@ -7055,7 +7082,7 @@ Flag.displayName = COMPONENT_NAME$_;
 Flag.className = CLASSNAME$_;
 Flag.defaultProps = DEFAULT_PROPS$M;
 
-const _excluded$12 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
+const _excluded$11 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -7092,7 +7119,7 @@ const FlexBox = forwardRef((props, ref) => {
       vAlign,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$11);
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: ref
   }, forwardedProps, {
@@ -7108,7 +7135,7 @@ const FlexBox = forwardRef((props, ref) => {
 FlexBox.displayName = COMPONENT_NAME$Z;
 FlexBox.className = CLASSNAME$Z;
 
-const _excluded$11 = ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"];
+const _excluded$10 = ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"];
 /**
  * Component display name.
  */
@@ -7157,7 +7184,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       orientation = DEFAULT_PROPS$L.orientation,
       contentProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$11);
+    forwardedProps = _objectWithoutProperties(props, _excluded$10);
   const sections = React__default.useMemo(() => {
     // Split children by section type
     const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]);
@@ -7229,26 +7256,28 @@ const useTooltipContext = () => React__default.useContext(TooltipContext);
 
 /**
  * Compute a tooltip label based on a label element `innerText` if the text overflows.
- *
- * Warning: only works on first render, does not update on label element resize.
+ * Updates dynamically on content changes (but not on resize!)
  */
-const useOverflowTooltipLabel = () => {
+const useOverflowTooltipLabel = content => {
   const parentTooltip = useTooltipContext();
   const [tooltipLabel, setTooltipLabel] = React__default.useState(undefined);
-  const labelRef = React__default.useCallback(labelElement => {
-    if (!labelElement || !!parentTooltip) {
-      // Skip if label element is unknown
-      // Skip if the parent has a tooltip
-      return;
-    }
-
-    // Label overflowing
-    if (labelElement.offsetWidth < labelElement.scrollWidth) {
+  const [labelElement, setLabelElement] = React__default.useState(null);
+  React__default.useLayoutEffect(() => {
+    if (
+    // Not inside a tooltip
+    !parentTooltip && labelElement &&
+    // Not inside a visually hidden
+    !(labelElement !== null && labelElement !== void 0 && labelElement.closest(`.${VISUALLY_HIDDEN}`)) &&
+    // Text overflows
+    labelElement.offsetWidth < labelElement.scrollWidth) {
+      // Set tooltip label
       setTooltipLabel(labelElement.innerText);
+    } else {
+      setTooltipLabel(undefined);
     }
-  }, [parentTooltip]);
+  }, [labelElement, parentTooltip, content]);
   return {
-    labelRef,
+    labelRef: setLabelElement,
     tooltipLabel
   };
 };
@@ -7267,7 +7296,7 @@ function wrapChildrenIconWithSpaces(children) {
   });
 }
 
-const _excluded$10 = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
+const _excluded$$ = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 
 /**
  * Defines the props of the component.
@@ -7308,7 +7337,7 @@ const Text = forwardRef((props, ref) => {
       whiteSpace,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$10);
+    forwardedProps = _objectWithoutProperties(props, _excluded$$);
   const typographyClass = typography && getTypographyClassName(typography);
 
   // Truncate mode
@@ -7329,7 +7358,7 @@ const Text = forwardRef((props, ref) => {
   const {
     tooltipLabel,
     labelRef
-  } = useOverflowTooltipLabel();
+  } = useOverflowTooltipLabel(children);
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: useMergeRefs(ref, labelRef),
     className: classNames(className, handleBasicClasses({
@@ -7377,7 +7406,7 @@ const useHeadingLevel = () => {
   };
 };
 
-const _excluded$$ = ["children", "as", "className"];
+const _excluded$_ = ["children", "as", "className"];
 
 /**
  * Defines the props of the component.
@@ -7409,7 +7438,7 @@ const Heading = forwardRef((props, ref) => {
       as,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$$);
+    forwardedProps = _objectWithoutProperties(props, _excluded$_);
   const {
     headingElement
   } = useHeadingLevel();
@@ -7447,7 +7476,7 @@ const HeadingLevelProvider = ({
   }, children);
 };
 
-const _excluded$_ = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
+const _excluded$Z = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -7488,7 +7517,7 @@ const Grid = forwardRef((props, ref) => {
       vAlign,
       wrap = DEFAULT_PROPS$I.wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$_);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -7508,7 +7537,7 @@ Grid.displayName = COMPONENT_NAME$V;
 Grid.className = CLASSNAME$V;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
-const _excluded$Z = ["children", "className", "width", "align", "order"];
+const _excluded$Y = ["children", "className", "width", "align", "order"];
 
 /**
  * Defines the props of the component.
@@ -7539,7 +7568,7 @@ const GridItem = forwardRef((props, ref) => {
       align,
       order
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -7554,7 +7583,7 @@ const GridItem = forwardRef((props, ref) => {
 GridItem.displayName = COMPONENT_NAME$U;
 GridItem.className = CLASSNAME$U;
 
-const _excluded$Y = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
+const _excluded$X = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
 
 /**
  * Defines the props of the component.
@@ -7594,7 +7623,7 @@ const GridColumn = forwardRef((props, ref) => {
       className,
       style = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
   return /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(className, CLASSNAME$T),
@@ -7609,7 +7638,7 @@ GridColumn.displayName = COMPONENT_NAME$T;
 GridColumn.className = CLASSNAME$T;
 GridColumn.defaultProps = DEFAULT_PROPS$H;
 
-const _excluded$X = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt"];
+const _excluded$W = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt"];
 
 /**
  * Defines the props of the component.
@@ -7649,7 +7678,7 @@ const Icon = forwardRef((props, ref) => {
       theme = defaultTheme,
       alt
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
   // Color
@@ -7764,7 +7793,7 @@ const ImageCaption = props => {
   }, tags));
 };
 
-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"];
 
 /**
  * Image block variants.
@@ -7827,7 +7856,7 @@ const ImageBlock = forwardRef((props, ref) => {
       title,
       titleProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
+    forwardedProps = _objectWithoutProperties(props, _excluded$V);
   return /*#__PURE__*/React__default.createElement("figure", _extends({
     ref: ref
   }, forwardedProps, {
@@ -8205,7 +8234,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,
@@ -8308,7 +8337,7 @@ const ImageSlideshow = ({
         image,
         imgRef
       } = _ref,
-      imageProps = _objectWithoutProperties(_ref, _excluded$V);
+      imageProps = _objectWithoutProperties(_ref, _excluded$U);
     const isActive = index === activeIndex;
     return /*#__PURE__*/React__default.createElement(ImageSlide, {
       isActive: isActive,
@@ -8517,7 +8546,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,
@@ -8533,7 +8562,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);
@@ -8588,7 +8617,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"];
 
 /**
  * Defines the props of the component.
@@ -8625,7 +8654,7 @@ 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__*/
@@ -8670,7 +8699,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$S = ["children", "className", "kind", "theme"];
+const _excluded$R = ["children", "className", "kind", "theme"];
 
 /**
  * Defines the props of the component.
@@ -8708,7 +8737,7 @@ 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] || {};
@@ -8726,7 +8755,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"];
 
 /**
  * Defines the props of the component.
@@ -8764,7 +8793,7 @@ 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__*/React__default.createElement("label", _extends({
     ref: ref
@@ -8782,7 +8811,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"];
 
 /**
  * Defines the props of the component.
@@ -8822,7 +8851,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;
@@ -8914,7 +8943,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"];
 
 /**
  * Defines the props of the component.
@@ -8939,7 +8968,6 @@ const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
  */
 const Link = forwardRef((props, ref) => {
   const {
-    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
@@ -8948,28 +8976,17 @@ 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__*/React__default.createElement(Component, _extends({
-    ref: ref
-  }, forwardedProps, baseProps, {
+  return /*#__PURE__*/React__default.createElement(RawClickable, _extends({
+    ref: ref,
+    as: linkAs || forwardedProps.href ? 'a' : 'button'
+  }, forwardedProps, disabledStateProps, {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$L,
       color,
@@ -8989,7 +9006,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"];
 
 /**
  * Defines the props of the component.
@@ -9034,7 +9051,7 @@ 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__*/React__default.createElement("article", _extends({
@@ -9089,7 +9106,7 @@ LinkPreview.displayName = COMPONENT_NAME$K;
 LinkPreview.className = CLASSNAME$K;
 LinkPreview.defaultProps = DEFAULT_PROPS$B;
 
-const _excluded$N = ["className"];
+const _excluded$M = ["className"];
 
 /**
  * Defines the props of the component.
@@ -9116,7 +9133,7 @@ const ListDivider = forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9126,7 +9143,7 @@ const ListDivider = forwardRef((props, ref) => {
 ListDivider.displayName = COMPONENT_NAME$J;
 ListDivider.className = CLASSNAME$J;
 
-const _excluded$M = ["children", "className"];
+const _excluded$L = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -9154,7 +9171,7 @@ const ListSubheader = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9164,7 +9181,7 @@ const ListSubheader = forwardRef((props, ref) => {
 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"];
 
 /**
  * Defines the props of the component.
@@ -9218,7 +9235,7 @@ const Message = forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const {
     color,
     icon
@@ -9253,7 +9270,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"];
 
 /**
@@ -9290,7 +9307,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 => {
@@ -9338,12 +9355,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"];
-
-/** Make `href` required when `as` is `a` */
+const _excluded$I = ["className", "icon", "label", "isCurrentPage", "as"];
 
 /**
  * Navigation item props
@@ -9366,15 +9378,12 @@ 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();
-  const buttonProps = Element === 'button' ? {
-    type: 'button'
-  } : {};
+  } = useOverflowTooltipLabel(label);
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$F,
@@ -9383,14 +9392,15 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
     label: tooltipLabel,
     placement: Placement.TOP
-  }, /*#__PURE__*/React__default.createElement(Element, _extends({
+  }, /*#__PURE__*/React__default.createElement(RawClickable, _extends({
+    as: Element,
     className: handleBasicClasses({
       prefix: `${CLASSNAME$F}__link`,
       isSelected: isCurrentPage
     }),
     ref: ref,
     "aria-current": isCurrentPage ? 'page' : undefined
-  }, buttonProps, forwardedProps), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, forwardedProps), icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: `${CLASSNAME$F}__icon`,
     icon: icon,
     size: Size.xs,
@@ -9410,7 +9420,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.
  */
@@ -9427,7 +9437,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();
@@ -9442,7 +9452,9 @@ const NavigationSection = forwardRef((props, ref) => {
       theme
     })),
     ref: ref
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(RawClickable, _extends({
+    as: "button"
+  }, forwardedProps, {
     "aria-controls": sectionId,
     "aria-expanded": isOpen,
     className: classNames(`${CLASSNAME$F}__link`),
@@ -9450,8 +9462,7 @@ const NavigationSection = forwardRef((props, ref) => {
     onClick: event => {
       setIsOpen(!isOpen);
       event.stopPropagation();
-    },
-    type: "button"
+    }
   }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: `${CLASSNAME$F}__icon`,
     icon: icon,
@@ -9491,7 +9502,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.
  */
@@ -9516,7 +9527,7 @@ 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__*/React__default.createElement(ThemeProvider, {
     value: theme
   }, /*#__PURE__*/React__default.createElement("nav", _extends({
@@ -9564,7 +9575,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"];
 
 /**
  * Defines the props of the component.
@@ -9611,7 +9622,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;
@@ -9667,7 +9678,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"];
 
 /**
  * PopoverDialog props.
@@ -9705,7 +9716,7 @@ const PopoverDialog = forwardRef((props, ref) => {
       label = ariaLabel,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/React__default.createElement(Popover, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(className, CLASSNAME$B),
@@ -9729,7 +9740,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"];
 
 /**
  * Defines the props of the component.
@@ -9775,7 +9786,7 @@ const PostBlock = forwardRef((props, ref) => {
       thumbnailProps,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
     className: classNames(className, handleBasicClasses({
@@ -9820,7 +9831,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.
  */
@@ -9849,7 +9860,7 @@ const ProgressLinear = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9867,7 +9878,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"];
 
 /**
  * Progress sizes.
@@ -9910,7 +9921,7 @@ 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__*/React__default.createElement(Element, _extends({
     ref: ref
@@ -9941,7 +9952,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"];
 
 /**
  * Progress variants.
@@ -9987,7 +9998,7 @@ 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__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10124,7 +10135,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
@@ -10146,7 +10157,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.
@@ -10249,7 +10260,7 @@ const useRovingTabIndex = ({
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$z = ["aria-label", "children", "className"];
+const _excluded$y = ["aria-label", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -10286,7 +10297,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,
@@ -10325,7 +10336,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"];
 
 /**
  * Defines the props of the component.
@@ -10372,7 +10383,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(() => {
@@ -10439,7 +10450,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"];
 
 /**
  * Defines the props of the component.
@@ -10476,7 +10487,7 @@ 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__*/React__default.createElement("div", _extends({
@@ -10496,7 +10507,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"];
 
 /**
  * Defines the props of the component.
@@ -10545,7 +10556,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 => {
@@ -10599,7 +10610,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"];
 
 /**
  * Defines the props of the component.
@@ -10627,7 +10638,7 @@ const RadioGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10661,7 +10672,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';
 
@@ -10695,7 +10706,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);
@@ -10778,7 +10789,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';
@@ -10820,7 +10831,7 @@ const SelectField = props => {
       variant,
       selectElementRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$q}__header`
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
@@ -10900,7 +10911,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"];
 
 /** Defines the props of the component. */
 
@@ -10953,7 +10964,7 @@ const SelectMultipleField = props => {
       variant,
       selectElementRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$p}__header`
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
@@ -11023,7 +11034,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"];
 
 /**
  * Defines the props of the component.
@@ -11053,7 +11064,7 @@ 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__*/React__default.createElement("ul", _extends({
     ref: ref
@@ -11064,22 +11075,6 @@ const SideNavigation = forwardRef((props, ref) => {
 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"];
 
 /**
@@ -11150,12 +11145,11 @@ const SideNavigationItem = forwardRef((props, ref) => {
     }))
   }), shouldSplitActions ? /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$n}__wrapper`
-  }, renderLink(_objectSpread2(_objectSpread2({
-    linkAs
-  }, linkProps), {}, {
+  }, /*#__PURE__*/React__default.createElement(RawClickable, _extends({
+    as: linkAs || linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button'
+  }, linkProps, {
     className: `${CLASSNAME$n}__link`,
-    onClick,
-    tabIndex: 0
+    onClick: onClick
   }), icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: `${CLASSNAME$n}__icon`,
     icon: icon,
@@ -11166,12 +11160,11 @@ const SideNavigationItem = forwardRef((props, ref) => {
     size: Size.m,
     emphasis: Emphasis.low,
     onClick: onActionClick
-  }, ariaProps))) : renderButtonOrLink(_objectSpread2(_objectSpread2({
-    linkAs
-  }, linkProps), {}, {
+  }, ariaProps))) : /*#__PURE__*/React__default.createElement(RawClickable, _extends({
+    as: linkAs || linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button'
+  }, linkProps, {
     className: `${CLASSNAME$n}__link`,
-    tabIndex: 0,
-    onClick
+    onClick: onClick
   }, ariaProps), icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: `${CLASSNAME$n}__icon`,
     icon: icon,
@@ -13654,7 +13647,8 @@ const Thumbnail = forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
   const {
     isAnyDisabled,
-    otherProps
+    otherProps,
+    disabledStateProps
   } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
@@ -13703,17 +13697,13 @@ const Thumbnail = forwardRef((props, ref) => {
     // Remove the image on custom fallback.
     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 && ((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs || 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';
+  if (isClickable) {
+    Object.assign(wrapperProps, linkProps, {
+      as: linkAs || linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button'
+    }, disabledStateProps);
     wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
   }
 
@@ -14446,5 +14436,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, BACKSPACE_KEY_CODE, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CSS_PREFIX, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DIALOG_TRANSITION_DURATION, DOWN_KEY_CODE, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ENTER_KEY_CODE, ESCAPE_KEY_CODE, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Kind, LEFT_KEY_CODE, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, NOTIFICATION_TRANSITION_DURATION, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RIGHT_KEY_CODE, RadioButton, RadioGroup, SLIDESHOW_TRANSITION_DURATION, SPACE_KEY_CODE, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, TAB_KEY_CODE, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, UP_KEY_CODE, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map