@lumx/react 3.0.2-alpha-react-utils.3 → 3.0.3-alpha.1

package/index.js

@@ -1,5 +1,5 @@
 import { _ as _objectSpread2, a as _objectWithoutProperties, b as _slicedToArray, c as _defineProperty, d as _extends, e as _toConsumableArray$1, C as ClickAwayProvider, f as _toArray, g as _typeof } from './_internal/ClickAwayProvider.js';
-import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback, Children, isValidElement, cloneElement, useLayoutEffect, createContext, useContext, useReducer } from 'react';
+import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback, Children, isValidElement, cloneElement, useLayoutEffect, Fragment as Fragment$1, createContext, useContext, useReducer } from 'react';
 import kebabCase from 'lodash/kebabCase';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
@@ -17,6 +17,7 @@ import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
 import castArray from 'lodash/castArray';
+import pick from 'lodash/pick';
 import isObject from 'lodash/isObject';
 import take from 'lodash/take';
 import uniqueId from 'lodash/uniqueId';
@@ -559,6 +560,23 @@ function getRootClassName(componentName, subComponent) {
 
   return formattedClassName;
 }
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
+ */
+
+var getFontColorClassName = function getFontColorClassName(color) {
+  var colorVariant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ColorVariant.N;
+  return "lumx-color-font-".concat(color, "-").concat(colorVariant);
+};
+/**
+ * Returns the classname associated to the given typography.
+ * For example, for `Typography.title` it returns `lumx-typography-title`
+ */
+
+var getTypographyClassName = function getTypographyClassName(typography) {
+  return "lumx-typography-".concat(typography);
+};
 
 var _CONFIG;
 
@@ -6747,6 +6765,15 @@ var GenericBlock = Object.assign(BaseGenericBlock, {
   Actions: Actions
 });
 
+/**
+ * Accepted gap sizes for the generic block.
+ */
+var GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -6770,19 +6797,19 @@ var DEFAULT_PROPS$l = {};
  */
 
 var Text = forwardRef(function (props, ref) {
-  var as = props.as,
+  var Component = props.as,
       children = props.children,
       className = props.className,
       color = props.color,
       colorVariant = props.colorVariant,
+      noWrap = props.noWrap,
       typography = props.typography,
       truncate = props.truncate,
       style = props.style,
-      forwardedProps = _objectWithoutProperties(props, ["as", "children", "className", "color", "colorVariant", "typography", "truncate", "style"]);
+      forwardedProps = _objectWithoutProperties(props, ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "style"]);
 
-  var Component = as;
-  var colorClass = color && "lumx-color-font-".concat(color, "-").concat(colorVariant || ColorVariant.N);
-  var typographyClass = typography && "lumx-typography-".concat(typography); // Truncate mode
+  var colorClass = color && getFontColorClassName(color, colorVariant);
+  var typographyClass = typography && getTypographyClassName(typography); // Truncate mode
 
   var truncateLinesStyle = _typeof(truncate) === 'object' && truncate.lines > 1 && {
     '--lumx-text-truncate-lines': truncate.lines
@@ -6795,9 +6822,18 @@ var Text = forwardRef(function (props, ref) {
       prefix: CLASSNAME$o,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline: isTruncatedMultiline
-    }), typographyClass, colorClass),
+    }), typographyClass, colorClass, noWrap && "".concat(CLASSNAME$o, "--no-wrap")),
     style: _objectSpread2({}, truncateLinesStyle, {}, style)
-  }, forwardedProps), children);
+  }, forwardedProps), Children.toArray(children).map(function (child, index) {
+    // Force wrap spaces around icons to make sure they are never stuck against text.
+    if (isComponent(Icon)(child)) {
+      return React.createElement(Fragment$1, {
+        key: child.key || index
+      }, " ", child, " ");
+    }
+
+    return child;
+  }));
 });
 Text.displayName = COMPONENT_NAME$r;
 Text.className = CLASSNAME$o;
@@ -7179,6 +7215,64 @@ ImageBlock.displayName = COMPONENT_NAME$w;
 ImageBlock.className = CLASSNAME$t;
 ImageBlock.defaultProps = DEFAULT_PROPS$p;
 
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+var COMPONENT_NAME$x = 'InlineList';
+/**
+ * Component default class name and class prefix.
+ */
+
+var CLASSNAME$u = getRootClassName(COMPONENT_NAME$x);
+/**
+ * Component default props.
+ */
+
+var DEFAULT_PROPS$q = {};
+/**
+ * InlineList component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+
+var InlineList = forwardRef(function (props, ref) {
+  var className = props.className,
+      color = props.color,
+      colorVariant = props.colorVariant,
+      typography = props.typography,
+      children = props.children,
+      forwardedProps = _objectWithoutProperties(props, ["className", "color", "colorVariant", "typography", "children"]);
+
+  var fontColorClassName = color && getFontColorClassName(color, colorVariant);
+  var typographyClassName = typography && getTypographyClassName(typography);
+  return (// eslint-disable-next-line jsx-a11y/no-redundant-roles
+    React.createElement("ul", _extends({}, forwardedProps, {
+      ref: ref,
+      className: classnames(className, CLASSNAME$u, fontColorClassName, typographyClassName) // Lists with removed bullet style can lose their a11y list role on some browsers
+      ,
+      role: "list"
+    }), Children.toArray(children).map(function (child, index) {
+      var key = isValidElement(child) && child.key || index;
+      return React.createElement("li", {
+        key: key,
+        className: "".concat(CLASSNAME$u, "__item")
+      }, index !== 0 && React.createElement("span", {
+        className: "".concat(CLASSNAME$u, "__item-separator"),
+        "aria-hidden": "true"
+      }, "\xA0\u2022\xA0"), child);
+    }))
+  );
+});
+InlineList.displayName = COMPONENT_NAME$x;
+InlineList.className = CLASSNAME$u;
+InlineList.defaultProps = DEFAULT_PROPS$q;
+
 var INPUT_HELPER_CONFIGURATION = {
   error: {
     color: 'red'
@@ -7198,17 +7292,17 @@ var INPUT_HELPER_CONFIGURATION = {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$x = 'InputHelper';
+var COMPONENT_NAME$y = 'InputHelper';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$u = getRootClassName(COMPONENT_NAME$x);
+var CLASSNAME$v = getRootClassName(COMPONENT_NAME$y);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$q = {
+var DEFAULT_PROPS$r = {
   kind: Kind.info,
   theme: Theme.light
 };
@@ -7234,15 +7328,15 @@ var InputHelper = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$u,
+      prefix: CLASSNAME$v,
       color: color,
       theme: theme
     }))
   }), children);
 });
-InputHelper.displayName = COMPONENT_NAME$x;
-InputHelper.className = CLASSNAME$u;
-InputHelper.defaultProps = DEFAULT_PROPS$q;
+InputHelper.displayName = COMPONENT_NAME$y;
+InputHelper.className = CLASSNAME$v;
+InputHelper.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Defines the props of the component.
@@ -7251,17 +7345,17 @@ InputHelper.defaultProps = DEFAULT_PROPS$q;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$y = 'InputLabel';
+var COMPONENT_NAME$z = 'InputLabel';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$v = getRootClassName(COMPONENT_NAME$y);
+var CLASSNAME$w = getRootClassName(COMPONENT_NAME$z);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$r = {
+var DEFAULT_PROPS$s = {
   theme: Theme.light
 };
 /**
@@ -7285,15 +7379,15 @@ var InputLabel = forwardRef(function (props, ref) {
   }, forwardedProps, {
     htmlFor: htmlFor,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$v,
+      prefix: CLASSNAME$w,
       isRequired: isRequired,
       theme: theme
     }))
   }), children);
 });
-InputLabel.displayName = COMPONENT_NAME$y;
-InputLabel.className = CLASSNAME$v;
-InputLabel.defaultProps = DEFAULT_PROPS$r;
+InputLabel.displayName = COMPONENT_NAME$z;
+InputLabel.className = CLASSNAME$w;
+InputLabel.defaultProps = DEFAULT_PROPS$s;
 
 var LIGHTBOX_TRANSITION_DURATION = 400;
 /**
@@ -7303,12 +7397,12 @@ var LIGHTBOX_TRANSITION_DURATION = 400;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$z = 'Lightbox';
+var COMPONENT_NAME$A = 'Lightbox';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$w = getRootClassName(COMPONENT_NAME$z);
+var CLASSNAME$x = getRootClassName(COMPONENT_NAME$A);
 /**
  * Lightbox component.
  *
@@ -7374,7 +7468,7 @@ var Lightbox = forwardRef(function (props, ref) {
     "aria-label": ariaLabel,
     "aria-modal": "true",
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$w,
+      prefix: CLASSNAME$x,
       isHidden: !isOpen,
       isShown: isOpen || isVisible,
       theme: theme
@@ -7383,7 +7477,7 @@ var Lightbox = forwardRef(function (props, ref) {
       zIndex: zIndex
     }
   }), closeButtonProps && React.createElement(IconButton, _extends({}, closeButtonProps, {
-    className: "".concat(CLASSNAME$w, "__close"),
+    className: "".concat(CLASSNAME$x, "__close"),
     color: ColorPalette.light,
     emphasis: Emphasis.low,
     icon: mdiClose,
@@ -7395,22 +7489,22 @@ var Lightbox = forwardRef(function (props, ref) {
     childrenRefs: clickAwayRefs
   }, React.createElement("div", {
     ref: childrenRef,
-    className: "".concat(CLASSNAME$w, "__wrapper"),
+    className: "".concat(CLASSNAME$x, "__wrapper"),
     role: "presentation"
   }, children))), document.body);
 });
-Lightbox.displayName = COMPONENT_NAME$z;
-Lightbox.className = CLASSNAME$w;
+Lightbox.displayName = COMPONENT_NAME$A;
+Lightbox.className = CLASSNAME$x;
 
 /**
  * Component display name.
  */
-var COMPONENT_NAME$A = 'Link';
+var COMPONENT_NAME$B = 'Link';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$x = getRootClassName(COMPONENT_NAME$A);
+var CLASSNAME$y = getRootClassName(COMPONENT_NAME$B);
 
 var getIconSize = function getIconSize(typography) {
   switch (typography) {
@@ -7469,13 +7563,13 @@ var Link = forwardRef(function (props, ref) {
   var renderedChildren = useMemo(function () {
     return React.createElement(React.Fragment, null, leftIcon && !isEmpty(leftIcon) && React.createElement(Icon, {
       icon: leftIcon,
-      className: "".concat(CLASSNAME$x, "__left-icon"),
+      className: "".concat(CLASSNAME$y, "__left-icon"),
       size: getIconSize(typography)
     }), children && React.createElement("span", {
-      className: classnames("".concat(CLASSNAME$x, "__content"), _defineProperty({}, "lumx-typography-".concat(typography), typography))
+      className: classnames("".concat(CLASSNAME$y, "__content"), _defineProperty({}, "lumx-typography-".concat(typography), typography))
     }, children), rightIcon && !isEmpty(rightIcon) && React.createElement(Icon, {
       icon: rightIcon,
-      className: "".concat(CLASSNAME$x, "__right-icon"),
+      className: "".concat(CLASSNAME$y, "__right-icon"),
       size: getIconSize(typography)
     }));
   }, [leftIcon, typography, children, rightIcon]);
@@ -7491,7 +7585,7 @@ var Link = forwardRef(function (props, ref) {
       ref: ref,
       disabled: isDisabled,
       className: classnames(className, handleBasicClasses({
-        prefix: CLASSNAME$x,
+        prefix: CLASSNAME$y,
         color: color,
         colorVariant: colorVariant
       }))
@@ -7504,15 +7598,15 @@ var Link = forwardRef(function (props, ref) {
     href: href,
     target: target,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$x,
+      prefix: CLASSNAME$y,
       color: color,
       colorVariant: colorVariant
     })),
     ref: ref
   }), renderedChildren);
 });
-Link.displayName = COMPONENT_NAME$A;
-Link.className = CLASSNAME$x;
+Link.displayName = COMPONENT_NAME$B;
+Link.className = CLASSNAME$y;
 
 /**
  * Defines the props of the component.
@@ -7521,17 +7615,17 @@ Link.className = CLASSNAME$x;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$B = 'LinkPreview';
+var COMPONENT_NAME$C = 'LinkPreview';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$y = getRootClassName(COMPONENT_NAME$B);
+var CLASSNAME$z = getRootClassName(COMPONENT_NAME$C);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$s = {
+var DEFAULT_PROPS$t = {
   size: Size.regular,
   theme: Theme.light,
   titleHeading: 'h2'
@@ -7563,14 +7657,14 @@ var LinkPreview = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$y,
+      prefix: CLASSNAME$z,
       size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
       theme: theme
     }))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$y, "__wrapper")
+    className: "".concat(CLASSNAME$z, "__wrapper")
   }, thumbnailProps && React.createElement("div", {
-    className: "".concat(CLASSNAME$y, "__thumbnail")
+    className: "".concat(CLASSNAME$z, "__thumbnail")
   }, React.createElement(Thumbnail, _extends({}, thumbnailProps, {
     linkAs: linkAs,
     linkProps: _objectSpread2({}, linkProps, {
@@ -7582,9 +7676,9 @@ var LinkPreview = forwardRef(function (props, ref) {
     aspectRatio: AspectRatio.free,
     fillHeight: true
   }))), React.createElement("div", {
-    className: "".concat(CLASSNAME$y, "__container")
+    className: "".concat(CLASSNAME$z, "__container")
   }, title && React.createElement(TitleHeading, {
-    className: "".concat(CLASSNAME$y, "__title")
+    className: "".concat(CLASSNAME$z, "__title")
   }, React.createElement(Link, _extends({}, linkProps, {
     linkAs: linkAs,
     target: "_blank",
@@ -7592,12 +7686,12 @@ var LinkPreview = forwardRef(function (props, ref) {
     color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
     colorVariant: ColorVariant.N
   }), title)), description && React.createElement("p", {
-    className: "".concat(CLASSNAME$y, "__description")
+    className: "".concat(CLASSNAME$z, "__description")
   }, description), React.createElement("div", {
-    className: "".concat(CLASSNAME$y, "__link")
+    className: "".concat(CLASSNAME$z, "__link")
   }, React.createElement(Link, _extends({}, linkProps, {
     linkAs: linkAs,
-    className: classnames("".concat(CLASSNAME$y, "__link"), linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
+    className: classnames("".concat(CLASSNAME$z, "__link"), linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
     target: "_blank",
     href: link,
     color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -7606,9 +7700,9 @@ var LinkPreview = forwardRef(function (props, ref) {
     tabIndex: title ? '-1' : undefined
   }), link)))));
 });
-LinkPreview.displayName = COMPONENT_NAME$B;
-LinkPreview.className = CLASSNAME$y;
-LinkPreview.defaultProps = DEFAULT_PROPS$s;
+LinkPreview.displayName = COMPONENT_NAME$C;
+LinkPreview.className = CLASSNAME$z;
+LinkPreview.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Defines the props of the component.
@@ -7617,12 +7711,12 @@ LinkPreview.defaultProps = DEFAULT_PROPS$s;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$C = 'ListDivider';
+var COMPONENT_NAME$D = 'ListDivider';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$z = getRootClassName(COMPONENT_NAME$C);
+var CLASSNAME$A = getRootClassName(COMPONENT_NAME$D);
 /**
  * ListDivider component.
  *
@@ -7639,12 +7733,12 @@ var ListDivider = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$z
+      prefix: CLASSNAME$A
     }))
   }));
 });
-ListDivider.displayName = COMPONENT_NAME$C;
-ListDivider.className = CLASSNAME$z;
+ListDivider.displayName = COMPONENT_NAME$D;
+ListDivider.className = CLASSNAME$A;
 
 /**
  * Defines the props of the component.
@@ -7653,12 +7747,12 @@ ListDivider.className = CLASSNAME$z;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$D = 'ListSubheader';
+var COMPONENT_NAME$E = 'ListSubheader';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$A = getRootClassName(COMPONENT_NAME$D);
+var CLASSNAME$B = getRootClassName(COMPONENT_NAME$E);
 /**
  * ListSubheader component.
  *
@@ -7676,12 +7770,12 @@ var ListSubheader = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$A
+      prefix: CLASSNAME$B
     }))
   }), children);
 });
-ListSubheader.displayName = COMPONENT_NAME$D;
-ListSubheader.className = CLASSNAME$A;
+ListSubheader.displayName = COMPONENT_NAME$E;
+ListSubheader.className = CLASSNAME$B;
 
 var _CONFIG$1;
 /**
@@ -7691,12 +7785,12 @@ var _CONFIG$1;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$E = 'Message';
+var COMPONENT_NAME$F = 'Message';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$B = getRootClassName(COMPONENT_NAME$E);
+var CLASSNAME$C = getRootClassName(COMPONENT_NAME$F);
 /**
  * Associative map from message kind to color and icon.
  */
@@ -7739,19 +7833,19 @@ var Message = forwardRef(function (props, ref) {
     className: classnames(className, handleBasicClasses({
       color: color,
       hasBackground: hasBackground,
-      prefix: CLASSNAME$B
+      prefix: CLASSNAME$C
     }))
   }, forwardedProps), (customIcon || icon) && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$B, "__icon"),
+    className: "".concat(CLASSNAME$C, "__icon"),
     icon: customIcon || icon,
     size: Size.xs,
     color: color
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$B, "__text")
+    className: "".concat(CLASSNAME$C, "__text")
   }, children));
 });
-Message.displayName = COMPONENT_NAME$E;
-Message.className = CLASSNAME$B;
+Message.displayName = COMPONENT_NAME$F;
+Message.className = CLASSNAME$C;
 
 /**
  * Defines the props of the component.
@@ -7760,17 +7854,17 @@ Message.className = CLASSNAME$B;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$F = 'Mosaic';
+var COMPONENT_NAME$G = 'Mosaic';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$C = getRootClassName(COMPONENT_NAME$F);
+var CLASSNAME$D = getRootClassName(COMPONENT_NAME$G);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$t = {
+var DEFAULT_PROPS$u = {
   theme: Theme.light
 };
 /**
@@ -7803,11 +7897,11 @@ var Mosaic = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$C,
+      prefix: CLASSNAME$D,
       theme: theme
-    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$C, "--has-1-thumbnail"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 1), _defineProperty(_classNames, "".concat(CLASSNAME$C, "--has-2-thumbnails"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 2), _defineProperty(_classNames, "".concat(CLASSNAME$C, "--has-3-thumbnails"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 3), _defineProperty(_classNames, "".concat(CLASSNAME$C, "--has-4-thumbnails"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) >= 4), _classNames))
+    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$D, "--has-1-thumbnail"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 1), _defineProperty(_classNames, "".concat(CLASSNAME$D, "--has-2-thumbnails"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 2), _defineProperty(_classNames, "".concat(CLASSNAME$D, "--has-3-thumbnails"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 3), _defineProperty(_classNames, "".concat(CLASSNAME$D, "--has-4-thumbnails"), (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) >= 4), _classNames))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$C, "__wrapper")
+    className: "".concat(CLASSNAME$D, "__wrapper")
   }, take(thumbnails, 4).map(function (thumbnail, index) {
     var image = thumbnail.image,
         onClick = thumbnail.onClick,
@@ -7816,7 +7910,7 @@ var Mosaic = forwardRef(function (props, ref) {
 
     return React.createElement("div", {
       key: index,
-      className: "".concat(CLASSNAME$C, "__thumbnail")
+      className: "".concat(CLASSNAME$D, "__thumbnail")
     }, React.createElement(Thumbnail, _extends({}, thumbnailProps, {
       align: align || Alignment.left,
       image: image,
@@ -7825,13 +7919,13 @@ var Mosaic = forwardRef(function (props, ref) {
       fillHeight: true,
       onClick: (handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(index, onClick)) || onClick
     })), thumbnails.length > 4 && index === 3 && React.createElement("div", {
-      className: "".concat(CLASSNAME$C, "__overlay")
+      className: "".concat(CLASSNAME$D, "__overlay")
     }, React.createElement("span", null, "+", thumbnails.length - 4)));
   })));
 });
-Mosaic.displayName = COMPONENT_NAME$F;
-Mosaic.className = CLASSNAME$C;
-Mosaic.defaultProps = DEFAULT_PROPS$t;
+Mosaic.displayName = COMPONENT_NAME$G;
+Mosaic.className = CLASSNAME$D;
+Mosaic.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Notification icon and colors according to their type.
@@ -7863,17 +7957,17 @@ var NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$G = 'Notification';
+var COMPONENT_NAME$H = 'Notification';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$D = getRootClassName(COMPONENT_NAME$G);
+var CLASSNAME$E = getRootClassName(COMPONENT_NAME$H);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$u = {
+var DEFAULT_PROPS$v = {
   theme: Theme.light,
   zIndex: 9999
 };
@@ -7928,30 +8022,30 @@ var Notification = forwardRef(function (props, ref) {
       color: color,
       hasAction: hasAction,
       isHidden: !isOpen,
-      prefix: CLASSNAME$D
+      prefix: CLASSNAME$E
     })),
     onClick: onClick,
     style: {
       zIndex: zIndex
     }
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$D, "__icon")
+    className: "".concat(CLASSNAME$E, "__icon")
   }, React.createElement(Icon, {
     icon: icon,
     size: Size.s
   })), React.createElement("div", {
-    className: "".concat(CLASSNAME$D, "__content")
+    className: "".concat(CLASSNAME$E, "__content")
   }, content), hasAction && React.createElement("div", {
-    className: "".concat(CLASSNAME$D, "__action")
+    className: "".concat(CLASSNAME$E, "__action")
   }, React.createElement(Button, {
     emphasis: Emphasis.medium,
     theme: theme,
     onClick: handleCallback
   }, React.createElement("span", null, actionLabel)))), document.body) : null;
 });
-Notification.displayName = COMPONENT_NAME$G;
-Notification.className = CLASSNAME$D;
-Notification.defaultProps = DEFAULT_PROPS$u;
+Notification.displayName = COMPONENT_NAME$H;
+Notification.className = CLASSNAME$E;
+Notification.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Defines the props of the component.
@@ -7960,17 +8054,17 @@ Notification.defaultProps = DEFAULT_PROPS$u;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$H = 'PostBlock';
+var COMPONENT_NAME$I = 'PostBlock';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$E = getRootClassName(COMPONENT_NAME$H);
+var CLASSNAME$F = getRootClassName(COMPONENT_NAME$I);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$v = {
+var DEFAULT_PROPS$w = {
   orientation: Orientation.horizontal,
   theme: Theme.light
 };
@@ -8000,44 +8094,44 @@ var PostBlock = forwardRef(function (props, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$E,
+      prefix: CLASSNAME$F,
       orientation: orientation,
       theme: theme
     }))
   }, forwardedProps), thumbnailProps && React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__thumbnail")
+    className: "".concat(CLASSNAME$F, "__thumbnail")
   }, React.createElement(Thumbnail, _extends({}, thumbnailProps, {
     theme: theme,
     variant: ThumbnailVariant.rounded
   }))), React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__wrapper")
+    className: "".concat(CLASSNAME$F, "__wrapper")
   }, author && React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__author")
+    className: "".concat(CLASSNAME$F, "__author")
   }, author), title && React.createElement("button", {
     type: "button",
-    className: "".concat(CLASSNAME$E, "__title"),
+    className: "".concat(CLASSNAME$F, "__title"),
     onClick: onClick
   }, title), meta && React.createElement("span", {
-    className: "".concat(CLASSNAME$E, "__meta")
+    className: "".concat(CLASSNAME$F, "__meta")
   }, meta), isObject(text) && text.__html ? // eslint-disable-next-line react/no-danger
   React.createElement("p", {
     dangerouslySetInnerHTML: text,
-    className: "".concat(CLASSNAME$E, "__text")
+    className: "".concat(CLASSNAME$F, "__text")
   }) : React.createElement("p", {
-    className: "".concat(CLASSNAME$E, "__text")
+    className: "".concat(CLASSNAME$F, "__text")
   }, text), attachments && React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__attachments")
+    className: "".concat(CLASSNAME$F, "__attachments")
   }, attachments), (tags || actions) && React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__toolbar")
+    className: "".concat(CLASSNAME$F, "__toolbar")
   }, tags && React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__tags")
+    className: "".concat(CLASSNAME$F, "__tags")
   }, tags), actions && React.createElement("div", {
-    className: "".concat(CLASSNAME$E, "__actions")
+    className: "".concat(CLASSNAME$F, "__actions")
   }, actions))));
 });
-PostBlock.displayName = COMPONENT_NAME$H;
-PostBlock.className = CLASSNAME$E;
-PostBlock.defaultProps = DEFAULT_PROPS$v;
+PostBlock.displayName = COMPONENT_NAME$I;
+PostBlock.className = CLASSNAME$F;
+PostBlock.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Progress variants.
@@ -8051,17 +8145,17 @@ var ProgressVariant = {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$I = 'Progress';
+var COMPONENT_NAME$J = 'Progress';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$F = getRootClassName(COMPONENT_NAME$I);
+var CLASSNAME$G = getRootClassName(COMPONENT_NAME$J);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$w = {
+var DEFAULT_PROPS$x = {
   theme: Theme.light,
   variant: ProgressVariant.circular
 };
@@ -8083,12 +8177,12 @@ var Progress = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$F,
+      prefix: CLASSNAME$G,
       theme: theme,
       variant: variant
     }))
   }), React.createElement("div", {
-    className: classnames("".concat(CLASSNAME$F, "-").concat(variant))
+    className: classnames("".concat(CLASSNAME$G, "-").concat(variant))
   }, variant === ProgressVariant.circular && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "lumx-progress-circular__double-bounce1"
   }), React.createElement("div", {
@@ -8109,9 +8203,9 @@ var Progress = forwardRef(function (props, ref) {
     className: "lumx-progress-linear__line2"
   }))));
 });
-Progress.displayName = COMPONENT_NAME$I;
-Progress.className = CLASSNAME$F;
-Progress.defaultProps = DEFAULT_PROPS$w;
+Progress.displayName = COMPONENT_NAME$J;
+Progress.className = CLASSNAME$G;
+Progress.defaultProps = DEFAULT_PROPS$x;
 
 var INIT_STATE = {
   isLazy: true,
@@ -8252,7 +8346,7 @@ var useTabProviderContextState = function useTabProviderContextState() {
   return context === null || context === void 0 ? void 0 : context[0];
 };
 
-var DEFAULT_PROPS$x = {
+var DEFAULT_PROPS$y = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -8301,7 +8395,7 @@ var ProgressTrackerProvider = function ProgressTrackerProvider(props) {
     value: [state, dispatch]
   }, children);
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$x;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$y;
 
 var useRovingTabIndex = function useRovingTabIndex(_ref) {
   var parentRef = _ref.parentRef,
@@ -8392,17 +8486,17 @@ var useRovingTabIndex = function useRovingTabIndex(_ref) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$J = 'ProgressTracker';
+var COMPONENT_NAME$K = 'ProgressTracker';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$G = getRootClassName(COMPONENT_NAME$J);
+var CLASSNAME$H = getRootClassName(COMPONENT_NAME$K);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$y = {};
+var DEFAULT_PROPS$z = {};
 /**
  * ProgressTracker component.
  *
@@ -8436,20 +8530,20 @@ var ProgressTracker = forwardRef(function (props, ref) {
     ref: mergeRefs(ref, stepListRef)
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$G
+      prefix: CLASSNAME$H
     }))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$G, "__steps"),
+    className: "".concat(CLASSNAME$H, "__steps"),
     role: "tablist",
     "aria-label": ariaLabel
   }, children), React.createElement("div", {
-    className: "".concat(CLASSNAME$G, "__background-bar"),
+    className: "".concat(CLASSNAME$H, "__background-bar"),
     style: {
       left: "".concat(backgroundPosition, "%"),
       right: "".concat(backgroundPosition, "%")
     }
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$G, "__foreground-bar"),
+    className: "".concat(CLASSNAME$H, "__foreground-bar"),
     style: {
       left: "".concat(backgroundPosition, "%"),
       right: "".concat(backgroundPosition, "%"),
@@ -8457,9 +8551,9 @@ var ProgressTracker = forwardRef(function (props, ref) {
     }
   }));
 });
-ProgressTracker.displayName = COMPONENT_NAME$J;
-ProgressTracker.className = CLASSNAME$G;
-ProgressTracker.defaultProps = DEFAULT_PROPS$y;
+ProgressTracker.displayName = COMPONENT_NAME$K;
+ProgressTracker.className = CLASSNAME$H;
+ProgressTracker.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Defines the props of the component.
@@ -8468,17 +8562,17 @@ ProgressTracker.defaultProps = DEFAULT_PROPS$y;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$K = 'ProgressTrackerStep';
+var COMPONENT_NAME$L = 'ProgressTrackerStep';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$H = getRootClassName(COMPONENT_NAME$K);
+var CLASSNAME$I = getRootClassName(COMPONENT_NAME$L);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$z = {};
+var DEFAULT_PROPS$A = {};
 /**
  * ProgressTrackerStep component.
  *
@@ -8550,7 +8644,7 @@ var ProgressTrackerStep = forwardRef(function (props, ref) {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$H,
+      prefix: CLASSNAME$I,
       hasError: hasError,
       isActive: isActive,
       isClickable: state && !isDisabled,
@@ -8565,20 +8659,20 @@ var ProgressTrackerStep = forwardRef(function (props, ref) {
     "aria-selected": isActive,
     "aria-controls": state === null || state === void 0 ? void 0 : state.tabPanelId
   }), React.createElement(Icon, {
-    className: "".concat(CLASSNAME$H, "__state"),
+    className: "".concat(CLASSNAME$I, "__state"),
     icon: getIcon(),
     size: Size.s
   }), React.createElement(InputLabel, {
     htmlFor: (state === null || state === void 0 ? void 0 : state.tabId) || '',
-    className: "".concat(CLASSNAME$H, "__label")
+    className: "".concat(CLASSNAME$I, "__label")
   }, label), helper && React.createElement(InputHelper, {
     kind: hasError ? Kind.error : Kind.info,
-    className: "".concat(CLASSNAME$H, "__helper")
+    className: "".concat(CLASSNAME$I, "__helper")
   }, helper));
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$K;
-ProgressTrackerStep.className = CLASSNAME$H;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$z;
+ProgressTrackerStep.displayName = COMPONENT_NAME$L;
+ProgressTrackerStep.className = CLASSNAME$I;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$A;
 
 /**
  * Defines the props of the component.
@@ -8587,17 +8681,17 @@ ProgressTrackerStep.defaultProps = DEFAULT_PROPS$z;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$L = 'ProgressTrackerStepPanel';
+var COMPONENT_NAME$M = 'ProgressTrackerStepPanel';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$I = "".concat(CSS_PREFIX, "-step-panel");
+var CLASSNAME$J = "".concat(CSS_PREFIX, "-step-panel");
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$A = {};
+var DEFAULT_PROPS$B = {};
 /**
  * ProgressTrackerStepPanel component.
  *
@@ -8622,7 +8716,7 @@ var ProgressTrackerStepPanel = forwardRef(function (props, ref) {
   }, forwardedProps, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$I,
+      prefix: CLASSNAME$J,
       isActive: isActive
     })),
     role: "tabpanel",
@@ -8630,9 +8724,9 @@ var ProgressTrackerStepPanel = forwardRef(function (props, ref) {
     "aria-labelledby": state === null || state === void 0 ? void 0 : state.tabId
   }), (!(state === null || state === void 0 ? void 0 : state.isLazy) || isActive) && children);
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$L;
-ProgressTrackerStepPanel.className = CLASSNAME$I;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$A;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$M;
+ProgressTrackerStepPanel.className = CLASSNAME$J;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Defines the props of the component.
@@ -8641,17 +8735,17 @@ ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$A;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$M = 'RadioButton';
+var COMPONENT_NAME$N = 'RadioButton';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$J = getRootClassName(COMPONENT_NAME$M);
+var CLASSNAME$K = getRootClassName(COMPONENT_NAME$N);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$B = {
+var DEFAULT_PROPS$C = {
   theme: Theme.light
 };
 /**
@@ -8681,7 +8775,7 @@ var RadioButton = forwardRef(function (props, ref) {
       forwardedProps = _objectWithoutProperties(props, ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value"]);
 
   var radioButtonId = useMemo(function () {
-    return id || "".concat(CLASSNAME$J.toLowerCase(), "-").concat(uid());
+    return id || "".concat(CLASSNAME$K.toLowerCase(), "-").concat(uid());
   }, [id]);
 
   var handleChange = function handleChange(event) {
@@ -8697,14 +8791,14 @@ var RadioButton = forwardRef(function (props, ref) {
       isChecked: isChecked,
       isDisabled: isDisabled,
       isUnchecked: !isChecked,
-      prefix: CLASSNAME$J,
+      prefix: CLASSNAME$K,
       theme: theme
     }))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$J, "__input-wrapper")
+    className: "".concat(CLASSNAME$K, "__input-wrapper")
   }, React.createElement("input", {
     ref: inputRef,
-    className: "".concat(CLASSNAME$J, "__input-native"),
+    className: "".concat(CLASSNAME$K, "__input-native"),
     disabled: isDisabled,
     id: radioButtonId,
     tabIndex: isDisabled ? -1 : 0,
@@ -8714,25 +8808,25 @@ var RadioButton = forwardRef(function (props, ref) {
     checked: isChecked,
     onChange: handleChange
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$J, "__input-placeholder")
+    className: "".concat(CLASSNAME$K, "__input-placeholder")
   }, React.createElement("div", {
-    className: "".concat(CLASSNAME$J, "__input-background")
+    className: "".concat(CLASSNAME$K, "__input-background")
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$J, "__input-indicator")
+    className: "".concat(CLASSNAME$K, "__input-indicator")
   }))), React.createElement("div", {
-    className: "".concat(CLASSNAME$J, "__content")
+    className: "".concat(CLASSNAME$K, "__content")
   }, label && React.createElement(InputLabel, {
     htmlFor: radioButtonId,
     theme: theme,
-    className: "".concat(CLASSNAME$J, "__label")
+    className: "".concat(CLASSNAME$K, "__label")
   }, label), helper && React.createElement(InputHelper, {
     theme: theme,
-    className: "".concat(CLASSNAME$J, "__helper")
+    className: "".concat(CLASSNAME$K, "__helper")
   }, helper)));
 });
-RadioButton.displayName = COMPONENT_NAME$M;
-RadioButton.className = CLASSNAME$J;
-RadioButton.defaultProps = DEFAULT_PROPS$B;
+RadioButton.displayName = COMPONENT_NAME$N;
+RadioButton.className = CLASSNAME$K;
+RadioButton.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * Defines the props of the component.
@@ -8741,12 +8835,12 @@ RadioButton.defaultProps = DEFAULT_PROPS$B;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$N = 'RadioGroup';
+var COMPONENT_NAME$O = 'RadioGroup';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$K = getRootClassName(COMPONENT_NAME$N);
+var CLASSNAME$L = getRootClassName(COMPONENT_NAME$O);
 /**
  * RadioGroup component.
  *
@@ -8764,12 +8858,12 @@ var RadioGroup = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$K
+      prefix: CLASSNAME$L
     }))
   }), children);
 });
-RadioGroup.displayName = COMPONENT_NAME$N;
-RadioGroup.className = CLASSNAME$K;
+RadioGroup.displayName = COMPONENT_NAME$O;
+RadioGroup.className = CLASSNAME$L;
 
 /**
  * Listen on element focus to store the focus status.
@@ -8816,13 +8910,13 @@ var SelectVariant = {
 
 /** The display name of the component. */
 
-var COMPONENT_NAME$O = 'Select';
+var COMPONENT_NAME$P = 'Select';
 /** The default class name and classes prefix for this component. */
 
-var CLASSNAME$L = getRootClassName(COMPONENT_NAME$O);
+var CLASSNAME$M = getRootClassName(COMPONENT_NAME$P);
 /** The default value of props. */
 
-var DEFAULT_PROPS$C = {
+var DEFAULT_PROPS$D = {
   theme: Theme.light,
   variant: SelectVariant.input
 };
@@ -8850,10 +8944,10 @@ var WithSelectContext = function WithSelectContext(SelectElement, _ref, ref) {
       onInputClick = _ref.onInputClick,
       placeholder = _ref.placeholder,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_PROPS$C.theme : _ref$theme,
+      theme = _ref$theme === void 0 ? DEFAULT_PROPS$D.theme : _ref$theme,
       value = _ref.value,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? DEFAULT_PROPS$C.variant : _ref$variant,
+      variant = _ref$variant === void 0 ? DEFAULT_PROPS$D.variant : _ref$variant,
       forwardedProps = _objectWithoutProperties(_ref, ["children", "className", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"]);
 
   var selectId = useMemo(function () {
@@ -8891,7 +8985,7 @@ var WithSelectContext = function WithSelectContext(SelectElement, _ref, ref) {
       isFocus: isFocus,
       isOpen: isOpen,
       isValid: isValid,
-      prefix: CLASSNAME$L,
+      prefix: CLASSNAME$M,
       theme: theme === Theme.light ? Theme.light : Theme.dark
     }))
   }, React.createElement(SelectElement, _extends({}, forwardedProps, {
@@ -8921,24 +9015,24 @@ var WithSelectContext = function WithSelectContext(SelectElement, _ref, ref) {
     onClose: onClose,
     onInfiniteScroll: onInfiniteScroll
   }, children), hasError && error && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME$L, "__helper"),
+    className: "".concat(CLASSNAME$M, "__helper"),
     kind: Kind.error,
     theme: theme
   }, error), helper && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME$L, "__helper"),
+    className: "".concat(CLASSNAME$M, "__helper"),
     theme: theme
   }, helper));
 };
 
 /** The display name of the component. */
 
-var COMPONENT_NAME$P = 'Select';
+var COMPONENT_NAME$Q = 'Select';
 /** The default class name and classes prefix for this component. */
 
-var CLASSNAME$M = getRootClassName(COMPONENT_NAME$P);
+var CLASSNAME$N = getRootClassName(COMPONENT_NAME$Q);
 /** The default value of props. */
 
-var DEFAULT_PROPS$D = {
+var DEFAULT_PROPS$E = {
   selectedValueRender: function selectedValueRender(choice) {
     return choice;
   }
@@ -8975,34 +9069,34 @@ var SelectField = function SelectField(_ref) {
       forwardedProps = _objectWithoutProperties(_ref, ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasError", "hasInputClear", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedValueRender", "theme", "value", "variant"]);
 
   return React.createElement(React.Fragment, null, variant === SelectVariant.input && React.createElement(React.Fragment, null, label && React.createElement("div", {
-    className: "".concat(CLASSNAME$M, "__header")
+    className: "".concat(CLASSNAME$N, "__header")
   }, React.createElement(InputLabel, {
     htmlFor: id,
-    className: "".concat(CLASSNAME$M, "__label"),
+    className: "".concat(CLASSNAME$N, "__label"),
     isRequired: isRequired,
     theme: theme
   }, label)), React.createElement("div", _extends({
     ref: anchorRef,
     id: id,
-    className: "".concat(CLASSNAME$M, "__wrapper"),
+    className: "".concat(CLASSNAME$N, "__wrapper"),
     onClick: onInputClick,
     onKeyDown: handleKeyboardNav,
     tabIndex: isDisabled ? undefined : 0,
     "aria-disabled": isDisabled || undefined
   }, forwardedProps), icon && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$M, "__input-icon"),
+    className: "".concat(CLASSNAME$N, "__input-icon"),
     color: theme === Theme.dark ? 'light' : undefined,
     icon: icon,
     size: Size.xs
   }), React.createElement("div", {
-    className: classnames(["".concat(CLASSNAME$M, "__input-native"), isEmpty && placeholder && "".concat(CLASSNAME$M, "__input-native--placeholder")])
+    className: classnames(["".concat(CLASSNAME$N, "__input-native"), isEmpty && placeholder && "".concat(CLASSNAME$N, "__input-native--placeholder")])
   }, !isEmpty && React.createElement("span", null, selectedValueRender === null || selectedValueRender === void 0 ? void 0 : selectedValueRender(value)), isEmpty && placeholder && React.createElement("span", null, placeholder)), (isValid || hasError) && React.createElement("div", {
-    className: "".concat(CLASSNAME$M, "__input-validity")
+    className: "".concat(CLASSNAME$N, "__input-validity")
   }, React.createElement(Icon, {
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
   })), hasInputClear && clearButtonProps && React.createElement(IconButton, _extends({}, clearButtonProps, {
-    className: "".concat(CLASSNAME$M, "__input-clear"),
+    className: "".concat(CLASSNAME$N, "__input-clear"),
     icon: mdiCloseCircle,
     emphasis: Emphasis.low,
     size: Size.s,
@@ -9010,7 +9104,7 @@ var SelectField = function SelectField(_ref) {
     onClick: onClear,
     onKeyDown: stopPropagation
   })), React.createElement("div", {
-    className: "".concat(CLASSNAME$M, "__input-indicator")
+    className: "".concat(CLASSNAME$N, "__input-indicator")
   }, React.createElement(Icon, {
     icon: mdiMenuDown,
     size: Size.s
@@ -9043,27 +9137,27 @@ var Select = forwardRef(function (props, ref) {
     className: classnames(props.className, handleBasicClasses({
       hasInputClear: hasInputClear,
       hasUnique: !props.isEmpty,
-      prefix: CLASSNAME$M
+      prefix: CLASSNAME$N
     })),
     hasInputClear: hasInputClear,
     isEmpty: isEmpty$1
   }), ref);
 });
-Select.displayName = COMPONENT_NAME$P;
-Select.className = CLASSNAME$M;
-Select.defaultProps = DEFAULT_PROPS$D;
-Select.className = CLASSNAME$M;
+Select.displayName = COMPONENT_NAME$Q;
+Select.className = CLASSNAME$N;
+Select.defaultProps = DEFAULT_PROPS$E;
+Select.className = CLASSNAME$N;
 
 /** Defines the props of the component. */
 
 /** The display name of the component. */
-var COMPONENT_NAME$Q = 'Select';
+var COMPONENT_NAME$R = 'Select';
 /** The default class name and classes prefix for this component. */
 
-var CLASSNAME$N = getRootClassName(COMPONENT_NAME$Q);
+var CLASSNAME$O = getRootClassName(COMPONENT_NAME$R);
 /** The default value of props. */
 
-var DEFAULT_PROPS$E = {
+var DEFAULT_PROPS$F = {
   selectedChipRender: function selectedChipRender(choice, index, onClear, isDisabled, theme) {
     var onClick = function onClick(event) {
       return onClear && onClear(event, choice);
@@ -9108,38 +9202,38 @@ var SelectMultipleField = function SelectMultipleField(_ref) {
       forwardedProps = _objectWithoutProperties(_ref, ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id", "isDisabled", "isEmpty", "isRequired", "isValid", "label", "onClear", "onInputClick", "placeholder", "selectedChipRender", "selectedValueRender", "theme", "value", "variant"]);
 
   return React.createElement(React.Fragment, null, variant === SelectVariant.input && React.createElement(React.Fragment, null, label && React.createElement("div", {
-    className: "".concat(CLASSNAME$N, "__header")
+    className: "".concat(CLASSNAME$O, "__header")
   }, React.createElement(InputLabel, {
     htmlFor: id,
-    className: "".concat(CLASSNAME$N, "__label"),
+    className: "".concat(CLASSNAME$O, "__label"),
     isRequired: isRequired,
     theme: theme
   }, label)), React.createElement("div", _extends({
     ref: anchorRef,
     id: id,
-    className: "".concat(CLASSNAME$N, "__wrapper"),
+    className: "".concat(CLASSNAME$O, "__wrapper"),
     onClick: onInputClick,
     onKeyDown: handleKeyboardNav,
     tabIndex: isDisabled ? undefined : 0,
     "aria-disabled": isDisabled || undefined
   }, forwardedProps), icon && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$N, "__input-icon"),
+    className: "".concat(CLASSNAME$O, "__input-icon"),
     color: theme === Theme.dark ? 'light' : undefined,
     icon: icon,
     size: Size.xs
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$N, "__chips")
+    className: "".concat(CLASSNAME$O, "__chips")
   }, !isEmpty && value.map(function (val, index) {
     return selectedChipRender === null || selectedChipRender === void 0 ? void 0 : selectedChipRender(val, index, onClear, isDisabled, theme);
   })), isEmpty && placeholder && React.createElement("div", {
-    className: classnames(["".concat(CLASSNAME$N, "__input-native"), "".concat(CLASSNAME$N, "__input-native--placeholder")])
+    className: classnames(["".concat(CLASSNAME$O, "__input-native"), "".concat(CLASSNAME$O, "__input-native--placeholder")])
   }, React.createElement("span", null, placeholder)), (isValid || hasError) && React.createElement("div", {
-    className: "".concat(CLASSNAME$N, "__input-validity")
+    className: "".concat(CLASSNAME$O, "__input-validity")
   }, React.createElement(Icon, {
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
   })), React.createElement("div", {
-    className: "".concat(CLASSNAME$N, "__input-indicator")
+    className: "".concat(CLASSNAME$O, "__input-indicator")
   }, React.createElement(Icon, {
     icon: mdiMenuDown,
     size: Size.s
@@ -9168,15 +9262,15 @@ var SelectMultiple = forwardRef(function (props, ref) {
   return WithSelectContext(SelectMultipleField, _objectSpread2({}, props, {
     className: classnames(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
-      prefix: CLASSNAME$N
+      prefix: CLASSNAME$O
     })),
     isEmpty: props.value.length === 0,
     isMultiple: true
   }), ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$Q;
-SelectMultiple.className = CLASSNAME$N;
-SelectMultiple.defaultProps = DEFAULT_PROPS$E;
+SelectMultiple.displayName = COMPONENT_NAME$R;
+SelectMultiple.className = CLASSNAME$O;
+SelectMultiple.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Defines the props of the component.
@@ -9185,12 +9279,12 @@ SelectMultiple.defaultProps = DEFAULT_PROPS$E;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$R = 'SideNavigation';
+var COMPONENT_NAME$S = 'SideNavigation';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$O = getRootClassName(COMPONENT_NAME$R);
+var CLASSNAME$P = getRootClassName(COMPONENT_NAME$S);
 /**
  * SideNavigation component.
  *
@@ -9210,12 +9304,12 @@ var SideNavigation = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, theme === Theme.dark && 'lumx-color-font-light-N', handleBasicClasses({
-      prefix: CLASSNAME$O
+      prefix: CLASSNAME$P
     }))
   }), content);
 });
-SideNavigation.displayName = COMPONENT_NAME$R;
-SideNavigation.className = CLASSNAME$O;
+SideNavigation.displayName = COMPONENT_NAME$S;
+SideNavigation.className = CLASSNAME$P;
 
 /**
  * Defines the props of the component.
@@ -9224,17 +9318,17 @@ SideNavigation.className = CLASSNAME$O;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$S = 'SideNavigationItem';
+var COMPONENT_NAME$T = 'SideNavigationItem';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$P = getRootClassName(COMPONENT_NAME$S);
+var CLASSNAME$Q = getRootClassName(COMPONENT_NAME$T);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$F = {
+var DEFAULT_PROPS$G = {
   emphasis: Emphasis.high,
   closeMode: 'unmount'
 };
@@ -9274,22 +9368,22 @@ var SideNavigationItem = forwardRef(function (props, ref) {
       emphasis: emphasis,
       isOpen: showChildren,
       isSelected: isSelected,
-      prefix: CLASSNAME$P
+      prefix: CLASSNAME$Q
     }))
   }), shouldSplitActions ? React.createElement("div", {
-    className: "".concat(CLASSNAME$P, "__wrapper")
+    className: "".concat(CLASSNAME$Q, "__wrapper")
   }, renderLink(_objectSpread2({
     linkAs: linkAs
   }, linkProps, {
-    className: "".concat(CLASSNAME$P, "__link"),
+    className: "".concat(CLASSNAME$Q, "__link"),
     onClick: onClick,
     tabIndex: 0
   }), icon && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$P, "__icon"),
+    className: "".concat(CLASSNAME$Q, "__icon"),
     icon: icon,
     size: Size.xs
   }), React.createElement("span", null, label)), React.createElement(IconButton, _extends({}, toggleButtonProps, {
-    className: "".concat(CLASSNAME$P, "__toggle"),
+    className: "".concat(CLASSNAME$Q, "__toggle"),
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     size: Size.m,
     emphasis: Emphasis.low,
@@ -9297,43 +9391,43 @@ var SideNavigationItem = forwardRef(function (props, ref) {
   }))) : renderLink(_objectSpread2({
     linkAs: linkAs
   }, linkProps, {
-    className: "".concat(CLASSNAME$P, "__link"),
+    className: "".concat(CLASSNAME$Q, "__link"),
     tabIndex: 0,
     onClick: onClick,
     onKeyDown: onClick ? onEnterPressed(onClick) : undefined
   }), icon && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$P, "__icon"),
+    className: "".concat(CLASSNAME$Q, "__icon"),
     icon: icon,
     size: Size.xs
   }), React.createElement("span", null, label), hasContent && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$P, "__chevron"),
+    className: "".concat(CLASSNAME$Q, "__chevron"),
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     size: Size.xs
   })), (closeMode === 'hide' || showChildren) && React.createElement("ul", {
-    className: "".concat(CLASSNAME$P, "__children")
+    className: "".concat(CLASSNAME$Q, "__children")
   }, content));
 });
-SideNavigationItem.displayName = COMPONENT_NAME$S;
-SideNavigationItem.className = CLASSNAME$P;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$F;
+SideNavigationItem.displayName = COMPONENT_NAME$T;
+SideNavigationItem.className = CLASSNAME$Q;
+SideNavigationItem.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * Defines the props of the component.
  */
 
-var DEFAULT_PROPS$G = {
+var DEFAULT_PROPS$H = {
   theme: Theme.light
 };
 /**
  * Component display name.
  */
 
-var COMPONENT_NAME$T = 'SkeletonCircle';
+var COMPONENT_NAME$U = 'SkeletonCircle';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$Q = getRootClassName(COMPONENT_NAME$T);
+var CLASSNAME$R = getRootClassName(COMPONENT_NAME$U);
 /**
  * SkeletonCircle component.
  *
@@ -9353,16 +9447,16 @@ var SkeletonCircle = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$Q,
+      prefix: CLASSNAME$R,
       size: size,
       color: color,
       theme: theme
     }))
   }));
 });
-SkeletonCircle.displayName = COMPONENT_NAME$T;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$G;
-SkeletonCircle.className = CLASSNAME$Q;
+SkeletonCircle.displayName = COMPONENT_NAME$U;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$H;
+SkeletonCircle.className = CLASSNAME$R;
 
 /**
  * Skeleton variants.
@@ -9373,7 +9467,7 @@ var SkeletonRectangleVariant = {
   rounded: 'rounded',
   pill: 'pill'
 };
-var DEFAULT_PROPS$H = {
+var DEFAULT_PROPS$I = {
   theme: Theme.light,
   variant: SkeletonRectangleVariant.squared
 };
@@ -9381,12 +9475,12 @@ var DEFAULT_PROPS$H = {
  * Component display name.
  */
 
-var COMPONENT_NAME$U = 'SkeletonRectangle';
+var COMPONENT_NAME$V = 'SkeletonRectangle';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$R = getRootClassName(COMPONENT_NAME$U);
+var CLASSNAME$S = getRootClassName(COMPONENT_NAME$V);
 /**
  * SkeletonRectangle component.
  *
@@ -9409,7 +9503,7 @@ var SkeletonRectangle = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$R,
+      prefix: CLASSNAME$S,
       aspectRatio: aspectRatio,
       height: aspectRatio ? undefined : height,
       theme: theme,
@@ -9418,30 +9512,30 @@ var SkeletonRectangle = forwardRef(function (props, ref) {
       color: color
     }))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$R, "__inner")
+    className: "".concat(CLASSNAME$S, "__inner")
   }));
 });
-SkeletonRectangle.displayName = COMPONENT_NAME$U;
-SkeletonRectangle.className = CLASSNAME$R;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$H;
+SkeletonRectangle.displayName = COMPONENT_NAME$V;
+SkeletonRectangle.className = CLASSNAME$S;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Defines the props of the component.
  */
 
-var DEFAULT_PROPS$I = {
+var DEFAULT_PROPS$J = {
   theme: Theme.light
 };
 /**
  * Component display name.
  */
 
-var COMPONENT_NAME$V = 'SkeletonTypography';
+var COMPONENT_NAME$W = 'SkeletonTypography';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$S = getRootClassName(COMPONENT_NAME$V);
+var CLASSNAME$T = getRootClassName(COMPONENT_NAME$W);
 /**
  * SkeletonTypography component.
  *
@@ -9462,7 +9556,7 @@ var SkeletonTypography = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$S,
+      prefix: CLASSNAME$T,
       theme: theme,
       typography: typography,
       color: color
@@ -9471,12 +9565,12 @@ var SkeletonTypography = forwardRef(function (props, ref) {
       width: width
     })
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$S, "__inner")
+    className: "".concat(CLASSNAME$T, "__inner")
   }));
 });
-SkeletonTypography.displayName = COMPONENT_NAME$V;
-SkeletonTypography.defaultProps = DEFAULT_PROPS$I;
-SkeletonTypography.className = CLASSNAME$S;
+SkeletonTypography.displayName = COMPONENT_NAME$W;
+SkeletonTypography.defaultProps = DEFAULT_PROPS$J;
+SkeletonTypography.className = CLASSNAME$T;
 
 var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 /**
@@ -9523,17 +9617,17 @@ var clamp = function clamp(value, min, max) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$W = 'Slider';
+var COMPONENT_NAME$X = 'Slider';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$T = getRootClassName(COMPONENT_NAME$W);
+var CLASSNAME$U = getRootClassName(COMPONENT_NAME$X);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$J = {
+var DEFAULT_PROPS$K = {
   precision: 0,
   steps: 0,
   theme: Theme.light
@@ -9738,7 +9832,7 @@ var Slider = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$T,
+      prefix: CLASSNAME$U,
       theme: theme,
       hasLabel: Boolean(label)
     })),
@@ -9747,31 +9841,31 @@ var Slider = forwardRef(function (props, ref) {
   }), label && React.createElement(InputLabel, {
     id: sliderLabelId,
     htmlFor: sliderId,
-    className: "".concat(CLASSNAME$T, "__label"),
+    className: "".concat(CLASSNAME$U, "__label"),
     theme: theme
   }, label), helper && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME$T, "__helper"),
+    className: "".concat(CLASSNAME$U, "__helper"),
     theme: theme
   }, helper), React.createElement("div", {
-    className: "".concat(CLASSNAME$T, "__ui-wrapper")
+    className: "".concat(CLASSNAME$U, "__ui-wrapper")
   }, !hideMinMaxLabel && React.createElement("span", {
-    className: "".concat(CLASSNAME$T, "__value-label ").concat(CLASSNAME$T, "__value-label--min")
+    className: "".concat(CLASSNAME$U, "__value-label ").concat(CLASSNAME$U, "__value-label--min")
   }, min), React.createElement("div", {
-    className: "".concat(CLASSNAME$T, "__wrapper"),
+    className: "".concat(CLASSNAME$U, "__wrapper"),
     ref: sliderRef
   }, React.createElement("div", {
-    className: "".concat(CLASSNAME$T, "__track ").concat(CLASSNAME$T, "__track--background")
+    className: "".concat(CLASSNAME$U, "__track ").concat(CLASSNAME$U, "__track--background")
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$T, "__track ").concat(CLASSNAME$T, "__track--active"),
+    className: "".concat(CLASSNAME$U, "__track ").concat(CLASSNAME$U, "__track--active"),
     style: {
       width: percentString
     }
   }), steps ? React.createElement("div", {
-    className: "".concat(CLASSNAME$T, "__ticks")
+    className: "".concat(CLASSNAME$U, "__ticks")
   }, availableSteps.map(function (step, idx) {
     return React.createElement("div", {
       key: "tick_".concat(idx),
-      className: "".concat(CLASSNAME$T, "__tick"),
+      className: "".concat(CLASSNAME$U, "__tick"),
       style: {
         left: "".concat(step * 100, "%")
       }
@@ -9781,19 +9875,19 @@ var Slider = forwardRef(function (props, ref) {
     "aria-labelledby": sliderLabelId,
     name: name,
     id: sliderId,
-    className: "".concat(CLASSNAME$T, "__handle"),
+    className: "".concat(CLASSNAME$U, "__handle"),
     style: {
       left: percentString
     },
     onKeyDown: handleKeyDown,
     disabled: isDisabled
   })), !hideMinMaxLabel && React.createElement("span", {
-    className: "".concat(CLASSNAME$T, "__value-label ").concat(CLASSNAME$T, "__value-label--max")
+    className: "".concat(CLASSNAME$U, "__value-label ").concat(CLASSNAME$U, "__value-label--max")
   }, max)));
 });
-Slider.displayName = COMPONENT_NAME$W;
-Slider.className = CLASSNAME$T;
-Slider.defaultProps = DEFAULT_PROPS$J;
+Slider.displayName = COMPONENT_NAME$X;
+Slider.className = CLASSNAME$U;
+Slider.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -10148,12 +10242,12 @@ var useSlideFocusManagement = function useSlideFocusManagement(_ref) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$X = 'SlideshowItemGroup';
+var COMPONENT_NAME$Y = 'SlideshowItemGroup';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$U = getRootClassName(COMPONENT_NAME$X);
+var CLASSNAME$V = getRootClassName(COMPONENT_NAME$Y);
 var buildSlideShowGroupId = function buildSlideShowGroupId(slidesId, index) {
   return "".concat(slidesId, "-slide-").concat(index);
 };
@@ -10183,14 +10277,14 @@ var SlideshowItemGroup = forwardRef(function (props, ref) {
     ref: mergeRefs(groupRef, ref),
     role: role,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$U
+      prefix: CLASSNAME$V
     })),
     "aria-roledescription": "slide",
     "aria-label": label
   }, forwardedProps), children);
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$X;
-SlideshowItemGroup.className = CLASSNAME$U;
+SlideshowItemGroup.displayName = COMPONENT_NAME$Y;
+SlideshowItemGroup.className = CLASSNAME$V;
 
 /**
  * Defines the props of the component.
@@ -10199,7 +10293,7 @@ SlideshowItemGroup.className = CLASSNAME$U;
 /**
  * Component default props.
  */
-var DEFAULT_PROPS$K = _objectSpread2({}, DEFAULT_OPTIONS$1, {
+var DEFAULT_PROPS$L = _objectSpread2({}, DEFAULT_OPTIONS$1, {
   theme: Theme.light
 });
 /**
@@ -10232,7 +10326,7 @@ var Slideshow = forwardRef(function (props, ref) {
 
   var _SlideshowControls$us = SlideshowControls.useSlideshowControls({
     activeIndex: activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS$K.activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS$L.activeIndex,
     autoPlay: Boolean(autoPlay),
     itemsCount: itemsCount,
     groupBy: groupBy,
@@ -10308,7 +10402,7 @@ var Slideshow = forwardRef(function (props, ref) {
   }, forwardedProps), children);
 });
 Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS$K;
+Slideshow.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Defines the props of the component.
@@ -10317,12 +10411,12 @@ Slideshow.defaultProps = DEFAULT_PROPS$K;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$Y = 'SlideshowItem';
+var COMPONENT_NAME$Z = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$V = getRootClassName(COMPONENT_NAME$Y);
+var CLASSNAME$W = getRootClassName(COMPONENT_NAME$Z);
 /**
  * SlideshowItem component.
  *
@@ -10339,12 +10433,12 @@ var SlideshowItem = forwardRef(function (props, ref) {
   return React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$V
+      prefix: CLASSNAME$W
     }))
   }, forwardedProps), children);
 });
-SlideshowItem.displayName = COMPONENT_NAME$Y;
-SlideshowItem.className = CLASSNAME$V;
+SlideshowItem.displayName = COMPONENT_NAME$Z;
+SlideshowItem.className = CLASSNAME$W;
 
 var isTouchDevice = function isTouchDevice() {
   return 'ontouchstart' in window;
@@ -10415,17 +10509,17 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$Z = 'SlideshowControls';
+var COMPONENT_NAME$_ = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$W = getRootClassName(COMPONENT_NAME$Z);
+var CLASSNAME$X = getRootClassName(COMPONENT_NAME$_);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$L = {
+var DEFAULT_PROPS$M = {
   activeIndex: 0,
   theme: Theme.light
 };
@@ -10494,20 +10588,20 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$W,
+      prefix: CLASSNAME$X,
       theme: theme
-    }), _defineProperty({}, "".concat(CLASSNAME$W, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
+    }), _defineProperty({}, "".concat(CLASSNAME$X, "--has-infinite-pagination"), slidesCount > PAGINATION_ITEMS_MAX))
   }), React.createElement(IconButton, _extends({}, previousButtonProps, {
     icon: mdiChevronLeft,
-    className: "".concat(CLASSNAME$W, "__navigation"),
+    className: "".concat(CLASSNAME$X, "__navigation"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onPreviousClick
   })), React.createElement("div", {
     ref: paginationRef,
-    className: "".concat(CLASSNAME$W, "__pagination")
+    className: "".concat(CLASSNAME$X, "__pagination")
   }, React.createElement("div", _extends({
-    className: "".concat(CLASSNAME$W, "__pagination-items"),
+    className: "".concat(CLASSNAME$X, "__pagination-items"),
     style: wrapperStyle,
     role: "tablist"
   }, paginationProps), useMemo(function () {
@@ -10526,7 +10620,7 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
       var ariaLabel = label || (paginationItemLabel === null || paginationItemLabel === void 0 ? void 0 : paginationItemLabel(index)) || "".concat(index + 1, " / ").concat(slidesCount);
       return React.createElement("button", _extends({
         className: classnames(handleBasicClasses({
-          prefix: "".concat(CLASSNAME$W, "__pagination-item"),
+          prefix: "".concat(CLASSNAME$X, "__pagination-item"),
           isActive: isActive,
           isOnEdge: isOnEdge,
           isOutRange: isOutRange
@@ -10544,20 +10638,20 @@ var InternalSlideshowControls = forwardRef(function (props, ref) {
     });
   }, [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick]))), playButtonProps ? React.createElement(IconButton, _extends({}, playButtonProps, {
     icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-    className: "".concat(CLASSNAME$W, "__play"),
+    className: "".concat(CLASSNAME$X, "__play"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low
   })) : null, React.createElement(IconButton, _extends({}, nextButtonProps, {
     icon: mdiChevronRight,
-    className: "".concat(CLASSNAME$W, "__navigation"),
+    className: "".concat(CLASSNAME$X, "__navigation"),
     color: theme === Theme.dark ? 'light' : 'dark',
     emphasis: Emphasis.low,
     onClick: onNextClick
   })));
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$Z;
-InternalSlideshowControls.className = CLASSNAME$W;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$L;
+InternalSlideshowControls.displayName = COMPONENT_NAME$_;
+InternalSlideshowControls.className = CLASSNAME$X;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS$M;
 var SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls: useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS$1
@@ -10566,12 +10660,12 @@ var SlideshowControls = Object.assign(InternalSlideshowControls, {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$_ = 'Slideshow';
+var COMPONENT_NAME$$ = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$X = getRootClassName(COMPONENT_NAME$_);
+var CLASSNAME$Y = getRootClassName(COMPONENT_NAME$$);
 /**
  * Slides component.
  *
@@ -10614,19 +10708,19 @@ var Slides = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$X,
+      prefix: CLASSNAME$Y,
       theme: theme
-    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$X, "--fill-height"), fillHeight), _defineProperty(_classNames, "".concat(CLASSNAME$X, "--group-by-").concat(groupBy), Boolean(groupBy)), _classNames)),
+    }), (_classNames = {}, _defineProperty(_classNames, "".concat(CLASSNAME$Y, "--fill-height"), fillHeight), _defineProperty(_classNames, "".concat(CLASSNAME$Y, "--group-by-").concat(groupBy), Boolean(groupBy)), _classNames)),
     "aria-roledescription": "carousel"
   }), React.createElement("div", {
     id: slidesId,
-    className: "".concat(CLASSNAME$X, "__slides"),
+    className: "".concat(CLASSNAME$Y, "__slides"),
     onMouseEnter: toggleAutoPlay,
     onMouseLeave: toggleAutoPlay,
     "aria-live": isAutoPlaying ? 'off' : 'polite'
   }, React.createElement("div", {
     ref: wrapperRef,
-    className: "".concat(CLASSNAME$X, "__wrapper"),
+    className: "".concat(CLASSNAME$Y, "__wrapper"),
     style: wrapperStyle
   }, groups.map(function (group, index) {
     return React.createElement(SlideshowItemGroup, {
@@ -10638,8 +10732,8 @@ var Slides = forwardRef(function (props, ref) {
     }, group);
   }))), afterSlides);
 });
-Slides.displayName = COMPONENT_NAME$_;
-Slides.className = CLASSNAME$X;
+Slides.displayName = COMPONENT_NAME$$;
+Slides.className = CLASSNAME$Y;
 
 /**
  * Defines the props of the component.
@@ -10648,17 +10742,17 @@ Slides.className = CLASSNAME$X;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$$ = 'Switch';
+var COMPONENT_NAME$10 = 'Switch';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$Y = getRootClassName(COMPONENT_NAME$$);
+var CLASSNAME$Z = getRootClassName(COMPONENT_NAME$10);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$M = {
+var DEFAULT_PROPS$N = {
   position: Alignment.left,
   theme: Theme.light
 };
@@ -10704,7 +10798,7 @@ var Switch = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$Y,
+      prefix: CLASSNAME$Z,
       isChecked: isChecked,
       isDisabled: isDisabled,
       position: position,
@@ -10713,12 +10807,12 @@ var Switch = forwardRef(function (props, ref) {
     })),
     "aria-disabled": isDisabled
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$Y, "__input-wrapper")
+    className: "".concat(CLASSNAME$Z, "__input-wrapper")
   }, React.createElement("input", _extends({
     type: "checkbox",
     role: "switch",
     id: switchId,
-    className: "".concat(CLASSNAME$Y, "__input-native"),
+    className: "".concat(CLASSNAME$Z, "__input-native"),
     name: name,
     value: value,
     disabled: isDisabled,
@@ -10726,25 +10820,25 @@ var Switch = forwardRef(function (props, ref) {
     "aria-checked": Boolean(isChecked),
     onChange: handleChange
   }, inputProps)), React.createElement("div", {
-    className: "".concat(CLASSNAME$Y, "__input-placeholder")
+    className: "".concat(CLASSNAME$Z, "__input-placeholder")
   }, React.createElement("div", {
-    className: "".concat(CLASSNAME$Y, "__input-background")
+    className: "".concat(CLASSNAME$Z, "__input-background")
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$Y, "__input-indicator")
+    className: "".concat(CLASSNAME$Z, "__input-indicator")
   }))), Children.count(children) > 0 && React.createElement("div", {
-    className: "".concat(CLASSNAME$Y, "__content")
+    className: "".concat(CLASSNAME$Z, "__content")
   }, React.createElement(InputLabel, {
     htmlFor: switchId,
     theme: theme,
-    className: "".concat(CLASSNAME$Y, "__label")
+    className: "".concat(CLASSNAME$Z, "__label")
   }, children), !isEmpty(helper) && React.createElement(InputHelper, {
     theme: theme,
-    className: "".concat(CLASSNAME$Y, "__helper")
+    className: "".concat(CLASSNAME$Z, "__helper")
   }, helper)));
 });
-Switch.displayName = COMPONENT_NAME$$;
-Switch.className = CLASSNAME$Y;
-Switch.defaultProps = DEFAULT_PROPS$M;
+Switch.displayName = COMPONENT_NAME$10;
+Switch.className = CLASSNAME$Z;
+Switch.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Defines the props of the component.
@@ -10753,17 +10847,17 @@ Switch.defaultProps = DEFAULT_PROPS$M;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$10 = 'Table';
+var COMPONENT_NAME$11 = 'Table';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$Z = getRootClassName(COMPONENT_NAME$10);
+var CLASSNAME$_ = getRootClassName(COMPONENT_NAME$11);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$N = {
+var DEFAULT_PROPS$O = {
   theme: Theme.light
 };
 /**
@@ -10786,16 +10880,16 @@ var Table = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$Z,
+      prefix: CLASSNAME$_,
       hasBefore: hasBefore,
       hasDividers: hasDividers,
       theme: theme
     }))
   }), children);
 });
-Table.displayName = COMPONENT_NAME$10;
-Table.className = CLASSNAME$Z;
-Table.defaultProps = DEFAULT_PROPS$N;
+Table.displayName = COMPONENT_NAME$11;
+Table.className = CLASSNAME$_;
+Table.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Defines the props of the component.
@@ -10804,12 +10898,12 @@ Table.defaultProps = DEFAULT_PROPS$N;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$11 = 'TableBody';
+var COMPONENT_NAME$12 = 'TableBody';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$_ = getRootClassName(COMPONENT_NAME$11, true);
+var CLASSNAME$$ = getRootClassName(COMPONENT_NAME$12, true);
 /**
  * TableBody component.
  *
@@ -10827,12 +10921,12 @@ var TableBody = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$_
+      prefix: CLASSNAME$$
     }))
   }), children);
 });
-TableBody.displayName = COMPONENT_NAME$11;
-TableBody.className = CLASSNAME$_;
+TableBody.displayName = COMPONENT_NAME$12;
+TableBody.className = CLASSNAME$$;
 
 /**
  * Table head cell sort order.
@@ -10854,17 +10948,17 @@ var TableCellVariant = {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$12 = 'TableCell';
+var COMPONENT_NAME$13 = 'TableCell';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$$ = getRootClassName(COMPONENT_NAME$12, true);
+var CLASSNAME$10 = getRootClassName(COMPONENT_NAME$13, true);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$O = {
+var DEFAULT_PROPS$P = {
   variant: TableCellVariant.body
 };
 /**
@@ -10898,39 +10992,39 @@ var TableCell = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(handleBasicClasses({
-      prefix: CLASSNAME$$,
+      prefix: CLASSNAME$10,
       isSortable: isSortable
-    }), className, "".concat(CLASSNAME$$, "--head"), _defineProperty({}, "".concat(CLASSNAME$$, "--is-sorted"), isSortable && sortOrder)),
+    }), className, "".concat(CLASSNAME$10, "--head"), _defineProperty({}, "".concat(CLASSNAME$10, "--is-sorted"), isSortable && sortOrder)),
     tabIndex: isSortable && isFunction(onHeaderClick) ? 0 : -1,
     onClick: handleOnHeaderClick,
     onKeyDown: onEnterPressed(handleOnHeaderClick)
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$$, "-wrapper")
+    className: "".concat(CLASSNAME$10, "-wrapper")
   }, icon && !isSortable && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$$, "-icon"),
+    className: "".concat(CLASSNAME$10, "-icon"),
     icon: icon,
     size: Size.xxs
   }), isSortable && sortOrder === ThOrder.asc && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$$, "-icon"),
+    className: "".concat(CLASSNAME$10, "-icon"),
     icon: mdiArrowUp,
     size: Size.xxs
   }), isSortable && sortOrder === ThOrder.desc && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$$, "-icon"),
+    className: "".concat(CLASSNAME$10, "-icon"),
     icon: mdiArrowDown,
     size: Size.xxs
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$$, "-content")
+    className: "".concat(CLASSNAME$10, "-content")
   }, children))), variant === TableCellVariant.body && React.createElement("td", _extends({}, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$$
-    }), "".concat(CLASSNAME$$, "--body"))
+      prefix: CLASSNAME$10
+    }), "".concat(CLASSNAME$10, "--body"))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$$, "-content")
+    className: "".concat(CLASSNAME$10, "-content")
   }, children)));
 });
-TableCell.displayName = COMPONENT_NAME$12;
-TableCell.className = CLASSNAME$$;
-TableCell.defaultProps = DEFAULT_PROPS$O;
+TableCell.displayName = COMPONENT_NAME$13;
+TableCell.className = CLASSNAME$10;
+TableCell.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Defines the props of the component.
@@ -10939,17 +11033,17 @@ TableCell.defaultProps = DEFAULT_PROPS$O;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$13 = 'TableHeader';
+var COMPONENT_NAME$14 = 'TableHeader';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$10 = getRootClassName(COMPONENT_NAME$13, true);
+var CLASSNAME$11 = getRootClassName(COMPONENT_NAME$14, true);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$P = {};
+var DEFAULT_PROPS$Q = {};
 /**
  * TableHeader component.
  *
@@ -10967,13 +11061,13 @@ var TableHeader = forwardRef(function (props, ref) {
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$10
+      prefix: CLASSNAME$11
     }))
   }), children);
 });
-TableHeader.displayName = COMPONENT_NAME$13;
-TableHeader.className = CLASSNAME$10;
-TableHeader.defaultProps = DEFAULT_PROPS$P;
+TableHeader.displayName = COMPONENT_NAME$14;
+TableHeader.className = CLASSNAME$11;
+TableHeader.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Defines the props of the component.
@@ -10982,17 +11076,17 @@ TableHeader.defaultProps = DEFAULT_PROPS$P;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$14 = 'TableRow';
+var COMPONENT_NAME$15 = 'TableRow';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$11 = getRootClassName(COMPONENT_NAME$14, true);
+var CLASSNAME$12 = getRootClassName(COMPONENT_NAME$15, true);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$Q = {};
+var DEFAULT_PROPS$R = {};
 /**
  * TableRow component.
  *
@@ -11019,16 +11113,16 @@ var TableRow = forwardRef(function (props, ref) {
       isClickable: isClickable && !isDisabled,
       isDisabled: isDisabled,
       isSelected: isSelected && !isDisabled,
-      prefix: CLASSNAME$11
+      prefix: CLASSNAME$12
     })),
     "aria-disabled": isDisabled
   }), children);
 });
-TableRow.displayName = COMPONENT_NAME$14;
-TableRow.className = CLASSNAME$11;
-TableRow.defaultProps = DEFAULT_PROPS$Q;
+TableRow.displayName = COMPONENT_NAME$15;
+TableRow.className = CLASSNAME$12;
+TableRow.defaultProps = DEFAULT_PROPS$R;
 
-var DEFAULT_PROPS$R = {
+var DEFAULT_PROPS$S = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -11073,7 +11167,7 @@ var TabProvider = function TabProvider(props) {
     value: [state, dispatch]
   }, children);
 };
-TabProvider.defaultProps = DEFAULT_PROPS$R;
+TabProvider.defaultProps = DEFAULT_PROPS$S;
 
 var TabListLayout;
 /**
@@ -11088,17 +11182,17 @@ var TabListLayout;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$15 = 'TabList';
+var COMPONENT_NAME$16 = 'TabList';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$12 = "".concat(CSS_PREFIX, "-tabs");
+var CLASSNAME$13 = "".concat(CSS_PREFIX, "-tabs");
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$S = {
+var DEFAULT_PROPS$T = {
   layout: TabListLayout.fixed,
   position: Alignment.left,
   theme: Theme.light
@@ -11133,20 +11227,20 @@ var TabList = forwardRef(function (props, ref) {
     ref: mergeRefs(ref, tabListRef)
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$12,
+      prefix: CLASSNAME$13,
       layout: layout,
       position: position,
       theme: theme
     }))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$12, "__links"),
+    className: "".concat(CLASSNAME$13, "__links"),
     role: "tablist",
     "aria-label": ariaLabel
   }, children));
 });
-TabList.displayName = COMPONENT_NAME$15;
-TabList.className = CLASSNAME$12;
-TabList.defaultProps = DEFAULT_PROPS$S;
+TabList.displayName = COMPONENT_NAME$16;
+TabList.className = CLASSNAME$13;
+TabList.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Defines the props of the component.
@@ -11155,17 +11249,17 @@ TabList.defaultProps = DEFAULT_PROPS$S;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$16 = 'Tab';
+var COMPONENT_NAME$17 = 'Tab';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$13 = "".concat(CSS_PREFIX, "-tabs__link");
+var CLASSNAME$14 = "".concat(CSS_PREFIX, "-tabs__link");
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$T = {};
+var DEFAULT_PROPS$U = {};
 /**
  * Tab component.
  *
@@ -11222,7 +11316,7 @@ var Tab = forwardRef(function (props, ref) {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$13,
+      prefix: CLASSNAME$14,
       isActive: isActive,
       isDisabled: isDisabled
     })),
@@ -11239,9 +11333,9 @@ var Tab = forwardRef(function (props, ref) {
     size: Size.xs
   }), label && React.createElement("span", null, label));
 });
-Tab.displayName = COMPONENT_NAME$16;
-Tab.className = CLASSNAME$13;
-Tab.defaultProps = DEFAULT_PROPS$T;
+Tab.displayName = COMPONENT_NAME$17;
+Tab.className = CLASSNAME$14;
+Tab.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Defines the props of the component.
@@ -11250,17 +11344,17 @@ Tab.defaultProps = DEFAULT_PROPS$T;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$17 = 'TabPanel';
+var COMPONENT_NAME$18 = 'TabPanel';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$14 = "".concat(CSS_PREFIX, "-tab-panel");
+var CLASSNAME$15 = "".concat(CSS_PREFIX, "-tab-panel");
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$U = {};
+var DEFAULT_PROPS$V = {};
 /**
  * TabPanel component.
  *
@@ -11285,7 +11379,7 @@ var TabPanel = forwardRef(function (props, ref) {
   }, forwardedProps, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$14,
+      prefix: CLASSNAME$15,
       isActive: isActive
     })),
     role: "tabpanel",
@@ -11293,9 +11387,9 @@ var TabPanel = forwardRef(function (props, ref) {
     "aria-labelledby": state === null || state === void 0 ? void 0 : state.tabId
   }), (!(state === null || state === void 0 ? void 0 : state.isLazy) || isActive) && children);
 });
-TabPanel.displayName = COMPONENT_NAME$17;
-TabPanel.className = CLASSNAME$14;
-TabPanel.defaultProps = DEFAULT_PROPS$U;
+TabPanel.displayName = COMPONENT_NAME$18;
+TabPanel.className = CLASSNAME$15;
+TabPanel.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Defines the props of the component.
@@ -11304,12 +11398,12 @@ TabPanel.defaultProps = DEFAULT_PROPS$U;
 /**
  * Component display name.
  */
-var COMPONENT_NAME$18 = 'TextField';
+var COMPONENT_NAME$19 = 'TextField';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$15 = getRootClassName(COMPONENT_NAME$18);
+var CLASSNAME$16 = getRootClassName(COMPONENT_NAME$19);
 /**
  * Default minimum number of rows in the multiline mode.
  */
@@ -11319,7 +11413,7 @@ var DEFAULT_MIN_ROWS = 2;
  * Component default props.
  */
 
-var DEFAULT_PROPS$V = {
+var DEFAULT_PROPS$W = {
   theme: Theme.light,
   type: 'text'
 };
@@ -11411,7 +11505,7 @@ var renderInputNative = function renderInputNative(props) {
 
   var inputProps = _objectSpread2({}, forwardedProps, {
     id: id,
-    className: multiline ? "".concat(CLASSNAME$15, "__input-native ").concat(CLASSNAME$15, "__input-native--textarea") : "".concat(CLASSNAME$15, "__input-native ").concat(CLASSNAME$15, "__input-native--text"),
+    className: multiline ? "".concat(CLASSNAME$16, "__input-native ").concat(CLASSNAME$16, "__input-native--textarea") : "".concat(CLASSNAME$16, "__input-native ").concat(CLASSNAME$16, "__input-native--text"),
     placeholder: placeholder,
     value: value,
     name: name,
@@ -11516,31 +11610,31 @@ var TextField = forwardRef(function (props, ref) {
       isDisabled: isDisabled,
       isFocus: isFocus || forceFocusStyle,
       isValid: isValid,
-      prefix: CLASSNAME$15,
+      prefix: CLASSNAME$16,
       theme: theme
     }))
   }, (label || maxLength) && React.createElement("div", {
-    className: "".concat(CLASSNAME$15, "__header")
+    className: "".concat(CLASSNAME$16, "__header")
   }, label && React.createElement(InputLabel, {
     htmlFor: textFieldId,
-    className: "".concat(CLASSNAME$15, "__label"),
+    className: "".concat(CLASSNAME$16, "__label"),
     isRequired: isRequired,
     theme: theme
   }, label), maxLength && React.createElement("div", {
-    className: "".concat(CLASSNAME$15, "__char-counter")
+    className: "".concat(CLASSNAME$16, "__char-counter")
   }, React.createElement("span", null, maxLength - valueLength), maxLength - valueLength === 0 && React.createElement(Icon, {
     icon: mdiAlertCircle,
     size: Size.xxs
   }))), React.createElement("div", {
-    className: "".concat(CLASSNAME$15, "__wrapper"),
+    className: "".concat(CLASSNAME$16, "__wrapper"),
     ref: textFieldRef
   }, icon && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$15, "__input-icon"),
+    className: "".concat(CLASSNAME$16, "__input-icon"),
     color: theme === Theme.dark ? 'light' : undefined,
     icon: icon,
     size: Size.xs
   }), chips && React.createElement("div", {
-    className: "".concat(CLASSNAME$15, "__chips")
+    className: "".concat(CLASSNAME$16, "__chips")
   }, chips, renderInputNative(_objectSpread2({
     id: textFieldId,
     inputRef: inputRef,
@@ -11559,7 +11653,7 @@ var TextField = forwardRef(function (props, ref) {
     value: value,
     name: name
   }, forwardedProps))), !chips && React.createElement("div", {
-    className: "".concat(CLASSNAME$15, "__input-wrapper")
+    className: "".concat(CLASSNAME$16, "__input-wrapper")
   }, renderInputNative(_objectSpread2({
     id: textFieldId,
     inputRef: inputRef,
@@ -11578,12 +11672,12 @@ var TextField = forwardRef(function (props, ref) {
     value: value,
     name: name
   }, forwardedProps))), (isValid || hasError) && React.createElement(Icon, {
-    className: "".concat(CLASSNAME$15, "__input-validity"),
+    className: "".concat(CLASSNAME$16, "__input-validity"),
     color: theme === Theme.dark ? 'light' : undefined,
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
   }), clearButtonProps && isNotEmpty && React.createElement(IconButton, _extends({}, clearButtonProps, {
-    className: "".concat(CLASSNAME$15, "__input-clear"),
+    className: "".concat(CLASSNAME$16, "__input-clear"),
     icon: mdiCloseCircle,
     emphasis: Emphasis.low,
     size: Size.s,
@@ -11591,19 +11685,19 @@ var TextField = forwardRef(function (props, ref) {
     onClick: onClear,
     type: "button"
   })), afterElement && React.createElement("div", {
-    className: "".concat(CLASSNAME$15, "__after-element")
+    className: "".concat(CLASSNAME$16, "__after-element")
   }, afterElement)), hasError && error && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME$15, "__helper"),
+    className: "".concat(CLASSNAME$16, "__helper"),
     kind: Kind.error,
     theme: theme
   }, error), helper && React.createElement(InputHelper, {
-    className: "".concat(CLASSNAME$15, "__helper"),
+    className: "".concat(CLASSNAME$16, "__helper"),
     theme: theme
   }, helper));
 });
-TextField.displayName = COMPONENT_NAME$18;
-TextField.className = CLASSNAME$15;
-TextField.defaultProps = DEFAULT_PROPS$V;
+TextField.displayName = COMPONENT_NAME$19;
+TextField.className = CLASSNAME$16;
+TextField.defaultProps = DEFAULT_PROPS$W;
 
 function getState(img, event) {
   // Error event occurred or image loaded empty.
@@ -11767,17 +11861,17 @@ var useFocusPointStyle = function useFocusPointStyle(_ref2, element, isLoaded) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$19 = 'Thumbnail';
+var COMPONENT_NAME$1a = 'Thumbnail';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$16 = getRootClassName(COMPONENT_NAME$19);
+var CLASSNAME$17 = getRootClassName(COMPONENT_NAME$1a);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$W = {
+var DEFAULT_PROPS$X = {
   fallback: mdiImageBroken,
   loading: 'lazy',
   theme: Theme.light
@@ -11858,7 +11952,7 @@ var Thumbnail = forwardRef(function (props, ref) {
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
       align: align,
       aspectRatio: aspectRatio,
-      prefix: CLASSNAME$16,
+      prefix: CLASSNAME$17,
       size: size,
       theme: theme,
       variant: variant,
@@ -11868,14 +11962,14 @@ var Thumbnail = forwardRef(function (props, ref) {
       hasCustomErrorFallback: hasCustomErrorFallback,
       isLoading: isLoading,
       hasBadge: !!badge
-    }), fillHeight && "".concat(CLASSNAME$16, "--fill-height"))
+    }), fillHeight && "".concat(CLASSNAME$17, "--fill-height"))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$16, "__background")
+    className: "".concat(CLASSNAME$17, "__background")
   }, React.createElement("img", _extends({}, imgProps, {
     style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {}, imageErrorStyle, {}, focusPointStyle),
     ref: mergeRefs(setImgElement, propImgRef),
     className: classnames(handleBasicClasses({
-      prefix: "".concat(CLASSNAME$16, "__image"),
+      prefix: "".concat(CLASSNAME$17, "__image"),
       isLoading: isLoading,
       hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
     }), imgProps === null || imgProps === void 0 ? void 0 : imgProps.className),
@@ -11884,18 +11978,18 @@ var Thumbnail = forwardRef(function (props, ref) {
     alt: alt,
     loading: loading
   })), !isLoading && hasError && React.createElement("div", {
-    className: "".concat(CLASSNAME$16, "__fallback")
+    className: "".concat(CLASSNAME$17, "__fallback")
   }, hasIconErrorFallback ? React.createElement(Icon, {
     icon: fallback,
     size: Size.xxs,
     theme: theme
   }) : fallback)), badge && React.cloneElement(badge, {
-    className: classnames("".concat(CLASSNAME$16, "__badge"), badge.props.className)
+    className: classnames("".concat(CLASSNAME$17, "__badge"), badge.props.className)
   }));
 });
-Thumbnail.displayName = COMPONENT_NAME$19;
-Thumbnail.className = CLASSNAME$16;
-Thumbnail.defaultProps = DEFAULT_PROPS$W;
+Thumbnail.displayName = COMPONENT_NAME$1a;
+Thumbnail.className = CLASSNAME$17;
+Thumbnail.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * All available aspect ratios.
@@ -11921,17 +12015,17 @@ var ThumbnailVariant = {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$1a = 'Toolbar';
+var COMPONENT_NAME$1b = 'Toolbar';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$17 = getRootClassName(COMPONENT_NAME$1a);
+var CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1b);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$X = {};
+var DEFAULT_PROPS$Y = {};
 /**
  * Toolbar component.
  *
@@ -11954,19 +12048,19 @@ var Toolbar = forwardRef(function (props, ref) {
       hasAfter: Boolean(after),
       hasBefore: Boolean(before),
       hasLabel: Boolean(label),
-      prefix: CLASSNAME$17
+      prefix: CLASSNAME$18
     }))
   }), before && React.createElement("div", {
-    className: "".concat(CLASSNAME$17, "__before")
+    className: "".concat(CLASSNAME$18, "__before")
   }, before), label && React.createElement("div", {
-    className: "".concat(CLASSNAME$17, "__label")
+    className: "".concat(CLASSNAME$18, "__label")
   }, label), after && React.createElement("div", {
-    className: "".concat(CLASSNAME$17, "__after")
+    className: "".concat(CLASSNAME$18, "__after")
   }, after));
 });
-Toolbar.displayName = COMPONENT_NAME$1a;
-Toolbar.className = CLASSNAME$17;
-Toolbar.defaultProps = DEFAULT_PROPS$X;
+Toolbar.displayName = COMPONENT_NAME$1b;
+Toolbar.className = CLASSNAME$18;
+Toolbar.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -12142,17 +12236,17 @@ function useTooltipOpen(delay, anchorElement) {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$1b = 'Tooltip';
+var COMPONENT_NAME$1c = 'Tooltip';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1b);
+var CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$Y = {
+var DEFAULT_PROPS$Z = {
   placement: Placement.BOTTOM
 };
 /**
@@ -12220,23 +12314,23 @@ var Tooltip = forwardRef(function (props, ref) {
     role: "tooltip",
     "aria-label": label,
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$18,
+      prefix: CLASSNAME$19,
       position: position
     })),
     style: styles.popper
   }, attributes.popper), React.createElement("div", {
-    className: "".concat(CLASSNAME$18, "__arrow")
+    className: "".concat(CLASSNAME$19, "__arrow")
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$18, "__inner")
+    className: "".concat(CLASSNAME$19, "__inner")
   }, label.indexOf('\n') !== -1 ? label.split('\n').map(function (sentence) {
     return React.createElement("p", {
       key: sentence
     }, sentence);
   }) : label)), document.body));
 });
-Tooltip.displayName = COMPONENT_NAME$1b;
-Tooltip.className = CLASSNAME$18;
-Tooltip.defaultProps = DEFAULT_PROPS$Y;
+Tooltip.displayName = COMPONENT_NAME$1c;
+Tooltip.className = CLASSNAME$19;
+Tooltip.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * Uploader variants.
@@ -12251,17 +12345,17 @@ var UploaderVariant = {
 /**
  * Component display name.
  */
-var COMPONENT_NAME$1c = 'Uploader';
+var COMPONENT_NAME$1d = 'Uploader';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c);
+var CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1d);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$Z = {
+var DEFAULT_PROPS$_ = {
   aspectRatio: AspectRatio.horizontal,
   size: Size.xl,
   theme: Theme.light,
@@ -12292,42 +12386,42 @@ var Uploader = forwardRef(function (props, ref) {
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
-      prefix: CLASSNAME$19,
+      prefix: CLASSNAME$1a,
       size: size,
       theme: theme,
       variant: variant
     }))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$19, "__background")
+    className: "".concat(CLASSNAME$1a, "__background")
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME$19, "__wrapper")
+    className: "".concat(CLASSNAME$1a, "__wrapper")
   }, icon && React.createElement("div", {
-    className: "".concat(CLASSNAME$19, "__icon")
+    className: "".concat(CLASSNAME$1a, "__icon")
   }, React.createElement(Icon, {
     icon: icon,
     size: Size.s
   })), label && React.createElement("span", {
-    className: "".concat(CLASSNAME$19, "__label")
+    className: "".concat(CLASSNAME$1a, "__label")
   }, label)));
 });
-Uploader.displayName = COMPONENT_NAME$1c;
-Uploader.className = CLASSNAME$19;
-Uploader.defaultProps = DEFAULT_PROPS$Z;
+Uploader.displayName = COMPONENT_NAME$1d;
+Uploader.className = CLASSNAME$1a;
+Uploader.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * Component display name.
  */
-var COMPONENT_NAME$1d = 'UserBlock';
+var COMPONENT_NAME$1e = 'UserBlock';
 /**
  * Component default class name and class prefix.
  */
 
-var CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1d);
+var CLASSNAME$1b = getRootClassName(COMPONENT_NAME$1e);
 /**
  * Component default props.
  */
 
-var DEFAULT_PROPS$_ = {
+var DEFAULT_PROPS$$ = {
   orientation: Orientation.horizontal,
   size: Size.m,
   theme: Theme.light
@@ -12375,7 +12469,7 @@ var UserBlock = forwardRef(function (props, ref) {
     var NameComponent = 'span';
 
     var nProps = _objectSpread2({}, nameProps, {
-      className: classnames("".concat(CLASSNAME$1a, "__name"), linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
+      className: classnames("".concat(CLASSNAME$1b, "__name"), linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
     });
 
     if (isClickable) {
@@ -12395,18 +12489,18 @@ var UserBlock = forwardRef(function (props, ref) {
     return React.createElement(NameComponent, nProps, name);
   }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
   var fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
-    className: "".concat(CLASSNAME$1a, "__fields")
+    className: "".concat(CLASSNAME$1b, "__fields")
   }, fields.map(function (field, idx) {
     return React.createElement("span", {
       key: idx,
-      className: "".concat(CLASSNAME$1a, "__field")
+      className: "".concat(CLASSNAME$1b, "__field")
     }, field);
   }));
   return React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$1a,
+      prefix: CLASSNAME$1b,
       orientation: orientation,
       size: componentSize,
       theme: theme,
@@ -12419,21 +12513,21 @@ var UserBlock = forwardRef(function (props, ref) {
     linkProps: linkProps,
     alt: ""
   }, avatarProps, {
-    className: classnames("".concat(CLASSNAME$1a, "__avatar"), avatarProps.className),
+    className: classnames("".concat(CLASSNAME$1b, "__avatar"), avatarProps.className),
     size: componentSize,
     onClick: onClick,
     theme: theme
   })), (fields || name) && React.createElement("div", {
-    className: "".concat(CLASSNAME$1a, "__wrapper")
+    className: "".concat(CLASSNAME$1b, "__wrapper")
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && React.createElement("div", {
-    className: "".concat(CLASSNAME$1a, "__action")
+    className: "".concat(CLASSNAME$1b, "__action")
   }, simpleAction), shouldDisplayActions && multipleActions && React.createElement("div", {
-    className: "".concat(CLASSNAME$1a, "__actions")
+    className: "".concat(CLASSNAME$1b, "__actions")
   }, multipleActions));
 });
-UserBlock.displayName = COMPONENT_NAME$1d;
-UserBlock.className = CLASSNAME$1a;
-UserBlock.defaultProps = DEFAULT_PROPS$_;
+UserBlock.displayName = COMPONENT_NAME$1e;
+UserBlock.className = CLASSNAME$1b;
+UserBlock.defaultProps = DEFAULT_PROPS$$;
 
-export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, Grid, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Notification, Orientation, Placement, Popover, PostBlock, Progress, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
+export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Notification, Orientation, Placement, Popover, PostBlock, Progress, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
 //# sourceMappingURL=index.js.map