@banyan_cloud/roots 1.0.30 → 1.0.32

package/dist/esm/index.js

@@ -33559,7 +33559,6 @@ var Dates = function Dates(props) {
     selectedRange = props.selectedRange,
     setSelectedRange = props.setSelectedRange,
     disabledDates = props.disabledDates,
-    disableDatesAfter = props.disableDatesAfter,
     disableDatesBefore = props.disableDatesBefore;
   var monthAsNumber = selectedMonth.monthAsNumber,
     year = selectedMonth.year;
@@ -33641,7 +33640,10 @@ var Dates = function Dates(props) {
     return (disableDatesBefore === null || disableDatesBefore === void 0 ? void 0 : disableDatesBefore.length) > 0 && isBefore(date, fromUnixTime(disableDatesBefore));
   };
   var disabledAfterDate = function disabledAfterDate(date) {
-    return (disableDatesAfter === null || disableDatesAfter === void 0 ? void 0 : disableDatesAfter.length) > 0 && isAfter(date, fromUnixTime(disableDatesAfter));
+    var dObj = new Date();
+    dObj.setDate(dObj.getDate() + 1);
+    dObj.setHours(0, 0, 0, 0);
+    return isAfter(date, dObj);
   };
   return /*#__PURE__*/jsx$1("div", {
     className: modules_b02dadcc.dates,
@@ -33840,8 +33842,8 @@ var Calender = function Calender(props) {
     setSelectedRange = props.setSelectedRange,
     onApply = props.onApply,
     disabledDates = props.disabledDates,
-    disableDatesAfter = props.disableDatesAfter,
-    disableDatesBefore = props.disableDatesBefore;
+    disableDatesBefore = props.disableDatesBefore,
+    value = props.value;
   var _getDayInfo = getDayInfo(new Date()),
     month = _getDayInfo.month,
     year = _getDayInfo.year,
@@ -33857,13 +33859,36 @@ var Calender = function Calender(props) {
     selectedMonth = _useState2[0],
     setSelectedMonth = _useState2[1];
   useEffect(function () {
+    if (value) {
+      var _date = fromUnixTime(value);
+      var dateAsNumber = _date.getDate();
+      var selectedDayInfo = getDayInfo(_date);
+      var selectedDateMonth = {
+        month: selectedDayInfo.month,
+        monthAsNumber: selectedDayInfo.monthAsNumber,
+        year: selectedDayInfo.year,
+        dayAsNumber: selectedDayInfo.dayAsNumber
+      };
+      setSelectedMonth({
+        month: selectedDayInfo.month,
+        monthAsNumber: selectedDayInfo.monthAsNumber,
+        year: selectedDayInfo.year
+      });
+      setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
+        month: selectedDateMonth.month,
+        year: selectedDateMonth.year,
+        date: dateAsNumber,
+        unix: getUnixTime(_date.setHours(23, 59, 59, 59))
+      }));
+      return;
+    }
     var date = new Date();
-    if (!range && !isBefore(date, disableDatesBefore) && !isAfter(date, disableDatesAfter)) {
-      var dateAsNumber = date.getDate();
+    if (!range && !isBefore(date, disableDatesBefore)) {
+      var _dateAsNumber = date.getDate();
       setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
         month: selectedMonth.month,
         year: selectedMonth.year,
-        date: dateAsNumber,
+        date: _dateAsNumber,
         unix: getUnixTime(date.setHours(23, 59, 59, 59))
       }));
     }
@@ -33934,7 +33959,6 @@ var Calender = function Calender(props) {
       selectedRange: selectedRange,
       setSelectedRange: setSelectedRange,
       disabledDates: disabledDates,
-      disableDatesAfter: disableDatesAfter,
       disableDatesBefore: disableDatesBefore
     }), /*#__PURE__*/jsx$1(Footer, {
       range: range,
@@ -33948,8 +33972,8 @@ var Calender = function Calender(props) {
   });
 };
 
-var css$A = ".DatePicker_module_root__a549d7a9 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  max-width: 100%;\n  width: 25%;\n  overflow: visible;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_label__a549d7a9 {\n  font-weight: 400;\n  font-size: 0.75rem;\n  color: var(--black);\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  border: 0.0625rem solid #d9d9d9;\n  border-radius: 0.25rem;\n  width: auto;\n  border: 0.0625rem solid var(--grey5);\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 > div {\n  display: flex;\n  align-items: center;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_placeholder__a549d7a9 {\n  font-weight: 400;\n  font-size: 1rem;\n  color: var(--grey1);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  margin-left: 0.9375rem;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_value__a549d7a9 {\n  font-weight: 400;\n  font-size: 1rem;\n  color: var(--black);\n  margin-left: 0.9375rem;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_value__a549d7a9 span {\n  font-weight: 500;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_input__a549d7a9 {\n  display: none;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_icon__a549d7a9 {\n  width: 1.5rem;\n  height: 1.5rem;\n  stroke: #181818;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_down__a549d7a9 {\n  transform: rotate(270deg);\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_container__a549d7a9 .DatePicker_module_up__a549d7a9 {\n  transform: rotate(90deg);\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_disabled__a549d7a9 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  background: var(--grey10);\n  border: 0.0625rem solid #d9d9d9;\n  border-radius: 0.25rem;\n  border: 0.0625rem solid var(--grey5);\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_disabled__a549d7a9 .DatePicker_module_downArrow__a549d7a9 {\n  transform: rotate(270deg);\n  fill: var(--grey3);\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_disabled__a549d7a9 .DatePicker_module_placeholder__a549d7a9 {\n  font-weight: 400;\n  font-size: 1rem;\n  color: var(--grey3);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.DatePicker_module_root__a549d7a9.DatePicker_module_open__a549d7a9 {\n  border-color: var(--highlight);\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_error__a549d7a9 {\n  border: 0.0938rem solid var(--error);\n}\n.DatePicker_module_root__a549d7a9 .DatePicker_module_errorText__a549d7a9 {\n  font-weight: 400;\n  font-size: 0.75rem;\n  line-height: 0.9375rem;\n  color: var(--error);\n}\n\n.DatePicker_module_popper__a549d7a9 {\n  display: none;\n  background: var(--white);\n  border: 0.0625rem solid #d9d9d9;\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n  border-radius: 0.25rem;\n  overflow: auto;\n}\n.DatePicker_module_popper__a549d7a9.DatePicker_module_open__a549d7a9 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  position: absolute;\n}";
-var modules_5b831cd1 = {"root":"DatePicker_module_root__a549d7a9","label":"DatePicker_module_label__a549d7a9","container":"DatePicker_module_container__a549d7a9","placeholder":"DatePicker_module_placeholder__a549d7a9","value":"DatePicker_module_value__a549d7a9","input":"DatePicker_module_input__a549d7a9","icon":"DatePicker_module_icon__a549d7a9","down":"DatePicker_module_down__a549d7a9","up":"DatePicker_module_up__a549d7a9","disabled":"DatePicker_module_disabled__a549d7a9","down-arrow":"DatePicker_module_downArrow__a549d7a9","open":"DatePicker_module_open__a549d7a9","error":"DatePicker_module_error__a549d7a9","error-text":"DatePicker_module_errorText__a549d7a9","popper":"DatePicker_module_popper__a549d7a9"};
+var css$A = ".DatePicker_module_root__eb13bcdd {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  max-width: 100%;\n  overflow: visible;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_label__eb13bcdd {\n  font-weight: 400;\n  font-size: 0.75rem;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_label__eb13bcdd.DatePicker_module_light__eb13bcdd {\n  color: var(--black);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_label__eb13bcdd.DatePicker_module_dark__eb13bcdd {\n  color: var(--white);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  border: 0.0625rem solid #d9d9d9;\n  border-radius: 0.25rem;\n  width: auto;\n  border: 0.0625rem solid var(--grey5);\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd > div {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 0px;\n  letter-spacing: 0px;\n  word-spacing: 0px;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_placeholder__eb13bcdd {\n  font-weight: 400;\n  font-size: 1rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  margin-left: 0.9375rem;\n  color: var(--grey1);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_value__eb13bcdd {\n  font-weight: 400;\n  font-size: 1rem;\n  margin-left: 0.9375rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_value__eb13bcdd.DatePicker_module_light__eb13bcdd {\n  color: var(--black);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_value__eb13bcdd.DatePicker_module_dark__eb13bcdd {\n  color: var(--white);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_value__eb13bcdd span {\n  max-width: 150px;\n  display: inline-block;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  font-weight: 500;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_input__eb13bcdd {\n  display: none;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_icon__eb13bcdd {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_icon__eb13bcdd.DatePicker_module_light__eb13bcdd > path {\n  fill: var(--dark-grey);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_icon__eb13bcdd.DatePicker_module_dark__eb13bcdd > path {\n  fill: var(--white);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_down__eb13bcdd {\n  transform: rotate(270deg);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_container__eb13bcdd .DatePicker_module_up__eb13bcdd {\n  transform: rotate(90deg);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_disabled__eb13bcdd {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  background: var(--grey10);\n  border: 0.0625rem solid #d9d9d9;\n  border-radius: 0.25rem;\n  border: 0.0625rem solid var(--grey5);\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_disabled__eb13bcdd .DatePicker_module_downArrow__eb13bcdd {\n  transform: rotate(270deg);\n  fill: var(--grey3);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_disabled__eb13bcdd .DatePicker_module_placeholder__eb13bcdd {\n  font-weight: 400;\n  font-size: 1rem;\n  color: var(--grey3);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.DatePicker_module_root__eb13bcdd.DatePicker_module_open__eb13bcdd {\n  border-color: var(--highlight);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_error__eb13bcdd {\n  border: 0.0938rem solid var(--error);\n}\n.DatePicker_module_root__eb13bcdd .DatePicker_module_errorText__eb13bcdd {\n  font-weight: 400;\n  font-size: 0.75rem;\n  line-height: 0.9375rem;\n  color: var(--error);\n}\n\n.DatePicker_module_popper__eb13bcdd {\n  display: none;\n  background: var(--white);\n  border: 0.0625rem solid #d9d9d9;\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n  border-radius: 0.25rem;\n  overflow: auto;\n}\n.DatePicker_module_popper__eb13bcdd.DatePicker_module_open__eb13bcdd {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  position: absolute;\n}";
+var modules_5b831cd1 = {"root":"DatePicker_module_root__eb13bcdd","label":"DatePicker_module_label__eb13bcdd","light":"DatePicker_module_light__eb13bcdd","dark":"DatePicker_module_dark__eb13bcdd","container":"DatePicker_module_container__eb13bcdd","placeholder":"DatePicker_module_placeholder__eb13bcdd","value":"DatePicker_module_value__eb13bcdd","input":"DatePicker_module_input__eb13bcdd","icon":"DatePicker_module_icon__eb13bcdd","down":"DatePicker_module_down__eb13bcdd","up":"DatePicker_module_up__eb13bcdd","disabled":"DatePicker_module_disabled__eb13bcdd","down-arrow":"DatePicker_module_downArrow__eb13bcdd","open":"DatePicker_module_open__eb13bcdd","error":"DatePicker_module_error__eb13bcdd","error-text":"DatePicker_module_errorText__eb13bcdd","popper":"DatePicker_module_popper__eb13bcdd"};
 n(css$A,{});
 
 var isMaxRangeExceeded = function isMaxRangeExceeded(_ref) {
@@ -33976,7 +34000,6 @@ var isMaxRangeExceeded = function isMaxRangeExceeded(_ref) {
 };
 
 var DatePicker = function DatePicker(props) {
-  // eslint-disable-next-line object-curly-newline
   var placeholder = props.placeholder,
     label = props.label,
     range = props.range,
@@ -33986,8 +34009,9 @@ var DatePicker = function DatePicker(props) {
     value = props.value,
     disabled = props.disabled,
     className = props.className,
-    disableDatesAfter = props.disableDatesAfter,
-    disableDatesBefore = props.disableDatesBefore;
+    disableDatesBefore = props.disableDatesBefore,
+    theme = props.theme,
+    onClear = props.onClear;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -34084,35 +34108,45 @@ var DatePicker = function DatePicker(props) {
       apply();
     },
     disabledDates: disabledDates,
-    disableDatesAfter: disableDatesAfter,
-    disableDatesBefore: disableDatesBefore
+    disableDatesBefore: disableDatesBefore,
+    value: value
   };
   return /*#__PURE__*/jsxs("div", {
     className: classes(modules_5b831cd1.root, className),
     ref: datePickerRef,
     children: [label && /*#__PURE__*/jsx$1("span", {
-      className: modules_5b831cd1.label,
+      className: classes(modules_5b831cd1.label, modules_5b831cd1[theme]),
       children: label
     }), /*#__PURE__*/jsxs("div", _objectSpread2(_objectSpread2({
       "data-elem": "header",
       ref: reference,
-      className: classes(modules_5b831cd1.container, disabled ? modules_5b831cd1.disabled : '', open ? modules_5b831cd1.open : '', error ? modules_5b831cd1.error : '')
+      className: classes(modules_5b831cd1.container, disabled ? modules_5b831cd1.disabled : '', open ? modules_5b831cd1.open : '', error ? modules_5b831cd1.error : '', modules_5b831cd1[theme])
     }, getReferenceProps()), {}, {
       children: [/*#__PURE__*/jsxs("div", {
-        children: [/*#__PURE__*/jsx$1(Calender$1, {}), !displayValue && /*#__PURE__*/jsx$1("span", {
-          className: modules_5b831cd1.placeholder,
+        children: [/*#__PURE__*/jsx$1(Calender$1, {
+          className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme])
+        }), !displayValue && /*#__PURE__*/jsx$1("span", {
+          className: classes(modules_5b831cd1.placeholder, modules_5b831cd1[theme]),
           children: placeholder
-        }), displayValue && /*#__PURE__*/jsxs("span", {
-          className: modules_5b831cd1.value,
-          children: ["Selected Date: ", /*#__PURE__*/jsx$1("span", {
+        }), displayValue && /*#__PURE__*/jsx$1("div", {
+          className: classes(modules_5b831cd1.value, modules_5b831cd1[theme]),
+          children: /*#__PURE__*/jsx$1("span", {
             children: displayValue
-          })]
+          })
         })]
       }), /*#__PURE__*/jsx$1("input", {
         className: modules_5b831cd1.input,
         value: displayValue
-      }), /*#__PURE__*/jsx$1(Chevron, {
-        className: classes(modules_5b831cd1.icon),
+      }), value ? /*#__PURE__*/jsx$1("div", {
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          onClear();
+        },
+        children: /*#__PURE__*/jsx$1(Cross$1, {
+          className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme])
+        })
+      }) : /*#__PURE__*/jsx$1(Chevron, {
+        className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme]),
         position: open ? 'bottom' : 'top'
       })]
     })), error && /*#__PURE__*/jsx$1("div", {
@@ -34146,6 +34180,7 @@ DatePicker.propTypes = {
   label: propTypes$1.exports.string,
   range: propTypes$1.exports.bool,
   onApply: propTypes$1.exports.func,
+  onClear: propTypes$1.exports.func,
   value: propTypes$1.exports.string,
   disabled: propTypes$1.exports.bool,
   disabledDates: propTypes$1.exports.arrayOf(propTypes$1.exports.string),
@@ -34155,7 +34190,7 @@ DatePicker.propTypes = {
   }),
   className: propTypes$1.exports.string,
   disableDatesBefore: propTypes$1.exports.arrayOf(propTypes$1.exports.string),
-  disableDatesAfter: propTypes$1.exports.arrayOf(propTypes$1.exports.string)
+  theme: propTypes$1.exports.string
 };
 DatePicker.defaultProps = {
   placeholder: '',
@@ -34168,7 +34203,8 @@ DatePicker.defaultProps = {
   value: '',
   className: '',
   disableDatesBefore: [],
-  disableDatesAfter: []
+  theme: 'dark',
+  onClear: function onClear() {}
 };
 
 var css$z = ".HierarchyItem_module_root__d7b2e7cd {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: 1;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.25rem;\n  min-height: 2rem;\n  height: auto;\n  padding: 0.25rem;\n  cursor: pointer;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component1], .HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component3] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component1] .HierarchyItem_module_icon__d7b2e7cd, .HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component3] .HierarchyItem_module_icon__d7b2e7cd {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component2] {\n  flex: 1 1 auto;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd > [data-elem=component2] .HierarchyItem_module_title__d7b2e7cd {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover {\n  background: var(--background);\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover .HierarchyItem_module_icon__d7b2e7cd,\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover .HierarchyItem_module_title__d7b2e7cd,\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_header__d7b2e7cd:hover .HierarchyItem_module_title__d7b2e7cd svg {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd {\n  display: none;\n  flex: 1 0 auto;\n  padding: 0px 0rem 0px 0.25rem;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component1] {\n  flex: 0 0 1.6rem;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component1] .HierarchyItem_module_tail__d7b2e7cd {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  width: 1.6rem;\n  height: 100%;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component1] .HierarchyItem_module_tail__d7b2e7cd::after {\n  content: \"\";\n  display: block;\n  margin: auto;\n  width: 1px;\n  flex: 1;\n  background: var(--grey1);\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component2] {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__d7b2e7cd .HierarchyItem_module_body__d7b2e7cd > [data-elem=component2] .HierarchyItem_module_children__d7b2e7cd {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__d7b2e7cd.HierarchyItem_module_open__d7b2e7cd > .HierarchyItem_module_header__d7b2e7cd .HierarchyItem_module_icon__d7b2e7cd {\n  transform: none;\n}\n.HierarchyItem_module_root__d7b2e7cd.HierarchyItem_module_open__d7b2e7cd > .HierarchyItem_module_body__d7b2e7cd {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.25rem;\n  height: auto;\n}";
@@ -35440,7 +35476,8 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     floating = props.floating,
     paginationState = props.paginationState,
-    paginationDispatch = props.paginationDispatch;
+    paginationDispatch = props.paginationDispatch,
+    loading = props.loading;
   var totalPages = paginationState.totalPages,
     currentPage = paginationState.currentPage,
     step = paginationState.step;
@@ -35459,6 +35496,9 @@ var Pagination = /*#__PURE__*/forwardRef(function (props, ref) {
       totalPages: totalPages
     });
   }, [currentPage, step]);
+  if (loading) {
+    return null;
+  }
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: classes(modules_a3d40e77.root, className, floating ? modules_a3d40e77.floating : ''),
@@ -36694,11 +36734,12 @@ var Table = function Table(props) {
       customCells: customCells,
       className: modules_2e8406c7.table,
       loading: loading
-    }), paginationData != null && !loading && /*#__PURE__*/jsx$1(Pagination, _objectSpread2(_objectSpread2({
+    }), paginationData != null && /*#__PURE__*/jsx$1(Pagination, _objectSpread2(_objectSpread2({
       className: classes(modules_2e8406c7.pagination, floating ? modules_2e8406c7.floating : ''),
       ref: paginationRef
     }, paginationData), {}, {
-      floating: floating
+      floating: floating,
+      loading: loading
     }))]
   });
 };
@@ -36893,7 +36934,8 @@ var Tooltip = function Tooltip(props) {
   var children = props.children,
     position = props.position,
     content = props.content,
-    variant = props.variant;
+    variant = props.variant,
+    className = props.className;
   var timeoutRef = useRef(null);
   var tooltipRef = useRef(null);
   var _useState = useState(false),
@@ -36922,7 +36964,7 @@ var Tooltip = function Tooltip(props) {
       anchorEl: tooltipRef,
       wrapperId: "tooltip-popper",
       children: /*#__PURE__*/jsx$1("div", {
-        className: classes(modules_e4619b04.tooltip, modules_e4619b04[position], modules_e4619b04[variant]),
+        className: classes(modules_e4619b04.tooltip, modules_e4619b04[position], modules_e4619b04[variant], className),
         style: _objectSpread2({}, getPositionStyles({
           position: position,
           anchor: tooltipRef,
@@ -36936,12 +36978,14 @@ var Tooltip = function Tooltip(props) {
 Tooltip.propTypes = {
   variant: propTypes$1.exports.oneOf(['light', 'dark']),
   content: propTypes$1.exports.string,
-  position: propTypes$1.exports.oneOf(['right', 'top', 'bottom', 'left'])
+  position: propTypes$1.exports.oneOf(['right', 'top', 'bottom', 'left']),
+  className: propTypes$1.exports.string
 };
 Tooltip.defaultProps = {
   variant: 'light',
   content: 'Tooltip Info',
-  position: 'top'
+  position: 'top',
+  className: ''
 };
 
 var css$6 = ".BaseSidePanel_module_root__c7817916 {\n  max-height: 100%;\n  height: 100%;\n  display: flex;\n  width: 30%;\n  flex-direction: column;\n  top: 0;\n  background: #ffffff;\n  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);\n  overflow-x: hidden;\n  transition: 0.5s;\n}\n.BaseSidePanel_module_root__c7817916.BaseSidePanel_module_close__c7817916 {\n  width: 0rem;\n}\n.BaseSidePanel_module_root__c7817916 .BaseSidePanel_module_body__c7817916 {\n  flex: 1;\n  overflow-y: auto;\n}";