@activecollab/components 1.0.102 → 1.0.105

package/dist/index.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('classnames'), require('react-transition-group'), require('react-dom'), require('@popperjs/core'), require('moment'), require('react-day-picker/moment'), require('react-focus-lock'), require('react-remove-scroll'), require('react-day-picker'), require('resize-observer-polyfill'), require('lodash.debounce'), require('react-custom-scrollbars')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'classnames', 'react-transition-group', 'react-dom', '@popperjs/core', 'moment', 'react-day-picker/moment', 'react-focus-lock', 'react-remove-scroll', 'react-day-picker', 'resize-observer-polyfill', 'lodash.debounce', 'react-custom-scrollbars'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classNames, global.reactTransitionGroup, global.ReactDOM, global.core, global.moment, global.MomentLocaleUtils, global.FocusLock, global.reactRemoveScroll, global.DayPicker, global.ResizeObserver, global.debounce, global.reactCustomScrollbars));
-})(this, (function (exports, React, styled, classNames, reactTransitionGroup, ReactDOM, core, moment, MomentLocaleUtils, FocusLock, reactRemoveScroll, DayPicker, ResizeObserver, debounce, reactCustomScrollbars) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.styled, global.classnames, global.reactTransitionGroup, global.ReactDOM, global.core, global.moment, global.MomentLocaleUtils, global.FocusLock, global.reactRemoveScroll, global.DayPicker, global.ResizeObserver, global.debounce, global.reactCustomScrollbars));
+})(this, (function (exports, React, styled, classnames, reactTransitionGroup, ReactDOM, core, moment, MomentLocaleUtils, FocusLock, reactRemoveScroll, DayPicker, ResizeObserver, debounce, reactCustomScrollbars) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var MomentLocaleUtils__default = /*#__PURE__*/_interopDefaultLegacy(MomentLocaleUtils);
@@ -314,7 +314,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$Z = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$_ = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Button component
@@ -328,11 +328,11 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$Z);
+        args = _objectWithoutProperties(_ref, _excluded$_);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$1, _extends({
       disabled: disabled,
-      className: classNames__default["default"]("c-btn", className, {
+      className: classnames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
         "c-btn--outlined": variant === "secondary" || variant === "outlined",
         "c-btn--text_colored": variant === "tertiary" || variant === "text colored",
@@ -381,18 +381,18 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$Y = ["className", "disabled"];
+  var _excluded$Z = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        rest = _objectWithoutProperties(_ref, _excluded$Y);
+        rest = _objectWithoutProperties(_ref, _excluded$Z);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
       variant: "contained",
       disabled: disabled,
-      className: classNames__default["default"]("c-global-add-btn", className)
+      className: classnames__default["default"]("c-global-add-btn", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement(AddCrossTinyIcon$1, null));
   });
   GlobalAddButton.displayName = "GlobalAddButton";
@@ -419,15 +419,15 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$X = ["children", "className"];
+  var _excluded$Y = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$X);
+        rest = _objectWithoutProperties(_ref, _excluded$Y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
-      className: classNames__default["default"]("c-btn-group", className)
+      className: classnames__default["default"]("c-btn-group", className)
     }, rest), children);
   });
   ButtonGroup.displayName = "ButtonGroup";
@@ -2767,7 +2767,7 @@
     "padding": "0px"
   });
   StyledList.displayName = "StyledList";
-  var StyledListItem$1 = styled__default["default"].li.withConfig({
+  var StyledListItem = styled__default["default"].li.withConfig({
     displayName: "Styles__StyledListItem",
     componentId: "sc-dv1w0m-1"
   })(["", " ", " ", " color:var(--color-theme-900);line-height:28px;> svg:first-child{margin-right:8px;}&:hover{background-color:var(--color-theme-200);}&:focus{outline:none;}"], {
@@ -2783,18 +2783,18 @@
     "lineHeight": "1.25rem",
     "userSelect": "none"
   }, BoxSizingStyle, FontStyle);
-  StyledListItem$1.displayName = "StyledListItem";
+  StyledListItem.displayName = "StyledListItem";
   var StyledListSeparator = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledListSeparator",
     componentId: "sc-dv1w0m-2"
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$W = ["children", "className"];
+  var _excluded$X = ["children", "className"];
   var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$W);
+        props = _objectWithoutProperties(_ref, _excluded$X);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
       className: className,
@@ -2803,14 +2803,14 @@
   });
   List.displayName = "List";
 
-  var _excluded$V = ["children", "className"];
+  var _excluded$W = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$V);
+        props = _objectWithoutProperties(_ref, _excluded$W);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledListItem$1, _extends({}, props, {
-      className: classNames__default["default"]("c-list-item", className),
+    return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
+      className: classnames__default["default"]("c-list-item", className),
       ref: ref
     }), children);
   });
@@ -2819,7 +2819,7 @@
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, {
-      className: classNames__default["default"]("c-list-separator", className)
+      className: classnames__default["default"]("c-list-separator", className)
     });
   };
   ListSeparator.displayName = "ListSeparator";
@@ -2848,7 +2848,7 @@
     }, [refA, refB]);
   }
 
-  var _excluded$U = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
+  var _excluded$V = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         anchorEl = _ref.anchorEl,
@@ -2861,7 +2861,7 @@
         initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
         _ref$strategy = _ref.strategy,
         strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-        rest = _objectWithoutProperties(_ref, _excluded$U);
+        rest = _objectWithoutProperties(_ref, _excluded$V);
 
     var _useState = React.useState(true),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2967,15 +2967,15 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$T = ["className", "disableBackgroundColor"];
+  var _excluded$U = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
         _ref$disableBackgroun = _ref.disableBackgroundColor,
         disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-        rest = _objectWithoutProperties(_ref, _excluded$T);
+        rest = _objectWithoutProperties(_ref, _excluded$U);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
-      className: classNames__default["default"]("c-overlay", className),
+      className: classnames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
     }, rest));
   };
@@ -3023,7 +3023,7 @@
     house: 1000
   };
 
-  var _excluded$S = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
+  var _excluded$T = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -3040,7 +3040,7 @@
         _ref$preventClickEven = _ref.preventClickEventBubbling,
         preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         onClick = _ref.onClick,
-        rest = _objectWithoutProperties(_ref, _excluded$S);
+        rest = _objectWithoutProperties(_ref, _excluded$T);
 
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
@@ -3089,7 +3089,7 @@
       }, style),
       onKeyDown: handleKeyDown,
       tabIndex: 0,
-      className: classNames__default["default"]("c-window", className),
+      className: classnames__default["default"]("c-window", className),
       onClick: handleClick
     }), children))));
   });
@@ -3114,7 +3114,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$R = ["children", "className", "innerRef", "style"];
+  var _excluded$S = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -3122,11 +3122,11 @@
         innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
         _ref$style = _ref.style,
         style = _ref$style === void 0 ? {} : _ref$style,
-        rest = _objectWithoutProperties(_ref, _excluded$R);
+        rest = _objectWithoutProperties(_ref, _excluded$S);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
-      className: classNames__default["default"]("c-bubble", className),
+      className: classnames__default["default"]("c-bubble", className),
       style: style
     }), children);
   };
@@ -3257,7 +3257,7 @@
       className: popperClassName,
       tabIndex: -1
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
-      className: classNames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
+      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
     }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
@@ -3430,7 +3430,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$Q = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$R = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
         variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -3461,12 +3461,12 @@
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         className = _ref.className,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$Q);
+        props = _objectWithoutProperties(_ref, _excluded$R);
 
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
-      className: classNames__default["default"]("typography", className),
+      className: classnames__default["default"]("typography", className),
       $italic: italic,
       $tabularNums: tabularNums,
       $letterSpacing: letterSpacing,
@@ -3485,16 +3485,16 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$P = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$Q = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
         className = _ref.className,
         leftElement = _ref.leftElement,
         rightElement = _ref.rightElement,
-        props = _objectWithoutProperties(_ref, _excluded$P);
+        props = _objectWithoutProperties(_ref, _excluded$Q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
-      className: classNames__default["default"]("c-menu-header", className),
+      className: classnames__default["default"]("c-menu-header", className),
       ref: ref
     }), leftElement || /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -3505,7 +3505,10 @@
       color: "secondary",
       weight: "bold",
       overflow: "truncate",
-      className: "tw-mx-1"
+      style: {
+        marginLeft: "4px",
+        marginRight: "4px "
+      }
     }, title), rightElement || /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         minWidth: "24px"
@@ -3514,14 +3517,14 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$O = ["children", "className"];
+  var _excluded$P = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$O);
+        props = _objectWithoutProperties(_ref, _excluded$P);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, _extends({}, props, {
-      className: classNames__default["default"]("c-menu-footer", className),
+      className: classnames__default["default"]("c-menu-footer", className),
       ref: ref
     }), children);
   });
@@ -3560,53 +3563,44 @@
     "flexShrink": "0"
   });
   StyledListMenuItem.displayName = "StyledListMenuItem";
-  var StyledListItem = styled__default["default"].li.withConfig({
-    displayName: "Styles__StyledListItem",
+  var StyledBreadcrumbListItem = styled__default["default"].li.withConfig({
+    displayName: "Styles__StyledBreadcrumbListItem",
     componentId: "sc-rxaesd-3"
   })(["", ""], {
     "display": "flex"
   });
-  StyledListItem.displayName = "StyledListItem";
-  var StyledSeparator = styled__default["default"].li.withConfig({
-    displayName: "Styles__StyledSeparator",
-    componentId: "sc-rxaesd-4"
-  })(["", ""], {
-    "marginLeft": "1rem",
-    "marginRight": "1rem"
-  });
-  StyledSeparator.displayName = "StyledSeparator";
+  StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var Breadcrumbs = function Breadcrumbs(_ref) {
+  var _excluded$O = ["children", "className", "separator"];
+  var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
         _ref$separator = _ref.separator,
-        separator = _ref$separator === void 0 ? "/" : _ref$separator;
-    var ref = React.useRef(null);
+        separator = _ref$separator === void 0 ? "/" : _ref$separator,
+        rest = _objectWithoutProperties(_ref, _excluded$O);
+
+    var internalRef = React.useRef(null);
+    var handleRef = useForkRef(ref, internalRef);
     var menuBreadcrumbs = 0;
 
     var _useMemo = React.useMemo(function () {
-      return children.reduce(function (acc, value, index) {
-        index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
-        return acc;
-      }, {
-        x: [],
-        y: []
-      });
+      var collection = React__default["default"].Children.toArray(children);
+      return [collection.slice(0, menuBreadcrumbs), collection.slice(menuBreadcrumbs, collection.length)];
     }, [children, menuBreadcrumbs]),
-        x = _useMemo.x;
-        _useMemo.y;
+        _useMemo2 = _slicedToArray(_useMemo, 2);
+        _useMemo2[0];
+        var listCollection = _useMemo2[1];
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledNavElement, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledNavElement, _extends({
       className: className,
-      ref: ref
-    }, /*#__PURE__*/React__default["default"].createElement(StyledOList, null, null, x.map(function (child, index) {
+      ref: handleRef
+    }, rest), /*#__PURE__*/React__default["default"].createElement(StyledOList, null, null, listCollection.map(function (child, index) {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: index
-      }, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledSeparator, null, separator) : null, /*#__PURE__*/React__default["default"].createElement("li", {
-        className: "tw-flex"
-      }, child));
+      }, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, child));
     })));
-  };
+  });
+  Breadcrumbs.displayName = "Breadcrumbs";
 
   var defaultStyle$3 = {
     transitionProperty: "opacity, transform",
@@ -3751,7 +3745,7 @@
       return /*#__PURE__*/React__default["default"].createElement(TransitionComponent, _extends({}, transitionProps, {
         style: style
       }), /*#__PURE__*/React__default["default"].createElement(StyledTooltip, {
-        className: classNames__default["default"]("c-tooltip-ds", className),
+        className: classnames__default["default"]("c-tooltip-ds", className),
         $isLight: isLight
       }, title));
     })));
@@ -3773,9 +3767,16 @@
   });
   Body2.displayName = "Body2";
 
+  var StyledCounterButtonWrapper = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledCounterButtonWrapper",
+    componentId: "sc-1ecrcba-0"
+  })(["", " ", " ", ""], {
+    "display": "flex"
+  }, FontStyle, BoxSizingStyle);
+  StyledCounterButtonWrapper.displayName = "StyledCounterButtonWrapper";
   var StyledCounterButton = styled__default["default"](Button).withConfig({
     displayName: "Styles__StyledCounterButton",
-    componentId: "sc-1ecrcba-0"
+    componentId: "sc-1ecrcba-1"
   })(["", " ", ""], function (props) {
     return props.$active && styled.css(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
   }, function (props) {
@@ -3784,17 +3785,17 @@
   StyledCounterButton.displayName = "StyledCounterButton";
   var StyledCounterButtonCounter = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledCounterButtonCounter",
-    componentId: "sc-1ecrcba-1"
+    componentId: "sc-1ecrcba-2"
   })(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
   StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
   var StyledCounterButtonReset = styled__default["default"](Button).withConfig({
     displayName: "Styles__StyledCounterButtonReset",
-    componentId: "sc-1ecrcba-2"
+    componentId: "sc-1ecrcba-3"
   })(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
   StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
   var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
     displayName: "Styles__StyledCounterButtonLabel",
-    componentId: "sc-1ecrcba-3"
+    componentId: "sc-1ecrcba-4"
   })(["", " ", ":hover &&{", "}", ""], {
     "pointerEvents": "none"
   }, StyledCounterButton, function (props) {
@@ -3816,10 +3817,10 @@
         className = _ref.className,
         args = _objectWithoutProperties(_ref, _excluded$L);
 
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]("tw-flex ac-font box-sizing", className)
+    return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
+      className: className
     }, /*#__PURE__*/React__default["default"].createElement(StyledCounterButton, _extends({
-      className: classNames__default["default"]("c-counter-button", {
+      className: classnames__default["default"]("c-counter-button", {
         "c-counter-button__selected": counter
       })
     }, args, {
@@ -3828,7 +3829,7 @@
       $active: counter > 0 || active,
       $selected: counter > 0
     }), icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
-      className: classNames__default["default"]("c-counter-button__icon")
+      className: classnames__default["default"]("c-counter-button__icon")
     }), label && /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonLabel, {
       color: "secondary",
       weight: "medium",
@@ -4801,7 +4802,7 @@
       }), _ref2;
     }, [isDisabled]);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
-      className: classNames__default["default"]("c-date-stepper", className)
+      className: classnames__default["default"]("c-date-stepper", className)
     }, renderLeftRightButtons ? /*#__PURE__*/React__default["default"].createElement(Button, {
       type: "button",
       variant: "secondary",
@@ -4889,7 +4890,7 @@
       });
     }, [activeStep, progressive, steps]);
     return /*#__PURE__*/React__default["default"].createElement(StyledSteps, {
-      className: classNames__default["default"]("c-steps-wrapper", wrapperClassName),
+      className: classnames__default["default"]("c-steps-wrapper", wrapperClassName),
       ref: ref
     }, steps.map(function (step) {
       return /*#__PURE__*/React__default["default"].createElement(StyledStep, {
@@ -5065,7 +5066,7 @@
       className: "c-table__wrap"
     }, /*#__PURE__*/React__default["default"].createElement(StyledTable, {
       ref: innerRef,
-      className: classNames__default["default"]("c-table", className),
+      className: classnames__default["default"]("c-table", className),
       $striped: striped
     }, children));
   };
@@ -5074,7 +5075,7 @@
     var children = _ref2.children,
         className = _ref2.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledTableHead, {
-      className: classNames__default["default"]("c-table__head", className)
+      className: classnames__default["default"]("c-table__head", className)
     }, children);
   };
   Thead.displayName = "Thead";
@@ -5082,7 +5083,7 @@
     var children = _ref3.children,
         className = _ref3.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledTableBody, {
-      className: classNames__default["default"]("c-table__body", className)
+      className: classnames__default["default"]("c-table__body", className)
     }, children);
   };
   Tbody.displayName = "Tbody";
@@ -5290,7 +5291,7 @@
     var renderNoResults = React.useCallback(function () {
       return /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("td", {
         colSpan: header.length,
-        className: classNames__default["default"]({
+        className: classnames__default["default"]({
           "text-center": !noResultsCallback
         })
       }, noResultsCallback ? noResultsCallback() : "There is no data."));
@@ -5327,7 +5328,7 @@
       }, header.map(function (h, colIndex) {
         return /*#__PURE__*/React__default["default"].createElement("td", {
           key: colIndex,
-          className: classNames__default["default"]("c-table__cell c-data-table__item", {
+          className: classnames__default["default"]("c-table__cell c-data-table__item", {
             hovered: hovered === h.key
           }),
           "data-key": h.key,
@@ -5358,19 +5359,19 @@
               onClick: toggleCollapse,
               className: "c-table__body__icon c-table--toggle-collapsed"
             }, /*#__PURE__*/React__default["default"].createElement(CollapseExpandSingleIcon$1, {
-              className: classNames__default["default"]({
+              className: classnames__default["default"]({
                 "c-table__collapse_icon--expanded": !collapsed[key],
                 "c-table__collapse_icon--collapsed": collapsed[key]
               })
             })))), /*#__PURE__*/React__default["default"].createElement(Tbody, {
-              className: classNames__default["default"]("c-table__grouped__head", "head_".concat(i), {
+              className: classnames__default["default"]("c-table__grouped__head", "head_".concat(i), {
                 "c-table__grouped__head--expanded": isCollapsible && !collapsed[key],
                 "c-table__grouped__head--collapsed": isCollapsible && collapsed[key],
                 last: i === keys.length - 1,
                 first: i === 0
               })
             }, groupHead(data[key], keys[i] !== "null" ? keys[i].trim() : null)), /*#__PURE__*/React__default["default"].createElement(Tbody, {
-              className: classNames__default["default"]("c-table__group c-table_group_".concat(i), {
+              className: classnames__default["default"]("c-table__group c-table_group_".concat(i), {
                 hidden: collapsed[key]
               })
             }, data[key].map(function (row, index) {
@@ -5420,7 +5421,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledDataTable, _extends({
       as: Table,
       innerRef: tableRef,
-      className: classNames__default["default"]("c-data-table", className, {
+      className: classnames__default["default"]("c-data-table", className, {
         "c-table__grouped": groupBy,
         "c-table__collapsible": isCollapsible,
         "padding-b-0": groupBy && collapsed[Object.keys(data).slice(-1)[0]]
@@ -5432,7 +5433,7 @@
     }, header.map(function (h, index) {
       return /*#__PURE__*/React__default["default"].createElement("th", {
         key: h.key,
-        className: classNames__default["default"]("c-table__cell", {
+        className: classnames__default["default"]("c-table__cell", {
           "c-table__cell--hovered": hovered === h.key,
           "c-table__head--hidden": groupBy && allGroupsCollapsed && h.hideCollapsed
         }),
@@ -5456,7 +5457,7 @@
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: sortColumn,
         "data-index": index,
-        className: classNames__default["default"]("c-table__icon-wrapper", {
+        className: classnames__default["default"]("c-table__icon-wrapper", {
           "cursor-pointer": h.sortable === true
         })
       }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -5464,7 +5465,7 @@
       }, h.label), h.sortable && /*#__PURE__*/React__default["default"].createElement(SortIcon$1, {
         width: "10px",
         height: "10px",
-        className: classNames__default["default"]("c-table__icon", {
+        className: classnames__default["default"]("c-table__icon", {
           "c-table__icon--inactive": h.key !== active,
           "c-table__icon--active": h.key === active,
           "c-table__icon--asc": columnDirection === exports.SortDirection.Asc && h.key === active,
@@ -5480,7 +5481,7 @@
   var StyledCompleteCheckbox = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledCompleteCheckbox",
     componentId: "sc-1801dzg-0"
-  })(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", ""], {
+  })(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
     "width": "1.5rem",
     "height": "1.5rem",
     "borderRadius": "9999px",
@@ -5508,6 +5509,11 @@
     return props.$disabled && styled.css(["", " opacity:0.5;"], {
       "cursor": "default"
     });
+  }, function (props) {
+    return !props.$checkMarkClassName && styled.css(["svg{", "}"], {
+      "width": "3rem",
+      "height": "3rem"
+    });
   });
   StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
 
@@ -5525,14 +5531,15 @@
         checkMarkClassName = _ref.checkMarkClassName;
     return /*#__PURE__*/React__default["default"].createElement(StyledCompleteCheckbox, {
       onClick: onClick,
-      className: classNames__default["default"]("c-complete-checkbox", className),
+      className: classnames__default["default"]("c-complete-checkbox", className),
       $primary: primary,
       $completed: completed,
       $disabled: disabled,
-      $animation: !disabled && completed && animate
+      $animation: !disabled && completed && animate,
+      $checkMarkClassName: !!checkMarkClassName
     }, /*#__PURE__*/React__default["default"].createElement("svg", {
       viewBox: "0 0 48 48",
-      className: checkMarkClassName ? checkMarkClassName : "tw-w-12 tw-h-12"
+      className: checkMarkClassName
     }, /*#__PURE__*/React__default["default"].createElement("path", {
       d: "M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8"
     }), /*#__PURE__*/React__default["default"].createElement("polyline", {
@@ -5568,7 +5575,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$I);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
-      className: classNames__default["default"](className, {
+      className: classnames__default["default"](className, {
         "ac-shadow--raised--lg": !useOptimizedShadow && hover && type === "paper-1",
         "ac-shadow-optimized--lg": useOptimizedShadow && hover && type === "paper-1",
         "ac-shadow--lg": !hover && type === "paper-1",
@@ -5603,7 +5610,7 @@
     var width = _ref.width,
         className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledScaleBar, {
-      className: classNames__default["default"]("c-scale-bar", className)
+      className: classnames__default["default"]("c-scale-bar", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledScaleBarInner, {
       className: "c-scale-bar__progress",
       $width: width
@@ -5631,7 +5638,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
-      className: classNames__default["default"]("c-card", className),
+      className: classnames__default["default"]("c-card", className),
       hover: hoverable,
       useOptimizedShadow: true,
       ref: ref
@@ -5699,7 +5706,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, {
       ref: ref,
       hoverable: true,
-      className: classNames__default["default"]("entity-card-wrapper", {
+      className: classnames__default["default"]("entity-card-wrapper", {
         "grid-item": renderAs === "grid-item",
         "list-item": renderAs === "list-item"
       }, className),
@@ -5887,7 +5894,7 @@
     }, [value]);
     var renderSignifier = React.useMemo(function () {
       return /*#__PURE__*/React__default["default"].createElement(StyledSignifier, {
-        className: classNames__default["default"]("c-signifier", className),
+        className: classnames__default["default"]("c-signifier", className),
         $direction: direction
       }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
         as: Component
@@ -5986,7 +5993,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
-      className: classNames__default["default"]("c-tag", className),
+      className: classnames__default["default"]("c-tag", className),
       ref: ref
     }, rest), showDot ? /*#__PURE__*/React__default["default"].createElement(StyledTagDot, {
       $showText: showText,
@@ -6010,7 +6017,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
       ref: ref,
-      className: classNames__default["default"]("c-loader c-loader--linear", className)
+      className: classnames__default["default"]("c-loader c-loader--linear", className)
     }, rest));
   });
   LinearLoader.displayName = "LinearLoader";
@@ -6028,7 +6035,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
-      className: classNames__default["default"]("c-loader c-loader--dots", className)
+      className: classnames__default["default"]("c-loader c-loader--dots", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
   });
   DotsLoader.displayName = "DotsLoader";
@@ -6047,7 +6054,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
       ref: ref,
-      className: classNames__default["default"]("c-loader c-loader--spinner", className)
+      className: classnames__default["default"]("c-loader c-loader--spinner", className)
     }, rest), /*#__PURE__*/React__default["default"].createElement("svg", {
       viewBox: "25 25 50 50"
     }, /*#__PURE__*/React__default["default"].createElement("circle", {
@@ -6092,7 +6099,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
-      className: classNames__default["default"]("c-checkbox", {
+      className: classnames__default["default"]("c-checkbox", {
         "c-checkbox__hover": hover,
         "c-checkbox__controlled": typeof hover === "boolean"
       }, className),
@@ -6148,7 +6155,7 @@
         props = _objectWithoutProperties(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledRadioButton, {
-      className: classNames__default["default"]("c-radio-btn", {
+      className: classnames__default["default"]("c-radio-btn", {
         "c-radio-btn__hover": hover,
         "c-radio-btn__controlled": typeof hover === "boolean"
       }, className),
@@ -6255,7 +6262,7 @@
       ref: hover ? ref : null,
       title: name,
       onMouseEnter: handleOnMouseEnter,
-      className: classNames__default["default"]("c-option", className),
+      className: classnames__default["default"]("c-option", className),
       hover: hover
     }, renderOption ? renderOption : name);
   });
@@ -6329,7 +6336,7 @@
     }, [allOptionValues, onChange]);
     return /*#__PURE__*/React__default["default"].createElement(StyledOptionGroup, {
       key: id,
-      className: classNames__default["default"]("c-option-group", optionGroupClassName)
+      className: classnames__default["default"]("c-option-group", optionGroupClassName)
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupOption, {
       title: name,
       onMouseEnter: handleHover,
@@ -6490,7 +6497,7 @@
     }, [invertHorizontal, invertVertical, disableVertical, disableHorizontal]);
     return /*#__PURE__*/React__default["default"].createElement(StyledScrollShadow, _extends({}, rest, {
       ref: ref,
-      className: classNames__default["default"]("c-scroll-shadow", className)
+      className: classnames__default["default"]("c-scroll-shadow", className)
     }), children({
       onScroll: handleScroll
     }), !disableVertical ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledScrollShadowTop, {
@@ -6557,13 +6564,14 @@
     return height;
   };
 
-  var _excluded$r = ["as", "className", "invert"];
+  var _excluded$r = ["as", "className", "invert", "style"];
   var ScrollElement = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$as = _ref.as,
         as = _ref$as === void 0 ? "div" : _ref$as,
         className = _ref.className,
         _ref$invert = _ref.invert,
         invert = _ref$invert === void 0 ? false : _ref$invert,
+        style = _ref.style,
         rest = _objectWithoutProperties(_ref, _excluded$r);
 
     var internalRef = useInitScrollRef(null, invert);
@@ -6571,7 +6579,10 @@
 
     var props = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: handleRef,
-      className: classNames__default["default"]("c-scroll-element tw-overflow-auto", className)
+      className: classnames__default["default"]("c-scroll-element", className),
+      style: _objectSpread2({
+        overflow: "auto"
+      }, style)
     });
 
     return /*#__PURE__*/React__default["default"].createElement(as, props);
@@ -7034,7 +7045,7 @@
       ref: ref,
       type: type,
       disabled: disabled,
-      className: classNames__default["default"]("c-input", className),
+      className: classnames__default["default"]("c-input", className),
       $size: size,
       $invalid: invalid
     }, rest));
@@ -7223,7 +7234,7 @@
     var props = React.useMemo(function () {
       if (target) {
         return {
-          menuClassName: classNames__default["default"]("c-select", selectClassName),
+          menuClassName: classnames__default["default"]("c-select", selectClassName),
           onClose: onClose,
           onOpen: onOpen,
           target: target,
@@ -7234,7 +7245,7 @@
       }
 
       return {
-        className: classNames__default["default"]("c-select", selectClassName)
+        className: classnames__default["default"]("c-select", selectClassName)
       };
     }, [target, selectClassName, onClose, onOpen, mode, open, position]);
     var handleEmptyAction = React.useCallback(function (value) {
@@ -7406,7 +7417,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledNavListItem, _extends({
-      className: classNames__default["default"]("c-nav__item", {
+      className: classnames__default["default"]("c-nav__item", {
         "c-nav__item--active": active
       }, className),
       ref: ref
@@ -7704,7 +7715,7 @@
       return setMoreOpened(false);
     }, []);
     return /*#__PURE__*/React__default["default"].createElement(StyledNav, {
-      className: classNames__default["default"]("c-nav", className),
+      className: classnames__default["default"]("c-nav", className),
       $align: alignment,
       $role: role
     }, /*#__PURE__*/React__default["default"].createElement(StyledNavList, {
@@ -7833,7 +7844,7 @@
       }
     }, [onChange]);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuSelector, {
-      className: classNames__default["default"]("c-menu-selector", className)
+      className: classnames__default["default"]("c-menu-selector", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React__default["default"].createElement(StyledMenuSelectorBack, {
       onClick: onBack,
       width: "16px",
@@ -7986,7 +7997,7 @@
       $invalid: invalid,
       ref: ref,
       disabled: disabled,
-      className: classNames__default["default"]("c-textarea", {
+      className: classnames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
       }, className)
     }));
@@ -8250,7 +8261,7 @@
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
     }) : null, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
-      className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
+      className: classnames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
       $mode: mode
@@ -8311,7 +8322,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, _extends({
       type: "paper-2",
-      className: classNames__default["default"]("c-header", className),
+      className: classnames__default["default"]("c-header", className),
       size: size,
       ref: ref
     }, rest), children);
@@ -8394,7 +8405,7 @@
       onKeyDown: handleTextAreaKeyDown,
       onFocus: handleFocus,
       rows: rows,
-      className: classNames__default["default"]("c-autoresizetextarea", className),
+      className: classnames__default["default"]("c-autoresizetextarea", className),
       style: {
         minHeight: "".concat(lineHeight, "px"),
         lineHeight: "".concat(lineHeight, "px")
@@ -8492,7 +8503,7 @@
         customToggleIcon: customToggleIcon
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordion, {
-      className: classNames__default["default"]("accordion", className)
+      className: classnames__default["default"]("accordion", className)
     }, children));
   };
   Accordion.displayName = "Accordion";
@@ -8517,7 +8528,7 @@
         id: itemId
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItem, {
-      className: classNames__default["default"]("accordionItem", className)
+      className: classnames__default["default"]("accordionItem", className)
     }, children));
   };
   AccordionItem.displayName = "AccordionItem";
@@ -8556,7 +8567,7 @@
     }, [customToggleIcon]);
     return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHead, {
       onClick: onClickCallback,
-      className: classNames__default["default"]("accordionItemHead", className)
+      className: classnames__default["default"]("accordionItemHead", className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadText, {
       className: "accordionItemHead__text"
     }, children), /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemHeadIcon, {
@@ -8596,7 +8607,7 @@
     }, function (state) {
       return /*#__PURE__*/React__default["default"].createElement(StyledAccordionItemBody, {
         ref: divRef,
-        className: classNames__default["default"]("accordionItemBody", className),
+        className: classnames__default["default"]("accordionItemBody", className),
         style: _objectSpread2(_objectSpread2({}, defaultStyle), transitionStyles[state])
       }, children);
     });
@@ -8647,7 +8658,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledChoose, _extends({
       disabled: disabled,
-      className: classNames__default["default"]("c-choose", className),
+      className: classnames__default["default"]("c-choose", className),
       active: active
     }, args), children);
   };
@@ -8747,7 +8758,7 @@
         args = _objectWithoutProperties(_ref, _excluded$f);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBackLink, _extends({
-      className: classNames__default["default"]("c-back-link", className)
+      className: classnames__default["default"]("c-back-link", className)
     }, args), children);
   };
   BackLink.displayName = "BackLink";
@@ -8769,7 +8780,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledLink, _extends({
       disabled: disabled,
-      className: classNames__default["default"]("c-link", className, {
+      className: classnames__default["default"]("c-link", className, {
         "c-link--contained": variant === "primary" || variant === "contained",
         "c-link--outlined": variant === "secondary" || variant === "outlined",
         "c-link--text_colored": variant === "tertiary" || variant === "text colored",
@@ -8892,7 +8903,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(SlideFromTop, {
       in: open
     }, /*#__PURE__*/React__default["default"].createElement(StyledDialog, {
-      className: classNames__default["default"]("c-dialog", className)
+      className: classnames__default["default"]("c-dialog", className)
     }, children)));
   });
   Dialog.displayName = "Dialog";
@@ -8904,7 +8915,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$d);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContent, _extends({
-      className: classNames__default["default"]("c-dialog-content", className)
+      className: classnames__default["default"]("c-dialog-content", className)
     }, rest), children);
   };
   DialogContent.displayName = "DialogContent";
@@ -8912,7 +8923,7 @@
   var DialogContentDivider = function DialogContentDivider(_ref) {
     var className = _ref.className;
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogContentDivider, {
-      className: classNames__default["default"]("c-dialog-content-divider", className)
+      className: classnames__default["default"]("c-dialog-content-divider", className)
     });
   };
   DialogContentDivider.displayName = "DialogContentDivider";
@@ -8926,7 +8937,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$c);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogTitle, _extends({
-      className: classNames__default["default"]("c-dialog-title-wrapper", className)
+      className: classnames__default["default"]("c-dialog-title-wrapper", className)
     }, rest), disableDefaultHeading ? children : /*#__PURE__*/React__default["default"].createElement(Header3, null, children));
   };
   DialogTitle.displayName = "DialogTitle";
@@ -8938,7 +8949,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$b);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDialogActions, _extends({
-      className: classNames__default["default"]("c-dialog-actions", className)
+      className: classnames__default["default"]("c-dialog-actions", className)
     }, rest), children);
   };
   DialogActions.displayName = "DialogActions";
@@ -8963,7 +8974,7 @@
       ref: ref,
       open: open,
       onClose: onCancel,
-      className: classNames__default["default"]("c-confirm-dialog", className)
+      className: classnames__default["default"]("c-confirm-dialog", className)
     }, /*#__PURE__*/React__default["default"].createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(DialogContentDivider, null), /*#__PURE__*/React__default["default"].createElement(DialogContent, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
       lineHeight: "loose",
       color: "secondary",
@@ -9160,7 +9171,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledPressed, _extends({
       active: active,
       ref: ref,
-      className: classNames__default["default"]({
+      className: classnames__default["default"]({
         "c-pressed__active": active
       }, className)
     }, args), children);
@@ -9193,7 +9204,7 @@
       type: "button"
     }, /*#__PURE__*/React__default["default"].createElement(StyledIconComponent, {
       as: IconComponent,
-      className: classNames__default["default"]("date-picker-target", targetIconClassName)
+      className: classnames__default["default"]("date-picker-target", targetIconClassName)
     })));
   });
   SelectDateTarget.displayName = "SelectDateTarget";
@@ -9572,7 +9583,7 @@
         active: showDatePicker
       }) : /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButton, {
         type: "button",
-        className: classNames__default["default"]("date-picker-target", targetClassName)
+        className: classnames__default["default"]("date-picker-target", targetClassName)
       }, /*#__PURE__*/React__default["default"].createElement("span", {
         className: targetTextClassName
       }, labelText)),
@@ -10011,7 +10022,7 @@
         args = _objectWithoutProperties(_ref, _excluded$3);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledToggle, {
-      className: classNames__default["default"]("c-toggle", className),
+      className: classnames__default["default"]("c-toggle", className),
       $isHovered: hovered
     }, /*#__PURE__*/React__default["default"].createElement(StyledToggleCheckbox, _extends({
       ref: ref,
@@ -10618,7 +10629,7 @@
     var variant = size === "regular" ? "Body 2" : "Caption 1";
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       as: "label",
-      className: classNames__default["default"]("c-label", className),
+      className: classnames__default["default"]("c-label", className),
       variant: variant,
       color: color,
       weight: weight,
@@ -10703,7 +10714,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
       height: radius * 2,
       width: radius * 2,
-      className: classNames__default["default"](className)
+      className: classnames__default["default"](className)
     }, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
       $color: backgroundColor,
       $strokeDashOffset: -strokeDashoffsetOuter,