@activecollab/components 1.0.88 → 1.0.91

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-dom'), require('@popperjs/core'), require('react-transition-group'), 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-dom', '@popperjs/core', 'react-transition-group', '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.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.FocusLock, global.reactRemoveScroll, global.DayPicker, global.ResizeObserver, global.debounce, global.reactCustomScrollbars));
-})(this, (function (exports, React, styled, classnames, ReactDOM, core, reactTransitionGroup, 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.ReactDOM, global.core, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.FocusLock, global.reactRemoveScroll, global.DayPicker, global.ResizeObserver, global.debounce, global.reactCustomScrollbars));
+})(this, (function (exports, React, styled, classNames, ReactDOM, core, reactTransitionGroup, 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);
@@ -332,7 +332,7 @@
 
     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",
@@ -392,7 +392,7 @@
       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";
@@ -427,7 +427,7 @@
 
     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";
@@ -726,7 +726,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));
     })));
@@ -946,7 +946,7 @@
     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,
@@ -1024,9 +1024,9 @@
         args = _objectWithoutProperties(_ref, _excluded$Q);
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classnames__default["default"]("tw-flex ac-font box-sizing", className)
+      className: classNames__default["default"]("tw-flex ac-font box-sizing", 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, {
@@ -1035,7 +1035,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",
@@ -1734,7 +1734,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$O);
 
     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));
   };
@@ -1812,7 +1812,7 @@
       }, style),
       onKeyDown: handleKeyDown,
       tabIndex: 0,
-      className: classnames__default["default"]("c-window", className),
+      className: classNames__default["default"]("c-window", className),
       onClick: handleClick
     }), children))));
   });
@@ -1849,7 +1849,7 @@
 
     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);
   };
@@ -1980,7 +1980,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, {
@@ -2001,7 +2001,7 @@
         props = _objectWithoutProperties(_ref, _excluded$L);
 
     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: {
@@ -2028,7 +2028,7 @@
         props = _objectWithoutProperties(_ref, _excluded$K);
 
     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);
   });
@@ -2347,7 +2347,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",
@@ -2435,7 +2435,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, {
@@ -2611,7 +2611,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));
   };
@@ -2620,7 +2620,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";
@@ -2628,7 +2628,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";
@@ -2900,7 +2900,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."));
@@ -2937,7 +2937,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,
@@ -2968,19 +2968,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) {
@@ -3030,7 +3030,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]]
@@ -3042,7 +3042,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
         }),
@@ -3066,7 +3066,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", {
@@ -3074,7 +3074,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,
@@ -3135,7 +3135,7 @@
         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,
@@ -3178,7 +3178,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",
@@ -3213,7 +3213,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
@@ -3241,7 +3241,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
@@ -3309,7 +3309,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),
@@ -3497,7 +3497,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
@@ -3596,7 +3596,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,
@@ -3620,7 +3620,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";
@@ -3638,7 +3638,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";
@@ -3657,7 +3657,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", {
@@ -3728,7 +3728,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),
@@ -3808,7 +3808,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),
@@ -3915,7 +3915,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);
   });
@@ -3989,7 +3989,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,
@@ -4150,7 +4150,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, {
@@ -4231,7 +4231,7 @@
 
     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 tw-overflow-auto", className)
     });
 
     return /*#__PURE__*/React__default["default"].createElement(as, props);
@@ -4690,7 +4690,7 @@
       ref: ref,
       type: type,
       disabled: disabled,
-      className: classnames__default["default"]("c-input", className),
+      className: classNames__default["default"]("c-input", className),
       $size: size
     }, rest));
   });
@@ -4878,7 +4878,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,
@@ -4889,7 +4889,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) {
@@ -5061,7 +5061,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
@@ -5359,7 +5359,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, {
@@ -5486,7 +5486,7 @@
         props = _objectWithoutProperties(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
-      className: classnames__default["default"]("c-list-item", className),
+      className: classNames__default["default"]("c-list-item", className),
       ref: ref
     }), children);
   });
@@ -5495,7 +5495,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";
@@ -5586,7 +5586,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",
@@ -7866,7 +7866,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       ref: ref,
       disabled: disabled,
-      className: classnames__default["default"]("c-textarea", {
+      className: classNames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
       }, className)
     }));
@@ -8130,7 +8130,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
@@ -8191,7 +8191,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);
@@ -8274,7 +8274,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")
@@ -8372,7 +8372,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";
@@ -8397,7 +8397,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";
@@ -8436,7 +8436,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, {
@@ -8476,7 +8476,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);
     });
@@ -8527,7 +8527,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);
   };
@@ -8627,7 +8627,7 @@
         args = _objectWithoutProperties(_ref, _excluded$d);
 
     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";
@@ -8649,7 +8649,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",
@@ -8772,7 +8772,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";
@@ -8784,7 +8784,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$b);
 
     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";
@@ -8792,7 +8792,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";
@@ -8806,7 +8806,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$a);
 
     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";
@@ -8818,7 +8818,7 @@
         rest = _objectWithoutProperties(_ref, _excluded$9);
 
     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";
@@ -8843,7 +8843,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",
@@ -9040,7 +9040,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);
@@ -9073,7 +9073,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";
@@ -9452,7 +9452,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)),
@@ -9822,7 +9822,7 @@
         args = _objectWithoutProperties(_ref, _excluded$2);
 
     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,
@@ -10426,7 +10426,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,
@@ -10437,6 +10437,76 @@
 
   var GlobalStyle = styled.createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--red-alert:rgb(237,97,97);--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}"]);
 
+  var StyledSvg = styled__default["default"].svg.withConfig({
+    displayName: "Styles__StyledSvg",
+    componentId: "sc-o6dcyu-0"
+  })(["transform:rotate(-90deg);"]);
+  StyledSvg.displayName = "StyledSvg";
+  var StyledBackgroundCircle = styled__default["default"].circle.withConfig({
+    displayName: "Styles__StyledBackgroundCircle",
+    componentId: "sc-o6dcyu-1"
+  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
+    return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-theme-300);"]);
+  }, function (props) {
+    return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
+  });
+  StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
+  var StyledForegroundCircle = styled__default["default"].circle.withConfig({
+    displayName: "Styles__StyledForegroundCircle",
+    componentId: "sc-o6dcyu-2"
+  })(["fill:transparent;transition:stroke-dashoffset 0.5s linear;", " ", ""], function (props) {
+    return props.$color ? styled.css(["stroke:", ";"], props.$color) : styled.css(["stroke:var(--color-secondary);"]);
+  }, function (props) {
+    return props.$strokeDashOffset && styled.css(["stroke-dashoffset:", ";"], props.$strokeDashOffset);
+  });
+  StyledForegroundCircle.displayName = "StyledForegroundCircle";
+
+  var ProgressRing = function ProgressRing(_ref) {
+    var backgroundColor = _ref.backgroundColor,
+        progressColor = _ref.progressColor,
+        _ref$progress = _ref.progress,
+        progress = _ref$progress === void 0 ? 0 : _ref$progress,
+        _ref$radius = _ref.radius,
+        radius = _ref$radius === void 0 ? 20 : _ref$radius,
+        _ref$stroke = _ref.stroke,
+        stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
+        className = _ref.className;
+    var normalizedRadius = React.useMemo(function () {
+      return radius - stroke;
+    }, [radius, stroke]);
+    var circumference = React.useMemo(function () {
+      return normalizedRadius * 2 * Math.PI;
+    }, [normalizedRadius]);
+    var strokeDashoffsetOuter = React.useMemo(function () {
+      return circumference - (100 - progress) / 100 * circumference;
+    }, [circumference, progress]);
+    var strokeDashoffsetInner = React.useMemo(function () {
+      return circumference - progress / 100 * circumference;
+    }, [circumference, progress]);
+    return /*#__PURE__*/React__default["default"].createElement(StyledSvg, {
+      height: radius * 2,
+      width: radius * 2,
+      className: classNames__default["default"](className)
+    }, /*#__PURE__*/React__default["default"].createElement(StyledBackgroundCircle, {
+      $color: backgroundColor,
+      $strokeDashOffset: -strokeDashoffsetOuter,
+      strokeWidth: stroke,
+      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      r: normalizedRadius,
+      cx: radius,
+      cy: radius
+    }), /*#__PURE__*/React__default["default"].createElement(StyledForegroundCircle, {
+      $color: progressColor,
+      $strokeDashOffset: strokeDashoffsetInner,
+      strokeWidth: stroke,
+      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      r: normalizedRadius,
+      cx: radius,
+      cy: radius
+    }));
+  };
+  ProgressRing.displayName = "ProgressRing";
+
   exports.Accordion = Accordion;
   exports.AccordionContext = AccordionContext;
   exports.AccordionItem = AccordionItem;
@@ -10615,6 +10685,7 @@
   exports.Portal = Portal;
   exports.Pressed = Pressed;
   exports.ProgressBar = ProgressBar;
+  exports.ProgressRing = ProgressRing;
   exports.ProjectAddIcon = ProjectAddIcon$1;
   exports.ProjectTemplateAddIcon = ProjectTemplateAddIcon$1;
   exports.ProjectTemplateConvertIcon = ProjectTemplateConvertIcon$1;