@lumx/react 4.3.1 → 4.3.2-alpha.1

package/index.js

@@ -96,7 +96,7 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'AlertDialog';
+const COMPONENT_NAME$1l = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
@@ -109,7 +109,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$19 = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -130,8 +130,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$18.kind,
-    size = DEFAULT_PROPS$18.size,
+    kind = DEFAULT_PROPS$19.kind,
+    size = DEFAULT_PROPS$19.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -217,9 +217,9 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1k;
+AlertDialog.displayName = COMPONENT_NAME$1l;
 AlertDialog.className = CLASSNAME$1j;
-AlertDialog.defaultProps = DEFAULT_PROPS$18;
+AlertDialog.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -311,7 +311,7 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Autocomplete';
+const COMPONENT_NAME$1k = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
@@ -321,7 +321,7 @@ const CLASSNAME$1i = 'lumx-autocomplete';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$18 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -343,13 +343,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$17.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$18.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$17.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$17.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$17.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$18.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -370,7 +370,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$17.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$18.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -423,14 +423,14 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1j;
+Autocomplete.displayName = COMPONENT_NAME$1k;
 Autocomplete.className = CLASSNAME$1i;
-Autocomplete.defaultProps = DEFAULT_PROPS$17;
+Autocomplete.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'AutocompleteMultiple';
+const COMPONENT_NAME$1j = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
@@ -440,7 +440,7 @@ const CLASSNAME$1h = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$17 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -480,8 +480,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$16.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$16.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$17.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$17.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -503,12 +503,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$16.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$17.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$16.values,
+    values = DEFAULT_PROPS$17.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
@@ -548,14 +548,14 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
 AutocompleteMultiple.className = CLASSNAME$1h;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$16;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Avatar';
+const COMPONENT_NAME$1i = 'Avatar';
 
 /**
  * Component default class name and class prefix.
@@ -569,7 +569,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$16 = {
   size: Size$1.m
 };
 
@@ -592,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$15.size,
+    size = DEFAULT_PROPS$16.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -625,84 +625,9 @@ const Avatar = forwardRef((props, ref) => {
     })]
   });
 });
-Avatar.displayName = COMPONENT_NAME$1h;
+Avatar.displayName = COMPONENT_NAME$1i;
 Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$15;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1g = 'Badge';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1f = 'lumx-badge';
-const {
-  block: block$12
-} = classNames.bem(CLASSNAME$1f);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$14 = {
-  color: ColorPalette$1.primary
-};
-
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Badge = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    color = DEFAULT_PROPS$14.color,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$12({
-      [`color-${color}`]: Boolean(color)
-    })),
-    children: children
-  });
-});
-Badge.displayName = COMPONENT_NAME$1g;
-Badge.className = CLASSNAME$1f;
-Badge.defaultProps = DEFAULT_PROPS$14;
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1e = 'lumx-badge-wrapper';
-const {
-  block: block$11,
-  element: element$M
-} = classNames.bem(CLASSNAME$1e);
-const BadgeWrapper = forwardRef((props, ref) => {
-  const {
-    badge,
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$11()),
-    children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$M('badge'),
-      children: badge
-    })]
-  });
-});
-BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1e;
+Avatar.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Alignments.
@@ -926,7 +851,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -961,11 +886,11 @@ function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -974,15 +899,15 @@ function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$10(baseName, modifiersOrAdditionalClasses);
+      return block$12(baseName, modifiersOrAdditionalClasses);
     }
-    return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$L(baseName, elem, modifiersOrAdditionalClasses);
+      return element$M(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -991,6 +916,108 @@ function bem(baseName) {
   };
 }
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1h = 'Badge';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1f = 'lumx-badge';
+const {
+  block: block$11
+} = bem(CLASSNAME$1f);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$15 = {
+  color: ColorPalette.primary
+};
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const Badge$1 = props => {
+  const {
+    children,
+    className,
+    color = DEFAULT_PROPS$15.color,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$11({
+      [`color-${color}`]: Boolean(color)
+    })),
+    children: children
+  });
+};
+Badge$1.displayName = COMPONENT_NAME$1h;
+Badge$1.className = CLASSNAME$1f;
+Badge$1.defaultProps = DEFAULT_PROPS$15;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Badge component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Badge = forwardRef((props, ref) => {
+  return Badge$1({
+    ...props,
+    ref
+  });
+});
+Badge.displayName = Badge$1.displayName;
+Badge.className = Badge$1.className;
+Badge.defaultProps = Badge$1.defaultProps;
+
+const COMPONENT_NAME$1g = 'BadgeWrapper';
+const CLASSNAME$1e = 'lumx-badge-wrapper';
+const {
+  block: block$10,
+  element: element$L
+} = bem(CLASSNAME$1e);
+const BadgeWrapper$1 = props => {
+  const {
+    badge,
+    children,
+    className,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$10()),
+    children: [children, badge && /*#__PURE__*/jsx("div", {
+      className: element$L('badge'),
+      children: badge
+    })]
+  });
+};
+
+const BadgeWrapper = forwardRef((props, ref) => {
+  return BadgeWrapper$1({
+    ...props,
+    ref
+  });
+});
+BadgeWrapper.displayName = COMPONENT_NAME$1g;
+BadgeWrapper.className = CLASSNAME$1e;
+
 /**
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
@@ -1158,7 +1185,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1172,10 +1199,10 @@ const DEFAULT_PROPS$13 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$13.emphasis,
+    emphasis = DEFAULT_PROPS$14.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$13.size,
+    size = DEFAULT_PROPS$14.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1192,7 +1219,7 @@ const Button$1 = props => {
 };
 Button$1.displayName = COMPONENT_NAME$1e;
 Button$1.className = CLASSNAME$1d;
-Button$1.defaultProps = DEFAULT_PROPS$13;
+Button$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1260,7 +1287,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1e;
 Button.className = CLASSNAME$1d;
-Button.defaultProps = DEFAULT_PROPS$13;
+Button.defaultProps = DEFAULT_PROPS$14;
 
 const COMPONENT_NAME$1d = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1277,7 +1304,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$13 = {};
 
 /**
  * Icon component.
@@ -1357,7 +1384,7 @@ const Icon$1 = props => {
 };
 Icon$1.displayName = COMPONENT_NAME$1d;
 Icon$1.className = CLASSNAME$1c;
-Icon$1.defaultProps = DEFAULT_PROPS$12;
+Icon$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -1372,7 +1399,7 @@ const CLASSNAME$1b = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$12 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1385,11 +1412,11 @@ const DEFAULT_PROPS$11 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$11.emphasis,
+    emphasis = DEFAULT_PROPS$12.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$11.size,
+    size = DEFAULT_PROPS$12.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1410,7 +1437,7 @@ const IconButton$1 = props => {
 };
 IconButton$1.displayName = COMPONENT_NAME$1c;
 IconButton$1.className = CLASSNAME$1b;
-IconButton$1.defaultProps = DEFAULT_PROPS$11;
+IconButton$1.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * IconButton component.
@@ -1447,7 +1474,7 @@ const IconButton = forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$1c;
 IconButton.className = CLASSNAME$1b;
-IconButton.defaultProps = DEFAULT_PROPS$11;
+IconButton.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * Component display name.
@@ -1462,7 +1489,7 @@ const CLASSNAME$1a = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {};
+const DEFAULT_PROPS$11 = {};
 
 /**
  * ButtonGroup component.
@@ -1484,7 +1511,7 @@ const ButtonGroup$1 = props => {
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1b;
 ButtonGroup$1.className = CLASSNAME$1a;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$10;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * ButtonGroup component.
@@ -1501,7 +1528,7 @@ const ButtonGroup = forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$1b;
 ButtonGroup.className = CLASSNAME$1a;
-ButtonGroup.defaultProps = DEFAULT_PROPS$10;
+ButtonGroup.defaultProps = DEFAULT_PROPS$11;
 
 const COMPONENT_NAME$1a = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
@@ -1509,7 +1536,7 @@ const CLASSNAME$19 = InputLabelClassName;
 const {
   block: block$_
 } = bem(CLASSNAME$19);
-const DEFAULT_PROPS$$ = {};
+const DEFAULT_PROPS$10 = {};
 
 /**
  * InputLabel component.
@@ -1539,7 +1566,7 @@ function InputLabel$1(props) {
 }
 InputLabel$1.displayName = COMPONENT_NAME$1a;
 InputLabel$1.className = CLASSNAME$19;
-InputLabel$1.defaultProps = DEFAULT_PROPS$$;
+InputLabel$1.defaultProps = DEFAULT_PROPS$10;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1568,7 +1595,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   kind: Kind.info
 };
 
@@ -1579,7 +1606,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$_.kind,
+    kind = DEFAULT_PROPS$$.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1599,7 +1626,7 @@ function InputHelper$1(props) {
 }
 InputHelper$1.displayName = COMPONENT_NAME$19;
 InputHelper$1.className = CLASSNAME$18;
-InputHelper$1.defaultProps = DEFAULT_PROPS$_;
+InputHelper$1.defaultProps = DEFAULT_PROPS$$;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1714,7 +1741,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * Checkbox component.
@@ -1776,7 +1803,7 @@ const Checkbox = forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$18;
 Checkbox.className = CLASSNAME$17;
-Checkbox.defaultProps = DEFAULT_PROPS$Z;
+Checkbox.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1811,7 +1838,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   size: Size$1.m
 };
 
@@ -1841,7 +1868,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$Y.size,
+    size = DEFAULT_PROPS$Z.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1913,7 +1940,7 @@ const Chip = forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$17;
 Chip.className = CLASSNAME$16;
-Chip.defaultProps = DEFAULT_PROPS$Y;
+Chip.defaultProps = DEFAULT_PROPS$Z;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1969,7 +1996,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$Y = {};
 
 /**
  * Component display name.
@@ -2004,7 +2031,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$16;
 InternalChipGroup.className = CLASSNAME$15;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$Y;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2216,7 +2243,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$X = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2246,7 +2273,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$W.variant,
+    variant = DEFAULT_PROPS$X.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -2315,7 +2342,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$15;
 CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$W;
+CommentBlock.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -3420,7 +3447,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3451,11 +3478,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$V.size,
+    size = DEFAULT_PROPS$W.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$V.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$W.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3595,7 +3622,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$11;
 Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$V;
+Dialog.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Component display name.
@@ -3608,12 +3635,38 @@ const COMPONENT_NAME$10 = 'Divider';
 const CLASSNAME$10 = 'lumx-divider';
 const {
   block: block$T
-} = classNames.bem(CLASSNAME$10);
+} = bem(CLASSNAME$10);
+
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const Divider$1 = props => {
+  const {
+    className,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("hr", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$T({
+      [`theme-${theme}`]: Boolean(theme)
+    }))
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {};
+const DEFAULT_PROPS$V = {};
 
 /**
  * Divider component.
@@ -3625,21 +3678,18 @@ const DEFAULT_PROPS$U = {};
 const Divider = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    className,
     theme = defaultTheme,
-    ...forwardedProps
+    ...otherProps
   } = props;
-  return /*#__PURE__*/jsx("hr", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$T({
-      [`theme-${theme}`]: Boolean(theme)
-    }))
+  return Divider$1({
+    ref,
+    theme,
+    ...otherProps
   });
 });
 Divider.displayName = COMPONENT_NAME$10;
 Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$U;
+Divider.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Component display name.
@@ -3864,7 +3914,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   tabIndex: -1
 };
 
@@ -3883,7 +3933,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$T.tabIndex,
+    tabIndex = DEFAULT_PROPS$U.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -3899,7 +3949,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$_;
 InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$T;
+InternalList.defaultProps = DEFAULT_PROPS$U;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -6344,7 +6394,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6361,24 +6411,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$S.elevation,
+    elevation = DEFAULT_PROPS$T.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$S.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$T.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$S.placement,
+    placement = DEFAULT_PROPS$T.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$S.zIndex,
+    zIndex = DEFAULT_PROPS$T.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6464,7 +6514,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$Z;
 Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$S;
+Popover.defaultProps = DEFAULT_PROPS$T;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6524,7 +6574,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$S = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6547,18 +6597,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$R.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$R.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$R.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$R.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$R.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$S.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$S.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$S.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$S.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$S.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$R.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$R.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$R.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$S.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$S.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6604,7 +6654,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$Y;
 Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$R;
+Dropdown.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Component display name.
@@ -6623,7 +6673,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6641,7 +6691,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$Q.closeMode,
+    closeMode = DEFAULT_PROPS$R.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6758,11 +6808,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$X;
 ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$R;
 
 const COMPONENT_NAME$W = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 const {
   block: block$N,
   element: element$B
@@ -6826,7 +6876,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$W;
 Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$P;
+Flag.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Defines the props of the component.
@@ -6919,7 +6969,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$P = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -6949,8 +6999,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$O.gap,
-    orientation = DEFAULT_PROPS$O.orientation,
+    gap = DEFAULT_PROPS$P.gap,
+    orientation = DEFAULT_PROPS$P.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7004,7 +7054,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$U;
 BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$P;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7052,7 +7102,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$O = {};
 
 /**
  * Get Heading component common props
@@ -7153,7 +7203,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$N = {};
 
 /**
  * Text component common props
@@ -7240,7 +7290,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$S;
 Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$M;
+Text.defaultProps = DEFAULT_PROPS$N;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -7277,7 +7327,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$T;
 Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$N;
+Heading.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7328,7 +7378,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$M = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7346,9 +7396,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$L.orientation,
+    orientation = DEFAULT_PROPS$M.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$L.wrap,
+    wrap = DEFAULT_PROPS$M.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -7366,7 +7416,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$R;
 Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$L;
+Grid.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
@@ -7424,7 +7474,7 @@ const CLASSNAME$P = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7461,7 +7511,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$P;
 GridColumn.className = CLASSNAME$P;
-GridColumn.defaultProps = DEFAULT_PROPS$K;
+GridColumn.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Icon component.
@@ -7579,7 +7629,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$K = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7595,9 +7645,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$J.align,
+    align = DEFAULT_PROPS$K.align,
     alt,
-    captionPosition = DEFAULT_PROPS$J.captionPosition,
+    captionPosition = DEFAULT_PROPS$K.captionPosition,
     captionStyle,
     className,
     description,
@@ -7651,7 +7701,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$O;
 ImageBlock.className = CLASSNAME$O;
-ImageBlock.defaultProps = DEFAULT_PROPS$J;
+ImageBlock.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Component display name.
@@ -8411,7 +8461,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * InlineList component.
@@ -8464,7 +8514,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$M;
 InlineList.className = CLASSNAME$M;
-InlineList.defaultProps = DEFAULT_PROPS$I;
+InlineList.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * InputHelper component.
@@ -8738,7 +8788,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {
+const DEFAULT_PROPS$I = {
   size: Size$1.regular,
   titleHeading: 'h2'
 };
@@ -8758,11 +8808,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$H.size,
+    size = DEFAULT_PROPS$I.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$H.titleHeading,
+    titleHeading = DEFAULT_PROPS$I.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8830,7 +8880,7 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$J;
 LinkPreview.className = CLASSNAME$J;
-LinkPreview.defaultProps = DEFAULT_PROPS$H;
+LinkPreview.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -8863,7 +8913,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$H = {
   size: Size$1.regular
 };
 
@@ -8902,7 +8952,7 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
     linkRef,
     onItemSelected,
-    size = DEFAULT_PROPS$G.size,
+    size = DEFAULT_PROPS$H.size,
     ...forwardedProps
   } = otherProps;
   const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -8959,7 +9009,7 @@ const ListItem = forwardRef((props, ref) => {
 });
 ListItem.displayName = COMPONENT_NAME$I;
 ListItem.className = CLASSNAME$I;
-ListItem.defaultProps = DEFAULT_PROPS$G;
+ListItem.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
@@ -9147,7 +9197,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * Mosaic component.
@@ -9214,7 +9264,7 @@ const Mosaic = forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$E;
 Mosaic.className = CLASSNAME$E;
-Mosaic.defaultProps = DEFAULT_PROPS$F;
+Mosaic.defaultProps = DEFAULT_PROPS$G;
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
@@ -9403,7 +9453,7 @@ const {
 /**
  * Component default props
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$F = {
   orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -9412,7 +9462,7 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$E.orientation,
+    orientation = DEFAULT_PROPS$F.orientation,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -9438,7 +9488,7 @@ const Navigation = forwardRef((props, ref) => {
 });
 Navigation.displayName = COMPONENT_NAME$C;
 Navigation.className = CLASSNAME$C;
-Navigation.defaultProps = DEFAULT_PROPS$E;
+Navigation.defaultProps = DEFAULT_PROPS$F;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -9483,7 +9533,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {
+const DEFAULT_PROPS$E = {
   zIndex: 9999,
   usePortal: true
 };
@@ -9507,8 +9557,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$D.zIndex,
-    usePortal = DEFAULT_PROPS$D.usePortal,
+    zIndex = DEFAULT_PROPS$E.zIndex,
+    usePortal = DEFAULT_PROPS$E.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -9573,7 +9623,7 @@ const Notification = forwardRef((props, ref) => {
 });
 Notification.displayName = COMPONENT_NAME$B;
 Notification.className = CLASSNAME$B;
-Notification.defaultProps = DEFAULT_PROPS$D;
+Notification.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
@@ -9588,7 +9638,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * PopoverDialog component.
@@ -9631,7 +9681,7 @@ const PopoverDialog = forwardRef((props, ref) => {
 });
 PopoverDialog.displayName = COMPONENT_NAME$A;
 PopoverDialog.className = CLASSNAME$A;
-PopoverDialog.defaultProps = DEFAULT_PROPS$C;
+PopoverDialog.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
@@ -9650,7 +9700,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$C = {
   orientation: Orientation$1.horizontal
 };
 
@@ -9670,7 +9720,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$B.orientation,
+    orientation = DEFAULT_PROPS$C.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -9732,7 +9782,7 @@ const PostBlock = forwardRef((props, ref) => {
 });
 PostBlock.displayName = COMPONENT_NAME$z;
 PostBlock.className = CLASSNAME$z;
-PostBlock.defaultProps = DEFAULT_PROPS$B;
+PostBlock.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * Component display name.
@@ -9751,7 +9801,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {};
+const DEFAULT_PROPS$B = {};
 
 /**
  * ProgressLinear component.
@@ -9782,7 +9832,7 @@ const ProgressLinear = forwardRef((props, ref) => {
 });
 ProgressLinear.displayName = COMPONENT_NAME$y;
 ProgressLinear.className = CLASSNAME$y;
-ProgressLinear.defaultProps = DEFAULT_PROPS$A;
+ProgressLinear.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
@@ -9801,7 +9851,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
+const DEFAULT_PROPS$A = {
   size: Size$1.m,
   display: 'block'
 };
@@ -9818,8 +9868,8 @@ const ProgressCircular = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    size = DEFAULT_PROPS$z.size,
-    display = DEFAULT_PROPS$z.display,
+    size = DEFAULT_PROPS$A.size,
+    display = DEFAULT_PROPS$A.display,
     ...forwardedProps
   } = props;
   const Element = display === 'block' ? 'div' : 'span';
@@ -9851,7 +9901,7 @@ const ProgressCircular = forwardRef((props, ref) => {
 });
 ProgressCircular.displayName = COMPONENT_NAME$x;
 ProgressCircular.className = CLASSNAME$x;
-ProgressCircular.defaultProps = DEFAULT_PROPS$z;
+ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -9878,7 +9928,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$y = {
+const DEFAULT_PROPS$z = {
   variant: ProgressVariant.circular
 };
 
@@ -9895,7 +9945,7 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$y.variant,
+    variant = DEFAULT_PROPS$z.variant,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
@@ -9914,7 +9964,7 @@ const Progress = forwardRef((props, ref) => {
 });
 Progress.displayName = COMPONENT_NAME$w;
 Progress.className = CLASSNAME$w;
-Progress.defaultProps = DEFAULT_PROPS$y;
+Progress.defaultProps = DEFAULT_PROPS$z;
 
 const INIT_STATE = {
   isLazy: true,
@@ -10041,7 +10091,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$x = {
+const DEFAULT_PROPS$y = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -10070,7 +10120,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$x,
+        ...DEFAULT_PROPS$y,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -10093,7 +10143,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$x;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$y;
 
 const useRovingTabIndex = ({
   parentRef,
@@ -10185,7 +10235,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {};
+const DEFAULT_PROPS$x = {};
 
 /**
  * ProgressTracker component.
@@ -10241,7 +10291,7 @@ const ProgressTracker = forwardRef((props, ref) => {
 });
 ProgressTracker.displayName = COMPONENT_NAME$v;
 ProgressTracker.className = CLASSNAME$v;
-ProgressTracker.defaultProps = DEFAULT_PROPS$w;
+ProgressTracker.defaultProps = DEFAULT_PROPS$x;
 
 /**
  * Component display name.
@@ -10260,7 +10310,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {};
+const DEFAULT_PROPS$w = {};
 
 /**
  * ProgressTrackerStep component.
@@ -10355,7 +10405,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$u;
 ProgressTrackerStep.className = CLASSNAME$u;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$v;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Component display name.
@@ -10373,7 +10423,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$u = {};
+const DEFAULT_PROPS$v = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -10409,7 +10459,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$u;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
@@ -10512,7 +10562,7 @@ const RadioButton$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$t = {};
+const DEFAULT_PROPS$u = {};
 
 /**
  * RadioButton component.
@@ -10568,7 +10618,7 @@ const RadioButton = forwardRef((props, ref) => {
 });
 RadioButton.displayName = COMPONENT_NAME$s;
 RadioButton.className = CLASSNAME$s;
-RadioButton.defaultProps = DEFAULT_PROPS$t;
+RadioButton.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
@@ -10583,7 +10633,7 @@ const CLASSNAME$r = 'lumx-radio-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$s = {};
+const DEFAULT_PROPS$t = {};
 
 /**
  * RadioGroup component.
@@ -10607,7 +10657,7 @@ const RadioGroup$1 = props => {
 };
 RadioGroup$1.displayName = COMPONENT_NAME$r;
 RadioGroup$1.className = CLASSNAME$r;
-RadioGroup$1.defaultProps = DEFAULT_PROPS$s;
+RadioGroup$1.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Defines the props of the component.
@@ -10791,7 +10841,7 @@ const {
 } = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
-const DEFAULT_PROPS$r = {
+const DEFAULT_PROPS$s = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -10914,7 +10964,7 @@ const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, {
-    ...DEFAULT_PROPS$r,
+    ...DEFAULT_PROPS$s,
     ...props,
     className: classNames.join(props.className, block$n({
       'has-input-clear': hasInputClear,
@@ -10926,7 +10976,7 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = COMPONENT_NAME$q;
 Select.className = CLASSNAME$p;
-Select.defaultProps = DEFAULT_PROPS$r;
+Select.defaultProps = DEFAULT_PROPS$s;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
@@ -10940,7 +10990,7 @@ const {
 } = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
-const DEFAULT_PROPS$q = {
+const DEFAULT_PROPS$r = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -11066,7 +11116,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$q,
+    ...DEFAULT_PROPS$r,
     ...props,
     className: classNames.join(props.className, block$m({
       'has-multiple': !props.isEmpty
@@ -11077,7 +11127,7 @@ const SelectMultiple = forwardRef((props, ref) => {
 });
 SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$o;
-SelectMultiple.defaultProps = DEFAULT_PROPS$q;
+SelectMultiple.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
@@ -11132,7 +11182,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$p = {
+const DEFAULT_PROPS$q = {
   emphasis: Emphasis$1.high,
   closeMode: 'unmount'
 };
@@ -11148,7 +11198,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$p.emphasis,
+    emphasis = DEFAULT_PROPS$q.emphasis,
     icon,
     isOpen,
     isSelected,
@@ -11158,7 +11208,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     onActionClick,
     onClick,
     toggleButtonProps,
-    closeMode = DEFAULT_PROPS$p.closeMode,
+    closeMode = DEFAULT_PROPS$q.closeMode,
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -11229,9 +11279,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
 });
 SideNavigationItem.displayName = COMPONENT_NAME$n;
 SideNavigationItem.className = CLASSNAME$m;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$p;
-
-const DEFAULT_PROPS$o = {};
+SideNavigationItem.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
@@ -11244,38 +11292,37 @@ const COMPONENT_NAME$m = 'SkeletonCircle';
 const CLASSNAME$l = 'lumx-skeleton-circle';
 const {
   block: block$k
-} = classNames.bem(CLASSNAME$l);
+} = bem(CLASSNAME$l);
 
 /**
  * SkeletonCircle component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const SkeletonCircle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const SkeletonCircle$1 = props => {
   const {
     className,
     size,
     color,
-    theme = defaultTheme,
+    theme,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$k({
+    className: classnames(className, block$k({
       [`size-${size}`]: Boolean(size),
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
-});
-SkeletonCircle.displayName = COMPONENT_NAME$m;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
-SkeletonCircle.className = CLASSNAME$l;
+};
 
+/**
+ * Skeleton variants.
+ */
 const SkeletonRectangleVariant = {
   squared: 'squared',
   rounded: 'rounded',
@@ -11286,10 +11333,6 @@ const SkeletonRectangleVariant = {
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$n = {
-  variant: SkeletonRectangleVariant.squared
-};
-
 /**
  * Component display name.
  */
@@ -11302,31 +11345,37 @@ const CLASSNAME$k = 'lumx-skeleton-rectangle';
 const {
   block: block$j,
   element: element$c
-} = classNames.bem(CLASSNAME$k);
+} = bem(CLASSNAME$k);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$p = {
+  variant: SkeletonRectangleVariant.squared
+};
 
 /**
  * SkeletonRectangle component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const SkeletonRectangle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const SkeletonRectangle$1 = props => {
   const {
     aspectRatio,
     className,
     height,
-    theme = defaultTheme,
-    variant = DEFAULT_PROPS$n.variant,
+    theme,
+    variant = DEFAULT_PROPS$p.variant,
     width,
     color,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$j({
+    className: classnames(className, block$j({
       [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
       [`height-${height}`]: Boolean(aspectRatio ? undefined : height),
       [`theme-${theme}`]: Boolean(theme),
@@ -11338,12 +11387,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
       className: element$c('inner')
     })
   });
-});
-SkeletonRectangle.displayName = COMPONENT_NAME$l;
-SkeletonRectangle.className = CLASSNAME$k;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
-
-const DEFAULT_PROPS$m = {};
+};
 
 /**
  * Component display name.
@@ -11357,29 +11401,28 @@ const CLASSNAME$j = 'lumx-skeleton-typography';
 const {
   block: block$i,
   element: element$b
-} = classNames.bem(CLASSNAME$j);
+} = bem(CLASSNAME$j);
 
 /**
  * SkeletonTypography component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const SkeletonTypography = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const SkeletonTypography$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
     typography,
     width,
     color,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$i({
+    className: classnames(className, block$i({
       [`theme-${theme}`]: Boolean(theme),
       [`typography-${typography}`]: Boolean(typography),
       [`color-${color}`]: Boolean(color)
@@ -11392,6 +11435,116 @@ const SkeletonTypography = forwardRef((props, ref) => {
       className: element$b('inner')
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$o = {};
+
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonCircle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    className,
+    size,
+    color,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return SkeletonCircle$1({
+    ref,
+    className,
+    size,
+    color,
+    theme,
+    ...forwardedProps
+  });
+});
+SkeletonCircle.displayName = COMPONENT_NAME$m;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
+SkeletonCircle.className = CLASSNAME$l;
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$n = DEFAULT_PROPS$p;
+
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonRectangle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    aspectRatio,
+    className,
+    height,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS$n.variant,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return SkeletonRectangle$1({
+    ref,
+    aspectRatio,
+    className,
+    height,
+    theme,
+    variant,
+    width,
+    color,
+    ...forwardedProps
+  });
+});
+SkeletonRectangle.displayName = COMPONENT_NAME$l;
+SkeletonRectangle.className = CLASSNAME$k;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$m = {};
+
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonTypography = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    className,
+    theme = defaultTheme,
+    typography,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return SkeletonTypography$1({
+    ref,
+    className,
+    theme,
+    typography,
+    width,
+    color,
+    ...forwardedProps
+  });
 });
 SkeletonTypography.displayName = COMPONENT_NAME$k;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
@@ -14793,5 +14946,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$13 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$14 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map