@lumx/react 4.3.2-alpha.2 → 4.3.2-alpha.3

package/index.js

@@ -1,13 +1,13 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
-export * from '@lumx/core/js/constants';
-export * from '@lumx/core/js/types';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants/index.js';
+export * from '@lumx/core/js/constants/index.js';
+export * from '@lumx/core/js/types/index.js';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
-import { mdiAlert } from '@lumx/icons/esm/alert';
-import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
-import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
-import { mdiInformation } from '@lumx/icons/esm/information';
-import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
+import { mdiAlert } from '@lumx/icons/esm/alert.js';
+import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
+import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
+import { mdiInformation } from '@lumx/icons/esm/information.js';
+import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils/index.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import last from 'lodash/last';
 import pull from 'lodash/pull';
@@ -18,38 +18,38 @@ import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
 import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
 import isEmpty from 'lodash/isEmpty';
-import { getDisabledState } from '@lumx/core/js/utils/disabledState';
-import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
+import { getDisabledState } from '@lumx/core/js/utils/disabledState/index.js';
+import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
 import memoize from 'lodash/memoize';
-import { mdiClose } from '@lumx/icons/esm/close';
+import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction';
-import { mdiImageBroken } from '@lumx/icons/esm/image-broken';
-import { mdiCheck } from '@lumx/icons/esm/check';
-import { mdiMinus } from '@lumx/icons/esm/minus';
-import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left';
-import { mdiChevronRight } from '@lumx/icons/esm/chevron-right';
+import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
+import { mdiCheck } from '@lumx/icons/esm/check.js';
+import { mdiMinus } from '@lumx/icons/esm/minus.js';
+import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left.js';
+import { mdiChevronRight } from '@lumx/icons/esm/chevron-right.js';
 import castArray from 'lodash/castArray';
-import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical';
-import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
-import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
+import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical.js';
+import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
+import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
 import noop from 'lodash/noop';
 import pick from 'lodash/pick';
 import isInteger from 'lodash/isInteger';
-import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline';
-import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline';
+import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline.js';
+import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline.js';
 import throttle from 'lodash/throttle';
 import range from 'lodash/range';
-import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline';
-import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline';
+import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline.js';
+import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline.js';
 import chunk from 'lodash/chunk';
 import ReactDOM from 'react-dom';
 import take from 'lodash/take';
-import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank';
-import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked';
-import { mdiMenuDown } from '@lumx/icons/esm/menu-down';
-import { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector';
-import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
-import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
+import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
+import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked.js';
+import { mdiMenuDown } from '@lumx/icons/esm/menu-down.js';
+import { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector/index.js';
+import { mdiArrowDown } from '@lumx/icons/esm/arrow-down.js';
+import { mdiArrowUp } from '@lumx/icons/esm/arrow-up.js';
 import set from 'lodash/set';
 
 let i = 0;
@@ -96,7 +96,7 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'AlertDialog';
+const COMPONENT_NAME$1l = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
@@ -217,7 +217,7 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1k;
+AlertDialog.displayName = COMPONENT_NAME$1l;
 AlertDialog.className = CLASSNAME$1j;
 AlertDialog.defaultProps = DEFAULT_PROPS$1a;
 
@@ -311,7 +311,7 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Autocomplete';
+const COMPONENT_NAME$1k = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
@@ -423,14 +423,14 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1j;
+Autocomplete.displayName = COMPONENT_NAME$1k;
 Autocomplete.className = CLASSNAME$1i;
 Autocomplete.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'AutocompleteMultiple';
+const COMPONENT_NAME$1j = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
@@ -548,14 +548,14 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
 AutocompleteMultiple.className = CLASSNAME$1h;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Avatar';
+const COMPONENT_NAME$1i = 'Avatar';
 
 /**
  * Component default class name and class prefix.
@@ -611,7 +611,7 @@ const Avatar = forwardRef((props, ref) => {
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
-      aspectRatio: AspectRatio.square,
+      aspectRatio: AspectRatio$1.square,
       size: size,
       image: image,
       alt: alt,
@@ -625,85 +625,10 @@ const Avatar = forwardRef((props, ref) => {
     })]
   });
 });
-Avatar.displayName = COMPONENT_NAME$1h;
+Avatar.displayName = COMPONENT_NAME$1i;
 Avatar.className = CLASSNAME$1g;
 Avatar.defaultProps = DEFAULT_PROPS$17;
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1g = 'Badge';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1f = 'lumx-badge';
-const {
-  block: block$12
-} = classNames.bem(CLASSNAME$1f);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$16 = {
-  color: ColorPalette$1.primary
-};
-
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Badge = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    color = DEFAULT_PROPS$16.color,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$12({
-      [`color-${color}`]: Boolean(color)
-    })),
-    children: children
-  });
-});
-Badge.displayName = COMPONENT_NAME$1g;
-Badge.className = CLASSNAME$1f;
-Badge.defaultProps = DEFAULT_PROPS$16;
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1e = 'lumx-badge-wrapper';
-const {
-  block: block$11,
-  element: element$M
-} = classNames.bem(CLASSNAME$1e);
-const BadgeWrapper = forwardRef((props, ref) => {
-  const {
-    badge,
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$11()),
-    children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$M('badge'),
-      children: badge
-    })]
-  });
-});
-BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1e;
-
 /**
  * Alignments.
  */
@@ -743,6 +668,12 @@ const TypographyInterface = {
  */
 const Typography = {
   ...TypographyInterface};
+/**
+ * All available aspect ratios.
+ */
+const AspectRatio = {
+  /** Intrinsic content ratio. */
+  original: 'original'};
 /**
  * Semantic info about the purpose of the component
  */
@@ -926,7 +857,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -961,11 +892,11 @@ function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -974,15 +905,15 @@ function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$10(baseName, modifiersOrAdditionalClasses);
+      return block$12(baseName, modifiersOrAdditionalClasses);
     }
-    return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$L(baseName, elem, modifiersOrAdditionalClasses);
+      return element$M(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -991,6 +922,108 @@ function bem(baseName) {
   };
 }
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1h = 'Badge';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1f = 'lumx-badge';
+const {
+  block: block$11
+} = bem(CLASSNAME$1f);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$16 = {
+  color: ColorPalette.primary
+};
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const Badge$1 = props => {
+  const {
+    children,
+    className,
+    color = DEFAULT_PROPS$16.color,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$11({
+      [`color-${color}`]: Boolean(color)
+    })),
+    children: children
+  });
+};
+Badge$1.displayName = COMPONENT_NAME$1h;
+Badge$1.className = CLASSNAME$1f;
+Badge$1.defaultProps = DEFAULT_PROPS$16;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Badge = forwardRef((props, ref) => {
+  return Badge$1({
+    ...props,
+    ref
+  });
+});
+Badge.displayName = Badge$1.displayName;
+Badge.className = Badge$1.className;
+Badge.defaultProps = Badge$1.defaultProps;
+
+const COMPONENT_NAME$1g = 'BadgeWrapper';
+const CLASSNAME$1e = 'lumx-badge-wrapper';
+const {
+  block: block$10,
+  element: element$L
+} = bem(CLASSNAME$1e);
+const BadgeWrapper$1 = props => {
+  const {
+    badge,
+    children,
+    className,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$10()),
+    children: [children, badge && /*#__PURE__*/jsx("div", {
+      className: element$L('badge'),
+      children: badge
+    })]
+  });
+};
+
+const BadgeWrapper = forwardRef((props, ref) => {
+  return BadgeWrapper$1({
+    ...props,
+    ref
+  });
+});
+BadgeWrapper.displayName = COMPONENT_NAME$1g;
+BadgeWrapper.className = CLASSNAME$1e;
+
 /**
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
@@ -4041,7 +4074,7 @@ function getNodeName(element) {
   return element ? (element.nodeName || '').toLowerCase() : null;
 }
 
-/*:: import type { Window } from '../types'; */
+/*:: import type { Window } from '../types.js'; */
 
 /*:: declare function getWindow(node: Node | Window): Window; */
 function getWindow(node) {
@@ -8887,7 +8920,7 @@ const LinkPreview = forwardRef((props, ref) => {
             // Avoid redundant links in focus order
             tabIndex: -1
           },
-          aspectRatio: AspectRatio.free,
+          aspectRatio: AspectRatio$1.free,
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
@@ -9296,7 +9329,7 @@ const Mosaic = forwardRef((props, ref) => {
             align: align || Alignment.left,
             image: image,
             theme: theme,
-            aspectRatio: AspectRatio.free,
+            aspectRatio: AspectRatio$1.free,
             fillHeight: true,
             onClick: handleImageClick?.(index, onClick) || onClick
           }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
@@ -11075,6 +11108,8 @@ const SelectMultipleField = props => {
   const defaultTheme = useTheme();
   const {
     anchorRef,
+    // We don't have a clear button in select multiple but it must be removed from the forwardedProps
+    clearButtonProps,
     handleKeyboardNav,
     hasError,
     icon,
@@ -13071,7 +13106,7 @@ const CLASSNAME$c = 'lumx-table';
 
 const {
   block: block$d
-} = classNames.bem(CLASSNAME$c);
+} = bem(CLASSNAME$c);
 
 /**
  * Defines the props of the component.
@@ -13086,29 +13121,54 @@ const DEFAULT_PROPS$f = {};
  * Table component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-const Table = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const Table$1 = props => {
   const {
     children,
     className,
     hasBefore,
     hasDividers,
-    theme = defaultTheme,
+    ref,
+    theme,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("table", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$d({
+    className: classnames(className, block$d({
       'has-before': hasBefore,
       'has-dividers': hasDividers,
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Table component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Table = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    children,
+    theme = defaultTheme,
+    ...otherProps
+  } = props;
+  return Table$1({
+    ref,
+    theme,
+    children,
+    ...otherProps
+  });
 });
 Table.displayName = COMPONENT_NAME$d;
 Table.className = CLASSNAME$c;
@@ -13128,21 +13188,44 @@ const CLASSNAME$b = `${CLASSNAME$c}__body`;
  * TableBody component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-const TableBody = forwardRef((props, ref) => {
+const TableBody$1 = props => {
   const {
     children,
     className,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("tbody", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$b),
+    className: classnames(className, CLASSNAME$b),
     children: children
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * TableBody component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableBody = forwardRef((props, ref) => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return TableBody$1({
+    ref,
+    children,
+    ...otherProps
+  });
 });
 TableBody.displayName = COMPONENT_NAME$c;
 TableBody.className = CLASSNAME$b;
@@ -13174,7 +13257,7 @@ const COMPONENT_NAME$b = 'TableCell';
 const CLASSNAME$a = `${CLASSNAME$c}__cell`;
 const {
   block: block$c
-} = classNames.bem(CLASSNAME$a);
+} = bem(CLASSNAME$a);
 
 /**
  * Component default props.
@@ -13187,16 +13270,16 @@ const DEFAULT_PROPS$e = {
  * TableCell component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-const TableCell = forwardRef((props, ref) => {
+const TableCell$1 = props => {
   const {
     children,
     className,
     icon,
     isSortable,
     onHeaderClick,
+    ref,
     sortOrder,
     variant = DEFAULT_PROPS$e.variant,
     ...forwardedProps
@@ -13220,7 +13303,7 @@ const TableCell = forwardRef((props, ref) => {
     children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
       ref: ref,
       ...forwardedProps,
-      className: classNames.join(className, block$c({
+      className: classnames(className, block$c({
         'is-sortable': isSortable,
         'is-sorted': isSortable && !!sortOrder,
         head: true
@@ -13229,26 +13312,27 @@ const TableCell = forwardRef((props, ref) => {
       children: /*#__PURE__*/jsxs(Wrapper, {
         className: `${CLASSNAME$a}-wrapper`,
         ...wrapperProps,
-        children: [icon && !isSortable && /*#__PURE__*/jsx(Icon, {
+        children: [icon && !isSortable && Icon$1({
           className: `${CLASSNAME$a}-icon`,
-          icon: icon,
-          size: Size$1.xxs
-        }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/jsx(Icon, {
+          icon,
+          size: Size.xxs
+        }), isSortable && sortOrder === ThOrder.asc && Icon$1({
           className: `${CLASSNAME$a}-icon`,
           icon: mdiArrowUp,
-          size: Size$1.xxs
-        }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/jsx(Icon, {
+          size: Size.xxs
+        }), isSortable && sortOrder === ThOrder.desc && Icon$1({
           className: `${CLASSNAME$a}-icon`,
           icon: mdiArrowDown,
-          size: Size$1.xxs
+          size: Size.xxs
         }), /*#__PURE__*/jsx("div", {
           className: `${CLASSNAME$a}-content`,
           children: children
         })]
       })
     }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
+      ref: ref,
       ...forwardedProps,
-      className: classNames.join(className, block$c({
+      className: classnames(className, block$c({
         body: true
       })),
       children: /*#__PURE__*/jsx("div", {
@@ -13257,6 +13341,29 @@ const TableCell = forwardRef((props, ref) => {
       })
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableCell = forwardRef((props, ref) => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return TableCell$1({
+    ref,
+    children,
+    ...otherProps
+  });
 });
 TableCell.displayName = COMPONENT_NAME$b;
 TableCell.className = CLASSNAME$a;
@@ -13281,21 +13388,44 @@ const DEFAULT_PROPS$d = {};
  * TableHeader component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-const TableHeader = forwardRef((props, ref) => {
+const TableHeader$1 = props => {
   const {
     children,
     className,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("thead", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$9),
+    className: classnames(className, CLASSNAME$9),
     children: children
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * TableHeader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableHeader = forwardRef((props, ref) => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return TableHeader$1({
+    ref,
+    children,
+    ...otherProps
+  });
 });
 TableHeader.displayName = COMPONENT_NAME$a;
 TableHeader.className = CLASSNAME$9;
@@ -13312,7 +13442,7 @@ const COMPONENT_NAME$9 = 'TableRow';
 const CLASSNAME$8 = `${CLASSNAME$c}__row`;
 const {
   block: block$b
-} = classNames.bem(CLASSNAME$8);
+} = bem(CLASSNAME$8);
 
 /**
  * Component default props.
@@ -13323,34 +13453,69 @@ const DEFAULT_PROPS$c = {};
  * TableRow component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-const TableRow = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
+const TableRow$1 = props => {
   const {
     children,
     className,
     isClickable,
     isSelected,
+    ref,
+    tabIndex,
+    'aria-disabled': ariaDisabled,
     ...forwardedProps
-  } = otherProps;
+  } = props;
+  const isDisabled = Boolean(ariaDisabled);
+
+  // Use object spread for tabIndex to ensure cross-framework compatibility (Vue JSX expects lowercase 'tabindex')
+  const tabIndexProps = tabIndex !== undefined ? {
+    tabIndex
+  } : {};
   return /*#__PURE__*/jsx("tr", {
     ref: ref,
-    tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
+    "aria-disabled": ariaDisabled,
+    ...tabIndexProps,
     ...forwardedProps,
-    className: classNames.join(className, block$b({
-      'is-clickable': isClickable && !isAnyDisabled,
-      'is-disabled': isAnyDisabled,
-      'is-selected': isSelected && !isAnyDisabled
+    className: classnames(className, block$b({
+      'is-clickable': isClickable && !isDisabled,
+      'is-disabled': isDisabled,
+      'is-selected': isSelected && !isDisabled
     })),
-    "aria-disabled": isAnyDisabled,
     children: children
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableRow = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    children,
+    isClickable,
+    'aria-disabled': _ariaDisabled,
+    ...forwardedProps
+  } = otherProps;
+  return TableRow$1({
+    ref,
+    children,
+    isClickable,
+    tabIndex: isClickable && !isAnyDisabled ? 0 : -1,
+    'aria-disabled': isAnyDisabled,
+    ...forwardedProps
+  });
 });
 TableRow.displayName = COMPONENT_NAME$9;
 TableRow.className = CLASSNAME$8;
@@ -14015,7 +14180,14 @@ TextField.displayName = COMPONENT_NAME$5;
 TextField.className = CLASSNAME$5;
 TextField.defaultProps = DEFAULT_PROPS$5;
 
-function getState(img, event) {
+/**
+ * Determines the loading state of an HTML image element.
+ *
+ * @param img - The HTML image element to check
+ * @param event - Optional event (load or error) that triggered the state check
+ * @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
+ */
+function getImageLoadingState(img, event) {
   // Error event occurred or image has no source.
   if (event?.type === 'error' || img?.complete && !img.getAttribute('src')) {
     return 'hasError';
@@ -14027,30 +14199,58 @@ function getState(img, event) {
   // Else loaded.
   return 'isLoaded';
 }
-function useImageLoad(imageURL, imgRef) {
-  const [state, setState] = useState(getState(imgRef));
 
-  // Update state when changing image URL or DOM reference.
-  useEffect(() => {
-    setState(getState(imgRef));
-  }, [imageURL, imgRef]);
+/**
+ * Parameters for getting image size.
+ */
 
-  // Listen to `load` and `error` event on image
-  useEffect(() => {
-    const img = imgRef;
-    if (!img) return undefined;
-    const update = event => setState(getState(img, event));
-    img.addEventListener('load', update);
-    img.addEventListener('error', update);
-    return () => {
-      img.removeEventListener('load', update);
-      img.removeEventListener('error', update);
+/**
+ * Gets the natural image size from props or element.
+ * Returns undefined if focus point is not applicable or size cannot be determined.
+ *
+ * @param params - Image size parameters
+ * @returns Image size or undefined
+ */
+function getImageSize({
+  image,
+  aspectRatio,
+  focusPoint,
+  width,
+  height,
+  element,
+  isLoaded
+}) {
+  // Focus point is not applicable => exit early
+  if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
+    return undefined;
+  }
+  // Size provided via props
+  if (typeof width === 'number' && typeof height === 'number') {
+    return {
+      width,
+      height
     };
-  }, [imgRef, imgRef?.src]);
-  return state;
+  }
+  // Size from loaded element
+  if (element && isLoaded) {
+    return {
+      width: element.naturalWidth,
+      height: element.naturalHeight
+    };
+  }
+  return undefined;
 }
 
-// Calculate shift to center the focus point in the container.
+/**
+ * Calculate shift position to center the focus point in the container.
+ *
+ * This function computes the percentage offset needed to position an image
+ * such that a specific focus point on the image aligns with the center of
+ * the container, taking into account the image's scale.
+ *
+ * @param params - Focus point shift calculation parameters
+ * @returns Percentage shift (0-100) for CSS positioning
+ */
 function shiftPosition({
   scale,
   focusPoint,
@@ -14065,92 +14265,64 @@ function shiftPosition({
   return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
 }
 
-// Compute CSS properties to apply the focus point.
-const useFocusPointStyle = ({
+/**
+ * Parameters for calculating focus point style.
+ */
+
+/**
+ * Calculates CSS style for applying focus point positioning.
+ *
+ * @param params - Focus point style parameters
+ * @returns CSS properties to apply to the image
+ */
+function calculateFocusPointStyle({
   image,
   aspectRatio,
   focusPoint,
-  imgProps: {
-    width,
-    height
-  } = {}
-}, element, isLoaded) => {
-  // Get natural image size from imgProps or img element.
-  const imageSize = useMemo(() => {
-    // Focus point is not applicable => exit early
-    if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return undefined;
-    if (typeof width === 'number' && typeof height === 'number') return {
-      width,
-      height
-    };
-    if (element && isLoaded) return {
-      width: element.naturalWidth,
-      height: element.naturalHeight
+  element,
+  imageSize,
+  containerSize
+}) {
+  // Focus point is not applicable => exit early
+  if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
+    return {};
+  }
+  if (!element || !imageSize) {
+    // Focus point can be computed but not right now (image size unknown).
+    return {
+      visibility: 'hidden'
     };
-    return undefined;
-  }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
-
-  // Get container size (dependant on imageSize).
-  const [containerSize, setContainerSize] = useState(undefined);
-  useEffect(function updateContainerSize() {
-    const cWidth = element?.offsetWidth;
-    const cHeight = element?.offsetHeight;
-    if (cWidth && cHeight) {
-      // Update only if needed.
-      setContainerSize(oldContainerSize => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
-        width: cWidth,
-        height: cHeight
-      });
-    } else if (imageSize) {
-      // Wait for a render (in case the container size is dependent on the image size).
-      requestAnimationFrame(updateContainerSize);
-    }
-  }, [element?.offsetHeight, element?.offsetWidth, imageSize]);
+  }
+  if (!containerSize || !imageSize.height || !imageSize.width) {
+    // Missing container or image size, abort focus point compute.
+    return {};
+  }
+  const heightScale = imageSize.height / containerSize.height;
+  const widthScale = imageSize.width / containerSize.width;
+  const scale = Math.min(widthScale, heightScale);
 
-  // Compute style.
-  const style = useMemo(() => {
-    // Focus point is not applicable => exit early
-    if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
-      return {};
-    }
-    if (!element || !imageSize) {
-      // Focus point can be computed but now right now (image size unknown).
-      return {
-        visibility: 'hidden'
-      };
-    }
-    if (!containerSize || !imageSize.height || !imageSize.width) {
-      // Missing container or image size abort focus point compute.
-      return {};
-    }
-    const heightScale = imageSize.height / containerSize.height;
-    const widthScale = imageSize.width / containerSize.width;
-    const scale = Math.min(widthScale, heightScale);
-
-    // Focus Y relative to the top (instead of the center)
-    const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
-    const y = shiftPosition({
-      scale,
-      focusPoint: focusPointFromTop,
-      imageSize: imageSize.height,
-      containerSize: containerSize.height
-    });
+  // Focus Y relative to the top (instead of the center)
+  const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
+  const y = shiftPosition({
+    scale,
+    focusPoint: focusPointFromTop,
+    imageSize: imageSize.height,
+    containerSize: containerSize.height
+  });
 
-    // Focus X relative to the left (instead of the center)
-    const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
-    const x = shiftPosition({
-      scale,
-      focusPoint: focusPointFromLeft,
-      imageSize: imageSize.width,
-      containerSize: containerSize.width
-    });
-    const objectPosition = `${x}% ${y}%`;
-    return {
-      objectPosition
-    };
-  }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);
-  return style;
-};
+  // Focus X relative to the left (instead of the center)
+  const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
+  const x = shiftPosition({
+    scale,
+    focusPoint: focusPointFromLeft,
+    imageSize: imageSize.width,
+    containerSize: containerSize.width
+  });
+  const objectPosition = `${x}% ${y}%`;
+  return {
+    objectPosition
+  };
+}
 
 /**
  * Component display name.
@@ -14181,25 +14353,18 @@ const DEFAULT_PROPS$4 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Thumbnail = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    otherProps,
-    disabledStateProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme$1.light;
+const Thumbnail$1 = props => {
   const {
     align,
     alt,
-    aspectRatio = AspectRatio.original,
+    aspectRatio = AspectRatio$1.original,
     badge,
     className,
     crossOrigin,
+    ref,
     fallback = DEFAULT_PROPS$4.fallback,
+    focusPointStyle,
     fillHeight,
-    // `focusPoint` needs to be here to remove it from `forwardedProps`.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusPoint,
     image,
     imgProps,
     imgRef: propImgRef,
@@ -14207,23 +14372,18 @@ const Thumbnail = forwardRef((props, ref) => {
     objectFit,
     loading = DEFAULT_PROPS$4.loading,
     loadingPlaceholderImageRef,
+    isAnyDisabled,
+    disabledStateProps,
     size,
-    theme = defaultTheme,
+    theme,
+    loadingState,
     variant,
     linkProps,
     linkAs,
     ...forwardedProps
-  } = otherProps;
-  const [imgElement, setImgElement] = useState();
-
-  // Image loading state.
-  const loadingState = useImageLoad(image, imgElement);
-  const isLoaded = loadingState === 'isLoaded';
+  } = props;
   const isLoading = isLoadingProp || loadingState === 'isLoading';
   const hasError = loadingState === 'hasError';
-
-  // Focus point.
-  const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
   const hasIconErrorFallback = hasError && typeof fallback === 'string';
   const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
   const imageErrorStyle = {};
@@ -14236,7 +14396,6 @@ const Thumbnail = forwardRef((props, ref) => {
   }
   const isLink = Boolean(linkProps?.href || linkAs);
   const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
-  const Wrapper = isClickable ? RawClickable : 'div';
   const wrapperProps = {
     ...forwardedProps
   };
@@ -14250,6 +14409,21 @@ const Thumbnail = forwardRef((props, ref) => {
       wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
   }
+  const wrapperClassName = classNames.join(linkProps?.className, className, block$4({
+    [`align-${align}`]: Boolean(align),
+    [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
+    [`size-${size}`]: Boolean(size),
+    [`theme-${theme}`]: Boolean(theme),
+    [`variant-${variant}`]: Boolean(variant),
+    'is-clickable': isClickable,
+    'has-error': hasError,
+    'has-icon-error-fallback': hasIconErrorFallback,
+    'has-custom-error-fallback': hasCustomErrorFallback,
+    'is-loading': isLoading,
+    [`object-fit-${objectFit}`]: Boolean(objectFit),
+    'has-badge': !!badge,
+    'fill-height': fillHeight
+  }));
 
   // If we have a loading placeholder image that is really loaded (complete)
   const loadingPlaceholderImage = isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current || undefined;
@@ -14258,24 +14432,7 @@ const Thumbnail = forwardRef((props, ref) => {
   const loadingStyle = loadingPlaceholderImage ? {
     backgroundImage: `url(${loadingPlaceholderImage.src})`
   } : undefined;
-  return /*#__PURE__*/jsxs(Wrapper, {
-    ...wrapperProps,
-    ref: ref,
-    className: classNames.join(linkProps?.className, className, block$4({
-      [`align-${align}`]: Boolean(align),
-      [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
-      [`size-${size}`]: Boolean(size),
-      [`theme-${theme}`]: Boolean(theme),
-      [`variant-${variant}`]: Boolean(variant),
-      'is-clickable': isClickable,
-      'has-error': hasError,
-      'has-icon-error-fallback': hasIconErrorFallback,
-      'has-custom-error-fallback': hasCustomErrorFallback,
-      'is-loading': isLoading,
-      [`object-fit-${objectFit}`]: Boolean(objectFit),
-      'has-badge': !!badge,
-      'fill-height': fillHeight
-    })),
+  const innerImage = /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("span", {
       className: element$4('background'),
       children: [/*#__PURE__*/jsx("img", {
@@ -14291,26 +14448,165 @@ const Thumbnail = forwardRef((props, ref) => {
           ...focusPointStyle,
           ...loadingStyle
         },
-        ref: useMergeRefs(setImgElement, propImgRef),
+        ref: propImgRef,
         className: classNames.join(element$4('image', {
           'is-loading': isLoading,
           'has-defined-size': Boolean(imgProps?.height && imgProps.width)
-        }), imgProps?.className),
+        }), imgProps?.className)
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - crossOrigin prop compatibility between React and Vue JSX
+        ,
         crossOrigin: crossOrigin,
         src: image,
         alt: alt,
         loading: loading
       }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
         className: element$4('fallback'),
-        children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
+        children: hasIconErrorFallback ? Icon$1({
           icon: fallback,
           size: Size$1.xxs,
-          theme: theme
+          theme
         }) : fallback
       })]
-    }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
+    }), badge]
+  });
+
+  /** Render `RawClickable` as a function since it is a core component which needs to be treated as such */
+  if (isClickable) {
+    return RawClickable$1({
+      ref,
+      ...wrapperProps,
+      className: wrapperClassName,
+      children: innerImage
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...wrapperProps,
+    className: wrapperClassName,
+    children: innerImage
+  });
+};
+
+function useImageLoad(imageURL, imgRef) {
+  const [state, setState] = useState(getImageLoadingState(imgRef));
+
+  // Update state when changing image URL or DOM reference.
+  useEffect(() => {
+    setState(getImageLoadingState(imgRef));
+  }, [imageURL, imgRef]);
+
+  // Listen to `load` and `error` event on image
+  useEffect(() => {
+    const img = imgRef;
+    if (!img) return undefined;
+    const update = event => setState(getImageLoadingState(img, event));
+    img.addEventListener('load', update);
+    img.addEventListener('error', update);
+    return () => {
+      img.removeEventListener('load', update);
+      img.removeEventListener('error', update);
+    };
+  }, [imgRef, imgRef?.src]);
+  return state;
+}
+
+// Compute CSS properties to apply the focus point.
+const useFocusPointStyle = ({
+  image,
+  aspectRatio,
+  focusPoint,
+  imgProps: {
+    width,
+    height
+  } = {}
+}, element, isLoaded) => {
+  // Get natural image size from imgProps or img element.
+  const imageSize = useMemo(() => getImageSize({
+    image,
+    aspectRatio,
+    focusPoint,
+    width: typeof width === 'number' ? width : undefined,
+    height: typeof height === 'number' ? height : undefined,
+    element,
+    isLoaded
+  }), [aspectRatio, element, focusPoint, height, image, isLoaded, width]);
+
+  // Get container size (dependant on imageSize).
+  const [containerSize, setContainerSize] = useState(undefined);
+  useEffect(function updateContainerSize() {
+    const cWidth = element?.offsetWidth;
+    const cHeight = element?.offsetHeight;
+    if (cWidth && cHeight) {
+      // Update only if needed.
+      setContainerSize(oldContainerSize => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
+        width: cWidth,
+        height: cHeight
+      });
+    } else if (imageSize) {
+      // Wait for a render (in case the container size is dependent on the image size).
+      requestAnimationFrame(updateContainerSize);
+    }
+  }, [element?.offsetHeight, element?.offsetWidth, imageSize]);
+
+  // Compute style.
+  const style = useMemo(() => calculateFocusPointStyle({
+    image,
+    aspectRatio,
+    focusPoint,
+    element,
+    imageSize,
+    containerSize
+  }), [aspectRatio, containerSize, element, focusPoint, image, imageSize]);
+  return style;
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Thumbnail = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps,
+    disabledStateProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    badge,
+    focusPoint,
+    image,
+    imgRef: propImgRef,
+    ...forwardedProps
+  } = otherProps;
+  const [imgElement, setImgElement] = useState();
+
+  // Image loading state.
+  const loadingState = useImageLoad(image, imgElement);
+  const isLoaded = loadingState === 'isLoaded';
+
+  // Focus point.
+  const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
+  return Thumbnail$1({
+    ref,
+    ...forwardedProps,
+    theme: forwardedProps.theme || defaultTheme,
+    isAnyDisabled,
+    disabledStateProps,
+    focusPointStyle,
+    loadingState,
+    imgRef: useMergeRefs(setImgElement, propImgRef),
+    image,
+    badge: badge && /*#__PURE__*/React__default.cloneElement(badge, {
       className: classNames.join(element$4('badge'), badge.props.className)
-    })]
+    })
   });
 });
 Thumbnail.displayName = COMPONENT_NAME$4;
@@ -14332,7 +14628,7 @@ Thumbnail.defaultProps = DEFAULT_PROPS$4;
  * @deprecated
  */
 const ThumbnailAspectRatio = {
-  ...AspectRatio
+  ...AspectRatio$1
 };
 
 /**
@@ -14763,7 +15059,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$1 = {
-  aspectRatio: AspectRatio.horizontal,
+  aspectRatio: AspectRatio$1.horizontal,
   size: Size$1.xl,
   variant: UploaderVariant.square
 };
@@ -14795,7 +15091,7 @@ const Uploader = forwardRef((props, ref) => {
     ...forwardedProps
   } = otherProps;
   // Adjust to square aspect ratio when using circle variants.
-  const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
+  const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio$1.square : aspectRatio;
   const handleClick = React__default.useCallback(evt => {
     if (isAnyDisabled) {
       evt.preventDefault();