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

package/index.js

@@ -1173,54 +1173,25 @@ const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.incl
  */
 const VISUALLY_HIDDEN = 'visually-hidden';
 
-/** 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"];
+const _excluded$1m = ["linkAs"];
 /**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
+ * 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 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 renderLink = (_ref, ...children) => {
+  let {
+      linkAs
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$1m);
+  return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+};
 
-const _excluded$1l = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "size", "theme", "variant", "fullWidth"];
+const _excluded$1l = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "href", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
 /**
  * Component display name.
  */
@@ -1277,14 +1248,18 @@ 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);
@@ -1300,7 +1275,7 @@ const ButtonRoot = forwardRef((props, ref) => {
     color: adaptedColor,
     emphasis,
     isSelected,
-    isDisabled: props.isDisabled || props['aria-disabled'],
+    isDisabled: isAnyDisabled,
     isActive,
     isFocused,
     isHovered,
@@ -1310,13 +1285,33 @@ const ButtonRoot = forwardRef((props, ref) => {
     variant,
     fullWidth
   }));
-  return /*#__PURE__*/jsx(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
-    as: linkAs || (forwardedProps.href ? 'a' : 'button')
-  }, forwardedProps), disabledStateProps), {}, {
+
+  /**
+   * 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), {}, {
     "aria-disabled": isAnyDisabled,
     "aria-label": ariaLabel,
     ref: ref,
     className: buttonClassName,
+    name: name,
+    type:
+    // eslint-disable-next-line react/button-has-type
+    type,
     children: children
   }));
 });
@@ -3631,25 +3626,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
-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"];
+const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 /**
  * Component display name.
  */
@@ -3704,7 +3681,7 @@ const ListItem = forwardRef((props, ref) => {
       onItemSelected,
       size = DEFAULT_PROPS$R.size
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$17);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$18);
   const role = linkAs || linkProps.href ? 'link' : 'button';
   const onKeyDown = useMemo(() => {
     if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -4192,7 +4169,7 @@ const useInteractiveList = options => {
   }, [items, activeItemIndex, onListItemSelected]);
 };
 
-const _excluded$16 = ["children", "className", "isClickable", "itemPadding", "onListItemSelected", "tabIndex"];
+const _excluded$17 = ["children", "className", "isClickable", "itemPadding", "onListItemSelected", "tabIndex"];
 /**
  * Component display name.
  */
@@ -4227,7 +4204,7 @@ const InternalList = forwardRef((props, ref) => {
       onListItemSelected,
       tabIndex = DEFAULT_PROPS$Q.tabIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$16);
+    forwardedProps = _objectWithoutProperties(props, _excluded$17);
   const listElementRef = useRef(null);
   const {
     items,
@@ -4255,9 +4232,6 @@ 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) {
@@ -6670,7 +6644,7 @@ function usePopoverStyle({
   };
 }
 
-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"];
+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"];
 /**
  * Component display name.
  */
@@ -6721,7 +6695,7 @@ const _InnerPopover = forwardRef((props, ref) => {
       theme,
       zIndex = DEFAULT_PROPS$P.zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$15);
+    forwardedProps = _objectWithoutProperties(props, _excluded$16);
   const popoverRef = useRef(null);
   const {
     styles,
@@ -6847,7 +6821,7 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
   }, [callback, callbackOnMount]);
 };
 
-const _excluded$14 = ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"];
+const _excluded$15 = ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"];
 /**
  * Component display name.
  */
@@ -6898,7 +6872,7 @@ const Dropdown = forwardRef((props, ref) => {
       shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$14);
+    forwardedProps = _objectWithoutProperties(props, _excluded$15);
   const innerRef = useRef(null);
   const listElement = useRef(null);
   useInfiniteScroll(innerRef, onInfiniteScroll);
@@ -6943,7 +6917,7 @@ Dropdown.displayName = COMPONENT_NAME$10;
 Dropdown.className = CLASSNAME$10;
 Dropdown.defaultProps = DEFAULT_PROPS$O;
 
-const _excluded$13 = ["className", "closeMode", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
+const _excluded$14 = ["className", "closeMode", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
 /**
  * Component display name.
  */
@@ -6987,7 +6961,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
       theme = defaultTheme,
       toggleButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$13);
+    forwardedProps = _objectWithoutProperties(props, _excluded$14);
   const children = Children.toArray(anyChildren);
 
   // Partition children by types.
@@ -7093,7 +7067,7 @@ ExpansionPanel.displayName = COMPONENT_NAME$$;
 ExpansionPanel.className = CLASSNAME$$;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
 
-const _excluded$12 = ["label", "icon", "color", "className", "theme", "truncate"];
+const _excluded$13 = ["label", "icon", "color", "className", "theme", "truncate"];
 const COMPONENT_NAME$_ = 'Flag';
 const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
 const DEFAULT_PROPS$M = {};
@@ -7115,7 +7089,7 @@ const Flag = forwardRef((props, ref) => {
       theme = defaultTheme,
       truncate
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$13);
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
@@ -7142,7 +7116,7 @@ Flag.displayName = COMPONENT_NAME$_;
 Flag.className = CLASSNAME$_;
 Flag.defaultProps = DEFAULT_PROPS$M;
 
-const _excluded$11 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
+const _excluded$12 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
 /**
  * Component display name.
  */
@@ -7174,7 +7148,7 @@ const FlexBox = forwardRef((props, ref) => {
       vAlign,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$11);
+    forwardedProps = _objectWithoutProperties(props, _excluded$12);
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -7191,7 +7165,7 @@ const FlexBox = forwardRef((props, ref) => {
 FlexBox.displayName = COMPONENT_NAME$Z;
 FlexBox.className = CLASSNAME$Z;
 
-const _excluded$10 = ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"];
+const _excluded$11 = ["className", "figure", "figureProps", "children", "actions", "actionsProps", "gap", "orientation", "contentProps"];
 /**
  * Component display name.
  */
@@ -7240,7 +7214,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       orientation = DEFAULT_PROPS$L.orientation,
       contentProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$10);
+    forwardedProps = _objectWithoutProperties(props, _excluded$11);
   const sections = React__default.useMemo(() => {
     // Split children by section type
     const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]);
@@ -7356,7 +7330,7 @@ function wrapChildrenIconWithSpaces(children) {
   });
 }
 
-const _excluded$$ = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
+const _excluded$10 = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 /**
  * Component display name.
  */
@@ -7392,7 +7366,7 @@ const Text = forwardRef((props, ref) => {
       whiteSpace,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$$);
+    forwardedProps = _objectWithoutProperties(props, _excluded$10);
   const typographyClass = typography && getTypographyClassName(typography);
 
   // Truncate mode
@@ -7463,7 +7437,7 @@ const useHeadingLevel = () => {
   };
 };
 
-const _excluded$_ = ["children", "as", "className"];
+const _excluded$$ = ["children", "as", "className"];
 /**
  * Component display name.
  */
@@ -7490,7 +7464,7 @@ const Heading = forwardRef((props, ref) => {
       as,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$_);
+    forwardedProps = _objectWithoutProperties(props, _excluded$$);
   const {
     headingElement
   } = useHeadingLevel();
@@ -7531,7 +7505,7 @@ const HeadingLevelProvider = ({
   });
 };
 
-const _excluded$Z = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
+const _excluded$_ = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
 /**
  * Component display name.
  */
@@ -7567,7 +7541,7 @@ const Grid = forwardRef((props, ref) => {
       vAlign,
       wrap = DEFAULT_PROPS$I.wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$_);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -7588,7 +7562,7 @@ Grid.displayName = COMPONENT_NAME$V;
 Grid.className = CLASSNAME$V;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
-const _excluded$Y = ["children", "className", "width", "align", "order"];
+const _excluded$Z = ["children", "className", "width", "align", "order"];
 /**
  * Component display name.
  */
@@ -7614,7 +7588,7 @@ const GridItem = forwardRef((props, ref) => {
       align,
       order
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -7630,7 +7604,7 @@ const GridItem = forwardRef((props, ref) => {
 GridItem.displayName = COMPONENT_NAME$U;
 GridItem.className = CLASSNAME$U;
 
-const _excluded$X = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
+const _excluded$Y = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
 /**
  * Component display name.
  */
@@ -7665,7 +7639,7 @@ const GridColumn = forwardRef((props, ref) => {
       className,
       style = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
   return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
     ref: ref,
     className: classNames(className, CLASSNAME$T),
@@ -7681,7 +7655,7 @@ GridColumn.displayName = COMPONENT_NAME$T;
 GridColumn.className = CLASSNAME$T;
 GridColumn.defaultProps = DEFAULT_PROPS$H;
 
-const _excluded$W = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt", "ref"];
+const _excluded$X = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt", "ref"];
 /**
  * Component display name.
  */
@@ -7716,7 +7690,7 @@ const Icon$1 = props => {
       alt,
       ref
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
   // Color
@@ -7858,7 +7832,7 @@ const ImageCaption = props => {
   });
 };
 
-const _excluded$V = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
+const _excluded$W = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
 const ImageBlockCaptionPosition = {
   below: 'below',
   over: 'over'
@@ -7917,7 +7891,7 @@ const ImageBlock = forwardRef((props, ref) => {
       title,
       titleProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$V);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
   return /*#__PURE__*/jsxs("figure", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -8298,7 +8272,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   });
 }, isEqual);
 
-const _excluded$U = ["image", "imgRef"];
+const _excluded$V = ["image", "imgRef"];
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -8404,7 +8378,7 @@ const ImageSlideshow = ({
             image,
             imgRef
           } = _ref,
-          imageProps = _objectWithoutProperties(_ref, _excluded$U);
+          imageProps = _objectWithoutProperties(_ref, _excluded$V);
         const isActive = index === activeIndex;
         return /*#__PURE__*/jsx(ImageSlide, {
           isActive: isActive,
@@ -8616,7 +8590,7 @@ function useImageLightbox(props) {
   };
 }
 
-const _excluded$T = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
+const _excluded$U = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
 const Inner = forwardRef((props, ref) => {
   const {
       className,
@@ -8632,7 +8606,7 @@ const Inner = forwardRef((props, ref) => {
       zoomInButtonProps,
       activeImageRef: propImageRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$T);
+    forwardedProps = _objectWithoutProperties(props, _excluded$U);
   const currentPaginationItemRef = React__default.useRef(null);
   const footerRef = React__default.useRef(null);
   const imageRef = React__default.useRef(null);
@@ -8690,7 +8664,7 @@ const ImageLightbox = Object.assign(Inner, {
   useImageLightbox
 });
 
-const _excluded$S = ["className", "color", "colorVariant", "typography", "children", "wrap"];
+const _excluded$T = ["className", "color", "colorVariant", "typography", "children", "wrap"];
 /**
  * Component display name.
  */
@@ -8722,7 +8696,7 @@ const InlineList = forwardRef((props, ref) => {
       children,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$S);
+    forwardedProps = _objectWithoutProperties(props, _excluded$T);
   const typographyClassName = typography && getTypographyClassName(typography);
   return (
     /*#__PURE__*/
@@ -8769,7 +8743,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$R = ["children", "className", "kind", "theme"];
+const _excluded$S = ["children", "className", "kind", "theme"];
 /**
  * Component display name.
  */
@@ -8802,7 +8776,7 @@ const InputHelper = forwardRef((props, ref) => {
       kind = DEFAULT_PROPS$D.kind,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$R);
+    forwardedProps = _objectWithoutProperties(props, _excluded$S);
   const {
     color
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
@@ -8821,7 +8795,7 @@ InputHelper.displayName = COMPONENT_NAME$O;
 InputHelper.className = CLASSNAME$O;
 InputHelper.defaultProps = DEFAULT_PROPS$D;
 
-const _excluded$Q = ["children", "className", "htmlFor", "isRequired", "theme", "typography"];
+const _excluded$R = ["children", "className", "htmlFor", "isRequired", "theme", "typography"];
 /**
  * Component display name.
  */
@@ -8854,7 +8828,7 @@ const InputLabel = forwardRef((props, ref) => {
       theme = defaultTheme,
       typography
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$R);
   const typographyClass = typography && getTypographyClassName(typography);
   return /*#__PURE__*/jsx("label", _objectSpread2(_objectSpread2({
     ref: ref
@@ -8873,7 +8847,7 @@ InputLabel.displayName = COMPONENT_NAME$N;
 InputLabel.className = CLASSNAME$N;
 InputLabel.defaultProps = DEFAULT_PROPS$C;
 
-const _excluded$P = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
+const _excluded$Q = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 /**
  * Component display name.
  */
@@ -8908,7 +8882,7 @@ const Lightbox = forwardRef((props, ref) => {
       theme,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$P);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -9008,7 +8982,7 @@ const Lightbox = forwardRef((props, ref) => {
 Lightbox.displayName = COMPONENT_NAME$M;
 Lightbox.className = CLASSNAME$M;
 
-const _excluded$O = ["children", "className", "color", "colorVariant", "leftIcon", "rightIcon", "typography", "linkAs"];
+const _excluded$P = ["children", "className", "color", "colorVariant", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
 /**
  * Component display name.
  */
@@ -9028,6 +9002,7 @@ const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
  */
 const Link = forwardRef((props, ref) => {
   const {
+    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
@@ -9036,17 +9011,28 @@ const Link = forwardRef((props, ref) => {
       className,
       color: propColor,
       colorVariant: propColorVariant,
+      href,
       leftIcon,
+      linkAs,
       rightIcon,
-      typography,
-      linkAs
+      target,
+      typography
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$O);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$P);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-  return /*#__PURE__*/jsx(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
-    ref: ref,
-    as: linkAs || (forwardedProps.href ? 'a' : 'button')
-  }, forwardedProps), disabledStateProps), {}, {
+  const isLink = linkAs || href;
+  const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
+  const baseProps = {};
+  if (Component === 'button') {
+    baseProps.type = 'button';
+    Object.assign(baseProps, disabledStateProps);
+  } else if (isLink) {
+    baseProps.href = href;
+    baseProps.target = target;
+  }
+  return /*#__PURE__*/jsx(Component, _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref
+  }, forwardedProps), baseProps), {}, {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$L,
       color,
@@ -9070,7 +9056,7 @@ const Link = forwardRef((props, ref) => {
 Link.displayName = COMPONENT_NAME$L;
 Link.className = CLASSNAME$L;
 
-const _excluded$N = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
+const _excluded$O = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
 /**
  * Component display name.
  */
@@ -9110,7 +9096,7 @@ const LinkPreview = forwardRef((props, ref) => {
       title,
       titleHeading = DEFAULT_PROPS$B.titleHeading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$O);
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
   const TitleHeading = titleHeading;
   return /*#__PURE__*/jsx("article", _objectSpread2(_objectSpread2({
@@ -9174,7 +9160,7 @@ LinkPreview.displayName = COMPONENT_NAME$K;
 LinkPreview.className = CLASSNAME$K;
 LinkPreview.defaultProps = DEFAULT_PROPS$B;
 
-const _excluded$M = ["className"];
+const _excluded$N = ["className"];
 /**
  * Component display name.
  */
@@ -9196,7 +9182,7 @@ const ListDivider = forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   return /*#__PURE__*/jsx("li", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -9206,7 +9192,7 @@ const ListDivider = forwardRef((props, ref) => {
 ListDivider.displayName = COMPONENT_NAME$J;
 ListDivider.className = CLASSNAME$J;
 
-const _excluded$L = ["children", "className"];
+const _excluded$M = ["children", "className"];
 /**
  * Component display name.
  */
@@ -9229,7 +9215,7 @@ const ListSubheader = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   return /*#__PURE__*/jsx("li", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -9240,7 +9226,7 @@ const ListSubheader = forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME$I;
 ListSubheader.className = CLASSNAME$I;
 
-const _excluded$K = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
+const _excluded$L = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
 /**
  * Component display name.
  */
@@ -9289,7 +9275,7 @@ const Message = forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$K);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   const {
     color,
     icon
@@ -9327,7 +9313,7 @@ const Message = forwardRef((props, ref) => {
 Message.displayName = COMPONENT_NAME$H;
 Message.className = CLASSNAME$H;
 
-const _excluded$J = ["className", "theme", "thumbnails", "onImageClick"],
+const _excluded$K = ["className", "theme", "thumbnails", "onImageClick"],
   _excluded2$2 = ["image", "onClick", "align"];
 /**
  * Component display name.
@@ -9359,7 +9345,7 @@ const Mosaic = forwardRef((props, ref) => {
       thumbnails,
       onImageClick
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const handleImageClick = useMemo(() => {
     if (!onImageClick) return undefined;
     return (index, onClick) => event => {
@@ -9412,7 +9398,10 @@ Mosaic.displayName = COMPONENT_NAME$G;
 Mosaic.className = CLASSNAME$G;
 Mosaic.defaultProps = DEFAULT_PROPS$A;
 
-const _excluded$I = ["className", "icon", "label", "isCurrentPage", "as"];
+/** 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"];
 /**
  * Component display name.
  */
@@ -9430,12 +9419,15 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
       isCurrentPage,
       as: Element = 'a'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$I);
+    forwardedProps = _objectWithoutProperties(props, _excluded$J);
   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,
@@ -9444,15 +9436,14 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     children: /*#__PURE__*/jsx(Tooltip, {
       label: tooltipLabel,
       placement: Placement.TOP,
-      children: /*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2({
-        as: Element,
+      children: /*#__PURE__*/jsxs(Element, _objectSpread2(_objectSpread2(_objectSpread2({
         className: handleBasicClasses({
           prefix: `${CLASSNAME$F}__link`,
           isSelected: isCurrentPage
         }),
         ref: ref,
         "aria-current": isCurrentPage ? 'page' : undefined
-      }, forwardedProps), {}, {
+      }, buttonProps), forwardedProps), {}, {
         children: [icon ? /*#__PURE__*/jsx(Icon, {
           className: `${CLASSNAME$F}__icon`,
           icon: icon,
@@ -9477,7 +9468,7 @@ const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation.vertical
 });
 
-const _excluded$H = ["children", "className", "label", "icon"];
+const _excluded$I = ["children", "className", "label", "icon"];
 /**
  * Component display name.
  */
@@ -9494,7 +9485,7 @@ const NavigationSection = forwardRef((props, ref) => {
       label,
       icon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef(null);
   const sectionId = useId();
@@ -9509,9 +9500,7 @@ const NavigationSection = forwardRef((props, ref) => {
       theme
     })),
     ref: ref,
-    children: [/*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2({
-      as: "button"
-    }, forwardedProps), {}, {
+    children: [/*#__PURE__*/jsxs("button", _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
       "aria-controls": sectionId,
       "aria-expanded": isOpen,
       className: classNames(`${CLASSNAME$F}__link`),
@@ -9520,6 +9509,7 @@ const NavigationSection = forwardRef((props, ref) => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
+      type: "button",
       children: [icon ? /*#__PURE__*/jsx(Icon, {
         className: `${CLASSNAME$F}__icon`,
         icon: icon,
@@ -9567,7 +9557,7 @@ const NavigationSection = forwardRef((props, ref) => {
 NavigationSection.displayName = COMPONENT_NAME$E;
 NavigationSection.className = CLASSNAME$E;
 
-const _excluded$G = ["children", "className", "theme", "orientation"];
+const _excluded$H = ["children", "className", "theme", "orientation"];
 /**
  * Component display name.
  */
@@ -9592,7 +9582,7 @@ const Navigation = forwardRef((props, ref) => {
       theme = defaultTheme,
       orientation = DEFAULT_PROPS$z.orientation
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$H);
   return /*#__PURE__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", _objectSpread2(_objectSpread2({
@@ -9645,7 +9635,7 @@ const NOTIFICATION_CONFIGURATION = {
   }
 };
 
-const _excluded$F = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
+const _excluded$G = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
 /**
  * Component display name.
  */
@@ -9687,7 +9677,7 @@ const Notification = forwardRef((props, ref) => {
       usePortal = DEFAULT_PROPS$y.usePortal,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -9751,7 +9741,7 @@ Notification.displayName = COMPONENT_NAME$C;
 Notification.className = CLASSNAME$C;
 Notification.defaultProps = DEFAULT_PROPS$y;
 
-const _excluded$E = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
+const _excluded$F = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
 /**
  * Component display name.
  */
@@ -9783,7 +9773,7 @@ const PopoverDialog = forwardRef((props, ref) => {
       label = ariaLabel,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   return /*#__PURE__*/jsx(Popover, _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
     ref: ref,
     className: classNames(className, CLASSNAME$B),
@@ -9809,7 +9799,7 @@ PopoverDialog.displayName = COMPONENT_NAME$B;
 PopoverDialog.className = CLASSNAME$B;
 PopoverDialog.defaultProps = DEFAULT_PROPS$x;
 
-const _excluded$D = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
+const _excluded$E = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
 /**
  * Component display name.
  */
@@ -9850,7 +9840,7 @@ const PostBlock = forwardRef((props, ref) => {
       thumbnailProps,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: classNames(className, handleBasicClasses({
@@ -9907,7 +9897,7 @@ PostBlock.displayName = COMPONENT_NAME$A;
 PostBlock.className = CLASSNAME$A;
 PostBlock.defaultProps = DEFAULT_PROPS$w;
 
-const _excluded$C = ["className", "theme"];
+const _excluded$D = ["className", "theme"];
 /**
  * Component display name.
  */
@@ -9936,7 +9926,7 @@ const ProgressLinear = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -9955,7 +9945,7 @@ ProgressLinear.displayName = COMPONENT_NAME$z;
 ProgressLinear.className = CLASSNAME$z;
 ProgressLinear.defaultProps = DEFAULT_PROPS$v;
 
-const _excluded$B = ["className", "theme", "size", "display"];
+const _excluded$C = ["className", "theme", "size", "display"];
 /**
  * Component display name.
  */
@@ -9989,7 +9979,7 @@ const ProgressCircular = forwardRef((props, ref) => {
       size = DEFAULT_PROPS$u.size,
       display = DEFAULT_PROPS$u.display
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   const Element = display === 'block' ? 'div' : 'span';
   return /*#__PURE__*/jsxs(Element, _objectSpread2(_objectSpread2({
     ref: ref
@@ -10022,7 +10012,7 @@ ProgressCircular.displayName = COMPONENT_NAME$y;
 ProgressCircular.className = CLASSNAME$y;
 ProgressCircular.defaultProps = DEFAULT_PROPS$u;
 
-const _excluded$A = ["className", "theme", "variant"];
+const _excluded$B = ["className", "theme", "variant"];
 const ProgressVariant = {
   linear: 'linear',
   circular: 'circular'
@@ -10064,7 +10054,7 @@ const Progress = forwardRef((props, ref) => {
       theme = defaultTheme,
       variant = DEFAULT_PROPS$t.variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$A);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   return /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -10202,7 +10192,7 @@ const useTabProviderContextState = () => {
   return context === null || context === void 0 ? void 0 : context[0];
 };
 
-const _excluded$z = ["children", "onChange"];
+const _excluded$A = ["children", "onChange"];
 const DEFAULT_PROPS$s = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -10224,7 +10214,7 @@ const ProgressTrackerProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$z);
+    propState = _objectWithoutProperties(props, _excluded$A);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -10328,7 +10318,7 @@ const useRovingTabIndex = ({
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$y = ["aria-label", "children", "className"];
+const _excluded$z = ["aria-label", "children", "className"];
 /**
  * Component display name.
  */
@@ -10360,7 +10350,7 @@ const ProgressTracker = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$z);
   const stepListRef = React__default.useRef(null);
   useRovingTabIndex({
     parentRef: stepListRef,
@@ -10401,7 +10391,7 @@ ProgressTracker.displayName = COMPONENT_NAME$w;
 ProgressTracker.className = CLASSNAME$w;
 ProgressTracker.defaultProps = DEFAULT_PROPS$r;
 
-const _excluded$x = ["className", "hasError", "helper", "id", "isActive", "isComplete", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$y = ["className", "hasError", "helper", "id", "isActive", "isComplete", "label", "onFocus", "onKeyPress", "tabIndex"];
 /**
  * Component display name.
  */
@@ -10443,7 +10433,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$x);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$y);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -10513,7 +10503,7 @@ ProgressTrackerStep.displayName = COMPONENT_NAME$v;
 ProgressTrackerStep.className = CLASSNAME$v;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$q;
 
-const _excluded$w = ["children", "id", "className", "isActive"];
+const _excluded$x = ["children", "id", "className", "isActive"];
 /**
  * Component display name.
  */
@@ -10545,7 +10535,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
@@ -10566,7 +10556,7 @@ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$u;
 ProgressTrackerStepPanel.className = CLASSNAME$u;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$p;
 
-const _excluded$v = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$w = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 /**
  * Component display name.
  */
@@ -10610,7 +10600,7 @@ const RadioButton = forwardRef((props, ref) => {
       value,
       inputProps
     } = otherProps,
-    forwardedProps = _objectWithoutProperties(otherProps, _excluded$v);
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$w);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -10670,7 +10660,7 @@ RadioButton.displayName = COMPONENT_NAME$t;
 RadioButton.className = CLASSNAME$t;
 RadioButton.defaultProps = DEFAULT_PROPS$o;
 
-const _excluded$u = ["children", "className"];
+const _excluded$v = ["children", "className"];
 /**
  * Component display name.
  */
@@ -10693,7 +10683,7 @@ const RadioGroup = forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$u);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
     ref: ref
   }, forwardedProps), {}, {
@@ -10728,7 +10718,7 @@ function useListenFocus(ref) {
   return isFocus;
 }
 
-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"];
+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"];
 /** The display name of the component. */
 const COMPONENT_NAME$r = 'Select';
 
@@ -10762,7 +10752,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
       value,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$t);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   const generatedSelectId = useId();
   const selectId = id || generatedSelectId;
   const anchorRef = useRef(null);
@@ -10849,7 +10839,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$s = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasError", "hasInputClear", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$t = ["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';
@@ -10891,7 +10881,7 @@ const SelectField = props => {
       variant,
       selectElementRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
@@ -10992,7 +10982,7 @@ Select.className = CLASSNAME$q;
 Select.defaultProps = DEFAULT_PROPS$n;
 Select.className = CLASSNAME$q;
 
-const _excluded$r = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$s = ["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';
 
@@ -11042,7 +11032,7 @@ const SelectMultipleField = props => {
       variant,
       selectElementRef
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
@@ -11136,7 +11126,7 @@ SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$p;
 SelectMultiple.defaultProps = DEFAULT_PROPS$m;
 
-const _excluded$q = ["children", "className", "theme"];
+const _excluded$r = ["children", "className", "theme"];
 /**
  * Component display name.
  */
@@ -11161,7 +11151,7 @@ const SideNavigation = forwardRef((props, ref) => {
       className,
       theme = defaultTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$r);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/jsx("ul", _objectSpread2(_objectSpread2({
     ref: ref
@@ -11173,6 +11163,22 @@ 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.
@@ -11238,18 +11244,18 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })),
     children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
       className: `${CLASSNAME$n}__wrapper`,
-      children: [/*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2({
-        as: linkAs || (linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button')
+      children: [renderLink(_objectSpread2(_objectSpread2({
+        linkAs
       }, linkProps), {}, {
         className: `${CLASSNAME$n}__link`,
-        onClick: onClick,
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$n}__icon`,
-          icon: icon,
-          size: Size.xs
-        }), /*#__PURE__*/jsx("span", {
-          children: label
-        })]
+        onClick,
+        tabIndex: 0
+      }), 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,
@@ -11257,23 +11263,22 @@ const SideNavigationItem = forwardRef((props, ref) => {
         emphasis: Emphasis.low,
         onClick: onActionClick
       }, ariaProps))]
-    }) : /*#__PURE__*/jsxs(RawClickable, _objectSpread2(_objectSpread2(_objectSpread2({
-      as: linkAs || (linkProps !== null && linkProps !== void 0 && linkProps.href ? 'a' : 'button')
+    }) : renderButtonOrLink(_objectSpread2(_objectSpread2({
+      linkAs
     }, linkProps), {}, {
       className: `${CLASSNAME$n}__link`,
-      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
-      })]
+      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
     })), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
       className: `${CLASSNAME$n}__children`,
       id: contentId,
@@ -13720,8 +13725,7 @@ const Thumbnail = forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
   const {
     isAnyDisabled,
-    otherProps,
-    disabledStateProps
+    otherProps
   } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
@@ -13771,18 +13775,17 @@ const Thumbnail = forwardRef((props, ref) => {
     imageErrorStyle.display = 'none';
   }
   const isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
-  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
-  const Wrapper = isClickable ? RawClickable : 'div';
+  const isButton = !!forwardedProps.onClick;
+  const isClickable = !isAnyDisabled && (isButton || isLink);
+  let Wrapper = 'div';
   const wrapperProps = _objectSpread2({}, forwardedProps);
-  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 (!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 we have a loading placeholder image that is really loaded (complete)