@lumx/react 3.9.3 → 3.9.4-alpha.1

package/index.js

@@ -394,7 +394,7 @@ const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.incl
  */
 const VISUALLY_HIDDEN = 'visually-hidden';
 
-const _excluded$1s = ["prefix"];
+const _excluded$1r = ["prefix"];
 
 /**
  * Enhance isEmpty method to also works with numbers.
@@ -452,7 +452,7 @@ function handleBasicClasses(_ref2) {
   let {
       prefix
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$1s);
+    props = _objectWithoutProperties(_ref2, _excluded$1r);
   const otherClasses = {};
   if (!isEmpty(props)) {
     Object.keys(props).forEach(prop => {
@@ -643,7 +643,7 @@ function useId() {
   }, []);
 }
 
-const _excluded$1r = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
+const _excluded$1q = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2$3 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
 /**
@@ -707,7 +707,7 @@ const AlertDialog = /*#__PURE__*/forwardRef((props, ref) => {
       dialogProps,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
   const cancelButtonRef = React__default.useRef(null);
   const confirmationButtonRef = React__default.useRef(null);
   const {
@@ -831,7 +831,7 @@ const useMergeRefs = function () {
   refs);
 };
 
-const _excluded$1q = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "disabled", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
+const _excluded$1p = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "disabled", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
 
 /**
  * Defines the props of the component.
@@ -902,7 +902,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
       textFieldProps = {},
       focusAnchorOnClose
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
@@ -952,7 +952,7 @@ Autocomplete.displayName = COMPONENT_NAME$1l;
 Autocomplete.className = CLASSNAME$1i;
 Autocomplete.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1p = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
+const _excluded$1o = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
 
 /**
  * Defines the props of the component.
@@ -1037,7 +1037,7 @@ const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       values
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   return /*#__PURE__*/React__default.createElement(Autocomplete, _extends({
     ref: ref
   }, forwardedProps, {
@@ -1080,7 +1080,7 @@ AutocompleteMultiple.displayName = COMPONENT_NAME$1k;
 AutocompleteMultiple.className = CLASSNAME$1h;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1o = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
+const _excluded$1n = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
 
 /**
  * Avatar sizes.
@@ -1130,7 +1130,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       thumbnailProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1161,7 +1161,7 @@ Avatar.displayName = COMPONENT_NAME$1j;
 Avatar.className = CLASSNAME$1g;
 Avatar.defaultProps = DEFAULT_PROPS$10;
 
-const _excluded$1n = ["children", "className", "color"];
+const _excluded$1m = ["children", "className", "color"];
 
 /**
  * Defines the props of the component.
@@ -1197,7 +1197,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1279,7 +1279,7 @@ const isComponentType = type => node => /*#__PURE__*/React__default.isValidEleme
  * A point coordinate in 2D space
  */
 
-const _excluded$1m = ["linkAs"];
+const _excluded$1l = ["linkAs"];
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
  *
@@ -1293,14 +1293,14 @@ const renderLink = function (_ref) {
   let {
       linkAs
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$1m);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$1l);
   for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     children[_key - 1] = arguments[_key];
   }
   return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
 };
 
-const _excluded$1l = ["aria-label", "children", "className", "color", "disabled", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
+const _excluded$1k = ["aria-label", "children", "className", "color", "disabled", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
 
 /**
  * Button size definition.
@@ -1372,7 +1372,7 @@ const ButtonRoot = /*#__PURE__*/forwardRef((props, ref) => {
       type = 'button',
       fullWidth
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
   if (hasBackground) {
     return renderButtonWrapper(_objectSpread2(_objectSpread2({}, props), {}, {
@@ -1428,7 +1428,7 @@ const ButtonRoot = /*#__PURE__*/forwardRef((props, ref) => {
 ButtonRoot.displayName = COMPONENT_NAME$1h;
 ButtonRoot.defaultProps = {};
 
-const _excluded$1k = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
+const _excluded$1j = ["children", "className", "emphasis", "leftIcon", "rightIcon", "size", "theme"];
 
 /**
  * Button emphasis definition.
@@ -1476,7 +1476,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
   const buttonClassName = classnames(className, getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasLeftIcon',
@@ -1505,7 +1505,7 @@ Button.displayName = COMPONENT_NAME$1g;
 Button.className = CLASSNAME$1e;
 Button.defaultProps = DEFAULT_PROPS$_;
 
-const _excluded$1j = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
+const _excluded$1i = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
 /**
  * Component display name.
  */
@@ -1543,7 +1543,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipProps,
       hideTooltip
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   return /*#__PURE__*/React__default.createElement(Tooltip, _extends({
     label: hideTooltip ? '' : label
   }, tooltipProps), /*#__PURE__*/React__default.createElement(ButtonRoot, _extends({
@@ -1567,7 +1567,7 @@ IconButton.displayName = COMPONENT_NAME$1f;
 IconButton.className = CLASSNAME$1d;
 IconButton.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1i = ["children", "className"];
+const _excluded$1h = ["children", "className"];
 
 /**
  * Defines the props of the component
@@ -1600,7 +1600,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -1611,7 +1611,7 @@ ButtonGroup.displayName = COMPONENT_NAME$1e;
 ButtonGroup.className = CLASSNAME$1c;
 ButtonGroup.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1h = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$1g = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
 /**
  * Intermediate state of checkbox.
@@ -1663,7 +1663,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
   const localInputRef = React__default.useRef(null);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
@@ -1743,7 +1743,7 @@ function useStopPropagation(handler) {
   }, [handler]);
 }
 
-const _excluded$1g = ["after", "before", "children", "className", "color", "disabled", "isClickable", "isDisabled", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
+const _excluded$1f = ["after", "before", "children", "className", "color", "disabled", "isClickable", "isDisabled", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
 
 /**
  * Chip sizes.
@@ -1798,7 +1798,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
       href,
       onKeyDown
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
   const hasAfterClick = isFunction(onAfterClick);
   const hasBeforeClick = isFunction(onBeforeClick);
   const hasOnClick = isFunction(onClick);
@@ -1913,7 +1913,7 @@ const useChipGroupNavigation = function (chips, onChipDeleted) {
   };
 };
 
-const _excluded$1f = ["align", "children", "className"];
+const _excluded$1e = ["align", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -1947,7 +1947,7 @@ const InternalChipGroup = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   const chipGroupClassName = handleBasicClasses({
     prefix: CLASSNAME$19
   });
@@ -1964,7 +1964,7 @@ const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
 
-const _excluded$1e = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
+const _excluded$1d = ["actions", "avatarProps", "children", "className", "date", "fullDate", "hasActions", "headerActions", "isOpen", "isRelevant", "name", "onClick", "onMouseEnter", "onMouseLeave", "text", "theme", "variant"];
 /**
  * Comment block variants.
  */
@@ -2022,7 +2022,7 @@ const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
@@ -2508,7 +2508,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
 DatePickerControlled.displayName = COMPONENT_NAME$18;
 DatePickerControlled.className = CLASSNAME$17;
 
-const _excluded$1d = ["defaultMonth", "locale", "value", "onChange"];
+const _excluded$1c = ["defaultMonth", "locale", "value", "onChange"];
 /**
  * DatePicker component.
  *
@@ -2523,7 +2523,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
   let referenceDate = value || defaultMonth || new Date();
   if (!isDateValid(referenceDate)) {
     // eslint-disable-next-line no-console
@@ -2560,7 +2560,7 @@ const useBooleanState = defaultValue => {
   return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };
 
-const _excluded$1c = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
+const _excluded$1b = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
 /**
  * Defines the props of the component.
@@ -2592,7 +2592,7 @@ const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
       previousButtonProps,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
   const anchorRef = useRef(null);
   const [isOpen, close,, toggleOpen] = useBooleanState(false);
   const handleKeyboardNav = useCallback(evt => {
@@ -3140,7 +3140,7 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
   return isVisible || isComponentVisible;
 };
 
-const _excluded$1b = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
+const _excluded$1a = ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange", "disableBodyScroll", "preventCloseOnClick", "preventCloseOnEscape"];
 
 /**
  * Defines the props of the component.
@@ -3202,7 +3202,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
       preventCloseOnClick,
       preventCloseOnEscape
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = React__default.useRef(isOpen);
@@ -3314,7 +3314,7 @@ Dialog.displayName = COMPONENT_NAME$16;
 Dialog.className = CLASSNAME$16;
 Dialog.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$1a = ["className", "theme"];
+const _excluded$19 = ["className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -3349,7 +3349,7 @@ const Divider = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$19);
   return /*#__PURE__*/React__default.createElement("hr", _extends({
     ref: ref
   }, forwardedProps, {
@@ -3363,7 +3363,7 @@ Divider.displayName = COMPONENT_NAME$15;
 Divider.className = CLASSNAME$15;
 Divider.defaultProps = DEFAULT_PROPS$S;
 
-const _excluded$19 = ["className", "theme"];
+const _excluded$18 = ["className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -3391,7 +3391,7 @@ const DragHandle = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$18);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -3575,7 +3575,7 @@ const useKeyboardListNavigation = function (items, ref, onListItemSelected, onLi
   };
 };
 
-const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "isDisabled", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
+const _excluded$17 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "isDisabled", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 
 /**
  * Defines the props of the component.
@@ -3632,7 +3632,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
       onItemSelected,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$18);
+    forwardedProps = _objectWithoutProperties(props, _excluded$17);
   const role = linkAs || linkProps.href ? 'link' : 'button';
   const onKeyDown = useMemo(() => {
     if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -4135,7 +4135,7 @@ const useInteractiveList = options => {
   }, [items, activeItemIndex, onListItemSelected]);
 };
 
-const _excluded$17 = ["children", "className", "isClickable", "itemPadding", "onListItemSelected", "tabIndex"];
+const _excluded$16 = ["children", "className", "isClickable", "itemPadding", "onListItemSelected", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -4175,7 +4175,7 @@ const InternalList = /*#__PURE__*/forwardRef((props, ref) => {
       onListItemSelected,
       tabIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$17);
+    forwardedProps = _objectWithoutProperties(props, _excluded$16);
   const listElementRef = useRef(null);
   const {
     items,
@@ -6600,7 +6600,7 @@ function usePopoverStyle(_ref5) {
   };
 }
 
-const _excluded$16 = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZoneElement", "offset", "placement", "style", "theme", "zIndex"];
+const _excluded$15 = ["anchorRef", "as", "children", "className", "closeOnClickAway", "closeOnEscape", "elevation", "focusElement", "hasArrow", "isOpen", "onClose", "parentElement", "usePortal", "focusAnchorOnClose", "withFocusTrap", "boundaryRef", "fitToAnchorWidth", "fitWithinViewportHeight", "focusTrapZoneElement", "offset", "placement", "style", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6660,7 +6660,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$16);
+    forwardedProps = _objectWithoutProperties(props, _excluded$15);
   const popoverRef = useRef(null);
   const {
     styles,
@@ -6777,7 +6777,7 @@ const useInfiniteScroll = function (ref, callback) {
   }, [callback, callbackOnMount]);
 };
 
-const _excluded$15 = ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"];
+const _excluded$14 = ["anchorRef", "children", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "fitWithinViewportHeight", "isOpen", "offset", "focusAnchorOnClose", "onClose", "onInfiniteScroll", "placement", "shouldFocusOnOpen", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -6833,7 +6833,7 @@ const Dropdown = /*#__PURE__*/forwardRef((props, ref) => {
       shouldFocusOnOpen,
       zIndex
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$15);
+    forwardedProps = _objectWithoutProperties(props, _excluded$14);
   const innerRef = useRef(null);
   const listElement = useRef(null);
   useInfiniteScroll(innerRef, onInfiniteScroll);
@@ -6878,7 +6878,7 @@ Dropdown.displayName = COMPONENT_NAME$10;
 Dropdown.className = CLASSNAME$10;
 Dropdown.defaultProps = DEFAULT_PROPS$O;
 
-const _excluded$14 = ["className", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
+const _excluded$13 = ["className", "children", "hasBackground", "hasHeaderDivider", "isOpen", "label", "onClose", "onOpen", "onToggleOpen", "theme", "toggleButtonProps"];
 
 /**
  * Defines the props of the component.
@@ -6925,7 +6925,7 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       toggleButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$14);
+    forwardedProps = _objectWithoutProperties(props, _excluded$13);
   const children = Children.toArray(anyChildren);
 
   // Partition children by types.
@@ -7004,7 +7004,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 = {
@@ -7027,7 +7027,7 @@ const Flag = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       truncate
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$13);
+    forwardedProps = _objectWithoutProperties(props, _excluded$12);
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
   const isTruncated = !!truncate;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, forwardedProps, {
@@ -7052,7 +7052,7 @@ Flag.displayName = COMPONENT_NAME$_;
 Flag.className = CLASSNAME$_;
 Flag.defaultProps = DEFAULT_PROPS$M;
 
-const _excluded$12 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
+const _excluded$11 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -7089,7 +7089,7 @@ const FlexBox = /*#__PURE__*/forwardRef((props, ref) => {
       vAlign,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$11);
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: ref
   }, forwardedProps, {
@@ -7105,7 +7105,7 @@ const FlexBox = /*#__PURE__*/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.
  */
@@ -7154,7 +7154,7 @@ const BaseGenericBlock = /*#__PURE__*/forwardRef((props, ref) => {
       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]);
@@ -7253,7 +7253,7 @@ const useOverflowTooltipLabel = () => {
   };
 };
 
-const _excluded$10 = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
+const _excluded$$ = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 
 /**
  * Defines the props of the component.
@@ -7294,7 +7294,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
       whiteSpace,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$10);
+    forwardedProps = _objectWithoutProperties(props, _excluded$$);
   const colorClass = color && getFontColorClassName(color, colorVariant);
   const typographyClass = typography && getTypographyClassName(typography);
 
@@ -7372,7 +7372,7 @@ const useHeadingLevel = () => {
   };
 };
 
-const _excluded$$ = ["children", "as", "className"];
+const _excluded$_ = ["children", "as", "className"];
 
 /**
  * Defines the props of the component.
@@ -7404,7 +7404,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
       as,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$$);
+    forwardedProps = _objectWithoutProperties(props, _excluded$_);
   const {
     headingElement
   } = useHeadingLevel();
@@ -7445,7 +7445,7 @@ const HeadingLevelProvider = _ref => {
   }, children);
 };
 
-const _excluded$_ = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
+const _excluded$Z = ["children", "className", "gutter", "hAlign", "orientation", "vAlign", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -7486,7 +7486,7 @@ const Grid = /*#__PURE__*/forwardRef((props, ref) => {
       vAlign,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$_);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -7506,7 +7506,7 @@ Grid.displayName = COMPONENT_NAME$V;
 Grid.className = CLASSNAME$V;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
-const _excluded$Z = ["children", "className", "width", "align", "order"];
+const _excluded$Y = ["children", "className", "width", "align", "order"];
 
 /**
  * Defines the props of the component.
@@ -7537,7 +7537,7 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
       align,
       order
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Z);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -7552,7 +7552,7 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
 GridItem.displayName = COMPONENT_NAME$U;
 GridItem.className = CLASSNAME$U;
 
-const _excluded$Y = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
+const _excluded$X = ["as", "gap", "maxColumns", "itemMinWidth", "children", "className", "style"];
 
 /**
  * Defines the props of the component.
@@ -7592,7 +7592,7 @@ const GridColumn = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       style = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$Y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$X);
   return /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -7609,7 +7609,7 @@ GridColumn.displayName = COMPONENT_NAME$T;
 GridColumn.className = CLASSNAME$T;
 GridColumn.defaultProps = DEFAULT_PROPS$H;
 
-const _excluded$X = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt"];
+const _excluded$W = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt"];
 
 /**
  * Defines the props of the component.
@@ -7648,7 +7648,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       alt
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$X);
+    forwardedProps = _objectWithoutProperties(props, _excluded$W);
 
   // Color
   let iconColor = color;
@@ -7761,7 +7761,7 @@ const ImageCaption = props => {
   }, tags));
 };
 
-const _excluded$W = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
+const _excluded$V = ["actions", "align", "alt", "captionPosition", "captionStyle", "className", "description", "descriptionProps", "fillHeight", "image", "size", "tags", "theme", "thumbnailProps", "title", "titleProps"];
 
 /**
  * Image block variants.
@@ -7824,7 +7824,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       titleProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$W);
+    forwardedProps = _objectWithoutProperties(props, _excluded$V);
   return /*#__PURE__*/React__default.createElement("figure", _extends({
     ref: ref
   }, forwardedProps, {
@@ -8213,7 +8213,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 = _ref => {
   var _images$activeIndex, _images$activeIndex2, _images$activeIndex3;
@@ -8232,6 +8232,7 @@ const ImageSlideshow = _ref => {
     activeIndex,
     slideshowId,
     setSlideshow,
+    slideshow,
     slideshowSlidesId,
     slidesCount,
     onNextClick,
@@ -8263,7 +8264,8 @@ const ImageSlideshow = _ref => {
     slidesCount: slidesCount,
     onNextClick: onNextClick,
     onPreviousClick: onPreviousClick,
-    onPaginationClick: onPaginationClick
+    onPaginationClick: onPaginationClick,
+    parentRef: slideshow
   }, slideshowControlsProps, {
     paginationItemProps: index => {
       var _slideshowControlsPro;
@@ -8330,7 +8332,7 @@ const ImageSlideshow = _ref => {
         image,
         imgRef
       } = _ref2,
-      imageProps = _objectWithoutProperties(_ref2, _excluded$V);
+      imageProps = _objectWithoutProperties(_ref2, _excluded$U);
     const isActive = index === activeIndex;
     return /*#__PURE__*/React__default.createElement(ImageSlide, {
       isActive: isActive,
@@ -8541,7 +8543,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 = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -8557,7 +8559,7 @@ const Inner = /*#__PURE__*/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);
@@ -8610,7 +8612,7 @@ const ImageLightbox = Object.assign(Inner, {
   useImageLightbox
 });
 
-const _excluded$T = ["className", "color", "colorVariant", "typography", "children", "wrap"];
+const _excluded$S = ["className", "color", "colorVariant", "typography", "children", "wrap"];
 
 /**
  * Defines the props of the component.
@@ -8647,7 +8649,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       wrap
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$T);
+    forwardedProps = _objectWithoutProperties(props, _excluded$S);
   const fontColorClassName = color && getFontColorClassName(color, colorVariant);
   const typographyClassName = typography && getTypographyClassName(typography);
   return (
@@ -8693,7 +8695,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const _excluded$S = ["children", "className", "kind", "theme"];
+const _excluded$R = ["children", "className", "kind", "theme"];
 
 /**
  * Defines the props of the component.
@@ -8731,7 +8733,7 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
       kind,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$S);
+    forwardedProps = _objectWithoutProperties(props, _excluded$R);
   const {
     color
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
@@ -8749,7 +8751,7 @@ InputHelper.displayName = COMPONENT_NAME$O;
 InputHelper.className = CLASSNAME$O;
 InputHelper.defaultProps = DEFAULT_PROPS$D;
 
-const _excluded$R = ["children", "className", "htmlFor", "isRequired", "theme"];
+const _excluded$Q = ["children", "className", "htmlFor", "isRequired", "theme"];
 
 /**
  * Defines the props of the component.
@@ -8787,7 +8789,7 @@ const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
       isRequired,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$R);
+    forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   return /*#__PURE__*/React__default.createElement("label", _extends({
     ref: ref
   }, forwardedProps, {
@@ -8803,7 +8805,7 @@ InputLabel.displayName = COMPONENT_NAME$N;
 InputLabel.className = CLASSNAME$N;
 InputLabel.defaultProps = DEFAULT_PROPS$C;
 
-const _excluded$Q = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
+const _excluded$P = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 
 /**
  * Defines the props of the component.
@@ -8843,7 +8845,7 @@ const Lightbox = /*#__PURE__*/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;
@@ -8934,7 +8936,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
 Lightbox.displayName = COMPONENT_NAME$M;
 Lightbox.className = CLASSNAME$M;
 
-const _excluded$P = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+const _excluded$O = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
 
 /**
  * Defines the props of the component.
@@ -8997,7 +8999,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       target,
       typography
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$P);
+    forwardedProps = _objectWithoutProperties(props, _excluded$O);
   const renderedChildren = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     className: `${CLASSNAME$L}__left-icon`,
@@ -9045,7 +9047,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
 Link.displayName = COMPONENT_NAME$L;
 Link.className = CLASSNAME$L;
 
-const _excluded$O = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
+const _excluded$N = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
 
 /**
  * Defines the props of the component.
@@ -9090,7 +9092,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
       title,
       titleHeading
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$O);
+    forwardedProps = _objectWithoutProperties(props, _excluded$N);
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
   const TitleHeading = titleHeading;
   return /*#__PURE__*/React__default.createElement("article", _extends({
@@ -9145,7 +9147,7 @@ LinkPreview.displayName = COMPONENT_NAME$K;
 LinkPreview.className = CLASSNAME$K;
 LinkPreview.defaultProps = DEFAULT_PROPS$B;
 
-const _excluded$N = ["className"];
+const _excluded$M = ["className"];
 
 /**
  * Defines the props of the component.
@@ -9172,7 +9174,7 @@ const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$N);
+    forwardedProps = _objectWithoutProperties(props, _excluded$M);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9184,7 +9186,7 @@ const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
 ListDivider.displayName = COMPONENT_NAME$J;
 ListDivider.className = CLASSNAME$J;
 
-const _excluded$M = ["children", "className"];
+const _excluded$L = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -9212,7 +9214,7 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$M);
+    forwardedProps = _objectWithoutProperties(props, _excluded$L);
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9224,7 +9226,7 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME$I;
 ListSubheader.className = CLASSNAME$I;
 
-const _excluded$L = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
+const _excluded$K = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
 
 /**
  * Defines the props of the component.
@@ -9278,7 +9280,7 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
       icon: customIcon,
       closeButtonProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$L);
+    forwardedProps = _objectWithoutProperties(props, _excluded$K);
   const {
     color,
     icon
@@ -9313,7 +9315,7 @@ const Message = /*#__PURE__*/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"];
 
 /**
@@ -9351,7 +9353,7 @@ const Mosaic = /*#__PURE__*/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 => {
@@ -9406,7 +9408,7 @@ function forwardRefPolymorphic(render) {
   return /*#__PURE__*/React__default.forwardRef(render);
 }
 
-const _excluded$J = ["className", "icon", "label", "isCurrentPage", "as"];
+const _excluded$I = ["className", "icon", "label", "isCurrentPage", "as"];
 
 /** Make `href` required when `as` is `a` */
 
@@ -9431,7 +9433,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
       isCurrentPage,
       as: Element = 'a'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$J);
+    forwardedProps = _objectWithoutProperties(props, _excluded$I);
   const theme = useContext(ThemeContext);
   const {
     tooltipLabel,
@@ -9475,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.
  */
@@ -9492,7 +9494,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/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();
@@ -9557,7 +9559,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   className: CLASSNAME$E
 });
 
-const _excluded$H = ["children", "className", "theme", "orientation"];
+const _excluded$G = ["children", "className", "theme", "orientation"];
 /**
  * Component display name.
  */
@@ -9577,7 +9579,7 @@ forwardRef((props, ref) => {
       theme,
       orientation
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$H);
+    forwardedProps = _objectWithoutProperties(props, _excluded$G);
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: theme
   }, /*#__PURE__*/React__default.createElement("nav", _extends({
@@ -9628,7 +9630,7 @@ const NOTIFICATION_CONFIGURATION = {
   }
 };
 
-const _excluded$G = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
+const _excluded$F = ["actionLabel", "className", "content", "isOpen", "onActionClick", "onClick", "theme", "type", "zIndex", "usePortal", "style"];
 
 /**
  * Defines the props of the component.
@@ -9675,7 +9677,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       usePortal,
       style
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$G);
+    forwardedProps = _objectWithoutProperties(props, _excluded$F);
   if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
@@ -9733,7 +9735,7 @@ Notification.displayName = COMPONENT_NAME$C;
 Notification.className = CLASSNAME$C;
 Notification.defaultProps = DEFAULT_PROPS$z;
 
-const _excluded$F = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
+const _excluded$E = ["children", "isOpen", "focusElement", "aria-label", "label", "className"];
 
 /**
  * PopoverDialog props.
@@ -9771,7 +9773,7 @@ const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
       label = ariaLabel,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$F);
+    forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/React__default.createElement(Popover, _extends({}, forwardedProps, {
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -9795,7 +9797,7 @@ PopoverDialog.displayName = COMPONENT_NAME$B;
 PopoverDialog.className = CLASSNAME$B;
 PopoverDialog.defaultProps = DEFAULT_PROPS$y;
 
-const _excluded$E = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
+const _excluded$D = ["actions", "attachments", "author", "className", "meta", "onClick", "orientation", "tags", "text", "theme", "thumbnailProps", "title"];
 
 /**
  * Defines the props of the component.
@@ -9841,7 +9843,7 @@ const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
       thumbnailProps,
       title
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$E);
+    forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -9886,7 +9888,7 @@ PostBlock.displayName = COMPONENT_NAME$A;
 PostBlock.className = CLASSNAME$A;
 PostBlock.defaultProps = DEFAULT_PROPS$x;
 
-const _excluded$D = ["className", "theme"];
+const _excluded$C = ["className", "theme"];
 /**
  * Component display name.
  */
@@ -9916,7 +9918,7 @@ const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$D);
+    forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9934,7 +9936,7 @@ ProgressLinear.displayName = COMPONENT_NAME$z;
 ProgressLinear.className = CLASSNAME$z;
 ProgressLinear.defaultProps = DEFAULT_PROPS$w;
 
-const _excluded$C = ["className", "theme", "size"];
+const _excluded$B = ["className", "theme", "size"];
 
 /**
  * Progress sizes.
@@ -9975,7 +9977,7 @@ const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       size
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$C);
+    forwardedProps = _objectWithoutProperties(props, _excluded$B);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10004,7 +10006,7 @@ ProgressCircular.displayName = COMPONENT_NAME$y;
 ProgressCircular.className = CLASSNAME$y;
 ProgressCircular.defaultProps = DEFAULT_PROPS$v;
 
-const _excluded$B = ["className", "theme", "variant"];
+const _excluded$A = ["className", "theme", "variant"];
 
 /**
  * Progress variants.
@@ -10050,7 +10052,7 @@ const Progress = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$B);
+    forwardedProps = _objectWithoutProperties(props, _excluded$A);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10187,7 +10189,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$t = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -10209,7 +10211,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.
@@ -10313,7 +10315,7 @@ const useRovingTabIndex = _ref => {
   [parentRef, ...extraDependencies]);
 };
 
-const _excluded$z = ["aria-label", "children", "className"];
+const _excluded$y = ["aria-label", "children", "className"];
 
 /**
  * Defines the props of the component.
@@ -10350,7 +10352,7 @@ const ProgressTracker = /*#__PURE__*/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 +10393,7 @@ ProgressTracker.displayName = COMPONENT_NAME$w;
 ProgressTracker.className = CLASSNAME$w;
 ProgressTracker.defaultProps = DEFAULT_PROPS$s;
 
-const _excluded$y = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$x = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -10436,7 +10438,7 @@ const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    forwardedProps = _objectWithoutProperties(props, _excluded$x);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -10503,7 +10505,7 @@ ProgressTrackerStep.displayName = COMPONENT_NAME$v;
 ProgressTrackerStep.className = CLASSNAME$v;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$r;
 
-const _excluded$x = ["children", "id", "className", "isActive"];
+const _excluded$w = ["children", "id", "className", "isActive"];
 
 /**
  * Defines the props of the component.
@@ -10540,7 +10542,7 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$x);
+    forwardedProps = _objectWithoutProperties(props, _excluded$w);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -10560,7 +10562,7 @@ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$u;
 ProgressTrackerStepPanel.className = CLASSNAME$u;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$q;
 
-const _excluded$w = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$v = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -10607,7 +10609,7 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    forwardedProps = _objectWithoutProperties(props, _excluded$v);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -10661,7 +10663,7 @@ RadioButton.displayName = COMPONENT_NAME$t;
 RadioButton.className = CLASSNAME$t;
 RadioButton.defaultProps = DEFAULT_PROPS$p;
 
-const _excluded$v = ["children", "className"];
+const _excluded$u = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -10689,7 +10691,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$v);
+    forwardedProps = _objectWithoutProperties(props, _excluded$u);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10733,7 +10735,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-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';
@@ -10773,7 +10775,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
       value,
       variant = DEFAULT_PROPS$o.variant
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$u);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$t);
   const generatedSelectId = useId();
   const selectId = id || generatedSelectId;
   const anchorRef = useRef(null);
@@ -10848,7 +10850,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   }, helper));
 };
 
-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';
@@ -10888,7 +10890,7 @@ const SelectField = _ref => {
       variant,
       selectElementRef
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$t);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$q}__header`
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
@@ -10968,7 +10970,7 @@ Select.className = CLASSNAME$q;
 Select.defaultProps = DEFAULT_PROPS$n;
 Select.className = CLASSNAME$q;
 
-const _excluded$s = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
+const _excluded$r = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant", "selectElementRef"];
 
 /** Defines the props of the component. */
 
@@ -11019,7 +11021,7 @@ const SelectMultipleField = _ref => {
       variant,
       selectElementRef
     } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$s);
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$p}__header`
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
@@ -11089,7 +11091,7 @@ SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$p;
 SelectMultiple.defaultProps = DEFAULT_PROPS$m;
 
-const _excluded$r = ["children", "className", "theme"];
+const _excluded$q = ["children", "className", "theme"];
 
 /**
  * Defines the props of the component.
@@ -11118,7 +11120,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$r);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref
@@ -11131,7 +11133,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
 SideNavigation.displayName = COMPONENT_NAME$o;
 SideNavigation.className = CLASSNAME$o;
 
-const _excluded$q = ["linkAs", "href"];
+const _excluded$p = ["linkAs", "href"];
 /**
  * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
  */
@@ -11140,7 +11142,7 @@ const renderButtonOrLink = function (props) {
       linkAs,
       href
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$q);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     children[_key - 1] = arguments[_key];
   }
@@ -11150,7 +11152,7 @@ const renderButtonOrLink = function (props) {
   }, forwardedProps), ...children);
 };
 
-const _excluded$p = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
+const _excluded$o = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
 
 /**
  * Defines the props of the component.
@@ -11197,7 +11199,7 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
       toggleButtonProps,
       closeMode = 'unmount'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
   const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
@@ -11259,7 +11261,7 @@ SideNavigationItem.displayName = COMPONENT_NAME$n;
 SideNavigationItem.className = CLASSNAME$n;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$l;
 
-const _excluded$o = ["className", "size", "color", "theme"];
+const _excluded$n = ["className", "size", "color", "theme"];
 
 /**
  * Defines the props of the component.
@@ -11293,7 +11295,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11309,7 +11311,7 @@ SkeletonCircle.displayName = COMPONENT_NAME$m;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$k;
 SkeletonCircle.className = CLASSNAME$m;
 
-const _excluded$n = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
+const _excluded$m = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
 
 /**
  * Skeleton variants.
@@ -11356,7 +11358,7 @@ const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11377,7 +11379,7 @@ SkeletonRectangle.displayName = COMPONENT_NAME$l;
 SkeletonRectangle.className = CLASSNAME$l;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$j;
 
-const _excluded$m = ["className", "theme", "typography", "width", "color"];
+const _excluded$l = ["className", "theme", "typography", "width", "color"];
 
 /**
  * Defines the props of the component.
@@ -11412,7 +11414,7 @@ const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11467,7 +11469,7 @@ const clamp = (value, min, max) => {
   return value;
 };
 
-const _excluded$l = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
+const _excluded$k = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
 
 /**
  * Defines the props of the component.
@@ -11542,7 +11544,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const generatedId = useId();
   const sliderId = id || generatedId;
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
@@ -11731,6 +11733,31 @@ Slider.displayName = COMPONENT_NAME$j;
 Slider.className = CLASSNAME$j;
 Slider.defaultProps = DEFAULT_PROPS$h;
 
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+const useFocusWithin = _ref => {
+  let {
+    element,
+    onFocusIn,
+    onFocusOut
+  } = _ref;
+  useEffect(() => {
+    if (element) {
+      element.addEventListener('focusin', onFocusIn);
+      element.addEventListener('focusout', onFocusOut);
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener('focusin', onFocusIn);
+        element.removeEventListener('focusout', onFocusOut);
+      }
+    };
+  }, [onFocusIn, element, onFocusOut]);
+};
+
 /**
  * Making setInterval Declarative with React Hooks.
  * Credits: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
@@ -11804,87 +11831,80 @@ const useSlideshowControls = _ref => {
   // Number of slides when using groupBy prop.
   const slidesCount = Math.ceil(itemsCount / Math.min(groupBy, itemsCount));
 
-  // Change current index to display next slide.
-  const goToNextSlide = useCallback(function () {
-    let loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    setCurrentIndex(index => {
-      if (loopback && index === slidesCount - 1) {
-        // Loopback to the start.
-        return 0;
+  // Set current active index (& if is user activated)
+  const setActiveIndex = useCallback((setStateAction, isUser) => {
+    // Store on element a boolean value when the slide change was not from a user action.
+    const elementDataset = element === null || element === void 0 ? void 0 : element.dataset;
+    if (elementDataset) {
+      if (isUser) elementDataset.lumxUserActivated = true;else delete elementDataset.lumxUserActivated;
+    }
+    setCurrentIndex(setStateAction);
+  }, [element]);
+
+  // Change slide given delta (-1/+1) with or without loop back.
+  const goTo = useCallback(function () {
+    let delta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    let loopBack = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    let isUser = arguments.length > 2 ? arguments[2] : undefined;
+    setActiveIndex(index => {
+      if (loopBack) {
+        const newIndex = (index + delta) % slidesCount;
+        if (newIndex < 0) return slidesCount + newIndex;
+        return newIndex;
       }
-      if (index < slidesCount - 1) {
-        // Next slide.
-        return index + 1;
-      }
-      return index;
-    });
-  }, [slidesCount, setCurrentIndex]);
-
-  // Change current index to display previous slide.
-  const goToPreviousSlide = useCallback(function () {
-    let loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    setCurrentIndex(index => {
-      if (loopback && index === 0) {
-        // Loopback to the end.
-        return slidesCount - 1;
-      }
-      if (index > 0) {
-        // Previous slide.
-        return index - 1;
-      }
-      return index;
-    });
-  }, [slidesCount, setCurrentIndex]);
+      return clamp(index + delta, 0, slidesCount - 1);
+    }, isUser);
+  }, [slidesCount, setActiveIndex]);
 
   // Auto play
   const [isAutoPlaying, setIsAutoPlaying] = useState(Boolean(autoPlay));
   const [isForcePaused, setIsForcePaused] = useState(false);
   const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
   // Start
-  useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? interval : null);
+  useInterval(goTo, isSlideshowAutoPlaying && slidesCount > 1 ? interval : null);
 
-  // Reset current index if it become invalid.
+  // Reset current index if it becomes invalid.
   useEffect(() => {
     if (currentIndex > slidesCount - 1) {
-      setCurrentIndex(defaultActiveIndex);
+      setActiveIndex(defaultActiveIndex);
     }
-  }, [currentIndex, slidesCount, defaultActiveIndex]);
-  const startAutoPlay = () => {
+  }, [currentIndex, slidesCount, defaultActiveIndex, setActiveIndex]);
+  const startAutoPlay = useCallback(() => {
     setIsAutoPlaying(Boolean(autoPlay));
-  };
-  const stopAutoPlay = () => {
+  }, [autoPlay]);
+  const stopAutoPlay = useCallback(() => {
     setIsAutoPlaying(false);
-  };
+  }, []);
 
   // Handle click on a bullet to go to a specific slide.
   const onPaginationClick = useCallback(index => {
     stopAutoPlay();
     setIsForcePaused(true);
     if (index >= 0 && index < slidesCount) {
-      setCurrentIndex(index);
+      setActiveIndex(index, true);
     }
-  }, [slidesCount, setCurrentIndex]);
+  }, [stopAutoPlay, slidesCount, setActiveIndex]);
 
   // Handle click or keyboard event to go to next slide.
   const onNextClick = useCallback(function () {
-    let loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let loopBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     stopAutoPlay();
     setIsForcePaused(true);
-    goToNextSlide(loopback);
-  }, [goToNextSlide]);
+    goTo(1, loopBack, true);
+  }, [goTo, stopAutoPlay]);
 
   // Handle click or keyboard event to go to previous slide.
   const onPreviousClick = useCallback(function () {
-    let loopback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let loopBack = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     stopAutoPlay();
     setIsForcePaused(true);
-    goToPreviousSlide(loopback);
-  }, [goToPreviousSlide]);
+    goTo(-1, loopBack, true);
+  }, [goTo, stopAutoPlay]);
 
   // If the activeIndex props changes, update the current slide
   useEffect(() => {
-    setCurrentIndex(activeIndex);
-  }, [activeIndex]);
+    setActiveIndex(activeIndex);
+  }, [activeIndex, setActiveIndex]);
 
   // If the slide changes, with autoplay for example, trigger "onChange"
   useEffect(() => {
@@ -11895,14 +11915,14 @@ const useSlideshowControls = _ref => {
   const slideshowId = id || generatedSlideshowId;
   const generatedSlidesId = useId();
   const slideshowSlidesId = slidesId || generatedSlidesId;
-  const toggleAutoPlay = () => {
+  const toggleAutoPlay = useCallback(() => {
     if (isSlideshowAutoPlaying) {
       stopAutoPlay();
     } else {
       startAutoPlay();
     }
-  };
-  const toggleForcePause = () => {
+  }, [isSlideshowAutoPlaying, startAutoPlay, stopAutoPlay]);
+  const toggleForcePause = useCallback(() => {
     const shouldBePaused = !isForcePaused;
     setIsForcePaused(shouldBePaused);
     if (!shouldBePaused) {
@@ -11910,7 +11930,7 @@ const useSlideshowControls = _ref => {
     } else {
       stopAutoPlay();
     }
-  };
+  }, [isForcePaused, startAutoPlay, stopAutoPlay]);
 
   // Start index and end index of visible slides.
   const startIndexVisible = currentIndex * groupBy;
@@ -11929,7 +11949,7 @@ const useSlideshowControls = _ref => {
     toggleAutoPlay,
     activeIndex: currentIndex,
     slidesCount,
-    setActiveIndex: setCurrentIndex,
+    setActiveIndex,
     startAutoPlay,
     stopAutoPlay,
     isForcePaused,
@@ -11937,171 +11957,6 @@ const useSlideshowControls = _ref => {
   };
 };
 
-/**
- * Hook that allows to control when there is a focus event within a given element, meaning
- * that any element within the given target will trigger the focus in and focus out events.
- * @param options - UseFocusWithinOptions
- */
-const useFocusWithin = _ref => {
-  let {
-    element,
-    onFocusIn,
-    onFocusOut
-  } = _ref;
-  useEffect(() => {
-    if (element) {
-      element.addEventListener('focusin', onFocusIn);
-      element.addEventListener('focusout', onFocusOut);
-    }
-    return () => {
-      if (element) {
-        element.removeEventListener('focusin', onFocusIn);
-        element.removeEventListener('focusout', onFocusOut);
-      }
-    };
-  }, [onFocusIn, element, onFocusOut]);
-};
-
-/**
- * Classname set on elements whose focus was blocked.
- * This is to easily find elements that have been tempered with,
- * and not elements whose focus was already initially blocked.
- * */
-const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
-
-/**
- * Manage how slides must behave when visible or not.
- * When not visible, they should be hidden from screen readers and not focusable.
- */
-const useSlideFocusManagement = _ref => {
-  let {
-    isSlideDisplayed,
-    slideRef
-  } = _ref;
-  useEffect(() => {
-    const element = slideRef === null || slideRef === void 0 ? void 0 : slideRef.current;
-    if (!element) {
-      return undefined;
-    }
-
-    /**
-     * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
-     */
-    const enableSlide = () => {
-      // Hide from screen readers
-      element.setAttribute('aria-hidden', 'false');
-      // Find elements we have blocked focus on
-      element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach(focusableElement => {
-        focusableElement.removeAttribute('tabindex');
-        focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
-      });
-    };
-
-    /**
-     * Hide given slide from screen readers and block focus on all focusable elements within.
-     */
-    const blockSlide = () => {
-      element.setAttribute('aria-hidden', 'true');
-      getFocusableElements(element).forEach(focusableElement => {
-        focusableElement.setAttribute('tabindex', '-1');
-        focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
-      });
-    };
-    const handleDisplay = () => {
-      if (!element) {
-        return;
-      }
-      if (isSlideDisplayed) {
-        enableSlide();
-      } else {
-        blockSlide();
-      }
-    };
-
-    // Callback function to execute when mutations are observed
-    const callback = mutationsList => {
-      if (element) {
-        for (const mutation of mutationsList) {
-          if (mutation.type === 'childList') {
-            handleDisplay();
-          }
-        }
-      }
-    };
-
-    // Create an observer instance linked to the callback function
-    const observer = new MutationObserver(callback);
-    if (element) {
-      handleDisplay();
-
-      /** If slide is hidden, start observing for elements to block focus  */
-      if (!isSlideDisplayed) {
-        observer.observe(element, {
-          attributes: true,
-          childList: true,
-          subtree: true
-        });
-      }
-    }
-    return () => {
-      if (!isSlideDisplayed) {
-        observer.disconnect();
-      }
-    };
-  }, [isSlideDisplayed, slideRef]);
-};
-
-const _excluded$k = ["className", "children", "role", "label", "isDisplayed"];
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$i = 'SlideshowItemGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$i = getRootClassName(COMPONENT_NAME$i);
-const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
-
-/**
- * SlideshowItemGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      className,
-      children,
-      role = 'group',
-      label,
-      isDisplayed
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
-  const groupRef = React__default.useRef(null);
-  useSlideFocusManagement({
-    isSlideDisplayed: isDisplayed,
-    slideRef: groupRef
-  });
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    ref: mergeRefs(groupRef, ref),
-    role: role,
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$i
-    })),
-    "aria-roledescription": "slide",
-    "aria-label": label
-  }, forwardedProps), children);
-});
-SlideshowItemGroup.displayName = COMPONENT_NAME$i;
-SlideshowItemGroup.className = CLASSNAME$i;
-
 const _excluded$j = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
 
 /**
@@ -12198,22 +12053,9 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
       parentRef: slideshow,
       theme: theme,
       isAutoPlaying: isAutoPlaying,
-      nextButtonProps: _objectSpread2({
-        'aria-controls': slideshowSlidesId
-      }, slideshowControlsProps.nextButtonProps),
-      previousButtonProps: _objectSpread2({
-        'aria-controls': slideshowSlidesId
-      }, slideshowControlsProps.previousButtonProps),
       playButtonProps: autoPlay ? _objectSpread2({
-        'aria-controls': slideshowSlidesId,
         onClick: toggleForcePause
-      }, slideshowControlsProps.playButtonProps) : undefined,
-      paginationItemProps: index => {
-        var _slideshowControlsPro;
-        return _objectSpread2({
-          'aria-controls': buildSlideShowGroupId(slideshowSlidesId, index)
-        }, (_slideshowControlsPro = slideshowControlsProps.paginationItemProps) === null || _slideshowControlsPro === void 0 ? void 0 : _slideshowControlsPro.call(slideshowControlsProps, index));
-      }
+      }, slideshowControlsProps.playButtonProps) : undefined
     }))) : undefined
   }, forwardedProps), children);
 });
@@ -12229,12 +12071,12 @@ const _excluded$i = ["className", "children"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$h = 'SlideshowItem';
+const COMPONENT_NAME$i = 'SlideshowItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$h = getRootClassName(COMPONENT_NAME$h);
+const CLASSNAME$i = getRootClassName(COMPONENT_NAME$i);
 
 /**
  * SlideshowItem component.
@@ -12251,13 +12093,179 @@ const SlideshowItem = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$h
-    }))
+    className: classnames(className, CLASSNAME$i)
   }, forwardedProps), children);
 });
-SlideshowItem.displayName = COMPONENT_NAME$h;
-SlideshowItem.className = CLASSNAME$h;
+SlideshowItem.displayName = COMPONENT_NAME$i;
+SlideshowItem.className = CLASSNAME$i;
+
+/**
+ * Listen keyboard to navigate left and right.
+ */
+function useKeyNavigate(element, onNext, onPrevious) {
+  useEffect(() => {
+    if (!element) return undefined;
+    const onKeyNavigate = evt => {
+      let callback;
+      if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'ArrowRight') {
+        callback = onNext;
+      } else if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'ArrowLeft') {
+        callback = onPrevious;
+      }
+      if (!callback) return;
+      callback();
+      evt.preventDefault();
+      evt.stopPropagation();
+    };
+    element.addEventListener('keydown', onKeyNavigate);
+    return () => {
+      element.removeEventListener('keydown', onKeyNavigate);
+    };
+  }, [onPrevious, onNext, element]);
+}
+
+/**
+ * Data attribute set on elements whose focus was blocked.
+ * This is to easily find elements that have been tempered with,
+ * and not elements whose focus was already initially blocked.
+ */
+const BLOCKED_FOCUS = 'data-focus-blocked';
+
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+const useSlideFocusManagement = _ref => {
+  let {
+    isSlideDisplayed,
+    slidesRef
+  } = _ref;
+  const [slide, setSlide] = React__default.useState(null);
+  const [focusableElementSet, setFocusableElementSet] = React__default.useState();
+  React__default.useEffect(() => {
+    if (!slide) {
+      return undefined;
+    }
+    // Update the slide's focusable element list (including the blocked elements)
+    const updateFocusableElements = () => setFocusableElementSet(function () {
+      let set = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Set();
+      // TODO: remove when `inert` gets sufficient browser support
+      const focusedBlocked = Array.from(slide.querySelectorAll(`[${BLOCKED_FOCUS}]`));
+      for (const element of focusedBlocked) {
+        set.add(element);
+      }
+      for (const element of getFocusableElements(slide)) {
+        set.add(element);
+      }
+      return set;
+    });
+
+    // Observe changes in the content of the slide
+    const observer = new MutationObserver(mutationsList => {
+      if (mutationsList.some(mutation => mutation.type === 'childList')) {
+        updateFocusableElements();
+      }
+    });
+    updateFocusableElements();
+    observer.observe(slide, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    return observer.disconnect();
+  }, [slide]);
+  useEffect(() => {
+    if (!slide || !focusableElementSet) {
+      return;
+    }
+    const focusableElements = Array.from(focusableElementSet);
+    if (!isSlideDisplayed) {
+      /* Block slide */
+      slide.setAttribute('inert', '');
+      slide.setAttribute('aria-hidden', 'true');
+
+      // TODO: remove when `inert` gets sufficient browser support
+      for (const focusableElement of focusableElements) {
+        focusableElement.setAttribute('tabindex', '-1');
+        focusableElement.setAttribute(BLOCKED_FOCUS, '');
+      }
+    } else {
+      var _slidesRef$current;
+      /* Un-block slide */
+      slide.removeAttribute('inert');
+      slide.removeAttribute('aria-hidden');
+
+      // TODO: remove when `inert` gets sufficient browser support
+      for (const focusableElement of focusableElements) {
+        focusableElement.removeAttribute('tabindex');
+        focusableElement.removeAttribute(BLOCKED_FOCUS);
+      }
+
+      // Change focus on slide displayed
+      const isUserActivated = (slidesRef === null || slidesRef === void 0 ? void 0 : (_slidesRef$current = slidesRef.current) === null || _slidesRef$current === void 0 ? void 0 : _slidesRef$current.dataset.lumxUserActivated) === 'true';
+      if (isUserActivated) {
+        var _elementToFocus;
+        let elementToFocus = slide;
+
+        // We have exactly one focusable element => focus it
+        if (focusableElementSet.size === 1) {
+          // eslint-disable-next-line prefer-destructuring
+          elementToFocus = focusableElements[0];
+        }
+
+        // We have not focusable element => focus the pagination item
+        if (focusableElementSet.size === 0) {
+          elementToFocus = document.querySelector(`[aria-controls="${slide === null || slide === void 0 ? void 0 : slide.id}"]`);
+        }
+        (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
+          preventScroll: true
+        });
+      }
+    }
+  }, [focusableElementSet, isSlideDisplayed, slide, slidesRef]);
+  return setSlide;
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$h = 'SlideshowItemGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$h = getRootClassName(COMPONENT_NAME$h);
+const buildSlideShowGroupId = (slidesId, index) => slidesId && `${slidesId}-slide-${index}`;
+
+/**
+ * Internal slideshow item group component.
+ */
+const SlideshowItemGroup = props => {
+  const {
+    id,
+    children,
+    label,
+    isDisplayed,
+    slidesRef
+  } = props;
+  const groupRef = useSlideFocusManagement({
+    isSlideDisplayed: isDisplayed,
+    slidesRef
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: id,
+    ref: groupRef,
+    role: "group",
+    className: CLASSNAME$h,
+    "aria-label": label,
+    tabIndex: -1
+  }, children);
+};
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 
 const isTouchDevice = () => 'ontouchstart' in window;
 
@@ -12375,32 +12383,29 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
   const paginationRef = React__default.useRef(null);
   // Listen to touch swipe navigate left & right.
   useSwipeNavigate(parent,
-  // Go next without loopback.
+  // Go next without loop back.
   useCallback(() => onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(false), [onNextClick]),
-  // Go previous without loopback.
+  // Go previous without loop back.
   useCallback(() => onPreviousClick === null || onPreviousClick === void 0 ? void 0 : onPreviousClick(false), [onPreviousClick]));
-
-  /**
-   * Add roving tab index pattern to pagination items and activate slide on focus.
-   */
-  useRovingTabIndex({
-    parentRef: paginationRef,
-    elementSelector: 'button',
-    keepTabIndex: true,
-    onElementFocus: element => {
-      element.click();
-    }
-  });
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const onButtonFocus = useCallback(index => () => setFocusedIndex(index), [setFocusedIndex]);
+  const onFocusOut = useCallback(() => setFocusedIndex(null), [setFocusedIndex]);
 
   // Pagination "bullet" range.
-  const visibleRange = usePaginationVisibleRange(activeIndex, slidesCount);
+  const visibleRange = usePaginationVisibleRange(focusedIndex !== null && focusedIndex !== void 0 ? focusedIndex : activeIndex, slidesCount);
 
   // Inline style of wrapper element.
   const wrapperStyle = {
     transform: `translateX(-${PAGINATION_ITEM_SIZE * visibleRange.min}px)`
   };
+  const controlsRef = React__default.useRef(null);
+  useKeyNavigate(controlsRef.current, onNextClick, onPreviousClick);
+  const slideshowSlidesId = React__default.useMemo(() => {
+    var _parent, _parent$querySelector;
+    return (_parent = parent) === null || _parent === void 0 ? void 0 : (_parent$querySelector = _parent.querySelector(`.${Slides.className}__slides`)) === null || _parent$querySelector === void 0 ? void 0 : _parent$querySelector.id;
+  }, [parent]);
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    ref: ref
+    ref: useMergeRefs(ref, controlsRef)
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$g,
@@ -12413,15 +12418,17 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$g}__navigation`,
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
-    onClick: onPreviousClick
+    onClick: onPreviousClick,
+    "aria-controls": slideshowSlidesId
   })), /*#__PURE__*/React__default.createElement("div", {
     ref: paginationRef,
     className: `${CLASSNAME$g}__pagination`
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: `${CLASSNAME$g}__pagination-items`,
-    style: wrapperStyle,
-    role: "tablist"
-  }, paginationProps), useMemo(() => range(slidesCount).map(index => {
+    style: wrapperStyle
+  }, paginationProps, {
+    onBlur: onFocusOut
+  }), range(slidesCount).map(index => {
     const isOnEdge = index !== 0 && index !== slidesCount - 1 && (index === visibleRange.min || index === visibleRange.max);
     const isActive = activeIndex === index;
     const isOutRange = index < visibleRange.min || index > visibleRange.max;
@@ -12441,23 +12448,25 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       }), itemClassName),
       key: index,
       type: "button",
-      tabIndex: isActive ? undefined : -1,
-      role: "tab",
-      "aria-selected": isActive,
+      "aria-current": isActive || undefined,
+      "aria-controls": buildSlideShowGroupId(slideshowSlidesId, index),
       onClick: () => onPaginationClick === null || onPaginationClick === void 0 ? void 0 : onPaginationClick(index),
+      onFocus: onButtonFocus(index),
       "aria-label": ariaLabel
     }, itemProps));
-  }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? /*#__PURE__*/React__default.createElement(IconButton, _extends({}, playButtonProps, {
+  }))), playButtonProps ? /*#__PURE__*/React__default.createElement(IconButton, _extends({}, playButtonProps, {
     icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
     className: `${CLASSNAME$g}__play`,
     color: theme === Theme.dark ? 'light' : 'dark',
-    emphasis: Emphasis.low
+    emphasis: Emphasis.low,
+    "aria-controls": slideshowSlidesId
   })) : null, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, nextButtonProps, {
     icon: mdiChevronRight,
     className: `${CLASSNAME$g}__navigation`,
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
-    onClick: onNextClick
+    onClick: onNextClick,
+    "aria-controls": slideshowSlidesId
   })));
 });
 InternalSlideshowControls.displayName = COMPONENT_NAME$g;
@@ -12503,7 +12512,6 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
       slideGroupLabel
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
-  const wrapperRef = React__default.useRef(null);
   const startIndexVisible = activeIndex;
   const endIndexVisible = startIndexVisible + 1;
 
@@ -12515,9 +12523,10 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
     const childrenArray = Children.toArray(children);
     return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
   }, [children, groupBy]);
+  const slidesRef = React__default.useRef(null);
   return /*#__PURE__*/React__default.createElement("section", _extends({
     id: id,
-    ref: ref
+    ref: useMergeRefs(slidesRef, ref)
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       prefix: CLASSNAME$f,
@@ -12534,15 +12543,14 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
     onMouseLeave: toggleAutoPlay,
     "aria-live": isAutoPlaying ? 'off' : 'polite'
   }, /*#__PURE__*/React__default.createElement("div", {
-    ref: wrapperRef,
     className: `${CLASSNAME$f}__wrapper`,
     style: wrapperStyle
   }, groups.map((group, index) => /*#__PURE__*/React__default.createElement(SlideshowItemGroup, {
     key: index,
     id: slidesId && buildSlideShowGroupId(slidesId, index),
-    role: hasControls ? 'tabpanel' : 'group',
     label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined,
-    isDisplayed: index >= startIndexVisible && index < endIndexVisible
+    isDisplayed: index >= startIndexVisible && index < endIndexVisible,
+    slidesRef: slidesRef
   }, group)))), afterSlides);
 });
 Slides.displayName = COMPONENT_NAME$f;