@activecollab/components 1.0.415 → 2.0.1

package/dist/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('react-day-picker/moment'), require('react-day-picker'), require('lodash.debounce'), require('react-custom-scrollbars-2')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'react-day-picker/moment', 'react-day-picker', 'lodash.debounce', 'react-custom-scrollbars-2'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global.moment, global.MomentLocaleUtils, global.DayPicker, global.debounce, global.reactCustomScrollbars));
-})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, MomentLocaleUtils, DayPicker, debounce, reactCustomScrollbars2) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('date-fns'), require('react-day-picker'), require('lodash.debounce'), require('react-custom-scrollbars-2')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'date-fns', 'react-day-picker', 'lodash.debounce', 'react-custom-scrollbars-2'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global.moment, global.DateFns, global.DayPicker, global.debounce, global.reactCustomScrollbars));
+})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, dateFns, reactDayPicker, debounce, reactCustomScrollbars2) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,55 +13,72 @@
   var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-  var MomentLocaleUtils__default = /*#__PURE__*/_interopDefaultLegacy(MomentLocaleUtils);
-  var DayPicker__default = /*#__PURE__*/_interopDefaultLegacy(DayPicker);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) {
-        symbols = symbols.filter(function (sym) {
-          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-        });
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
       }
-      keys.push.apply(keys, symbols);
+      return a;
     }
-    return keys;
   }
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
     }
-    return target;
+    return t;
   }
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+        _defineProperty(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r || "default");
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
     }
-    return _typeof(obj);
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : String(i);
   }
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -75,7 +92,7 @@
     return obj;
   }
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -118,42 +135,9 @@
   function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
   function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -167,63 +151,9 @@
     for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
     return arr2;
   }
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
   function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
-  function _createForOfIteratorHelper(o, allowArrayLike) {
-    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-    if (!it) {
-      if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-        if (it) o = it;
-        var i = 0;
-        var F = function () {};
-        return {
-          s: F,
-          n: function () {
-            if (i >= o.length) return {
-              done: true
-            };
-            return {
-              done: false,
-              value: o[i++]
-            };
-          },
-          e: function (e) {
-            throw e;
-          },
-          f: F
-        };
-      }
-      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
-    var normalCompletion = true,
-      didErr = false,
-      err;
-    return {
-      s: function () {
-        it = it.call(o);
-      },
-      n: function () {
-        var step = it.next();
-        normalCompletion = step.done;
-        return step;
-      },
-      e: function (e) {
-        didErr = true;
-        err = e;
-      },
-      f: function () {
-        try {
-          if (!normalCompletion && it.return != null) it.return();
-        } finally {
-          if (didErr) throw err;
-        }
-      }
-    };
-  }
 
   var FontStyle = styled.css(["font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"]);
 
@@ -515,7 +445,7 @@
       return "";
     }
     if (typeof num === "string" && !num) {
-      return withLeadingZeroHours ? "00:00" : "0:00";
+      return withLeadingZeroHours ? `00:00` : "0:00";
     }
     if (typeof num === "string" && num.indexOf(":") >= 0) {
       //eslint-disable-next-line
@@ -524,19 +454,19 @@
         _hours = _num$split2[0],
         _minutes = _num$split2[1];
       if (_minutes && _minutes.length === 1 && Number(_minutes) < 10) {
-        _minutes = "".concat(Number(_minutes), "0");
+        _minutes = `${Number(_minutes)}0`;
       }
       if (_hours && _minutes) {
         if (withLeadingZeroHours) {
-          return "".concat(withLeadingZero(_hours), ":").concat(_minutes);
+          return `${withLeadingZero(_hours)}:${_minutes}`;
         }
-        return "".concat(_hours, ":").concat(_minutes);
+        return `${_hours}:${_minutes}`;
       } else if (!_hours && _minutes) {
-        return withLeadingZeroHours ? "00:".concat(_minutes) : "0:".concat(_minutes);
+        return withLeadingZeroHours ? `00:${_minutes}` : `0:${_minutes}`;
       } else if (!_minutes && _hours) {
-        return withLeadingZeroHours ? "".concat(withLeadingZero(_hours), ":00") : "".concat(_hours, ":00");
+        return withLeadingZeroHours ? `${withLeadingZero(_hours)}:00` : `${_hours}:00`;
       } else {
-        return withLeadingZeroHours ? "00:00" : "0:00";
+        return withLeadingZeroHours ? `00:00` : "0:00";
       }
     }
     if (typeof num === "string" && num.indexOf(",") >= 0) {
@@ -545,9 +475,9 @@
     var input = typeof num === "string" ? parseFloat(num) : num;
     if (!isDecimal(input)) {
       if (withLeadingZeroHours) {
-        return "".concat(withLeadingZero(input), ":00");
+        return `${withLeadingZero(input)}:00`;
       }
-      return "".concat(input, ":00");
+      return `${input}:00`;
     }
     var decimal = input.toFixed(2);
     var time = decimal.toString().split(".");
@@ -557,14 +487,12 @@
     }
     var minutes = time[1];
     var minutes_formatted = Math.round(parseInt(minutes, 10) / 100 * 60);
-    return "".concat(hours, ":").concat(withLeadingZero(minutes_formatted));
+    return `${hours}:${withLeadingZero(minutes_formatted)}`;
   };
   var withLeadingZero = function withLeadingZero(num) {
     var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-    var s = "".concat(num);
-    while (s.length < size) {
-      s = "0" + s;
-    }
+    var s = `${num}`;
+    while (s.length < size) s = `0` + s;
     return s;
   };
   var isDecimal = function isDecimal(num) {
@@ -593,7 +521,7 @@
     }
     var formattedNum = scale === 0 ? absoluteNumber.toFixed(0) : absoluteNumber.toFixed(1);
     var result = formattedNum.endsWith(".0") ? formattedNum.slice(0, -2) : formattedNum;
-    return isNegative ? "-".concat(result).concat(suffixes[scale]) : "".concat(result).concat(suffixes[scale]);
+    return isNegative ? `-${result}${suffixes[scale]}` : `${result}${suffixes[scale]}`;
   };
   var numberWithSeparator = function numberWithSeparator(x, thousandSeparator) {
     var format = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -658,10 +586,10 @@
         });
       }
       popperRef.current = core.createPopper(anchorEl, ownRef.current, {
-        placement: placement,
+        placement,
         onFirstUpdate: handlePopperUpdate,
-        strategy: strategy,
-        modifiers: modifiers
+        strategy,
+        modifiers
       });
     }, [afterWrite, anchorEl, open, placement, strategy]);
     var handleClose = function handleClose() {
@@ -700,7 +628,7 @@
       return null;
     }
     var childProps = {
-      placement: placement
+      placement
     };
     if (transition) {
       childProps.transitionProps = {
@@ -818,7 +746,7 @@
       noIsolation: true
     }, /*#__PURE__*/React__default["default"].createElement(StyledWindow, _extends({}, rest, {
       style: _objectSpread2({
-        zIndex: zIndex
+        zIndex
       }, style),
       onKeyDown: handleKeyDown,
       tabIndex: 0,
@@ -909,6 +837,9 @@
   });
   StyledMenuHeader.displayName = "StyledMenuHeader";
 
+  // source: https://twitter.com/mattpocockuk/status/1671908303918473217/photo/1
+  // eslint-disable-next-line @typescript-eslint/ban-types
+
   var Menu = function Menu(_ref) {
     var children = _ref.children,
       _ref$disableFocusLock = _ref.disableFocusLock,
@@ -967,7 +898,7 @@
       forceClose: handleClose
     };
     var targetProps = {
-      open: open,
+      open,
       ref: handleRef,
       onClick: handleOpen
     };
@@ -1000,15 +931,15 @@
       tabIndex: -1,
       afterWrite: onPopperOpen
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$2, {
-      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__${mode}`, menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
     }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
       value: {
-        open: open,
-        setOpen: setOpen
+        open,
+        setOpen
       }
-    }, typeof children === "function" ? children(childProps) : children)))) : null);
+    }, /*#__PURE__*/React__default["default"].isValidElement(children) ? /*#__PURE__*/React__default["default"].cloneElement(children, childProps) : children)))) : null);
   };
   Menu.displayName = "Menu";
 
@@ -8000,8 +7931,8 @@
       var diffWidth = childWidth - parentWidth;
       if (diffWidth > 0) {
         var _offsetWidth, _olRef$current, _olRef$current$queryS, _olRef$current$queryS2, _olRef$current2, _breadcrumbItems$leng;
-        var separatorWidth = (_offsetWidth = (_olRef$current = olRef.current) === null || _olRef$current === void 0 ? void 0 : (_olRef$current$queryS = _olRef$current.querySelectorAll("[data-role=\"separator\"]")[0]) === null || _olRef$current$queryS === void 0 ? void 0 : _olRef$current$queryS.offsetWidth) !== null && _offsetWidth !== void 0 ? _offsetWidth : 0;
-        var breadcrumbItems = (_olRef$current$queryS2 = (_olRef$current2 = olRef.current) === null || _olRef$current2 === void 0 ? void 0 : _olRef$current2.querySelectorAll("[data-role=\"item\"]")) !== null && _olRef$current$queryS2 !== void 0 ? _olRef$current$queryS2 : [];
+        var separatorWidth = (_offsetWidth = (_olRef$current = olRef.current) === null || _olRef$current === void 0 ? void 0 : (_olRef$current$queryS = _olRef$current.querySelectorAll(`[data-role="separator"]`)[0]) === null || _olRef$current$queryS === void 0 ? void 0 : _olRef$current$queryS.offsetWidth) !== null && _offsetWidth !== void 0 ? _offsetWidth : 0;
+        var breadcrumbItems = (_olRef$current$queryS2 = (_olRef$current2 = olRef.current) === null || _olRef$current2 === void 0 ? void 0 : _olRef$current2.querySelectorAll(`[data-role="item"]`)) !== null && _olRef$current$queryS2 !== void 0 ? _olRef$current$queryS2 : [];
         var childWidthCollection = [];
         var maxIndex = ((_breadcrumbItems$leng = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : breadcrumbItems.length) !== null && _breadcrumbItems$leng !== void 0 ? _breadcrumbItems$leng : 1) - 1;
         var currentIndex = 0;
@@ -8017,7 +7948,7 @@
         if (childWidthCollection.length === listCollection.length) {
           childWidthCollection.pop();
         }
-        widthCollectionRef.current = [].concat(_toConsumableArray(widthCollectionRef.current), childWidthCollection);
+        widthCollectionRef.current = [...widthCollectionRef.current, ...childWidthCollection];
         setMenuBreadcrumbs(function (oldVal) {
           return oldVal + childWidthCollection.length;
         });
@@ -8027,7 +7958,7 @@
       var diffWidth = parentWidth - childWidth;
       if (diffWidth > 0 && widthCollectionRef.current.length > 0) {
         var total = widthCollectionRef.current.length;
-        var collection = _toConsumableArray(widthCollectionRef.current);
+        var collection = [...widthCollectionRef.current];
         var sumWidth = 0;
         while (diffWidth > sumWidth && collection.length > 0) {
           var _collection;
@@ -8198,7 +8129,7 @@
       transition: true,
       className: popperTooltipClassName,
       style: _objectSpread2({
-        zIndex: zIndex
+        zIndex
       }, popperTooltipStyle),
       role: "tooltip"
     }, function (_ref3) {
@@ -8376,7 +8307,7 @@
       dimension: 16,
       value: counter
     }) : null), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
-      title: "".concat(tooltipText),
+      title: `${tooltipText}`,
       popperTooltipClassName: "z-index-1300"
     }, /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonReset, {
       variant: "text colored",
@@ -8386,36 +8317,42 @@
   });
   CounterButton.displayName = "CounterButton";
 
+  // default modifiers
   var customClassNames = {
-    container: "c-DayPicker",
-    wrapper: "c-DayPicker-wrapper",
+    root: "c-DayPicker",
     interactionDisabled: "c-DayPicker--interactionDisabled",
+    ///// da li treba?
     months: "c-DayPicker-Months",
-    month: "c-DayPicker-Month",
-    navBar: "c-DayPicker-NavBar",
-    navButtonPrev: "c-DayPicker-NavButton DayPicker-NavButton--prev",
-    navButtonNext: "c-DayPicker-NavButton DayPicker-NavButton--next",
+    month: "c-DayPicker-Wrapper",
+    table: "c-DayPicker-Month",
+    nav: "c-DayPicker-NavBar",
+    nav_button_previous: "c-DayPicker-NavButton DayPicker-NavButton--prev",
+    nav_button_next: "c-DayPicker-NavButton DayPicker-NavButton--next",
     navButtonInteractionDisabled: "c-DayPicker-NavButton--interactionDisabled",
+    ///// da li treba?
+
     caption: "c-DayPicker-Caption",
-    weekdays: "c-DayPicker-Weekdays",
-    weekdaysRow: "c-DayPicker-WeekdaysRow",
-    weekday: "c-DayPicker-Weekday",
-    body: "c-DayPicker-Body",
-    week: "c-DayPicker-Week",
-    weekNumber: "c-DayPicker-WeekNumber",
+    head: "c-DayPicker-Weekdays",
+    head_row: "c-DayPicker-WeekdaysRow",
+    head_cell: "c-DayPicker-Weekday",
+    tbody: "c-DayPicker-Body",
+    row: "c-DayPicker-Week",
     day: "c-DayPicker-Day",
-    footer: "c-DayPicker-Footer",
-    todayButton: "c-DayPicker-TodayButton",
-    // default modifiers
-    today: "c-DayPicker-Day--today",
-    selected: "c-DayPicker-Day--selected",
-    disabled: "c-DayPicker-Day--disabled",
-    outside: "c-DayPicker-Day--outside",
-    // custom modifiers
+    tfoot: "c-DayPicker-Footer",
+    day_today: "c-DayPicker-Day--today",
+    day_selected: "c-DayPicker-Day--selected selected-day selected",
+    day_disabled: "c-DayPicker-Day--disabled",
+    day_outside: "c-DayPicker-Day--outside"
+  };
+
+  // custom modifiers
+  var modifiersClassNames = {
     weekend: "c-DayPicker-Day--weekend",
     userAvailability: "c-DayPicker-Day--userAvailability",
     nonWorkingDaysOfWeek: "c-DayPicker-Day--nonWorkingDaysOfWeek",
-    nonWorkingDay: "c-DayPicker-Day--nonWorkingDay"
+    nonWorkingDay: "c-DayPicker-Day--nonWorkingDay",
+    hovered: "hover hovered hovered-day",
+    day_disabled: "c-DayPicker-Day--disabled"
   };
 
   var StyledNavBarButton = styled__default["default"](Button).withConfig({
@@ -8485,8 +8422,7 @@
   StyledMonth.displayName = "StyledMonth";
 
   var YearMonthPicker = function YearMonthPicker(_ref) {
-    var date = _ref.date,
-      localeUtils = _ref.localeUtils,
+    var month = _ref.month,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? function () {
         return null;
@@ -8501,13 +8437,18 @@
       _useState2 = _slicedToArray(_useState, 2),
       enteredTo = _useState2[0],
       setEnteredTo = _useState2[1];
-    var months = localeUtils.getMonths();
+    var currentYear = dateFns.getYear(new Date());
+    var months = Array.from({
+      length: 12
+    }, function (_, i) {
+      return dateFns.format(new Date(currentYear, i, 1), "MMMM");
+    });
     var handleMonthChange = React.useCallback(function (e) {
-      onChange(new Date(date.getFullYear(), e.target.dataset.value));
+      onChange(new Date(dateFns.getYear(month), e.target.dataset.value));
       if (onClick) {
         onClick(e);
       }
-    }, [date, onChange, onClick]);
+    }, [month, onChange, onClick]);
     var onMouseEnterCallback = React.useCallback(function (e) {
       if (selectionMode === "quarterly") {
         setEnteredTo(Math.floor(e.target.getAttribute("data-value") / 3));
@@ -8517,7 +8458,7 @@
       return /*#__PURE__*/React__default["default"].createElement(StyledMonths, {
         className: "c-monthPicker",
         "data-test": "months"
-      }, months.map(function (month, i) {
+      }, months.map(function (singleMonth, i) {
         return /*#__PURE__*/React__default["default"].createElement(StyledMonth, {
           className: "c-monthPicker__month",
           key: i,
@@ -8525,12 +8466,12 @@
           onMouseEnter: onMouseEnterCallback,
           "data-value": i,
           "data-test": "month",
-          $isCurrent: date.getFullYear() === new Date().getFullYear() && new Date().getMonth() === i,
+          $isCurrent: month.getFullYear() === new Date().getFullYear() && new Date().getMonth() === i,
           $isCurrentQuarter: Math.floor(i / 3) === enteredTo,
-          $isSelected: selectedDays && !(selectedDays instanceof Date) && selectedDays.from && selectedDays.to && selectedDays.from.getFullYear() === date.getFullYear() && i >= selectedDays.from.getMonth() && i <= selectedDays.to.getMonth()
-        }, month.substring(0, 3));
+          $isSelected: selectedDays && !(selectedDays instanceof Date) && selectedDays.from && selectedDays.to && selectedDays.from.getFullYear() === dateFns.getYear(month) && i >= dateFns.getMonth(selectedDays.from) && i <= dateFns.getMonth(selectedDays.to)
+        }, singleMonth.substring(0, 3));
       }));
-    }, [date, handleMonthChange, months, selectedDays, enteredTo, onMouseEnterCallback]);
+    }, [months, handleMonthChange, onMouseEnterCallback, enteredTo, selectedDays, month]);
     return /*#__PURE__*/React__default["default"].createElement(StyledYearMonthPicker, {
       className: "c-DayPicker-Caption",
       role: "button"
@@ -8583,21 +8524,13 @@
   NavBarElement.displayName = "NavBarElement";
 
   var CustomNavBarElement = function CustomNavBarElement(_ref) {
-    var className = _ref.className,
-      classNames = _ref.classNames,
-      month = _ref.month,
-      showPreviousButton = _ref.showPreviousButton,
-      showNextButton = _ref.showNextButton,
-      labels = _ref.labels,
-      localeUtils = _ref.localeUtils,
-      locale = _ref.locale,
+    var month = _ref.month,
       _ref$showMonthPicker = _ref.showMonthPicker,
       showMonthPicker = _ref$showMonthPicker === void 0 ? false : _ref$showMonthPicker,
       onChangeDirection = _ref.onChangeDirection,
-      onMonthChange = _ref.onMonthChange,
-      onClick = _ref.onClick;
-    var nextMonth = showMonthPicker ? DayPicker.DateUtils.addMonths(month, 12) : DayPicker.DateUtils.addMonths(month, 1);
-    var previousMonth = showMonthPicker ? DayPicker.DateUtils.addMonths(month, -12) : DayPicker.DateUtils.addMonths(month, -1);
+      onMonthChange = _ref.onMonthChange;
+    var nextMonth = showMonthPicker ? dateFns.addMonths(month, 12) : dateFns.addMonths(month, 1);
+    var previousMonth = showMonthPicker ? dateFns.addMonths(month, -12) : dateFns.addMonths(month, -1);
     var onNextClick = React.useCallback(function () {
       if (onChangeDirection) {
         onChangeDirection(true);
@@ -8615,19 +8548,8 @@
       }
     }, [onChangeDirection, onMonthChange, previousMonth]);
     return /*#__PURE__*/React__default["default"].createElement(NavBarElement, {
-      className: className,
-      classNames: classNames,
-      month: month,
-      showPreviousButton: showPreviousButton,
-      showNextButton: showNextButton,
-      labels: labels,
-      localeUtils: localeUtils,
-      locale: locale,
-      previousMonth: previousMonth,
-      nextMonth: nextMonth,
       onNextClick: onNextClick,
-      onPreviousClick: onPreviousClick,
-      onClick: onClick
+      onPreviousClick: onPreviousClick
     });
   };
 
@@ -8638,10 +8560,10 @@
     "display": "flex",
     "justifyContent": "center"
   });
-  var StyledDayPicker = styled__default["default"](DayPicker__default["default"]).withConfig({
+  var StyledDayPicker = styled__default["default"](reactDayPicker.DayPicker).withConfig({
     displayName: "Styles__StyledDayPicker",
     componentId: "sc-18towna-1"
-  })(["", " width:230px;", " .c-DayPicker-Month{display:table;user-select:none;border-collapse:separate;border-spacing:4px;}.c-DayPicker-wrapper{position:relative;flex-direction:row;user-select:none;}.c-DayPicker-Caption{display:table-caption;margin-bottom:0.5em;padding:0 0.5em;", "}.c-DayPicker-Weekday{font-size:11px;display:table-cell;padding:0.5em;text-align:center;", "}.c-DayPicker-Body{display:table-row-group;font-size:13px;", "}.c-DayPicker-Day{display:table-cell;border-radius:50%;vertical-align:middle;text-align:center;cursor:pointer;transition-duration:0.3s;width:27px;height:27px;line-height:27px;}.c-DayPicker{display:inline-block;font-size:1rem;}.c-DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center;}.c-DayPicker-NavButton--interactionDisabled{display:none;}.c-DayPicker-Weekdays{text-decoration:none;display:table-header-group;margin-top:1em;}.c-DayPicker-WeekdaysRow{display:table-row;}.c-DayPicker-Weekday *{display:block;border-bottom:none;text-decoration:none;overflow:hidden;text-overflow:\"\";white-space:nowrap;width:12px;letter-spacing:10px;transform:translateX(30%);}.c-DayPicker-Week{display:table-row;}.c-DayPicker--interactionDisabled .c-DayPicker-Day{cursor:default;}.hovered:not(.c-DayPicker-Day--selected){background-color:var(--color-primary-300);color:var(--color-theme-900);}.c-DayPicker-Day--today{font-weight:700;color:var(--color-primary);position:relative;&:after{position:absolute;content:\"\";bottom:3px;height:3px;width:3px;border-radius:3px;margin:0 auto;left:0;right:0;background:var(--color-primary);}&.hovered:not(.c-DayPicker-Day--selected){color:var(--color-primary);&:after{background-color:var(--color-primary);}}}.c-DayPicker-Day--userAvailability,.c-DayPicker-Day--nonWorkingDaysOfWeek{color:var(--red-alert);&.hovered:not(.c-DayPicker-Day--selected){background-color:rgba(237,97,97,0.1);color:var(--red-alert);}&.c-DayPicker-Day--today{color:var(--red-alert);&:after{background-color:var(--red-alert);}&.hovered:not(.c-DayPicker-Day--selected):after{background-color:var(--red-alert);}}}.c-DayPicker-Day--selected{background-color:var(--color-primary);color:var(--color-theme-100);&.c-DayPicker-Day--today{color:var(--color-theme-100);&:after{background-color:var(--color-theme-100);}}&.c-DayPicker-Day--userAvailability,&.c-DayPicker-Day--nonWorkingDaysOfWeek{background-color:var(--red-alert);color:var(--color-theme-100);}}.c-DayPicker-Day--nonWorkingDay{color:var(--color-theme-500);&.hovered:not(.c-DayPicker-Day--selected){color:var(--color-theme-500);}&.c-DayPicker-Day--today{color:var(--color-primary-500);&:after{background-color:var(--color-primary-500);}&.hovered:not(.c-DayPicker-Day--selected){color:var(--color-theme-500);&:after{background-color:var(--color-theme-500);}}}&.c-DayPicker-Day--userAvailability,&.c-DayPicker-Day--nonWorkingDaysOfWeek{&.hovered:not(.c-DayPicker-Day--selected){color:var(--color-theme-500);background-color:var(--color-primary-300);&.c-DayPicker-Day--today:after{background-color:var(--color-theme-500);}}}&.c-DayPicker-Day--selected{color:rgba(255,255,255,0.6);background-color:var(--color-primary);.neon &{color:rgba(0,0,0,0.4);}&.c-DayPicker-Day--today{color:rgba(255,255,255,0.6);.neon &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);.neon &{background-color:rgba(0,0,0,0.4);}}}}}.c-DayPicker-Day--disabled{cursor:default;color:var(--color-theme-500);&.hovered{color:var(--color-theme-500);}}.c-DayPicker-Day--outside{cursor:default;opacity:0.15;color:var(--color-theme-900);&.c-DayPicker-Day--userAvailability.hovered:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--nonWorkingDaysOfWeek.hovered:not(.c-DayPicker-Day--selected){background:var(--color-primary-300);}&.c-DayPicker-Day--userAvailability:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--nonWorkingDaysOfWeek:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--userAvailability.hovered:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--nonWorkingDaysOfWeek.hovered:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--nonWorkingDay.hovered:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--nonWorkingDay:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--today.hovered:not(.c-DayPicker-Day--selected),&.c-DayPicker-Day--today:not(.c-DayPicker-Day--selected){color:var(--color-theme-900);}&.c-DayPicker-Day--userAvailability.c-DayPicker-Day--today:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--nonWorkingDaysOfWeek.c-DayPicker-Day--today:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--userAvailability.c-DayPicker-Day--today.hovered:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--nonWorkingDaysOfWeek.c-DayPicker-Day--today.hovered:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--nonWorkingDay.c-DayPicker-Day--today:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--nonWorkingDay.c-DayPicker-Day--today.hovered:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--today.hovered:not(.c-DayPicker-Day--selected):after,&.c-DayPicker-Day--today:not(.c-DayPicker-Day--selected):after{background-color:var(--color-theme-900);}&.hovered:not(.c-DayPicker-Day--selected){background:var(--color-primary-400);}&.c-DayPicker-Day--selected{color:var(--page-paper-main);background:var(--color-primary);.neon &{color:var(--page-paper-main);}&.c-DayPicker-Day--today{&:after{background:var(--page-paper-main);.neon &{background:var(--page-paper-main);}}&.c-DayPicker-Day--nonWorkingDay{color:var(--page-paper-main);.neon &{color:var(--page-paper-main);}}}}}"], {
+  })(["", " width:230px;.root{--rdp-cell-size:40px;--rdp-caption-font-size:18px;--rdp-accent-color:#0000ff;--rdp-background-color:#e7edff;--rdp-accent-color-dark:#3003e1;--rdp-background-color-dark:#180270;--rdp-outline:2px solid var(--rdp-accent-color);--rdp-outline-selected:3px solid var(--rdp-accent-color);--rdp-selected-color:#fff;margin:1em;}.rdp-vhidden{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px,1px,1px,1px) !important;border:0 !important;}.rdp-button_reset{appearance:none;position:relative;margin:0;padding:0;cursor:default;color:inherit;background:none;font:inherit;-moz-appearance:none;-webkit-appearance:none;}.rdp-button_reset:focus-visible{outline:none;}.rdp-button{border:2px solid transparent;}.rdp-button[disabled]:not(.rdp-day_selected){opacity:0.25;}.rdp-button:not([disabled]){cursor:pointer;}.rdp-button:focus-visible:not([disabled]){color:inherit;background-color:var(--rdp-background-color);border:var(--rdp-outline);}.rdp-months{display:flex;}.rdp-month{margin:0 1em;}.rdp-month:first-child{margin-left:0;}.rdp-month:last-child{margin-right:0;}.rdp-table{margin:0;max-width:calc(var(--rdp-cell-size) * 7);border-collapse:collapse;}.rdp-with_weeknumber .table{max-width:calc(var(--rdp-cell-size) * 8);border-collapse:collapse;}.rdp-caption{display:flex;align-items:center;justify-content:space-between;padding:0;text-align:left;}.rdp-multiple_months .rdp-caption{position:relative;display:block;text-align:center;}.rdp-caption_dropdowns{position:relative;display:inline-flex;}.rdp-caption_label{position:relative;z-index:1;display:inline-flex;align-items:center;margin:0;padding:0 0.25em;white-space:nowrap;color:currentColor;border:0;border:2px solid transparent;font-family:inherit;font-size:var(--rdp-caption-font-size);font-weight:bold;}.rdp-nav{white-space:nowrap;}.rdp-multiple_months .rdp-caption_start .rdp-nav{position:absolute;top:50%;left:0;transform:translateY(-50%);}.rdp-multiple_months .rdp-caption_end .rdp-nav{position:absolute;top:50%;right:0;transform:translateY(-50%);}.rdp-nav_button{display:inline-flex;align-items:center;justify-content:center;width:var(--rdp-cell-size);height:var(--rdp-cell-size);padding:0.25em;border-radius:100%;}.rdp-dropdown_year,.rdp-dropdown_month{position:relative;display:inline-flex;align-items:center;}.rdp-dropdown{appearance:none;position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;margin:0;padding:0;cursor:inherit;opacity:0;border:none;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit;}.rdp-dropdown[disabled]{opacity:unset;color:unset;}.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label{background-color:var(--rdp-background-color);border:var(--rdp-outline);border-radius:6px;}.rdp-dropdown_icon{margin:0 0 0 5px;}.rdp-head{border:0;}.rdp-head_row,.rdp-row{height:100%;}.rdp-head_cell{vertical-align:middle;font-size:0.75em;font-weight:700;text-align:center;height:100%;height:var(--rdp-cell-size);padding:0;text-transform:uppercase;}.rdp-tbody{border:0;}.rdp-tfoot{margin:0.5em;}.rdp-cell{width:var(--rdp-cell-size);height:100%;height:var(--rdp-cell-size);padding:0;text-align:center;}.rdp-weeknumber{font-size:0.75em;}.rdp-weeknumber,.rdp-day{display:flex;overflow:hidden;align-items:center;justify-content:center;box-sizing:border-box;width:var(--rdp-cell-size);max-width:var(--rdp-cell-size);height:var(--rdp-cell-size);margin:0;border:2px solid transparent;border-radius:100%;}.rdp-day_today:not(.rdp-day_outside){font-weight:bold;}.rdp-day_selected,.rdp-day_selected:focus-visible{color:var(--rdp-selected-color);opacity:1;background-color:var(--rdp-accent-color);}.rdp-day_outside{opacity:0.5;}.rdp-day_selected:focus-visible{outline:var(--rdp-outline);outline-offset:2px;z-index:1;}.root:not([dir=\"rtl\"]) .rdp-day_range_start:not(.rdp-day_range_end){border-top-right-radius:0;border-bottom-right-radius:0;}.root:not([dir=\"rtl\"]) .rdp-day_range_end:not(.rdp-day_range_start){border-top-left-radius:0;border-bottom-left-radius:0;}.root[dir=\"rtl\"] .rdp-day_range_start:not(.rdp-day_range_end){border-top-left-radius:0;border-bottom-left-radius:0;}.root[dir=\"rtl\"] .rdp-day_range_end:not(.rdp-day_range_start){border-top-right-radius:0;border-bottom-right-radius:0;}.rdp-day_range_end.rdp-day_range_start{border-radius:100%;}.rdp-day_range_middle{border-radius:0;}", " .c-DayPicker-Month{display:table;user-select:none;border-collapse:separate;border-spacing:4px;margin:0 auto;}.c-DayPicker-wrapper{display:flex;}.c-DayPicker-Wrapper{position:relative;flex-direction:row;user-select:none;width:100%;}.c-DayPicker-Caption{display:table-caption;margin-bottom:0.5em;padding:0 0.5em;width:100%;", "}.c-DayPicker-Weekday{font-size:11px;font-weight:normal;padding:0.5em;text-align:center;", "}.c-DayPicker-Body{display:table-row-group;font-size:13px;", "}.c-DayPicker-Day{display:flex;justify-content:center;align-items:center;border-radius:50%;cursor:pointer;transition-duration:0.3s;width:27px;height:27px;line-height:27px;}.c-DayPicker{display:inline-block;font-size:1rem;}.c-DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center;}.c-DayPicker-NavButton--interactionDisabled{display:none;}.c-DayPicker-Weekdays{text-decoration:none;display:table-header-group;margin-top:1em;}.c-DayPicker-WeekdaysRow{display:table-row;}.c-DayPicker-Week{display:table-row;}.c-DayPicker--interactionDisabled .c-DayPicker-Day{cursor:default;}.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){background-color:var(--color-primary-300);color:var(--color-theme-900);}.c-DayPicker-Day--today{font-weight:700;color:var(--color-primary);position:relative;&:after{position:absolute;content:\"\";bottom:1px;height:3px;width:3px;border-radius:3px;margin:0 auto;left:0;right:0;background:var(--color-primary);}&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){color:var(--color-primary);&:after{background-color:var(--color-primary);}}}.c-DayPicker-Day--userAvailability,.c-DayPicker-Day--nonWorkingDaysOfWeek{color:var(--red-alert);&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){background-color:rgba(237,97,97,0.1);color:var(--red-alert);}&.c-DayPicker-Day--today{color:var(--red-alert);&:after{background-color:var(--red-alert);}&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ):after{background-color:var(--red-alert);}}}.c-DayPicker-Day--selected.selected-day.selected{background-color:var(--color-primary);color:var(--color-theme-100);&.c-DayPicker-Day--today{color:var(--color-theme-100);&:after{background-color:var(--color-theme-100);}}&.c-DayPicker-Day--userAvailability,&.c-DayPicker-Day--nonWorkingDaysOfWeek{background-color:var(--red-alert);color:var(--color-theme-100);}}.c-DayPicker-Day--nonWorkingDay{color:var(--color-theme-500);&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){color:var(--color-theme-500);}&.c-DayPicker-Day--today{color:var(--color-primary-500);&:after{background-color:var(--color-primary-500);}&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){color:var(--color-theme-500);&:after{background-color:var(--color-theme-500);}}}&.c-DayPicker-Day--userAvailability,&.c-DayPicker-Day--nonWorkingDaysOfWeek{&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){color:var(--color-theme-500);background-color:var(--color-primary-300);&.c-DayPicker-Day--today:after{background-color:var(--color-theme-500);}}}&.c-DayPicker-Day--selected.selected-day.selected{color:rgba(255,255,255,0.6);background-color:var(--color-primary);.neon &{color:rgba(0,0,0,0.4);}&.c-DayPicker-Day--today{color:rgba(255,255,255,0.6);.neon &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);.neon &{background-color:rgba(0,0,0,0.4);}}}}}.c-DayPicker-Day--disabled{cursor:default;color:var(--color-theme-500);&.hovered.hovered-day.hover{color:var(--color-theme-500);}}.c-DayPicker-Day--outside{cursor:default;opacity:0.15;color:var(--color-theme-900);&.c-DayPicker-Day--userAvailability.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--nonWorkingDaysOfWeek.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){background:var(--color-primary-300);}&.c-DayPicker-Day--userAvailability:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--nonWorkingDaysOfWeek:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--userAvailability.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--nonWorkingDaysOfWeek.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--nonWorkingDay.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--nonWorkingDay:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--today.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ),&.c-DayPicker-Day--today:not( .c-DayPicker-Day--selected.selected-day.selected ){color:var(--color-theme-900);}&.c-DayPicker-Day--userAvailability.c-DayPicker-Day--today:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--nonWorkingDaysOfWeek.c-DayPicker-Day--today:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--userAvailability.c-DayPicker-Day--today.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--nonWorkingDaysOfWeek.c-DayPicker-Day--today.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--nonWorkingDay.c-DayPicker-Day--today:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--nonWorkingDay.c-DayPicker-Day--today.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--today.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ):after,&.c-DayPicker-Day--today:not( .c-DayPicker-Day--selected.selected-day.selected ):after{background-color:var(--color-theme-900);}&.hovered.hovered-day.hover:not( .c-DayPicker-Day--selected.selected-day.selected ){background:var(--color-primary-400);}&.c-DayPicker-Day--selected.selected-day.selected{color:var(--page-paper-main);background:var(--color-primary);.neon &{color:var(--page-paper-main);}&.c-DayPicker-Day--today{&:after{background:var(--page-paper-main);.neon &{background:var(--page-paper-main);}}&.c-DayPicker-Day--nonWorkingDay{color:var(--page-paper-main);.neon &{color:var(--page-paper-main);}}}}}"], {
     "backgroundColor": "var(--page-paper-main)"
   }, function (props) {
     return props.$isYearlyView && styled.css([".c-DayPicker-Weekdays,.c-DayPicker-Body{opacity:0 !important;}"]);
@@ -8664,7 +8586,10 @@
   StyledDatePicker.displayName = "StyledDatePicker";
   StyledDayPicker.displayName = "StyledDayPicker";
 
-  var _excluded$18 = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers"];
+  var _excluded$18 = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers", "renderDay"];
+  var formatWeekdayName = function formatWeekdayName(str) {
+    return moment__default["default"](str).format("ddd").charAt(0);
+  };
   var DatePicker = function DatePicker(_ref) {
     var className = _ref.className,
       onChange = _ref.onChange,
@@ -8686,6 +8611,7 @@
       _ref$fixedWeeks = _ref.fixedWeeks,
       fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
       defaultModifiers = _ref.modifiers,
+      renderDay = _ref.renderDay,
       rest = _objectWithoutProperties(_ref, _excluded$18);
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8742,7 +8668,7 @@
       if (month.getMonth() !== day.getMonth()) {
         onMonthChange(day);
       }
-      if (modifiers["c-DayPicker-Day--disabled"] || selectionMode === "none") {
+      if (modifiers["day_disabled"] || selectionMode === "none") {
         return;
       }
       // reset the selectedDays if the user clicks on the same day
@@ -8786,7 +8712,7 @@
             to: day
           });
         }
-        if (selectedDays !== null && selectedDays !== void 0 && selectedDays.from && DayPicker.DateUtils.isDayAfter(day, selectedDays.from)) {
+        if (selectedDays !== null && selectedDays !== void 0 && selectedDays.from && dateFns.isAfter(day, selectedDays.from)) {
           setEnteredTo(undefined);
           setEnteredFrom(undefined);
           return onChange({
@@ -8802,6 +8728,10 @@
             to: selectedDays.to
           });
         }
+        return onChange({
+          from: day,
+          to: day
+        });
       }
     }, [onDayClick, onChange, month, selectionMode, dateRequired, selectedDays, onMonthChange, week, isPreselected]);
     var isSelectedFirstDay = React.useCallback(function () {
@@ -8845,8 +8775,8 @@
       if (stopScroll && (new Date().getTime() - stopScroll.getTime()) / 1000 < 0.9) {
         return;
       }
-      var nextMonth = showMonthPicker ? DayPicker.DateUtils.addMonths(month, 12) : DayPicker.DateUtils.addMonths(month, 1);
-      var previousMonth = showMonthPicker ? DayPicker.DateUtils.addMonths(month, -12) : DayPicker.DateUtils.addMonths(month, -1);
+      var nextMonth = showMonthPicker ? dateFns.addMonths(month, 12) : dateFns.addMonths(month, 1);
+      var previousMonth = showMonthPicker ? dateFns.addMonths(month, -12) : dateFns.addMonths(month, -1);
       if (e.deltaY > 0.9) {
         setDirection(true);
         onMonthChange(nextMonth);
@@ -8864,15 +8794,6 @@
       }
       setShowMonthPicker(true);
     }, [showMonthPicker, selectionMode]);
-    var customNavBarElement = React.useCallback(function (props) {
-      return /*#__PURE__*/React__default["default"].createElement(CustomNavBarElement, _extends({}, props, {
-        showMonthPicker: showMonthPicker,
-        month: month,
-        onChangeDirection: setDirection,
-        onMonthChange: onMonthChange,
-        onClick: togglePicker
-      }));
-    }, [showMonthPicker, month, onMonthChange, togglePicker]);
     var handleYearMonthChange = React.useCallback(function (m) {
       if (onChange) {
         if (selectionMode === "monthly") {
@@ -8898,19 +8819,29 @@
     }, [onMonthChange, onChange, selectedDays, selectionMode, dateRequired]);
     var text = React.useMemo(function () {
       if (showMonthPicker) {
-        return "".concat(month.getFullYear());
+        return `${month.getFullYear()}`;
       }
-      return "".concat(moment__default["default"](month).format("MMMM"), " ").concat(moment__default["default"](month).isSame(moment__default["default"](), "year") ? "" : month.getFullYear());
+      return `${moment__default["default"](month).format("MMMM")} ${moment__default["default"](month).isSame(moment__default["default"](), "year") ? "" : month.getFullYear()}`;
     }, [showMonthPicker, month]);
-    var handleYearMonthForm = React.useCallback(function (props) {
-      return /*#__PURE__*/React__default["default"].createElement(YearMonthPicker, _extends({}, props, {
+    var customNavBarElement = React.useCallback(function (props) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "c-DayPicker-wrapper"
+      }, /*#__PURE__*/React__default["default"].createElement(CustomNavBarElement, _extends({}, props, {
+        showMonthPicker: showMonthPicker,
+        month: month,
+        onChangeDirection: setDirection,
+        onMonthChange: onMonthChange,
+        onClick: togglePicker
+      })), /*#__PURE__*/React__default["default"].createElement(YearMonthPicker, _extends({}, props, {
         text: text,
+        onClick: togglePicker,
+        month: month,
         selectedDays: selectedDays,
         onChange: handleYearMonthChange,
         isShown: showMonthPicker,
         selectionMode: selectionMode
-      }));
-    }, [text, selectedDays, handleYearMonthChange, showMonthPicker, selectionMode]);
+      })));
+    }, [showMonthPicker, month, onMonthChange, togglePicker, text, selectedDays, handleYearMonthChange, selectionMode]);
     var onKeyDownCallback = React.useCallback(function (e) {
       // Right Arrow
       if (e.key === "ArrowRight") {
@@ -8947,6 +8878,22 @@
         document.removeEventListener("keydown", onKeyDownCallback);
       };
     }, [month, onMonthChange, showMonthPicker, onKeyDownCallback]);
+    var selected = React.useMemo(function () {
+      var dates = [];
+      if (!(selectedDays !== null && selectedDays !== void 0 && selectedDays.from)) return [];
+
+      // If from and to dates are the same, return an array with one item
+      if (moment__default["default"](selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from).isSame(selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.to, "day")) {
+        dates.push(selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from);
+        return dates;
+      }
+      var currentDate = moment__default["default"](selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from);
+      while (currentDate.isSameOrBefore(selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.to, "day")) {
+        dates.push(currentDate.toDate());
+        currentDate = currentDate.add(1, "days");
+      }
+      return dates;
+    }, [selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.from, selectedDays === null || selectedDays === void 0 ? void 0 : selectedDays.to]);
     return /*#__PURE__*/React__default["default"].createElement(StyledDatePicker, {
       className: "c-date-picker-wrapper",
       onWheel: onWheel
@@ -8958,8 +8905,10 @@
       classNames: "c-date-picker__animation",
       $direction: direction
     }, /*#__PURE__*/React__default["default"].createElement(StyledDayPicker, _extends({}, rest, {
-      disabledDays: disabledDays,
-      selectedDays: selectedDays,
+      mode: "multiple",
+      showOutsideDays: true,
+      disabled: disabledDays,
+      selected: selected,
       onDayClick: handleDayClick,
       modifiers: modifiers,
       onDayMouseEnter: handleDayMouseEnter,
@@ -8967,12 +8916,17 @@
       className: className,
       $isYearlyView: showMonthPicker,
       month: month,
-      navbarElement: customNavBarElement,
-      onCaptionClick: togglePicker,
-      captionElement: handleYearMonthForm,
+      components: {
+        Caption: customNavBarElement,
+        DayContent: renderDay
+      },
       classNames: customClassNames,
+      modifiersClassNames: modifiersClassNames,
       fixedWeeks: fixedWeeks,
-      firstDayOfWeek: firstDayOfWeek
+      weekStartsOn: firstDayOfWeek,
+      formatters: {
+        formatWeekdayName: formatWeekdayName
+      }
     })))));
   };
   DatePicker.displayName = "DatePicker";
@@ -8985,11 +8939,11 @@
     xxl: "1536px"
   };
   var screen = {
-    sm: "@media (min-width: ".concat(size.sm, ")"),
-    md: "@media (min-width: ".concat(size.md, ")"),
-    lg: "@media (min-width: ".concat(size.lg, ")"),
-    xl: "@media (min-width: ".concat(size.xl, ")"),
-    xxl: "@media (min-width: ".concat(size.xxl, ")")
+    sm: `@media (min-width: ${size.sm})`,
+    md: `@media (min-width: ${size.md})`,
+    lg: `@media (min-width: ${size.lg})`,
+    xl: `@media (min-width: ${size.xl})`,
+    xxl: `@media (min-width: ${size.xxl})`
   };
 
   var StyledButton$1 = styled__default["default"].button.withConfig({
@@ -9071,6 +9025,7 @@
    * This component allow you to select date range. It accepts two parameters "from" and "to" as valid format
    * onChange and onBack and onForward it will return "from: Date" and "to: Date" as function arguments
    */
+
   var DateStepper = function DateStepper(_ref) {
     var step = _ref.step,
       formatCallback = _ref.formatCallback,
@@ -9152,7 +9107,7 @@
       } else if (step === "monthly") {
         return fromDate.format("MMM YYYY");
       } else if (step === "quarterly") {
-        return "Q".concat(fromDate.quarter(), "/").concat(fromDate.format("YYYY"));
+        return `Q${fromDate.quarter()}/${fromDate.format("YYYY")}`;
       } else if (step === "yearly") {
         return fromDate.format("YYYY");
       } else if (step === "custom") {
@@ -9274,12 +9229,14 @@
       return isBefore || isAfter;
     }, [maxValue, minValue]);
     var modifiers = React.useMemo(function () {
-      var _ref2;
-      return _ref2 = {}, _defineProperty(_ref2, customClassNames.disabled, function (day) {
-        return isDisabled(day);
-      }), _defineProperty(_ref2, customClassNames.nonWorkingDay, function (day) {
-        return isDisabled(day);
-      }), _ref2;
+      return {
+        day_disabled: function day_disabled(day) {
+          return isDisabled(day);
+        },
+        nonWorkingDay: function nonWorkingDay(day) {
+          return isDisabled(day);
+        }
+      };
     }, [isDisabled]);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
       className: classNames__default["default"]("c-date-stepper", className)
@@ -9303,8 +9260,6 @@
       position: position
     }, /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       month: month,
-      localeUtils: MomentLocaleUtils__default["default"],
-      locale: "en",
       selectionMode: step,
       className: datePickerClass,
       selectedDays: {
@@ -9367,7 +9322,7 @@
       ref: ref
     }, steps.map(function (step) {
       return /*#__PURE__*/React__default["default"].createElement(StyledStep, {
-        key: "step-".concat(step),
+        key: `step-${step}`,
         $isActiveStep: activeSteps.indexOf(step) > -1
       });
     }));
@@ -9651,18 +9606,20 @@
   SpinnerLoader.displayName = "SpinnerLoader";
 
   var _excluded$14 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
-  exports.SortDirection = void 0;
-  (function (SortDirection) {
+  var SortDirection = /*#__PURE__*/function (SortDirection) {
     SortDirection["None"] = "none";
     SortDirection["Asc"] = "asc";
     SortDirection["Desc"] = "desc";
-  })(exports.SortDirection || (exports.SortDirection = {}));
+    return SortDirection;
+  }({});
   var groupByKey = function groupByKey(items, key) {
     if (items[0] instanceof Array) {
       items = items[0];
     }
     return items.reduce(function (result, item) {
-      return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, item[key] !== null ? " " + item[key] : item[key], [].concat(_toConsumableArray(result[item[key] !== null ? " " + item[key] : item[key]] || []), [item])));
+      return _objectSpread2(_objectSpread2({}, result), {}, {
+        [item[key] !== null ? " " + item[key] : item[key]]: [...(result[item[key] !== null ? " " + item[key] : item[key]] || []), item]
+      });
     }, {});
   };
   var initialCollapsed = function initialCollapsed(rows, groupBy) {
@@ -9684,7 +9641,7 @@
       className = _ref.className,
       sortBy = _ref.sortBy,
       _ref$sortDirection = _ref.sortDirection,
-      sortDirection = _ref$sortDirection === void 0 ? exports.SortDirection.None : _ref$sortDirection,
+      sortDirection = _ref$sortDirection === void 0 ? SortDirection.None : _ref$sortDirection,
       onSortCallback = _ref.onSortCallback,
       theadClass = _ref.theadClass,
       noResultsCallback = _ref.noResultsCallback,
@@ -9718,11 +9675,11 @@
       collapsed = _useState8[0],
       setCollapsed = _useState8[1];
     var sort = function sort(sortByKey, direction, rowsData) {
-      if (direction === exports.SortDirection.None) {
+      if (direction === SortDirection.None) {
         return rowsData;
       }
       if (rowsData instanceof Array) return rowsData.sort(function (a, b) {
-        if (direction === exports.SortDirection.Asc) {
+        if (direction === SortDirection.Asc) {
           if (a[sortByKey] === null) {
             return 1;
           }
@@ -9737,14 +9694,14 @@
           return 1;
         }
         if (typeof a[sortByKey] === "number") {
-          if (direction === exports.SortDirection.Asc) {
+          if (direction === SortDirection.Asc) {
             return a[sortByKey] - b[sortByKey];
           }
           return b[sortByKey] - a[sortByKey];
         }
         var first = a[sortByKey].toString();
         var second = b[sortByKey].toString();
-        if (direction === exports.SortDirection.Asc) {
+        if (direction === SortDirection.Asc) {
           return first.localeCompare(second);
         }
         return second.localeCompare(first);
@@ -9770,12 +9727,12 @@
       setData = _useState10[1];
     var getNextSortDirection = function getNextSortDirection(previousDirection, sameColumn) {
       if (!sameColumn) {
-        return exports.SortDirection.Asc;
+        return SortDirection.Asc;
       }
-      if (previousDirection === exports.SortDirection.Asc) {
-        return exports.SortDirection.Desc;
+      if (previousDirection === SortDirection.Asc) {
+        return SortDirection.Desc;
       }
-      return exports.SortDirection.Asc;
+      return SortDirection.Asc;
     };
     var sortColumn = React.useCallback(function (event) {
       var index = event.currentTarget.dataset.index;
@@ -9855,7 +9812,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,
@@ -9881,7 +9838,7 @@
         }, header.map(function (col, 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 === col.key
             }),
             "data-key": col.key
@@ -9891,7 +9848,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Tbody, null, placeholders);
     }, [cellMouseOut, cellMouseOver, header, hovered, loadingRows]);
     var renderRows = React.useMemo(function () {
-      if (data && data instanceof Array && data.length > 0 || _typeof(data) === "object" && Object.keys(data).length > 0) {
+      if (data && data instanceof Array && data.length > 0 || typeof data === "object" && Object.keys(data).length > 0) {
         if (groupBy) {
           var keys = Object.keys(data);
           return keys.map(function (key, i) {
@@ -9909,14 +9866,14 @@
                 "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_${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_${i}`, {
                 hidden: collapsed[key]
               })
             }, data[key].map(function (row, index) {
@@ -9974,7 +9931,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
         }),
@@ -9993,7 +9950,7 @@
       })), hovered === h.key && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "c-table__overlay",
         style: {
-          height: overlayStyles() + "px"
+          height: overlayStyles() + `px`
         }
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: sortColumn,
@@ -10009,8 +9966,8 @@
         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,
-          "c-table__icon--desc": columnDirection === exports.SortDirection.Desc && h.key === active
+          "c-table__icon--asc": columnDirection === SortDirection.Asc && h.key === active,
+          "c-table__icon--desc": columnDirection === SortDirection.Desc && h.key === active
         })
       })));
     }))), loading ? renderPlaceholders : renderRows);
@@ -10208,7 +10165,7 @@
       }).map(function (p) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
           key: p.name,
-          className: "entity-property-".concat(p.name)
+          className: `entity-property-${p.name}`
         }, p.render());
       });
     }, []);
@@ -10225,7 +10182,7 @@
       var renderProperty = function renderProperty(p) {
         return /*#__PURE__*/React__default["default"].createElement("div", {
           key: p.name,
-          className: "entity-property-".concat(p.name)
+          className: `entity-property-${p.name}`
         }, p.render());
       };
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10403,13 +10360,13 @@
         newValue = max;
       }
       if (newValue === max) {
-        return "".concat(Math.floor(newValue / 1000000000), "B+");
+        return `${Math.floor(newValue / 1000000000)}B+`;
       } else if (newValue > 999999) {
-        return "".concat(Math.floor(newValue / 1000000), "M");
+        return `${Math.floor(newValue / 1000000)}M`;
       } else if (newValue > 999) {
-        return "".concat(Math.floor(newValue / 1000), "k");
+        return `${Math.floor(newValue / 1000)}k`;
       }
-      return "".concat(newValue);
+      return `${newValue}`;
     }, [value]);
     React.useEffect(function () {
       value && setPrevValue(function (v) {
@@ -10610,9 +10567,9 @@
       var beforeHighlighted = text.substring(0, textComparator.indexOf(searchByComparator));
       var highLighted = text.substring(textComparator.indexOf(searchByComparator), textComparator.indexOf(searchByComparator) + searchBy.length);
       var afterHighlighted = text.substring(textComparator.indexOf(searchByComparator) + searchBy.length);
-      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, beforeHighlighted.replace(/ /g, "\xA0"), /*#__PURE__*/React__default["default"].createElement(StyledHiglightedText, {
+      return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, beforeHighlighted.replace(/ /g, "\u00a0"), /*#__PURE__*/React__default["default"].createElement(StyledHiglightedText, {
         className: "c-option--text__highlight"
-      }, highLighted.replace(/ /g, "\xA0")), afterHighlighted.replace(/ /g, "\xA0"));
+      }, highLighted.replace(/ /g, "\u00a0")), afterHighlighted.replace(/ /g, "\u00a0"));
     }
     return text;
   };
@@ -10625,10 +10582,10 @@
     var options = flatOptions;
     if (showDefaultOption) options = [{
       id: null
-    }].concat(_toConsumableArray(options));
-    if (showAddNew) options = [].concat(_toConsumableArray(options), [{
+    }, ...options];
+    if (showAddNew) options = [...options, {
       id: "addNew"
-    }]);
+    }];
     var hoveredIndex = options.findIndex(function (option) {
       return option.id === hover;
     });
@@ -10882,7 +10839,7 @@
     React.useEffect(function () {
       if (hover === id && type !== "single") {
         var _document$getElementB;
-        (_document$getElementB = document.getElementById("".concat(id))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+        (_document$getElementB = document.getElementById(`${id}`)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
       }
     }, [hover, type, id]);
     var isAllOptionsChecked = React.useMemo(function () {
@@ -10911,7 +10868,7 @@
             return allOptionValues.includes(i) === false;
           }));
         } else {
-          var values = [].concat(_toConsumableArray(checked), _toConsumableArray(allOptionValues));
+          var values = [...checked, ...allOptionValues];
           var unique = values.filter(function (item, pos) {
             return values.indexOf(item) === pos;
           });
@@ -10930,7 +10887,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeader, null, /*#__PURE__*/React__default["default"].createElement(StyledOptionGroupHeaderName, {
       weight: "bold"
     }, name), type === "multiple" && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
-      id: "".concat(id),
+      id: `${id}`,
       checked: isAllOptionsChecked,
       isIndeterminate: options.some(function (option) {
         return checked.includes(option.id);
@@ -11145,6 +11102,9 @@
     return height;
   };
 
+  // https://www.youtube.com/watch?v=2AilA-M6N5U
+  // @TODO: Pitati foo za testove.
+
   var useInputNumber = function useInputNumber(_ref, ref) {
     var _ref$decimalSeparator = _ref.decimalSeparator,
       decimalSeparator = _ref$decimalSeparator === void 0 ? "." : _ref$decimalSeparator,
@@ -11191,7 +11151,7 @@
       var numericInput = disableMacros ? inputValue : inputValue.replace(/([0-9.]+)([kmbtKMBT])/, function (_, num, unit) {
         return (parseFloat(num) * currencyMultiplier[unit.toLowerCase()]).toString();
       });
-      var regexString = "^(-?\\d{0,9}(?:[".concat(thousandSeparator, "]?\\d{0,3})*(?:\\").concat(decimalSeparator, "\\d{0,").concat(decimalLength, "})?)?$");
+      var regexString = `^(-?\\d{0,9}(?:[${thousandSeparator}]?\\d{0,3})*(?:\\${decimalSeparator}\\d{0,${decimalLength}})?)?$`;
       if (thousandSeparator === ",") {
         isValidInput = new RegExp(regexString).test(numericInput);
       }
@@ -11267,14 +11227,14 @@
       setFormatted(decimalPart ? joinedValue + decimalPart : joinedValue);
     };
     return {
-      focused: focused,
-      formattedValue: formattedValue,
-      rootValue: rootValue,
-      handleChange: handleChange,
-      handleKeyDown: handleKeyDown,
-      handleBlur: handleBlur,
-      handleFocus: handleFocus,
-      onValueChange: onValueChange
+      focused,
+      formattedValue,
+      rootValue,
+      handleChange,
+      handleKeyDown,
+      handleBlur,
+      handleFocus,
+      onValueChange
     };
   };
 
@@ -11401,7 +11361,7 @@
     var sortList = React.useCallback(function (options) {
       var _options$;
       if (disabledInternalSort) {
-        return handleSort(_toConsumableArray(options));
+        return handleSort([...options]);
       }
       var isGrouped = Array.isArray((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.options);
       if (isGrouped) {
@@ -11488,11 +11448,11 @@
               });
             }
             hovered = true;
-            return [].concat(_toConsumableArray(acc), [_objectSpread2(_objectSpread2({}, groupedOption), {}, {
+            return [...acc, _objectSpread2(_objectSpread2({}, groupedOption), {}, {
               options: filteredOptions
-            })]);
+            })];
           }
-          return _toConsumableArray(acc);
+          return [...acc];
         }, []);
       } else {
         var filteredOptions = options.filter(function (v) {
@@ -11522,9 +11482,9 @@
     var flatOptions = React.useMemo(function () {
       var options = list.reduce(function (acc, option) {
         if (!isOptionGroup(option)) {
-          return [].concat(_toConsumableArray(acc), [option]);
+          return [...acc, option];
         }
-        return [].concat(_toConsumableArray(acc), _toConsumableArray(option.options));
+        return [...acc, ...option.options];
       }, []);
       return filterOptions(options, filter);
     }, [filter, filterOptions, list]);
@@ -11548,7 +11508,7 @@
               return _id !== id;
             });
           } else {
-            result = [].concat(_toConsumableArray(selectedOptions), [id]);
+            result = [...selectedOptions, id];
           }
         } else {
           result = id;
@@ -11614,7 +11574,7 @@
         renderOption: renderOption(_objectSpread2(_objectSpread2({}, item), {}, {
           name: highlightText(item.name, filter)
         }), {
-          id: "option_".concat(item.id),
+          id: `option_${item.id}`,
           checked: selectedOptions && selectedOptions.includes(item.id),
           hover: hover.item === item.id,
           onChange: function onChange() {
@@ -11981,30 +11941,30 @@
       switch (url.length) {
         case 1:
           return {
-            width: "".concat(size, "px"),
-            height: "".concat(size, "px")
+            width: `${size}px`,
+            height: `${size}px`
           };
         case 2:
           return {
-            width: "".concat(size / 2, "px"),
-            height: "".concat(size, "px")
+            width: `${size / 2}px`,
+            height: `${size}px`
           };
         case 3:
           if (i === 0) {
             return {
-              width: "".concat(size / 2, "px"),
-              height: "".concat(size, "px")
+              width: `${size / 2}px`,
+              height: `${size}px`
             };
           } else {
             return {
-              width: "".concat(size / 2, "px"),
-              height: "".concat(size / 2, "px")
+              width: `${size / 2}px`,
+              height: `${size / 2}px`
             };
           }
         default:
           return {
-            width: "".concat(size / 2, "px"),
-            height: "".concat(size / 2, "px")
+            width: `${size / 2}px`,
+            height: `${size / 2}px`
           };
       }
     }, [size, url.length]);
@@ -12018,8 +11978,8 @@
       className: "tw-relative tw-inline-flex"
     }, /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatar, {
       style: {
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px")
+        width: `${size}px`,
+        height: `${size}px`
       },
       className: className,
       $urlCount: url.length
@@ -12027,10 +11987,10 @@
       return /*#__PURE__*/React__default["default"].createElement(StyledMultiAvatarInner, {
         style: setSize(i),
         className: "c-multi-avatar__wrapper",
-        key: "avatar_".concat(i)
+        key: `avatar_${i}`
       }, /*#__PURE__*/React__default["default"].createElement("img", {
         src: v,
-        alt: alt && alt[i] ? alt[i] : "avatar_".concat(i),
+        alt: alt && alt[i] ? alt[i] : `avatar_${i}`,
         width: size,
         height: size
       }));
@@ -12116,12 +12076,12 @@
     var allOptionValues = React.useMemo(function () {
       return selectOptions.reduce(function (acc, option) {
         if (!isOptionGroup(option)) {
-          return [].concat(_toConsumableArray(acc), [option.id]);
+          return [...acc, option.id];
         }
         var allGroupOptions = option.options.map(function (option) {
           return option.id;
         });
-        return [].concat(_toConsumableArray(acc), _toConsumableArray(allGroupOptions));
+        return [...acc, ...allGroupOptions];
       }, []);
     }, [selectOptions]);
     var isAllOptionsChecked = React.useMemo(function () {
@@ -12163,12 +12123,12 @@
       if (target) {
         return {
           menuClassName: classNames__default["default"]("c-select", selectClassName),
-          onClose: onClose,
-          onOpen: onOpen,
-          target: target,
-          mode: mode,
-          open: open,
-          position: position,
+          onClose,
+          onOpen,
+          target,
+          mode,
+          open,
+          position,
           onPopperOpen: function onPopperOpen() {
             var _elementRef$current;
             return elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
@@ -12360,7 +12320,7 @@
       role = _ref.role,
       rest = _objectWithoutProperties(_ref, _excluded$L);
     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
@@ -12519,13 +12479,13 @@
           // collapse Nav to Select, there is no enough room
           if (containerWidth < moreItemWidth + firstItemWidth) {
             setVisibleTabIndexes([]);
-            var _options2 = navItemNames.map(function (name, index) {
+            var _options = navItemNames.map(function (name, index) {
               return {
                 id: index,
                 name: name
               };
             });
-            setOptions(_options2);
+            setOptions(_options);
             setRenderNavAsSelect(true);
             setMoreVisible(false);
             return setMeasuringRender(false);
@@ -12542,7 +12502,7 @@
             }
           });
           setVisibleTabIndexes(visible);
-          var _options = navItemNames.map(function (name, index) {
+          var _options2 = navItemNames.map(function (name, index) {
             return {
               id: index,
               name: name
@@ -12550,7 +12510,7 @@
           }).filter(function (item) {
             return !visible.includes(item.id);
           });
-          setOptions(_options);
+          setOptions(_options2);
           setRenderNavAsSelect(false);
           setMeasuringRender(false);
         }
@@ -12572,22 +12532,13 @@
     React.useEffect(function () {
       if (type === "inline" && navRef.current) {
         var resizeObserver = new ResizeObserver__default["default"](function (entries) {
-          var _iterator = _createForOfIteratorHelper(entries),
-            _step;
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var entry = _step.value;
-              var contentRect = entry.contentRect;
-              var _contentRect$width = contentRect.width,
-                width = _contentRect$width === void 0 ? 0 : _contentRect$width;
-              if (width > 0) {
-                setMeasuringRender(true);
-              }
+          for (var entry of entries) {
+            var contentRect = entry.contentRect;
+            var _contentRect$width = contentRect.width,
+              width = _contentRect$width === void 0 ? 0 : _contentRect$width;
+            if (width > 0) {
+              setMeasuringRender(true);
             }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
           }
         });
         resizeObserver.observe(navRef.current);
@@ -12644,11 +12595,11 @@
       var element = child;
       return /*#__PURE__*/React.cloneElement(element, {
         active: index === active,
-        role: role,
+        role,
         ref: function ref(el) {
           navItemsRefs.current[index] = el;
         },
-        onClick: onClick,
+        onClick,
         "data-index": index,
         "data-disabled": element.props.disabled
       });
@@ -12810,9 +12761,9 @@
               }
             }
           }
-          var newMinutesString = newMinutes < 10 ? "0".concat(newMinutes) : newMinutes;
-          var newHoursString = withLeadingZero && newHours < 10 ? "0".concat(newHours) : newHours;
-          var newValue = "".concat(newHoursString, ":").concat(newMinutesString);
+          var newMinutesString = newMinutes < 10 ? `0${newMinutes}` : newMinutes;
+          var newHoursString = withLeadingZero && newHours < 10 ? `0${newHours}` : newHours;
+          var newValue = `${newHoursString}:${newMinutesString}`;
           if (validation(newValue, withLeadingZero)) {
             setCurrentValue(newValue);
             if (onChange) onChange(newValue);
@@ -12939,9 +12890,9 @@
       };
     }, [currentValue, handleBlur, handleChange, handleClick, handleDoubleClick, handleKeyDown]);
     return {
-      inputProps: inputProps,
-      setCurrentValue: setCurrentValue,
-      setPrevValue: setPrevValue
+      inputProps,
+      setCurrentValue,
+      setPrevValue
     };
   };
 
@@ -12970,13 +12921,13 @@
     var handleRef = useForkRef(ref, inputRef);
     var _useInputHours = useInputHours({
         value: defaultValue,
-        withLeadingZero: withLeadingZero,
-        onSave: onSave,
-        validation: validation,
-        allowEmptyValue: allowEmptyValue,
-        onCancel: onCancel,
-        minuteIncrement: minuteIncrement,
-        incrementOnlySelected: incrementOnlySelected,
+        withLeadingZero,
+        onSave,
+        validation,
+        allowEmptyValue,
+        onCancel,
+        minuteIncrement,
+        incrementOnlySelected,
         onEnterKeyPress: externalEnterKeyPress,
         onChange: externalOnChange,
         onClick: externalOnClick
@@ -13303,11 +13254,11 @@
     displayName: "Styles__StyledAnimatedSpan",
     componentId: "sc-144eyxd-3"
   })(["background:red;", " ", " ", " ", ""], function (props) {
-    return props.$state === "entering" && styled.css(["opacity:1;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
+    return props.$state === "entering" && styled.css(["opacity:1;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, `${props.$durationIn}s`, `${props.$durationIn}s`) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, `${props.$maxDurationIn}s`));
   }, function (props) {
     return props.$state === "entered" && styled.css(["opacity:1;"]);
   }, function (props) {
-    return props.$state === "exiting" && styled.css(["opacity:0;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
+    return props.$state === "exiting" && styled.css(["opacity:0;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, `${props.$durationOut}s`, `${props.$durationOut}s`) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, `${props.$maxDurationOut}s`));
   }, function (props) {
     return props.$state === "exited" && styled.css(["opacity:0;"]);
   });
@@ -13408,7 +13359,7 @@
         appear: true,
         in: open,
         timeout: maxDurationIn * 100,
-        key: "c-sheet-control-".concat(index)
+        key: `c-sheet-control-${index}`
       }, function (state) {
         return /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
           $state: state,
@@ -13530,8 +13481,8 @@
       rows: rows,
       className: classNames__default["default"]("c-autoresizetextarea", className),
       style: {
-        minHeight: "".concat(lineHeight, "px"),
-        lineHeight: "".concat(lineHeight, "px")
+        minHeight: `${lineHeight}px`,
+        lineHeight: `${lineHeight}px`
       }
     }));
   });
@@ -13606,7 +13557,7 @@
           if (!allowMultipleExpanded) {
             return [id];
           }
-          return [].concat(_toConsumableArray(prevExpanded), [id]);
+          return [...prevExpanded, id];
         }
       });
       if (onChange) {
@@ -13615,10 +13566,10 @@
     }, [allowMultipleExpanded, allowZeroExpanded, onChange]);
     return /*#__PURE__*/React__default["default"].createElement(AccordionContext.Provider, {
       value: {
-        expandedItems: expandedItems,
+        expandedItems,
         toggleExpanded: toggleExpandedCallback,
-        disableToggleIcon: disableToggleIcon,
-        customToggleIcon: customToggleIcon
+        disableToggleIcon,
+        customToggleIcon
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledAccordion, {
       className: classNames__default["default"]("accordion", className)
@@ -13635,7 +13586,7 @@
     var itemId = React.useMemo(function () {
       if (!id) {
         var randomString = Math.random().toString(36).slice(2);
-        return "accordion-item-".concat(randomString);
+        return `accordion-item-${randomString}`;
       }
       return id;
     }, [id]);
@@ -13699,7 +13650,7 @@
     var duration = 200;
     var height = useHeight(divRef);
     var defaultStyle = {
-      transition: "max-height ".concat(duration, "ms linear"),
+      transition: `max-height ${duration}ms linear`,
       maxHeight: 0
     };
     var transitionStyles = {
@@ -14005,7 +13956,7 @@
   var _excluded$y = ["in", "children", "style", "timeout"];
   var defaultStyle$1 = function defaultStyle(duration) {
     return {
-      transition: "all ".concat(duration, "ms ease-in-out"),
+      transition: `all ${duration}ms ease-in-out`,
       opacity: 0
     };
   };
@@ -14072,21 +14023,21 @@
     }
     var defaultStyle = function defaultStyle(timeout) {
       return {
-        transition: "all ".concat(timeout, "ms ease")
+        transition: `all ${timeout}ms ease`
       };
     };
     var transitionStyles = {
       entering: {
-        transform: "translate(0,0)"
+        transform: `translate(0,0)`
       },
       entered: {
-        transform: "translate(0,0)"
+        transform: `translate(0,0)`
       },
       exiting: {
-        transform: "translate(".concat(directionSign, ")")
+        transform: `translate(${directionSign})`
       },
       exited: {
-        transform: "translate(".concat(directionSign, ")")
+        transform: `translate(${directionSign})`
       }
     };
     return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
@@ -14136,7 +14087,7 @@
     var defaultStyle = React.useMemo(function () {
       return {
         transitionProperty: "width, height",
-        transitionDuration: "".concat(timeout, "ms"),
+        transitionDuration: `${timeout}ms`,
         transitionTimingFunction: "ease"
       };
     }, [timeout]);
@@ -14159,27 +14110,27 @@
   var _excluded$v = ["in", "children", "style", "timeout"];
   var defaultStyle = function defaultStyle(duration) {
     return {
-      transition: "all ".concat(duration, "ms ease-in"),
-      transform: "scaleX(0)",
+      transition: `all ${duration}ms ease-in`,
+      transform: `scaleX(0)`,
       opacity: 0,
       transformOrigin: "left"
     };
   };
   var transitionStyles$1 = {
     entering: {
-      transform: "scaleX(1)",
+      transform: `scaleX(1)`,
       opacity: 1
     },
     entered: {
-      transform: "scaleX(1)",
+      transform: `scaleX(1)`,
       opacity: 1
     },
     exiting: {
-      transform: "scaleX(0)",
+      transform: `scaleX(0)`,
       opacity: 0
     },
     exited: {
-      transform: "scaleX(0)",
+      transform: `scaleX(0)`,
       opacity: 0
     }
   };
@@ -14223,7 +14174,7 @@
     var defaultStyle = React.useMemo(function () {
       return {
         transitionProperty: "transform",
-        transitionDuration: "".concat(timeout, "ms"),
+        transitionDuration: `${timeout}ms`,
         transform: "scale(0)"
       };
     }, [timeout]);
@@ -14344,7 +14295,6 @@
       // </DialogContext.Provider>
     );
   });
-
   _Dialog.displayName = "Dialog";
 
   // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757
@@ -14519,8 +14469,7 @@
       dateRequired: dateRequired,
       firstDayOfWeek: firstDayOfWeek,
       modifiers: modifiers,
-      renderDay: renderDay,
-      localeUtils: MomentLocaleUtils__default["default"]
+      renderDay: renderDay
     })), mode === "atomic" || !dateRequired ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateFooter, {
       className: "date-picker-footer",
       $mode: mode
@@ -14633,7 +14582,7 @@
   };
 
   var getShortDateFormat = function getShortDateFormat(value) {
-    return value.replace(/Y|,$/gi, "").trim();
+    return value.replace(/Y|,$/gi, ``).trim();
   };
   var formatDate = function formatDate(value) {
     var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "YYYY-MM-DD";
@@ -14750,11 +14699,11 @@
         if (selectedDays.from === selectedDays.to) {
           return formattedEndDate;
         }
-        return "".concat(formattedStartDate, " - ").concat(formattedEndDate);
+        return `${formattedStartDate} - ${formattedEndDate}`;
       }
     }, [selectedDays, dateFormat, timezoneAware, defaultLabelText, longDateFormat]);
     var modifiedDates = React.useMemo(function () {
-      if (_typeof(selectedDays) === "object" && !!selectedDays.from && !!selectedDays.to) {
+      if (typeof selectedDays === "object" && !!selectedDays.from && !!selectedDays.to) {
         if (timezoneAware) {
           return {
             from: moment__default["default"].unix(selectedDays.from).toDate(),
@@ -14772,7 +14721,7 @@
     var handleModifiedSave = React.useCallback(function (selectedDates) {
       setTimezoneAware(false);
       if (typeof onSave === "function") {
-        if (_typeof(selectedDates) === "object" && Object.prototype.hasOwnProperty.call(selectedDates, "from") && Object.prototype.hasOwnProperty.call(selectedDates, "to")) {
+        if (typeof selectedDates === "object" && Object.prototype.hasOwnProperty.call(selectedDates, "from") && Object.prototype.hasOwnProperty.call(selectedDates, "to")) {
           onSave({
             from: getUtcTimestampFromDate(selectedDates.from),
             to: getUtcTimestampFromDate(selectedDates.to)
@@ -14784,7 +14733,7 @@
     }, [onSave]);
     var getDefaultMonth = React.useCallback(function () {
       var date = new Date();
-      if (_typeof(selectedDays) === "object" && !!selectedDays.from) {
+      if (typeof selectedDays === "object" && !!selectedDays.from) {
         date = timezoneAware ? new Date(selectedDays.from * 1000) : new Date((selectedDays.from - moment__default["default"].unix(selectedDays.from).utcOffset() * 60) * 1000);
       } else if (defaultMonth) {
         date = defaultMonth;
@@ -14886,7 +14835,6 @@
       setShowDatePicker(false);
     }, [modifiedDates]);
     var modifiers = React.useMemo(function () {
-      var _ref2;
       var userAvailabilities = daysToModify.filter(function (data) {
         return data.type === "user_day_off";
       });
@@ -14896,62 +14844,68 @@
       var selectableGlobalDaysOff = daysToModify.filter(function (data) {
         return data.type === "selectable_global_day_off";
       });
-      return _ref2 = {}, _defineProperty(_ref2, customClassNames.userAvailability, function (day) {
-        // construct new date because react-day-picker returns date with hours set
-        var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-        return userAvailabilities.some(function (data) {
-          return isDayInRange(currentDay, data);
-        });
-      }), _defineProperty(_ref2, customClassNames.weekend, function (day) {
-        return weekends.some(function (value) {
-          return day.getDay() === value;
-        });
-      }), _defineProperty(_ref2, customClassNames.nonWorkingDay, function (day) {
-        // return true if day is weekend day
-        if (weekends.some(function (value) {
-          return value === day.getDay();
-        })) {
-          return true;
-        }
-        var nonWorkingDays = [].concat(_toConsumableArray(selectableGlobalDaysOff), _toConsumableArray(globalDaysOff));
-        var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-        return nonWorkingDays.some(function (data) {
-          return isDayInRange(currentDay, data);
-        });
-      }), _defineProperty(_ref2, customClassNames.disabled, function (day) {
-        if (disableDaysBefore) {
-          if (day.toJSON().slice(0, 10) < disableDaysBefore.toJSON().slice(0, 10)) {
+      return {
+        userAvailability: function userAvailability(day) {
+          // construct new date because react-day-picker returns date with hours set
+          var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+          return userAvailabilities.some(function (data) {
+            return isDayInRange(currentDay, data);
+          });
+        },
+        weekend: function weekend(day) {
+          return weekends.some(function (value) {
+            return day.getDay() === value;
+          });
+        },
+        nonWorkingDay: function nonWorkingDay(day) {
+          // return true if day is weekend day
+          if (weekends.some(function (value) {
+            return value === day.getDay();
+          })) {
             return true;
           }
+          var nonWorkingDays = [...selectableGlobalDaysOff, ...globalDaysOff];
+          var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+          return nonWorkingDays.some(function (data) {
+            return isDayInRange(currentDay, data);
+          });
+        },
+        day_disabled: function day_disabled(day) {
+          if (disableDaysBefore) {
+            if (day.toJSON().slice(0, 10) < disableDaysBefore.toJSON().slice(0, 10)) {
+              return true;
+            }
+          }
+          // return true if day is weekend day
+          if (!weekendIsSelectable && weekends.some(function (value) {
+            return value === day.getDay();
+          })) {
+            return true;
+          }
+          // construct new date because react-day-picker returns date with hours set
+          var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+          return globalDaysOff.some(function (data) {
+            return isDayInRange(currentDay, data);
+          });
+        },
+        nonWorkingDaysOfWeek: {
+          dayOfWeek: nonWorkingDaysOfWeek
         }
-        // return true if day is weekend day
-        if (!weekendIsSelectable && weekends.some(function (value) {
-          return value === day.getDay();
-        })) {
-          return true;
-        }
-        // construct new date because react-day-picker returns date with hours set
-        var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
-        return globalDaysOff.some(function (data) {
-          return isDayInRange(currentDay, data);
-        });
-      }), _defineProperty(_ref2, customClassNames.nonWorkingDaysOfWeek, {
-        daysOfWeek: nonWorkingDaysOfWeek
-      }), _ref2;
+      };
     }, [daysToModify, nonWorkingDaysOfWeek, weekends, disableDaysBefore, weekendIsSelectable]);
-    var renderDay = React.useCallback(function (day) {
+    var renderDay = React.useCallback(function (props) {
       var titles = [];
       if (weekends.some(function (value) {
-        return day.getDay() === value;
+        return props.date.getDay() === value;
       })) {
         titles.push(weekendLabel);
       }
-      if (nonWorkingDaysOfWeek.includes(day.getDay())) {
+      if (nonWorkingDaysOfWeek.includes(props.date.getDay())) {
         titles.push(nonWorkingDaysOfWeekLabel);
       }
 
       // construct new date because react-day-picker returns date with hours set
-      var currentDay = new Date(day.getFullYear(), day.getMonth(), day.getDate());
+      var currentDay = new Date(props.date.getFullYear(), props.date.getMonth(), props.date.getDate());
       daysToModify.forEach(function (data) {
         if (isDayInRange(currentDay, data)) {
           titles.push(data.title);
@@ -14959,13 +14913,13 @@
       });
       var child = /*#__PURE__*/React__default["default"].createElement("div", {
         className: "c-DayPicker-Day-Number"
-      }, day.getDate());
+      }, props.date.getDate());
       if (titles.length) {
         var title = /*#__PURE__*/React__default["default"].createElement("div", {
-          key: "title-wrapper-".concat(day.getDate())
+          key: `title-wrapper-${props.date.getDate()}`
         }, titles.map(function (title, index) {
           return /*#__PURE__*/React__default["default"].createElement("div", {
-            key: "title-text-".concat(index)
+            key: `title-text-${index}`
           }, title);
         }));
         return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -15324,7 +15278,7 @@
     displayName: "Styles__StyledComboBoxList",
     componentId: "sc-5qvkpb-3"
   })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
-    return "".concat(props.$width, "px");
+    return `${props.$width}px`;
   });
   StyledComboBoxList.displayName = "StyledComboBoxList";
   var StyledChipWrapper = styled__default["default"].div.withConfig({
@@ -15730,7 +15684,7 @@
             total = total + groupedOptions.length;
             if (groupedOptions.length > 0) {
               groupedOptions.forEach(function (o, _index) {
-                elements.push(renderChipAdornment(o, "".concat(index, "_").concat(_index)));
+                elements.push(renderChipAdornment(o, `${index}_${_index}`));
               });
             }
           }
@@ -15741,7 +15695,7 @@
         }
         return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/React__default["default"].createElement(_StyledTypography$1, {
           variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
-        }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
+        }, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : `+${_hidden}`));
       }
       if (type === "single" && selected) {
         var optionItem;
@@ -15997,7 +15951,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(StyledProgressBarProgress, {
       className: "c-progress-bar__progress",
       style: {
-        width: "".concat(progressNumber, "%")
+        width: `${progressNumber}%`
       },
       $height: height,
       $color: progressColor
@@ -16085,7 +16039,7 @@
       $color: backgroundColor,
       $strokeDashOffset: -strokeDashoffsetOuter,
       strokeWidth: stroke,
-      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      strokeDasharray: `${circumference} ${circumference}`,
       r: normalizedRadius,
       cx: radius,
       cy: radius
@@ -16093,7 +16047,7 @@
       $color: progressColor,
       $strokeDashOffset: strokeDashoffsetInner,
       strokeWidth: stroke,
-      strokeDasharray: "".concat(circumference, " ").concat(circumference),
+      strokeDasharray: `${circumference} ${circumference}`,
       r: normalizedRadius,
       cx: radius,
       cy: radius
@@ -16524,7 +16478,7 @@
       if (intInputRef !== null && intInputRef !== void 0 && intInputRef.current) {
         intInputRef.current.scrollLeft = 0;
       }
-      typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === "function" && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
+      typeof (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === `function` && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur(evt));
     }, [inputProps]);
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv, _extends({
       className: className,
@@ -16645,13 +16599,13 @@
     var handleRef = useForkRef(ref, inputRef);
     var _useInputHours = useInputHours({
         value: defaultValue,
-        withLeadingZero: withLeadingZero,
-        onSave: onSave,
-        validation: validation,
-        allowEmptyValue: allowEmptyValue,
-        onCancel: onCancel,
-        minuteIncrement: minuteIncrement,
-        incrementOnlySelected: incrementOnlySelected,
+        withLeadingZero,
+        onSave,
+        validation,
+        allowEmptyValue,
+        onCancel,
+        minuteIncrement,
+        incrementOnlySelected,
         onEnterKeyPress: externalEnterKeyPress,
         onClick: externalOnClick
       }, inputRef),
@@ -16689,8 +16643,8 @@
           hours = _value$split2[0],
           minutes = _value$split2[1];
         return {
-          hours: hours,
-          minutes: minutes
+          hours,
+          minutes
         };
       }
     }, [value, ticking]);
@@ -16698,13 +16652,13 @@
       ref: handleRef,
       className: className,
       inputProps: _objectSpread2(_objectSpread2({}, externalInputProps), {}, {
-        value: value,
-        onBlur: onBlur,
-        onKeyDown: onKeyDown,
-        onChange: onChange,
-        onClick: onClick,
-        onDoubleClick: onDoubleClick,
-        onFocus: onFocus,
+        value,
+        onBlur,
+        onKeyDown,
+        onChange,
+        onClick,
+        onDoubleClick,
+        onFocus,
         type: "text"
       }),
       $ticking: ticking
@@ -16736,14 +16690,14 @@
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
     var _useInputNumber = useInputNumber({
-        decimalLength: decimalLength,
-        decimalSeparator: decimalSeparator,
-        disableAbbreviation: disableAbbreviation,
-        disableMacros: disableMacros,
-        onValueChange: onValueChange,
-        step: step,
-        thousandSeparator: thousandSeparator,
-        value: value
+        decimalLength,
+        decimalSeparator,
+        disableAbbreviation,
+        disableMacros,
+        onValueChange,
+        step,
+        thousandSeparator,
+        value
       }, inputRef),
       focused = _useInputNumber.focused,
       rootValue = _useInputNumber.rootValue,
@@ -16901,7 +16855,7 @@
   })(["", " ", ""], function (_ref11) {
     var $renderAs = _ref11.$renderAs,
       $gap = _ref11.$gap;
-    return $renderAs === "grid" && styled.css(["display:grid;grid-gap:", ";grid-template-columns:repeat(auto-fill,minmax(260px,1fr));"], $gap ? "".concat($gap, "px") : "initial");
+    return $renderAs === "grid" && styled.css(["display:grid;grid-gap:", ";grid-template-columns:repeat(auto-fill,minmax(260px,1fr));"], $gap ? `${$gap}px` : "initial");
   }, function (props) {
     return props.$renderAs === "list" && styled.css(["display:flex;flex-direction:column;"]);
   });
@@ -16948,7 +16902,7 @@
       rest = _objectWithoutProperties(_ref, _excluded$9);
     var _useContext = React.useContext(EntityGroupContext),
       renderAs = _useContext.renderAs;
-    var classSuffix = "c-entity-card-".concat(renderAs);
+    var classSuffix = `c-entity-card-${renderAs}`;
     var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
     var Component = as || Card;
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityCard, _extends({
@@ -16973,7 +16927,7 @@
       props = _objectWithoutProperties(_ref, _excluded$8);
     var _useContext = React.useContext(EntityGroupContext),
       renderAs = _useContext.renderAs;
-    var classSuffix = "c-entity-property-".concat(renderAs);
+    var classSuffix = `c-entity-property-${renderAs}`;
     return /*#__PURE__*/React__default["default"].createElement(StyledEntityProperty, _extends({
       className: classNames__default["default"]("c-entity-property", classSuffix, className)
     }, props, {
@@ -17094,7 +17048,7 @@
       }
       if ((submenu === null || submenu === void 0 ? void 0 : submenu.length) > 1) {
         return /*#__PURE__*/React__default["default"].createElement(StyledStartMenuListItem, {
-          key: "filter-list-item-".concat(index),
+          key: `filter-list-item-${index}`,
           onClick: function onClick() {
             return onItemClick(id);
           }
@@ -17210,7 +17164,9 @@
     var handleChange = React.useCallback(function (selectedArray) {
       var newFilters = {};
       if (selectedArray.length) {
-        newFilters = _objectSpread2(_objectSpread2({}, filter), {}, _defineProperty({}, menu, selectedArray));
+        newFilters = _objectSpread2(_objectSpread2({}, filter), {}, {
+          [menu]: selectedArray
+        });
       } else {
         newFilters = _objectSpread2({}, filter);
         delete newFilters[menu];
@@ -17243,20 +17199,11 @@
       if (data.length === 0) {
         return false;
       }
-      var _iterator = _createForOfIteratorHelper(data),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _entry$submenu;
-          var entry = _step.value;
-          if (((_entry$submenu = entry.submenu) === null || _entry$submenu === void 0 ? void 0 : _entry$submenu.length) > 1) {
-            return true;
-          }
+      for (var entry of data) {
+        var _entry$submenu;
+        if (((_entry$submenu = entry.submenu) === null || _entry$submenu === void 0 ? void 0 : _entry$submenu.length) > 1) {
+          return true;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
       return false;
     }, [data]);
@@ -17278,8 +17225,8 @@
       in: true
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
-        height: height,
-        width: width
+        height,
+        width
       }
     }, /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
       in: menu === "index",
@@ -17292,7 +17239,7 @@
       data: data,
       selected: filter,
       style: {
-        width: width
+        width
       },
       onHeightChange: setHeight,
       onItemClick: handleItemClick,
@@ -17309,7 +17256,7 @@
         defaultValue = _ref2.defaultValue,
         rest = _objectWithoutProperties(_ref2, _excluded$6);
       return /*#__PURE__*/React__default["default"].createElement(SlideLeftRightTransition, {
-        key: "filter-submenu-".concat(index),
+        key: `filter-submenu-${index}`,
         in: menu === id,
         direction: isLeft ? "left" : "right",
         onEnter: handleHeight,
@@ -17321,7 +17268,7 @@
         onBack: setIndex,
         onHeightChange: setHeight,
         style: {
-          width: width
+          width
         },
         indexPage: menu === "index"
       }, /*#__PURE__*/React__default["default"].createElement(FocusLock.MoveFocusInside, {
@@ -17475,10 +17422,10 @@
         return /*#__PURE__*/React__default["default"].cloneElement(element, {
           index: activeStep,
           isLast: childrenCollection.length - 1 === activeStep,
-          title: title,
+          title,
           onNextButtonClick: goNext,
           onPreviousButtonClick: goPrevious,
-          onClose: onClose,
+          onClose,
           changingStepInProgress: changingStepInProgress
         });
       }
@@ -17486,12 +17433,12 @@
     }, [activeStep, changingStepInProgress, childrenCollection, goNext, goPrevious, onClose, title]);
     return /*#__PURE__*/React__default["default"].createElement(WizardContextProvider, {
       value: {
-        activeStep: activeStep,
-        setActiveStep: setActiveStep,
-        goNext: goNext,
-        goPrevious: goPrevious,
+        activeStep,
+        setActiveStep,
+        goNext,
+        goPrevious,
         close: onClose,
-        setChangingStepInProgress: setChangingStepInProgress
+        setChangingStepInProgress
       }
     }, /*#__PURE__*/React__default["default"].createElement(Dialog, {
       ref: ref,
@@ -17556,7 +17503,7 @@
     }, rest), _children.map(function (child, index) {
       var item = child;
       var tooltipText = item.props.alt;
-      var alt = "Image of ".concat(tooltipText);
+      var alt = `Image of ${tooltipText}`;
       return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
         title: tooltipText ? tooltipText : "",
         disable: !hasTooltip,
@@ -17566,7 +17513,7 @@
         alt: alt,
         style: {
           // component preserves it's width
-          marginLeft: "-".concat(index === 0 ? null : gap, "px"),
+          marginLeft: `-${index === 0 ? null : gap}px`,
           outline: "1px solid var(--page-paper-main)"
         }
       })));
@@ -17577,7 +17524,7 @@
       size: size,
       role: "status",
       "aria-label": "Rest of the users",
-      $_css: "-".concat(gap, "px")
+      $_css: `-${gap}px`
     }, /*#__PURE__*/React__default["default"].createElement(Typography, {
       variant: handleVariant,
       weight: "medium"
@@ -17776,7 +17723,7 @@
       focusInput();
     }, [mode]);
     var handleInputPlaceholder = React.useMemo(function () {
-      if (_typeof(mode) === "object") {
+      if (typeof mode === "object") {
         return "Search";
       }
       if (mode === "id") {
@@ -17798,7 +17745,7 @@
     };
     return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteHeader, {
       className: "cp-header"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, _typeof(mode) === "object" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledSearchIcon, null, /*#__PURE__*/React__default["default"].createElement(SearchLargeIcon$1, null)), mode === "id" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/React__default["default"].createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React__default["default"].createElement(StyledInput, {
       ref: inputRef,
       autoFocus: true,
       placeholder: handleInputPlaceholder,
@@ -17826,7 +17773,7 @@
       "aria-valuemax": 100,
       "aria-valuemin": 0,
       role: "progressbar"
-    }) : null, mode !== "id" && _typeof(mode) !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+    }) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
       title: "Search by ID",
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -17841,7 +17788,7 @@
         clearInput();
       },
       variant: "text gray"
-    }, /*#__PURE__*/React__default["default"].createElement(HashtagIcon$1, null))) : null, search.length > 0 || mode === "id" || _typeof(mode) === "object" ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+    }, /*#__PURE__*/React__default["default"].createElement(HashtagIcon$1, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
       title: "Clear",
       placement: "top"
     }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -17869,7 +17816,7 @@
       var doc = parser.parseFromString(purifiedTarget, "text/html");
       var text = doc.body.textContent || "";
       var checkValidSearchChars = searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      var regex = new RegExp("(".concat(checkValidSearchChars, ")"), "gi");
+      var regex = new RegExp(`(${checkValidSearchChars})`, "gi");
       return text.replace(regex, "<mark>$1</mark>");
     }
     return "";
@@ -18020,7 +17967,7 @@
         if (item && item.type === CommandPaletteCommandItem) {
           clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
             index: itemsLength,
-            selected: selected
+            selected
           }));
           itemsLength++;
           commandsLength++;
@@ -18028,16 +17975,16 @@
         if (item && item.type === CommandPaletteItem) {
           clonedElement = /*#__PURE__*/React.cloneElement(item, _objectSpread2(_objectSpread2({}, item.props), {}, {
             index: itemsLength,
-            selected: selected
+            selected
           }));
           itemsLength++;
         }
         return clonedElement;
       });
       return {
-        items: items,
-        itemsLength: itemsLength,
-        commandsLength: commandsLength
+        items,
+        itemsLength,
+        commandsLength
       };
     }, [children, selected]);
     var handleChangeSelected = function handleChangeSelected(direction) {
@@ -18076,13 +18023,13 @@
       animate: "fade"
     }), /*#__PURE__*/React__default["default"].createElement(SearchContextProvider, {
       value: {
-        search: search,
-        onChangeSearch: onChangeSearch
+        search,
+        onChangeSearch
       }
     }, /*#__PURE__*/React__default["default"].createElement(SelectedContextProvider, {
       value: {
         selected: selected,
-        setSelected: setSelected
+        setSelected
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledCommandPalette, {
       onKeyDown: function onKeyDown(e) {
@@ -18107,9 +18054,9 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(ModeContextProvider, {
       value: {
-        mode: mode,
-        setMode: setMode,
-        idModeEnabled: idModeEnabled
+        mode,
+        setMode,
+        idModeEnabled
       }
     }, /*#__PURE__*/React__default["default"].createElement(CommandPaletteHeader, {
       commandsLength: filterChildren.commandsLength,
@@ -18469,6 +18416,7 @@
   exports.SlideFromTop = SlideFromTop;
   exports.SlideLeftRightTransition = SlideLeftRightTransition;
   exports.SmileIcon = SmileIcon$1;
+  exports.SortDirection = SortDirection;
   exports.SortGeneralIcon = SortGeneralIcon$1;
   exports.SortIcon = SortIcon$1;
   exports.SpinnerLoader = SpinnerLoader;