@lumx/react 3.9.7-alpha.3 → 3.9.7

package/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment as Fragment$1, createContext, useContext, useReducer } from 'react';
+import React__default, { forwardRef, useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
 import kebabCase from 'lodash/kebabCase';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
@@ -12,7 +12,7 @@ import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { C as ClickAwayProvider } from './_internal/ClickAwayProvider.js';
+import { ClickAwayProvider } from './utils/index.js';
 import memoize from 'lodash/memoize';
 import isFunction from 'lodash/isFunction';
 import castArray from 'lodash/castArray';
@@ -272,26 +272,15 @@ const WhiteSpace = {
  * Re-exporting some utils types.
  */
 
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
+var classnames = {exports: {}};
 
-var classnames = createCommonjsModule(function (module) {
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */
+
+(function (module) {
 /* global define */
 
 (function () {
@@ -340,7 +329,9 @@ var classnames = createCommonjsModule(function (module) {
 		window.classNames = classNames;
 	}
 }());
-});
+}(classnames));
+
+var classNames = classnames.exports;
 
 const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiArrowDown='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';const mdiArrowUp='M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';const mdiCheck='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';const mdiCheckCircle='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z';const mdiChevronDown='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';const mdiChevronLeft='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z';const mdiChevronRight='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z';const mdiChevronUp='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';const mdiClose='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';const mdiCloseCircle='M12 2a10 10 0 1 1 0 20 10 10 0 1 1 0-20m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z';const mdiDragVertical='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';const mdiImageBroken='M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';const mdiInformation='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiMagnifyMinusOutline='M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';const mdiMagnifyPlusOutline='m15.5 14 5 5-1.5 1.5-5-5v-.79l-.27-.28A6.5 6.5 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3 6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2z';const mdiMenuDown='m7 10 5 5 5-5z';const mdiMinus='M19 13H5v-2h14z';const mdiPauseCircleOutline='M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';const mdiPlayCircleOutline='M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';const mdiRadioboxBlank='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiRadioboxMarked='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
 
@@ -464,7 +455,7 @@ function handleBasicClasses(_ref2) {
       })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
     });
   }
-  return classnames(prefix, otherClasses);
+  return classNames(prefix, otherClasses);
 }
 
 /**
@@ -745,7 +736,7 @@ const AlertDialog = /*#__PURE__*/forwardRef((props, ref) => {
       'aria-labelledby': titleId,
       'aria-describedby': descriptionId
     }, dialogProps),
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       kind,
       prefix: CLASSNAME$1k
     }))
@@ -910,7 +901,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1j
     }))
   }), /*#__PURE__*/React__default.createElement(TextField, _extends({}, textFieldProps, {
@@ -1043,7 +1034,7 @@ const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     anchorToInput: anchorToInput,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1i
     })),
     name: name,
@@ -1135,7 +1126,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1h,
       size,
       theme
@@ -1202,7 +1193,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1g,
       color
     }))
@@ -1474,7 +1465,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1f,
       size
     }))
@@ -1489,7 +1480,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
     'aria-disabled': isDisabled
   }, linkProps), {}, {
     href: isDisabled ? undefined : linkProps.href,
-    className: classnames(handleBasicClasses({
+    className: classNames(handleBasicClasses({
       prefix: `${CLASSNAME$1f}__link`,
       isHighlighted,
       isSelected,
@@ -1577,6 +1568,10 @@ const isComponentType = type => node => /*#__PURE__*/React__default.isValidEleme
  * A point coordinate in 2D space
  */
 
+var reactIs = {exports: {}};
+
+var reactIs_production_min = {};
+
 /**
  * @license React
  * react-is.production.min.js
@@ -1587,43 +1582,22 @@ const isComponentType = type => node => /*#__PURE__*/React__default.isValidEleme
  * LICENSE file in the root directory of this source tree.
  */
 var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}var ContextConsumer=h;var ContextProvider=g;var Element$1=b;var ForwardRef=l;var Fragment=d;var Lazy=q;var Memo=p;var Portal=c;var Profiler=f;var StrictMode=e;var Suspense=m;
-var SuspenseList=n;var isAsyncMode=function(){return !1};var isConcurrentMode=function(){return !1};var isContextConsumer=function(a){return v(a)===h};var isContextProvider=function(a){return v(a)===g};var isElement$1=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};var isForwardRef=function(a){return v(a)===l};var isFragment=function(a){return v(a)===d};var isLazy=function(a){return v(a)===q};var isMemo=function(a){return v(a)===p};
-var isPortal=function(a){return v(a)===c};var isProfiler=function(a){return v(a)===f};var isStrictMode=function(a){return v(a)===e};var isSuspense=function(a){return v(a)===m};var isSuspenseList=function(a){return v(a)===n};
-var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};var typeOf=v;
-
-var reactIs_production_min = {
-	ContextConsumer: ContextConsumer,
-	ContextProvider: ContextProvider,
-	Element: Element$1,
-	ForwardRef: ForwardRef,
-	Fragment: Fragment,
-	Lazy: Lazy,
-	Memo: Memo,
-	Portal: Portal,
-	Profiler: Profiler,
-	StrictMode: StrictMode,
-	Suspense: Suspense,
-	SuspenseList: SuspenseList,
-	isAsyncMode: isAsyncMode,
-	isConcurrentMode: isConcurrentMode,
-	isContextConsumer: isContextConsumer,
-	isContextProvider: isContextProvider,
-	isElement: isElement$1,
-	isForwardRef: isForwardRef,
-	isFragment: isFragment,
-	isLazy: isLazy,
-	isMemo: isMemo,
-	isPortal: isPortal,
-	isProfiler: isProfiler,
-	isStrictMode: isStrictMode,
-	isSuspense: isSuspense,
-	isSuspenseList: isSuspenseList,
-	isValidElementType: isValidElementType,
-	typeOf: typeOf
-};
-
-var reactIs_development = createCommonjsModule(function (module, exports) {
+function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
+reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
+reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
+reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
+
+var reactIs_development = {};
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 if (process.env.NODE_ENV !== "production") {
   (function() {
@@ -1803,46 +1777,42 @@ function isSuspenseList(object) {
   return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
 }
 
-exports.ContextConsumer = ContextConsumer;
-exports.ContextProvider = ContextProvider;
-exports.Element = Element;
-exports.ForwardRef = ForwardRef;
-exports.Fragment = Fragment;
-exports.Lazy = Lazy;
-exports.Memo = Memo;
-exports.Portal = Portal;
-exports.Profiler = Profiler;
-exports.StrictMode = StrictMode;
-exports.Suspense = Suspense;
-exports.SuspenseList = SuspenseList;
-exports.isAsyncMode = isAsyncMode;
-exports.isConcurrentMode = isConcurrentMode;
-exports.isContextConsumer = isContextConsumer;
-exports.isContextProvider = isContextProvider;
-exports.isElement = isElement;
-exports.isForwardRef = isForwardRef;
-exports.isFragment = isFragment;
-exports.isLazy = isLazy;
-exports.isMemo = isMemo;
-exports.isPortal = isPortal;
-exports.isProfiler = isProfiler;
-exports.isStrictMode = isStrictMode;
-exports.isSuspense = isSuspense;
-exports.isSuspenseList = isSuspenseList;
-exports.isValidElementType = isValidElementType;
-exports.typeOf = typeOf;
+reactIs_development.ContextConsumer = ContextConsumer;
+reactIs_development.ContextProvider = ContextProvider;
+reactIs_development.Element = Element;
+reactIs_development.ForwardRef = ForwardRef;
+reactIs_development.Fragment = Fragment;
+reactIs_development.Lazy = Lazy;
+reactIs_development.Memo = Memo;
+reactIs_development.Portal = Portal;
+reactIs_development.Profiler = Profiler;
+reactIs_development.StrictMode = StrictMode;
+reactIs_development.Suspense = Suspense;
+reactIs_development.SuspenseList = SuspenseList;
+reactIs_development.isAsyncMode = isAsyncMode;
+reactIs_development.isConcurrentMode = isConcurrentMode;
+reactIs_development.isContextConsumer = isContextConsumer;
+reactIs_development.isContextProvider = isContextProvider;
+reactIs_development.isElement = isElement;
+reactIs_development.isForwardRef = isForwardRef;
+reactIs_development.isFragment = isFragment;
+reactIs_development.isLazy = isLazy;
+reactIs_development.isMemo = isMemo;
+reactIs_development.isPortal = isPortal;
+reactIs_development.isProfiler = isProfiler;
+reactIs_development.isStrictMode = isStrictMode;
+reactIs_development.isSuspense = isSuspense;
+reactIs_development.isSuspenseList = isSuspenseList;
+reactIs_development.isValidElementType = isValidElementType;
+reactIs_development.typeOf = typeOf;
   })();
 }
-});
-
-var reactIs = createCommonjsModule(function (module) {
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = reactIs_production_min;
+  reactIs.exports = reactIs_production_min;
 } else {
-  module.exports = reactIs_development;
+  reactIs.exports = reactIs_development;
 }
-});
 
 /**
  * Flatten list of react nodes removing fragments and adding keys.
@@ -1862,7 +1832,7 @@ function flattenChildren(children) {
     return Children.toArray(nodes).reduce((acc, node, index) => {
       var _get;
       const nodeKeys = keys.concat((_get = get(node, 'key')) !== null && _get !== void 0 ? _get : index);
-      if (reactIs.isFragment(node)) {
+      if (reactIs.exports.isFragment(node)) {
         acc.push(...recur(node.props.children, nodeKeys));
       } else if ( /*#__PURE__*/isValidElement(node)) {
         acc.push( /*#__PURE__*/cloneElement(node, {
@@ -2080,7 +2050,7 @@ const InternalList = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const clickable = hasClickableItem || isClickable;
   return /*#__PURE__*/React__default.createElement("ul", _extends({}, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1e,
       itemPadding: itemPadding !== null && itemPadding !== void 0 ? itemPadding : clickable ? Size.big : undefined
     })),
@@ -4764,7 +4734,7 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
   return isOpen ? renderPopover( /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: mergedRefs,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1d,
       theme,
       elevation: Math.min(elevation || 0, 5),
@@ -4922,7 +4892,7 @@ const Dropdown = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, {
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1c
     })),
     elevation: 0,
@@ -5002,7 +4972,7 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("p", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1b,
       color,
       theme
@@ -5110,7 +5080,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   useFocusTrap(isOpen && dropdownRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: mergeRefs(ref, selectRef),
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasError,
       hasLabel: Boolean(label),
       hasPlaceholder: Boolean(placeholder),
@@ -5180,7 +5150,7 @@ const BadgeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$19
     }))
   }), children, badge && /*#__PURE__*/React__default.createElement("div", {
@@ -5218,7 +5188,7 @@ const renderButtonWrapper = props => {
     fullWidth
   } = props;
   const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
-  const wrapperClassName = classnames(handleBasicClasses({
+  const wrapperClassName = classNames(handleBasicClasses({
     color: adaptedColor,
     prefix: BUTTON_WRAPPER_CLASSNAME,
     variant,
@@ -5272,7 +5242,7 @@ const ButtonRoot = /*#__PURE__*/forwardRef((props, ref) => {
       color: adaptedColor
     }));
   }
-  const buttonClassName = classnames(className, handleBasicClasses({
+  const buttonClassName = classNames(className, handleBasicClasses({
     color: adaptedColor,
     emphasis,
     isSelected,
@@ -5368,7 +5338,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       theme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1e);
-  const buttonClassName = classnames(className, getBasicClass({
+  const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$18,
     type: 'hasLeftIcon',
     value: !isEmpty(leftIcon)
@@ -5495,7 +5465,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, CLASSNAME$16)
+    className: classNames(className, CLASSNAME$16)
   }), children);
 });
 ButtonGroup.displayName = COMPONENT_NAME$18;
@@ -5571,7 +5541,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       // Whether state is intermediate class name will "-checked"
       isChecked: intermediateState ? true : isChecked,
       isDisabled,
@@ -5715,7 +5685,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     }, forwardedProps, {
       href: href,
       ref: ref,
-      className: classnames(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         clickable: isClickable,
         color: chipColor,
         isDisabled,
@@ -5734,7 +5704,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
-      className: classnames(`${CLASSNAME$14}__before`, {
+      className: classNames(`${CLASSNAME$14}__before`, {
         [`${CLASSNAME$14}__before--is-clickable`]: hasBeforeClick
       }),
       onClick: handleOnBeforeClick
@@ -5744,7 +5714,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
-      className: classnames(`${CLASSNAME$14}__after`, {
+      className: classNames(`${CLASSNAME$14}__after`, {
         [`${CLASSNAME$14}__after--is-clickable`]: hasAfterClick
       }),
       onClick: handleOnAfterClick
@@ -5848,7 +5818,7 @@ const InternalChipGroup = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, chipGroupClassName)
+    className: classNames(className, chipGroupClassName)
   }), children);
 });
 InternalChipGroup.displayName = COMPONENT_NAME$15;
@@ -5920,7 +5890,7 @@ const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasChildren: hasChildren && isOpen,
       hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
       hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
@@ -6382,7 +6352,7 @@ const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
         className: `${CLASSNAME$11}__day-wrapper`
       }, date && /*#__PURE__*/React__default.createElement(Button, {
         ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-        className: classnames(`${CLASSNAME$11}__month-day`, {
+        className: classNames(`${CLASSNAME$11}__month-day`, {
           [`${CLASSNAME$11}__month-day--is-today`]: isToday
         }),
         disabled: isOutOfRange,
@@ -6990,7 +6960,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
   return isOpen || isVisible ? /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(rootRef, ref)
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       isHidden: !isOpen,
       isLoading,
       isShown: isOpen || isVisible,
@@ -7014,7 +6984,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$10}__wrapper`,
     ref: wrapperRef
   }, (header || headerChildContent) && /*#__PURE__*/React__default.createElement("header", _extends({}, headerChildProps, {
-    className: classnames(`${CLASSNAME$10}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$10}__header--has-divider`, headerChildProps === null || headerChildProps === void 0 ? void 0 : headerChildProps.className)
+    className: classNames(`${CLASSNAME$10}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$10}__header--has-divider`, headerChildProps === null || headerChildProps === void 0 ? void 0 : headerChildProps.className)
   }), header, headerChildContent), /*#__PURE__*/React__default.createElement("div", {
     ref: mergeRefs(contentRef, localContentRef),
     className: `${CLASSNAME$10}__content`
@@ -7025,7 +6995,7 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$10}__sentinel ${CLASSNAME$10}__sentinel--bottom`,
     ref: setSentinelBottom
   })), (footer || footerChildContent) && /*#__PURE__*/React__default.createElement("footer", _extends({}, footerChildProps, {
-    className: classnames(`${CLASSNAME$10}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$10}__footer--has-divider`, footerChildProps === null || footerChildProps === void 0 ? void 0 : footerChildProps.className)
+    className: classNames(`${CLASSNAME$10}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$10}__footer--has-divider`, footerChildProps === null || footerChildProps === void 0 ? void 0 : footerChildProps.className)
   }), footer, footerChildContent), isLoading && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$10}__progress-overlay`
   }, /*#__PURE__*/React__default.createElement(Progress, {
@@ -7075,7 +7045,7 @@ const Divider = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("hr", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$$,
       theme
     }))
@@ -7117,7 +7087,7 @@ const DragHandle = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$_,
       theme
     }))
@@ -7201,7 +7171,7 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classnames(className, handleBasicClasses({
+  const rootClassName = classNames(className, handleBasicClasses({
     hasBackground,
     hasHeader: Boolean(!isEmpty(headerProps.children)),
     hasHeaderDivider,
@@ -7285,7 +7255,7 @@ const Flag = /*#__PURE__*/forwardRef((props, ref) => {
   const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
   const isTruncated = !!truncate;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$Y,
       color: flagColor,
       isTruncated
@@ -7347,7 +7317,7 @@ const FlexBox = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$X,
       orientation: orientation !== null && orientation !== void 0 ? orientation : wrap || hAlign || vAlign ? Orientation.horizontal : null,
       vAlign,
@@ -7424,7 +7394,7 @@ const BaseGenericBlock = /*#__PURE__*/forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/React__default.createElement(FlexBox, _extends({
     ref: ref,
-    className: classnames(className, CLASSNAME$W),
+    className: classNames(className, CLASSNAME$W),
     gap: gap,
     orientation: orientation
   }, forwardedProps), (figure || ((_sections$figureChild = sections.figureChildProps) === null || _sections$figureChild === void 0 ? void 0 : _sections$figureChild.children)) && /*#__PURE__*/React__default.createElement(FlexBox, _extends({
@@ -7432,7 +7402,7 @@ const BaseGenericBlock = /*#__PURE__*/forwardRef((props, ref) => {
     vAlign: forwardedProps.vAlign,
     hAlign: forwardedProps.hAlign
   }, figureProps, sections.figureChildProps, {
-    className: classnames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.className, `${CLASSNAME$W}__figure`)
+    className: classNames(figureProps === null || figureProps === void 0 ? void 0 : figureProps.className, (_sections$figureChild3 = sections.figureChildProps) === null || _sections$figureChild3 === void 0 ? void 0 : _sections$figureChild3.className, `${CLASSNAME$W}__figure`)
   }), figure, (_sections$figureChild4 = sections.figureChildProps) === null || _sections$figureChild4 === void 0 ? void 0 : _sections$figureChild4.children), (((_sections$contentChil = sections.contentChildProps) === null || _sections$contentChil === void 0 ? void 0 : _sections$contentChil.children) || sections.otherChildren.length > 0) && /*#__PURE__*/React__default.createElement(FlexBox, _extends({
     ref: (_sections$contentChil2 = sections.contentChild) === null || _sections$contentChil2 === void 0 ? void 0 : _sections$contentChil2.ref,
     orientation: Orientation.vertical,
@@ -7440,13 +7410,13 @@ const BaseGenericBlock = /*#__PURE__*/forwardRef((props, ref) => {
     vAlign: forwardedProps.vAlign,
     hAlign: forwardedProps.hAlign
   }, contentProps, sections.contentChildProps, {
-    className: classnames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.className, `${CLASSNAME$W}__content`)
+    className: classNames(contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_sections$contentChil3 = sections.contentChildProps) === null || _sections$contentChil3 === void 0 ? void 0 : _sections$contentChil3.className, `${CLASSNAME$W}__content`)
   }), (_sections$contentChil4 = sections.contentChildProps) === null || _sections$contentChil4 === void 0 ? void 0 : _sections$contentChil4.children, sections.otherChildren), (actions || ((_sections$actionsChil = sections.actionsChildProps) === null || _sections$actionsChil === void 0 ? void 0 : _sections$actionsChil.children)) && /*#__PURE__*/React__default.createElement(FlexBox, _extends({
     ref: (_sections$actionsChil2 = sections.actionsChild) === null || _sections$actionsChil2 === void 0 ? void 0 : _sections$actionsChil2.ref,
     vAlign: forwardedProps.vAlign,
     hAlign: forwardedProps.hAlign
   }, actionsProps, sections.actionsChildProps, {
-    className: classnames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.className, `${CLASSNAME$W}__actions`)
+    className: classNames(actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className, (_sections$actionsChil3 = sections.actionsChildProps) === null || _sections$actionsChil3 === void 0 ? void 0 : _sections$actionsChil3.className, `${CLASSNAME$W}__actions`)
   }), actions, (_sections$actionsChil4 = sections.actionsChildProps) === null || _sections$actionsChil4 === void 0 ? void 0 : _sections$actionsChil4.children));
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$W;
@@ -7573,7 +7543,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
   } = useOverflowTooltipLabel();
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: useMergeRefs(ref, labelRef),
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$V,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
@@ -7583,7 +7553,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps), children && Children.toArray(children).map((child, index) => {
     // Force wrap spaces around icons to make sure they are never stuck against text.
     if (isComponent(Icon)(child)) {
-      return /*#__PURE__*/React__default.createElement(Fragment$1, {
+      return /*#__PURE__*/React__default.createElement(Fragment, {
         key: child.key || index
       }, " ", child, " ");
     }
@@ -7665,7 +7635,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
   const computedHeadingElement = as || headingElement;
   return /*#__PURE__*/React__default.createElement(Text, _extends({
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$U
     })),
     as: computedHeadingElement,
@@ -7744,7 +7714,7 @@ const Grid = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, `${CLASSNAME$T}-container`, {
+    className: classNames(className, `${CLASSNAME$T}-container`, {
       [`${CLASSNAME$T}--h-align-${hAlign}`]: hAlign
     }, {
       [`${CLASSNAME$T}--v-align-${vAlign}`]: vAlign
@@ -7795,7 +7765,7 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$S,
       width,
       order,
@@ -7849,7 +7819,7 @@ const GridColumn = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$W);
   return /*#__PURE__*/React__default.createElement(Component, _extends({}, forwardedProps, {
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$R
     })),
     style: _objectSpread2(_objectSpread2({}, style), {}, {
@@ -7930,7 +7900,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("i", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       color: iconColor,
       colorVariant: iconColorVariant,
       hasShape,
@@ -7990,7 +7960,7 @@ const ImageCaption = props => {
   };
   return /*#__PURE__*/React__default.createElement(FlexBox, {
     as: as,
-    className: classnames(baseClassName && `${baseClassName}__wrapper`),
+    className: classNames(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
     vAlign: align,
@@ -7998,18 +7968,18 @@ const ImageCaption = props => {
     gap: "regular"
   }, (title || description) && /*#__PURE__*/React__default.createElement(Text, _extends({
     as: "p",
-    className: classnames(baseClassName && `${baseClassName}__caption`),
+    className: classNames(baseClassName && `${baseClassName}__caption`),
     truncate: truncate
   }, baseColor), title && /*#__PURE__*/React__default.createElement(Text, _extends({}, titleProps, {
     as: "span",
-    className: classnames(titleProps === null || titleProps === void 0 ? void 0 : titleProps.className, baseClassName && `${baseClassName}__title`),
+    className: classNames(titleProps === null || titleProps === void 0 ? void 0 : titleProps.className, baseClassName && `${baseClassName}__title`),
     typography: "subtitle1"
   }, titleColor), title), ' ', description && /*#__PURE__*/React__default.createElement(Text, _extends({}, descriptionProps, {
     as: "span",
-    className: classnames(descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.className, baseClassName && `${baseClassName}__description`),
+    className: classNames(descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.className, baseClassName && `${baseClassName}__description`),
     typography: "body1"
   }, descriptionContent))), tags && /*#__PURE__*/React__default.createElement(FlexBox, {
-    className: classnames(baseClassName && `${baseClassName}__tags`),
+    className: classNames(baseClassName && `${baseClassName}__tags`),
     orientation: "horizontal",
     vAlign: align
   }, tags));
@@ -8082,7 +8052,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("figure", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$P,
       captionPosition,
       align,
@@ -8090,7 +8060,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
       theme
     }), fillHeight && `${CLASSNAME$P}--fill-height`)
   }), /*#__PURE__*/React__default.createElement(Thumbnail, _extends({}, thumbnailProps, {
-    className: classnames(`${CLASSNAME$P}__image`, thumbnailProps === null || thumbnailProps === void 0 ? void 0 : thumbnailProps.className),
+    className: classNames(`${CLASSNAME$P}__image`, thumbnailProps === null || thumbnailProps === void 0 ? void 0 : thumbnailProps.className),
     fillHeight: fillHeight,
     align: align,
     image: image,
@@ -8827,7 +8797,7 @@ const Inner = /*#__PURE__*/forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/React__default.createElement(Lightbox, _extends({
     ref: ref,
-    className: classnames(className, CLASSNAME$O),
+    className: classNames(className, CLASSNAME$O),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -8910,7 +8880,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     React__default.createElement("ul", _extends({}, forwardedProps, {
       ref: ref,
-      className: classnames(className, CLASSNAME$N, wrap && `${CLASSNAME$N}--wrap`, fontColorClassName, typographyClassName)
+      className: classNames(className, CLASSNAME$N, wrap && `${CLASSNAME$N}--wrap`, fontColorClassName, typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list"
@@ -8979,7 +8949,7 @@ const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     htmlFor: htmlFor,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$M,
       isRequired,
       theme
@@ -9090,7 +9060,7 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-modal": "true",
     role: "dialog",
     tabIndex: -1,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$L,
       isHidden: !isOpen,
       isShown: isOpen || isVisible,
@@ -9190,7 +9160,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$K}__left-icon`,
     size: getIconSize(typography)
   }), children && /*#__PURE__*/React__default.createElement("span", {
-    className: classnames(`${CLASSNAME$K}__content`, {
+    className: classNames(`${CLASSNAME$K}__content`, {
       [`lumx-typography-${typography}`]: typography
     })
   }, children), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
@@ -9209,7 +9179,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     }, forwardedProps, {
       ref: ref,
       disabled: isDisabled,
-      className: classnames(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         prefix: CLASSNAME$K,
         color,
         colorVariant
@@ -9221,7 +9191,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps), {}, {
     href,
     target,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$K,
       color,
       colorVariant
@@ -9283,7 +9253,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("article", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$J,
       size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
       theme
@@ -9318,7 +9288,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$J}__link`
   }, /*#__PURE__*/React__default.createElement(Link, _extends({}, linkProps, {
     linkAs: linkAs,
-    className: classnames(`${CLASSNAME$J}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
+    className: classNames(`${CLASSNAME$J}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
     target: "_blank",
     href: link,
     color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -9363,7 +9333,7 @@ const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$I
     }))
   }));
@@ -9403,7 +9373,7 @@ const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$H
     }))
   }), children);
@@ -9477,7 +9447,7 @@ const Message = /*#__PURE__*/forwardRef((props, ref) => {
   const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       color,
       hasBackground,
       prefix: CLASSNAME$G
@@ -9549,7 +9519,7 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$F,
       theme
     }), {
@@ -9628,7 +9598,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     type: 'button'
   } : {};
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$E,
       theme
     }))
@@ -9689,7 +9659,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   const theme = useContext(ThemeContext);
   const isDropdown = orientation === Orientation.horizontal;
   return /*#__PURE__*/React__default.createElement("li", {
-    className: classnames(className, CLASSNAME$D, CLASSNAME$E, handleBasicClasses({
+    className: classNames(className, CLASSNAME$D, CLASSNAME$E, handleBasicClasses({
       prefix: CLASSNAME$E,
       theme
     })),
@@ -9697,7 +9667,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   }, /*#__PURE__*/React__default.createElement("button", _extends({}, forwardedProps, {
     "aria-controls": sectionId,
     "aria-expanded": isOpen,
-    className: classnames(`${CLASSNAME$E}__link`),
+    className: classNames(`${CLASSNAME$E}__link`),
     ref: buttonRef,
     onClick: event => {
       setIsOpen(!isOpen);
@@ -9714,7 +9684,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
     className: `${CLASSNAME$E}__label`,
     ref: ref
   }, label), /*#__PURE__*/React__default.createElement(Icon, {
-    className: classnames(`${CLASSNAME$E}__icon`, `${CLASSNAME$D}__chevron`),
+    className: classNames(`${CLASSNAME$E}__icon`, `${CLASSNAME$D}__chevron`),
     icon: isOpen ? mdiChevronUp : mdiChevronDown
   })), isOpen && (isDropdown ? /*#__PURE__*/React__default.createElement(Popover, {
     anchorRef: buttonRef,
@@ -9768,7 +9738,7 @@ forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
     value: theme
   }, /*#__PURE__*/React__default.createElement("nav", _extends({
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$C,
       theme,
       orientation
@@ -9890,7 +9860,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
     ref: mergeRefs(ref, rootRef),
     role: "alert"
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       color,
       hasAction,
       isHidden: !isOpen,
@@ -9961,7 +9931,7 @@ const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$E);
   return /*#__PURE__*/React__default.createElement(Popover, _extends({}, forwardedProps, {
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$A
     })),
     role: "dialog",
@@ -10031,7 +10001,7 @@ const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$D);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$z,
       orientation,
       theme
@@ -10107,7 +10077,7 @@ const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$y,
       theme
     }))
@@ -10166,7 +10136,7 @@ const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$x,
       theme,
       size
@@ -10241,7 +10211,7 @@ const Progress = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$w,
       theme,
       variant
@@ -10552,7 +10522,7 @@ const ProgressTracker = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(ref, stepListRef)
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$v
     }))
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -10659,7 +10629,7 @@ const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$u,
       hasError,
       isActive,
@@ -10734,7 +10704,7 @@ const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$t,
       isActive
     })),
@@ -10805,7 +10775,7 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       isChecked,
       isDisabled,
       isUnchecked: !isChecked,
@@ -10880,7 +10850,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$r
     }))
   }), children);
@@ -10950,7 +10920,7 @@ const SelectField = _ref => {
     icon: icon,
     size: Size.xs
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames([`${CLASSNAME$q}__input-native`, isEmpty && placeholder && `${CLASSNAME$q}__input-native--placeholder`])
+    className: classNames([`${CLASSNAME$q}__input-native`, isEmpty && placeholder && `${CLASSNAME$q}__input-native--placeholder`])
   }, !isEmpty && /*#__PURE__*/React__default.createElement("span", null, selectedValueRender === null || selectedValueRender === void 0 ? void 0 : selectedValueRender(value)), isEmpty && placeholder && /*#__PURE__*/React__default.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$q}__input-validity`
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -10994,7 +10964,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classnames(props.className, handleBasicClasses({
+    className: classNames(props.className, handleBasicClasses({
       hasInputClear,
       hasUnique: !props.isEmpty,
       prefix: CLASSNAME$q
@@ -11083,7 +11053,7 @@ const SelectMultipleField = _ref => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$p}__chips`
   }, !isEmpty && value.map((val, index) => selectedChipRender === null || selectedChipRender === void 0 ? void 0 : selectedChipRender(val, index, onClear, isDisabled, theme))), isEmpty && placeholder && /*#__PURE__*/React__default.createElement("div", {
-    className: classnames([`${CLASSNAME$p}__input-native`, `${CLASSNAME$p}__input-native--placeholder`])
+    className: classNames([`${CLASSNAME$p}__input-native`, `${CLASSNAME$p}__input-native--placeholder`])
   }, /*#__PURE__*/React__default.createElement("span", null, placeholder)), (isValid || hasError) && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$p}__input-validity`
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -11117,7 +11087,7 @@ const SelectMultipleField = _ref => {
  */
 const SelectMultiple = /*#__PURE__*/forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: classnames(props.className, handleBasicClasses({
+    className: classNames(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
       prefix: CLASSNAME$p
     })),
@@ -11163,7 +11133,7 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, theme === Theme.dark && 'lumx-color-font-light-N', handleBasicClasses({
+    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', handleBasicClasses({
       prefix: CLASSNAME$o
     }))
   }), content);
@@ -11252,7 +11222,7 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       emphasis,
       isOpen: showChildren,
       isSelected,
@@ -11337,7 +11307,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$m,
       size,
       color,
@@ -11400,7 +11370,7 @@ const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$l,
       aspectRatio,
       height: aspectRatio ? undefined : height,
@@ -11456,7 +11426,7 @@ const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$k,
       theme,
       typography,
@@ -11715,7 +11685,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$j,
       theme,
       hasLabel: Boolean(label)
@@ -12132,7 +12102,7 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(groupRef, ref),
     role: role,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$i
     })),
     "aria-roledescription": "slide",
@@ -12291,7 +12261,7 @@ const SlideshowItem = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$h
     }))
   }, forwardedProps), children);
@@ -12442,7 +12412,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$g,
       theme
     }), {
@@ -12473,7 +12443,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       itemProps = _objectWithoutProperties(_ref, _excluded2$1);
     const ariaLabel = label || (paginationItemLabel === null || paginationItemLabel === void 0 ? void 0 : paginationItemLabel(index)) || `${index + 1} / ${slidesCount}`;
     return /*#__PURE__*/React__default.createElement("button", _extends({
-      className: classnames(handleBasicClasses({
+      className: classNames(handleBasicClasses({
         prefix: `${CLASSNAME$g}__pagination-item`,
         isActive,
         isOnEdge,
@@ -12559,7 +12529,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$f,
       theme
     }), {
@@ -12647,7 +12617,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$e,
       isChecked,
       isDisabled,
@@ -12734,7 +12704,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("table", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$d,
       hasBefore,
       hasDividers,
@@ -12778,7 +12748,7 @@ const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("tbody", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$c
     }))
   }), children);
@@ -12860,7 +12830,7 @@ const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === TableCellVariant.head && /*#__PURE__*/React__default.createElement("th", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(handleBasicClasses({
+    className: classNames(handleBasicClasses({
       prefix: CLASSNAME$b,
       isSortable,
       isSorted: isSortable && !!sortOrder
@@ -12883,7 +12853,7 @@ const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$b}-content`
   }, children))), variant === TableCellVariant.body && /*#__PURE__*/React__default.createElement("td", _extends({}, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$b
     }), `${CLASSNAME$b}--body`)
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -12931,7 +12901,7 @@ const TableHeader = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("thead", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$a
     }))
   }), children);
@@ -12982,7 +12952,7 @@ const TableRow = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     tabIndex: isClickable && !isDisabled ? 0 : -1
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       isClickable: isClickable && !isDisabled,
       isDisabled,
       isSelected: isSelected && !isDisabled,
@@ -13102,7 +13072,7 @@ const TabList = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: mergeRefs(ref, tabListRef)
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$8,
       layout,
       position,
@@ -13189,7 +13159,7 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
   }, forwardedProps, {
     type: "button",
     id: state === null || state === void 0 ? void 0 : state.tabId,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$7,
       isActive,
       isDisabled
@@ -13258,7 +13228,7 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, forwardedProps, {
     id: state === null || state === void 0 ? void 0 : state.tabPanelId,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$6,
       isActive
     })),
@@ -13490,7 +13460,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasChips: Boolean(chips),
       hasError: !isValid && hasError,
       hasIcon: Boolean(icon),
@@ -13844,7 +13814,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
   } : undefined;
   return /*#__PURE__*/React__default.createElement(Wrapper, _extends({}, wrapperProps, {
     ref: ref,
-    className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
+    className: classNames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
       align,
       aspectRatio,
       prefix: CLASSNAME$4,
@@ -13871,7 +13841,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       width: isLoading ? (imgProps === null || imgProps === void 0 ? void 0 : imgProps.width) || (loadingPlaceholderImage === null || loadingPlaceholderImage === void 0 ? void 0 : loadingPlaceholderImage.naturalWidth) : undefined
     }, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style), imageErrorStyle), focusPointStyle), loadingStyle),
     ref: useMergeRefs(setImgElement, propImgRef),
-    className: classnames(handleBasicClasses({
+    className: classNames(handleBasicClasses({
       prefix: `${CLASSNAME$4}__image`,
       isLoading,
       hasDefinedSize: Boolean((imgProps === null || imgProps === void 0 ? void 0 : imgProps.height) && imgProps.width)
@@ -13887,7 +13857,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
     size: Size.xxs,
     theme: theme
   }) : fallback)), badge && /*#__PURE__*/React__default.cloneElement(badge, {
-    className: classnames(`${CLASSNAME$4}__badge`, badge.props.className)
+    className: classNames(`${CLASSNAME$4}__badge`, badge.props.className)
   }));
 });
 Thumbnail.displayName = COMPONENT_NAME$4;
@@ -13968,7 +13938,7 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasAfter: Boolean(after),
       hasBefore: Boolean(before),
       hasLabel: Boolean(label),
@@ -14277,7 +14247,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
     id: id,
     role: "tooltip",
     "aria-label": label || '',
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$2,
       position
     }), isHidden && VISUALLY_HIDDEN),
@@ -14385,7 +14355,7 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(wrapper.Component, _extends({
     ref: ref
   }, wrapper.props, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
       prefix: CLASSNAME$1,
       size,
@@ -14488,7 +14458,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
     }
     let NameComponent = 'span';
     const nProps = _objectSpread2(_objectSpread2({}, nameProps), {}, {
-      className: classnames(`${CLASSNAME}__name`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
+      className: classNames(`${CLASSNAME}__name`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, nameProps === null || nameProps === void 0 ? void 0 : nameProps.className)
     });
     if (isClickable) {
       NameComponent = Link;
@@ -14513,7 +14483,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
-    className: classnames(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME,
       orientation,
       size: componentSize,
@@ -14527,7 +14497,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
     linkProps: linkProps,
     alt: ""
   }, avatarProps, {
-    className: classnames(`${CLASSNAME}__avatar`, avatarProps.className),
+    className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
     size: componentSize,
     onClick: onClick,
     theme: theme