@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.3

package/index.js

@@ -1173,25 +1173,54 @@ 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$1m = ["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$1m);
+  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$1l = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "size", "theme", "variant", "fullWidth"];
 /**
  * Component display name.
  */
@@ -1248,18 +1277,14 @@ 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);
@@ -1275,7 +1300,7 @@ const ButtonRoot = forwardRef((props, ref) => {
     color: adaptedColor,
     emphasis,
     isSelected,
-    isDisabled: isAnyDisabled,
+    isDisabled: props.isDisabled || props['aria-disabled'],
     isActive,
     isFocused,
     isHovered,
@@ -1285,33 +1310,13 @@ 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
   }));
 });
@@ -3626,7 +3631,25 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
-const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
+const _excluded$18 = ["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$18);
+  return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+};
+
+const _excluded$17 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 /**
  * Component display name.
  */
@@ -3681,7 +3704,7 @@ const ListItem = forwardRef((props, ref) => {
       onItemSelected,
       size = DEFAULT_PROPS$R.size
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$18);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$17);
   const role = linkAs || linkProps.href ? 'link' : 'button';
   const onKeyDown = useMemo(() => {
     if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -4169,7 +4192,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"];
 /**
  * Component display name.
  */
@@ -4204,7 +4227,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,
@@ -4232,6 +4255,9 @@ 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) {
@@ -6644,7 +6670,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"];
 /**
  * Component display name.
  */
@@ -6695,7 +6721,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,
@@ -6821,7 +6847,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"];
 /**
  * Component display name.
  */
@@ -6872,7 +6898,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);
@@ -6917,7 +6943,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"];
 /**
  * Component display name.
  */
@@ -6961,7 +6987,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.
@@ -7067,7 +7093,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 = {};
@@ -7089,7 +7115,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__*/jsxs("div", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
@@ -7116,7 +7142,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"];
 /**
  * Component display name.
  */
@@ -7148,7 +7174,7 @@ const FlexBox = forwardRef((props, ref) => {
       vAlign,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$11);
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -7165,7 +7191,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.
  */
@@ -7214,7 +7240,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]);
@@ -7330,7 +7356,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"];
 /**
  * Component display name.
  */
@@ -7366,7 +7392,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
@@ -7437,7 +7463,7 @@ const useHeadingLevel = () => {
   };
 };
 
-const _excluded$$ = ["children", "as", "className"];
+const _excluded$_ = ["children", "as", "className"];
 /**
  * Component display name.
  */
@@ -7464,7 +7490,7 @@ const Heading = forwardRef((props, ref) => {
       as,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$$);
+    forwardedProps = _objectWithoutProperties(props, _excluded$_);
   const {
     headingElement
   } = useHeadingLevel();
@@ -7505,7 +7531,7 @@ const HeadingLevelProvider = ({
   });
 };
 
-const _excluded$_ = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
+const _excluded$Z = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
 /**
  * Component display name.
  */
@@ -7541,7 +7567,7 @@ const Grid = forwardRef((props, ref) => {
       vAlign,
       wrap = DEFAULT_PROPS$I.wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$_);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -7562,7 +7588,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"];
 /**
  * Component display name.
  */
@@ -7588,7 +7614,7 @@ const GridItem = forwardRef((props, ref) => {
       align,
       order
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -7604,7 +7630,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"];
 /**
  * Component display name.
  */
@@ -7639,7 +7665,7 @@ const GridColumn = forwardRef((props, ref) => {
       className,
       style = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
     ref: ref,
     className: classNames(className, CLASSNAME$T),
@@ -7655,7 +7681,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", "ref"];
+const _excluded$W = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt", "ref"];
 /**
  * Component display name.
  */
@@ -7690,7 +7716,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
@@ -7832,7 +7858,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,7 +7917,7 @@ 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), {}, {
@@ -8272,7 +8298,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 +8404,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 +8616,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 +8632,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);
@@ -8664,7 +8690,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,7 +8722,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__*/
@@ -8743,7 +8769,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$S = ["children", "className", "kind", "theme"];
+const _excluded$R = ["children", "className", "kind", "theme"];
 /**
  * Component display name.
  */
@@ -8776,7 +8802,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] || {};
@@ -8795,7 +8821,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,7 +8854,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__*/jsx("label", _objectSpread2(_objectSpread2({
     ref: ref
@@ -8847,7 +8873,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 +8908,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;
@@ -8982,7 +9008,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 +9028,6 @@ const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
  */
 const Link = forwardRef((props, ref) => {
   const {
-    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
@@ -9011,28 +9036,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__*/jsx(Component, _objectSpread2(_objectSpread2(_objectSpread2({
-    ref: ref
-  }, forwardedProps), baseProps), {}, {
+  return /*#__PURE__*/jsx(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref,
+    as: linkAs || (forwardedProps.href ? 'a' : 'button')
+  }, forwardedProps), disabledStateProps), {}, {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$L,
       color,
@@ -9056,7 +9070,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,7 +9110,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__*/jsx("article", _objectSpread2(_objectSpread2({
@@ -9160,7 +9174,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,7 +9196,7 @@ 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), {}, {
@@ -9192,7 +9206,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"];
 /**
  * Component display name.
  */
@@ -9215,7 +9229,7 @@ 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), {}, {
@@ -9226,7 +9240,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"];
 /**
  * Component display name.
  */
@@ -9275,7 +9289,7 @@ const Message = forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const {
     color,
     icon
@@ -9313,7 +9327,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 +9359,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 => {
@@ -9398,10 +9412,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,15 +9430,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(label);
-  const buttonProps = Element === 'button' ? {
-    type: 'button'
-  } : {};
   return /*#__PURE__*/jsx("li", {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$F,
@@ -9436,14 +9444,15 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     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 +9477,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 +9494,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();
@@ -9500,7 +9509,9 @@ const NavigationSection = forwardRef((props, ref) => {
       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`),
@@ -9509,7 +9520,6 @@ const NavigationSection = forwardRef((props, ref) => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
-      type: "button",
       children: [icon ? /*#__PURE__*/jsx(Icon, {
         className: `${CLASSNAME$F}__icon`,
         icon: icon,
@@ -9557,7 +9567,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,7 +9592,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__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", _objectSpread2(_objectSpread2({
@@ -9635,7 +9645,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 +9687,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;
@@ -9741,7 +9751,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,7 +9783,7 @@ 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),
@@ -9799,7 +9809,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,7 +9850,7 @@ 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({
@@ -9897,7 +9907,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,7 +9936,7 @@ 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), {}, {
@@ -9945,7 +9955,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,7 +9989,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__*/jsxs(Element, _objectSpread2(_objectSpread2({
     ref: ref
@@ -10012,7 +10022,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,7 +10064,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__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -10192,7 +10202,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 +10224,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 +10328,7 @@ const useRovingTabIndex = ({
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$z = ["aria-label", "children", "className"];
+const _excluded$y = ["aria-label", "children", "className"];
 /**
  * Component display name.
  */
@@ -10350,7 +10360,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,
@@ -10391,7 +10401,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 +10443,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(() => {
@@ -10503,7 +10513,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,7 +10545,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__*/jsx("div", _objectSpread2(_objectSpread2({
@@ -10556,7 +10566,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 +10610,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 => {
@@ -10660,7 +10670,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,7 +10693,7 @@ 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), {}, {
@@ -10718,7 +10728,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 +10762,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);
@@ -10839,7 +10849,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 +10891,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", {
@@ -10982,7 +10992,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 +11042,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", {
@@ -11126,7 +11136,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,7 +11161,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__*/jsx("ul", _objectSpread2(_objectSpread2({
     ref: ref
@@ -11163,22 +11173,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"];
 /**
  * Component display name.
@@ -11244,18 +11238,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 +11257,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,
@@ -13725,7 +13720,8 @@ const Thumbnail = forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
   const {
     isAnyDisabled,
-    otherProps
+    otherProps,
+    disabledStateProps
   } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
@@ -13775,17 +13771,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)