@banyan_cloud/roots 1.0.33 → 1.0.35

package/dist/cjs/index.js

@@ -1407,7 +1407,8 @@ var getSpacedDisplayName = function getSpacedDisplayName(string) {
   });
 };
 var doubleDigitted = function doubleDigitted(number) {
-  return number === null || number === void 0 ? void 0 : number.toString().padStart(2, '0');
+  var _number$toString$slic;
+  return number === null || number === void 0 ? void 0 : (_number$toString$slic = number.toString().slice(-2)) === null || _number$toString$slic === void 0 ? void 0 : _number$toString$slic.padStart(2, '0');
 };
 var getJSDateFromEpoch = function getJSDateFromEpoch(epoch) {
   var date = new Date(0);
@@ -1544,13 +1545,23 @@ var getDayInfo = function getDayInfo(date) {
   var dateAsNumber = date.getDate();
   var day = DAYS[date.getDay()];
   var dayAsNumber = date.getDay();
+  var hoursIn12 = date.getHours();
+  var hours = (date.getHours() + 11) % 12 + 1;
+  var minutes = date.getMinutes();
+  var seconds = date.getSeconds();
+  var meridian = hours >= 12 ? 'PM' : 'AM';
   return {
     month: month,
     monthAsNumber: monthAsNumber,
     year: year,
     dateAsNumber: dateAsNumber,
     day: day,
-    dayAsNumber: dayAsNumber
+    dayAsNumber: dayAsNumber,
+    hoursIn12: hoursIn12,
+    hours: hours,
+    minutes: minutes,
+    seconds: seconds,
+    meridian: meridian
   };
 };
 var getDatesInAMonth = function getDatesInAMonth(_ref) {
@@ -1580,9 +1591,9 @@ var getCSSVariableValue = function getCSSVariableValue(variable) {
 
 var e$1=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e$1.indexOf(i);-1===u&&(u=e$1.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$U = ".BaseCell_module_root__81e07d2d {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.5rem;\n  gap: 0.5rem;\n  flex: none;\n  height: 3rem;\n  background: var(--white);\n  max-width: 100%;\n  max-height: 100%;\n}\n.BaseCell_module_root__81e07d2d > [data-elem*=component] {\n  display: inline-block;\n  max-height: 100%;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_sm__81e07d2d {\n  width: 9.063rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_md__81e07d2d {\n  width: 15.625rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_lg__81e07d2d {\n  width: 21.875rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_auto__81e07d2d {\n  width: auto;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_borderRadiusDefault__81e07d2d {\n  border-radius: 0.25rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_borderRadiusRound__81e07d2d {\n  border-radius: 50%;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_borderRadiusEllipse__81e07d2d {\n  border-radius: 1.563rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d {\n  flex-grow: 1;\n  flex-shrink: 1;\n  min-width: 3rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d.BaseCell_module_sm__81e07d2d {\n  min-width: 9.063rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d.BaseCell_module_md__81e07d2d {\n  min-width: 15.625rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d.BaseCell_module_lg__81e07d2d {\n  min-width: 21.875rem;\n}";
+var css$V = ".BaseCell_module_root__81e07d2d {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.5rem;\n  gap: 0.5rem;\n  flex: none;\n  height: 3rem;\n  background: var(--white);\n  max-width: 100%;\n  max-height: 100%;\n}\n.BaseCell_module_root__81e07d2d > [data-elem*=component] {\n  display: inline-block;\n  max-height: 100%;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_sm__81e07d2d {\n  width: 9.063rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_md__81e07d2d {\n  width: 15.625rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_lg__81e07d2d {\n  width: 21.875rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_auto__81e07d2d {\n  width: auto;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_borderRadiusDefault__81e07d2d {\n  border-radius: 0.25rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_borderRadiusRound__81e07d2d {\n  border-radius: 50%;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_borderRadiusEllipse__81e07d2d {\n  border-radius: 1.563rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d {\n  flex-grow: 1;\n  flex-shrink: 1;\n  min-width: 3rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d.BaseCell_module_sm__81e07d2d {\n  min-width: 9.063rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d.BaseCell_module_md__81e07d2d {\n  min-width: 15.625rem;\n}\n.BaseCell_module_root__81e07d2d.BaseCell_module_flexible__81e07d2d.BaseCell_module_lg__81e07d2d {\n  min-width: 21.875rem;\n}";
 var modules_3af9b74c = {"root":"BaseCell_module_root__81e07d2d","sm":"BaseCell_module_sm__81e07d2d","md":"BaseCell_module_md__81e07d2d","lg":"BaseCell_module_lg__81e07d2d","auto":"BaseCell_module_auto__81e07d2d","border-radius-default":"BaseCell_module_borderRadiusDefault__81e07d2d","border-radius-round":"BaseCell_module_borderRadiusRound__81e07d2d","border-radius-ellipse":"BaseCell_module_borderRadiusEllipse__81e07d2d","flexible":"BaseCell_module_flexible__81e07d2d"};
-n(css$U,{});
+n(css$V,{});
 
 var BaseCell = /*#__PURE__*/React.forwardRef(function BaseCell(props, ref) {
   var className = props.className,
@@ -1662,9 +1673,9 @@ var defaultProps$1 = {
   attrs: {}
 };
 
-var css$T = "button.BaseButton_module_root__39a3f3ec[data-elem=base-cell] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: none;\n  background: none;\n  padding: 0.5rem 0.75rem;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell]:focus {\n  outline: 1px solid var(--highlight);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell]:active {\n  outline: none;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell]:disabled {\n  cursor: not-allowed;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell].BaseButton_module_contained__39a3f3ec {\n  background: var(--black);\n  color: var(--white);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell].BaseButton_module_outlined__39a3f3ec {\n  color: var(--black);\n  border: 1px solid var(--black);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell].BaseButton_module_text__39a3f3ec {\n  color: var(--black);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell] [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell] [data-elem=component2] {\n  min-width: 0;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell] [data-elem=title] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}";
+var css$U = "button.BaseButton_module_root__39a3f3ec[data-elem=base-cell] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: none;\n  background: none;\n  padding: 0.5rem 0.75rem;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell]:focus {\n  outline: 1px solid var(--highlight);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell]:active {\n  outline: none;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell]:disabled {\n  cursor: not-allowed;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell].BaseButton_module_contained__39a3f3ec {\n  background: var(--black);\n  color: var(--white);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell].BaseButton_module_outlined__39a3f3ec {\n  color: var(--black);\n  border: 1px solid var(--black);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell].BaseButton_module_text__39a3f3ec {\n  color: var(--black);\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell] [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell] [data-elem=component2] {\n  min-width: 0;\n}\nbutton.BaseButton_module_root__39a3f3ec[data-elem=base-cell] [data-elem=title] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}";
 var modules_ab72627b = {"root":"BaseButton_module_root__39a3f3ec","contained":"BaseButton_module_contained__39a3f3ec","outlined":"BaseButton_module_outlined__39a3f3ec","text":"BaseButton_module_text__39a3f3ec"};
-n(css$T,{});
+n(css$U,{});
 
 var BaseButton = /*#__PURE__*/React.forwardRef(function BaseButton(props, ref) {
   var className = props.className,
@@ -1723,9 +1734,9 @@ BaseButton.defaultProps = _objectSpread2(_objectSpread2({}, BaseCell.defaultProp
   variant: 'contained'
 });
 
-var css$S = ".Button_module_root__0be1a26c[data-elem=base-cell] {\n  cursor: pointer;\n}\n.Button_module_root__0be1a26c[data-elem=base-cell] [data-elem=component2] [data-elem=title] {\n  font-weight: 500;\n  font-size: 0.875rem;\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--highlight);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--highlight);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--highlight);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--success);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--success);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--success);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--error);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--error);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--error);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--warning);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--warning);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--warning);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_contained__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_contained__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_contained__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--grey4);\n  color: var(--grey);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--grey);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_text__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_text__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_text__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--grey);\n}";
+var css$T = ".Button_module_root__0be1a26c[data-elem=base-cell] {\n  cursor: pointer;\n}\n.Button_module_root__0be1a26c[data-elem=base-cell] [data-elem=component2] [data-elem=title] {\n  font-weight: 500;\n  font-size: 0.875rem;\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--highlight);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--highlight);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_primary__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--highlight);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--success);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--success);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_success__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--success);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--error);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--error);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_danger__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--error);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--warning);\n  color: var(--white);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--warning);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell].Button_module_warning__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--warning);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_contained__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_contained__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_contained__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_contained__0be1a26c {\n  background-color: var(--grey4);\n  color: var(--grey);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c {\n  background-color: transparent;\n  border-color: var(--grey);\n}\n.Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_primary__0be1a26c.Button_module_text__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_success__0be1a26c.Button_module_text__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_danger__0be1a26c.Button_module_text__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_outlined__0be1a26c, .Button_module_root__0be1a26c[data-elem=base-cell]:disabled.Button_module_warning__0be1a26c.Button_module_text__0be1a26c {\n  color: var(--grey);\n}";
 var modules_b0070f27 = {"root":"Button_module_root__0be1a26c","primary":"Button_module_primary__0be1a26c","contained":"Button_module_contained__0be1a26c","outlined":"Button_module_outlined__0be1a26c","text":"Button_module_text__0be1a26c","success":"Button_module_success__0be1a26c","danger":"Button_module_danger__0be1a26c","warning":"Button_module_warning__0be1a26c"};
-n(css$S,{});
+n(css$T,{});
 
 var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   var className = props.className,
@@ -1769,9 +1780,9 @@ Button.defaultProps = _objectSpread2(_objectSpread2({}, BaseButton.defaultProps)
   radius: 'default'
 });
 
-var css$R = ".Chip_module_root__0aa07630[data-elem=base-cell] {\n  position: relative;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell] [data-elem=component2] [data-elem=title] {\n  font-weight: 500;\n  font-size: 0.875rem;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_sm__0aa07630 {\n  height: 2rem;\n  padding: 0.188rem 0.5rem;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_md__0aa07630 {\n  height: 2.25rem;\n  padding: 0.563rem 1rem;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_success__0aa07630 {\n  background-color: var(--success-bg);\n  color: var(--success);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_info__0aa07630 {\n  background-color: var(--info-bg);\n  color: var(--info);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_danger__0aa07630 {\n  background-color: var(--error-bg);\n  color: var(--error);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_warning__0aa07630 {\n  background-color: var(--warning-bg);\n  color: var(--warning);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_default__0aa07630 {\n  background-color: var(--grey5);\n  color: var(--grey);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630:hover {\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630 {\n  border-width: 1px;\n  border-style: solid;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_success__0aa07630 {\n  background-color: var(--success-bg);\n  color: var(--success);\n  border-color: var(--success-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_success__0aa07630:hover {\n  background-color: var(--success-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_info__0aa07630 {\n  background-color: var(--info-bg);\n  color: var(--info);\n  border-color: var(--info-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_info__0aa07630:hover {\n  background-color: var(--info-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_danger__0aa07630 {\n  background-color: var(--error-bg);\n  color: var(--error);\n  border-color: var(--error-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_danger__0aa07630:hover {\n  background-color: var(--error-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_warning__0aa07630 {\n  background-color: var(--warning-bg);\n  color: var(--warning);\n  border-color: var(--warning-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_warning__0aa07630:hover {\n  background-color: var(--warning-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_default__0aa07630 {\n  background-color: var(--grey8);\n  color: var(--grey);\n  border-color: var(--grey6);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_default__0aa07630:hover {\n  background-color: var(--grey6);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630, .Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630 {\n  filter: grayscale(1);\n  border-color: var(--grey4);\n  background-color: var(--grey5);\n  color: var(--grey2);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630 [data-elem=component1],\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630 [data-elem=component3], .Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630 [data-elem=component1],\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630 [data-elem=component3] {\n  opacity: 0.5;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630:hover, .Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630:hover {\n  box-shadow: none;\n  background-color: var(--grey5);\n}";
+var css$S = ".Chip_module_root__0aa07630[data-elem=base-cell] {\n  position: relative;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell] [data-elem=component2] [data-elem=title] {\n  font-weight: 500;\n  font-size: 0.875rem;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_sm__0aa07630 {\n  height: 2rem;\n  padding: 0.188rem 0.5rem;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_md__0aa07630 {\n  height: 2.25rem;\n  padding: 0.563rem 1rem;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_success__0aa07630 {\n  background-color: var(--success-bg);\n  color: var(--success);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_info__0aa07630 {\n  background-color: var(--info-bg);\n  color: var(--info);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_danger__0aa07630 {\n  background-color: var(--error-bg);\n  color: var(--error);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_warning__0aa07630 {\n  background-color: var(--warning-bg);\n  color: var(--warning);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630.Chip_module_default__0aa07630 {\n  background-color: var(--grey5);\n  color: var(--grey);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_status__0aa07630:hover {\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630 {\n  border-width: 1px;\n  border-style: solid;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_success__0aa07630 {\n  background-color: var(--success-bg);\n  color: var(--success);\n  border-color: var(--success-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_success__0aa07630:hover {\n  background-color: var(--success-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_info__0aa07630 {\n  background-color: var(--info-bg);\n  color: var(--info);\n  border-color: var(--info-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_info__0aa07630:hover {\n  background-color: var(--info-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_danger__0aa07630 {\n  background-color: var(--error-bg);\n  color: var(--error);\n  border-color: var(--error-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_danger__0aa07630:hover {\n  background-color: var(--error-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_warning__0aa07630 {\n  background-color: var(--warning-bg);\n  color: var(--warning);\n  border-color: var(--warning-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_warning__0aa07630:hover {\n  background-color: var(--warning-outline);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_default__0aa07630 {\n  background-color: var(--grey8);\n  color: var(--grey);\n  border-color: var(--grey6);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell].Chip_module_input__0aa07630.Chip_module_default__0aa07630:hover {\n  background-color: var(--grey6);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630, .Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630 {\n  filter: grayscale(1);\n  border-color: var(--grey4);\n  background-color: var(--grey5);\n  color: var(--grey2);\n}\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630 [data-elem=component1],\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630 [data-elem=component3], .Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630 [data-elem=component1],\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630 [data-elem=component3] {\n  opacity: 0.5;\n}\n.Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_status__0aa07630:hover, .Chip_module_root__0aa07630[data-elem=base-cell]:disabled.Chip_module_input__0aa07630:hover {\n  box-shadow: none;\n  background-color: var(--grey5);\n}";
 var modules_31aa5fd7 = {"root":"Chip_module_root__0aa07630","sm":"Chip_module_sm__0aa07630","md":"Chip_module_md__0aa07630","status":"Chip_module_status__0aa07630","success":"Chip_module_success__0aa07630","info":"Chip_module_info__0aa07630","danger":"Chip_module_danger__0aa07630","warning":"Chip_module_warning__0aa07630","default":"Chip_module_default__0aa07630","input":"Chip_module_input__0aa07630"};
-n(css$R,{});
+n(css$S,{});
 
 var Chip = function Chip(props) {
   var className = props.className,
@@ -2142,9 +2153,9 @@ Server.defaultProps = {
   className: ''
 };
 
-var css$Q = ".Arrow_module_right__19f08663 {\n  transform: rotate(0deg);\n}\n\n.Arrow_module_left__19f08663 {\n  transform: rotate(180deg);\n}\n\n.Arrow_module_bottom__19f08663 {\n  transform: rotate(90deg);\n}\n\n.Arrow_module_top__19f08663 {\n  transform: rotate(270deg);\n}";
+var css$R = ".Arrow_module_right__19f08663 {\n  transform: rotate(0deg);\n}\n\n.Arrow_module_left__19f08663 {\n  transform: rotate(180deg);\n}\n\n.Arrow_module_bottom__19f08663 {\n  transform: rotate(90deg);\n}\n\n.Arrow_module_top__19f08663 {\n  transform: rotate(270deg);\n}";
 var modules_e313d483 = {"right":"Arrow_module_right__19f08663","left":"Arrow_module_left__19f08663","bottom":"Arrow_module_bottom__19f08663","top":"Arrow_module_top__19f08663"};
-n(css$Q,{});
+n(css$R,{});
 
 var Arrow$1 = function Arrow(props) {
   var className = props.className,
@@ -2164,9 +2175,9 @@ Arrow$1.defaultProps = {
   position: 'right'
 };
 
-var css$P = ".Chevron_module_left__8b1808eb {\n  transform: rotate(0deg);\n}\n\n.Chevron_module_bottom__8b1808eb {\n  transform: rotate(90deg);\n}\n\n.Chevron_module_right__8b1808eb {\n  transform: rotate(180deg);\n}\n\n.Chevron_module_top__8b1808eb {\n  transform: rotate(270deg);\n}";
+var css$Q = ".Chevron_module_left__8b1808eb {\n  transform: rotate(0deg);\n}\n\n.Chevron_module_bottom__8b1808eb {\n  transform: rotate(90deg);\n}\n\n.Chevron_module_right__8b1808eb {\n  transform: rotate(180deg);\n}\n\n.Chevron_module_top__8b1808eb {\n  transform: rotate(270deg);\n}";
 var modules_bf5b0b74 = {"left":"Chevron_module_left__8b1808eb","bottom":"Chevron_module_bottom__8b1808eb","right":"Chevron_module_right__8b1808eb","top":"Chevron_module_top__8b1808eb"};
-n(css$P,{});
+n(css$Q,{});
 
 var Chevron = function Chevron(props) {
   var className = props.className,
@@ -2325,24 +2336,16 @@ MagnifyingGlass.defaultProps = {
 
 var Columns$1 = function Columns(props) {
   var className = props.className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
     className: className,
-    viewBox: "0 0 26 26",
-    fill: "none",
+    width: "14",
+    height: "15",
+    viewBox: "0 0 14 15",
+    fill: "#2A2A2A",
     xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M11.5935 21.0107L11.5935 4.98934C11.5935 4.54693 11.2393 4.18828 10.8024 4.18828H6.84694C6.41003 4.18828 6.05584 4.54693 6.05584 4.98934L6.05584 21.0107C6.05584 21.4531 6.41003 21.8117 6.84694 21.8117H10.8024C11.2393 21.8117 11.5935 21.4531 11.5935 21.0107Z",
-      stroke: "#333333",
-      strokeWidth: "1.91877",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M20.2955 21.0107V4.98934C20.2955 4.54693 19.9413 4.18828 19.5044 4.18828H15.549C15.1121 4.18828 14.758 4.54693 14.758 4.98934V21.0107C14.758 21.4531 15.1121 21.8117 15.549 21.8117H19.5044C19.9413 21.8117 20.2955 21.4531 20.2955 21.0107Z",
-      stroke: "#333333",
-      strokeWidth: "1.91877",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M12.25 1.17167H1.75002C1.59531 1.17167 1.44694 1.23313 1.33754 1.34252C1.22815 1.45192 1.16669 1.60029 1.16669 1.755V12.255C1.16669 12.4097 1.22815 12.5581 1.33754 12.6675C1.44694 12.7769 1.59531 12.8383 1.75002 12.8383H12.25C12.4047 12.8383 12.5531 12.7769 12.6625 12.6675C12.7719 12.5581 12.8334 12.4097 12.8334 12.255V1.755C12.8334 1.60029 12.7719 1.45192 12.6625 1.34252C12.5531 1.23313 12.4047 1.17167 12.25 1.17167ZM6.41669 11.6717H2.33335V2.33833H6.41669V11.6717ZM11.6667 11.6717H7.58335V2.33833H11.6667V11.6717Z"
+    })
   });
 };
 Columns$1.defaultProps = {
@@ -2461,9 +2464,55 @@ Reset.defaultProps = {
   className: ''
 };
 
-var css$O = ".Accordion_module_root__a63f6f55 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] > [data-elem=component1] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] > [data-elem=component1] .Accordion_module_icon__a63f6f55 {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] .Accordion_module_title__a63f6f55 {\n  flex: 1 1 auto;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover {\n  background: var(--background);\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover .Accordion_module_icon__a63f6f55,\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover .Accordion_module_title__a63f6f55 {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_body__a63f6f55 {\n  display: none;\n  padding: 0.5rem 2.5rem;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] [data-elem=component1] .Accordion_module_icon__a63f6f55 {\n  transform: none;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 > button[data-elem=base-cell] {\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 > button[data-elem=base-cell] .Accordion_module_expand__a63f6f55 {\n  height: 1.5rem;\n  width: 1.5rem;\n}";
+var Settings = function Settings(props) {
+  var className = props.className;
+  return /*#__PURE__*/jsxRuntime.jsx("svg", {
+    className: className,
+    width: "14",
+    height: "15",
+    viewBox: "0 0 14 15",
+    fill: "#2A2A2A",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M11.6084 7.38999C11.5148 7.28354 11.4633 7.14669 11.4633 7.00499C11.4633 6.8633 11.5148 6.72645 11.6084 6.61999L12.355 5.77999C12.4373 5.68822 12.4884 5.57274 12.501 5.45012C12.5135 5.32751 12.487 5.20406 12.425 5.09749L11.2584 3.07916C11.197 2.97272 11.1037 2.88834 10.9916 2.83806C10.8795 2.78778 10.7545 2.77417 10.6342 2.79916L9.53752 3.02083C9.39798 3.04966 9.25271 3.02642 9.12912 2.95549C9.00554 2.88457 8.91219 2.77086 8.86669 2.63583L8.51085 1.56833C8.47172 1.45247 8.39716 1.35183 8.29772 1.28065C8.19828 1.20947 8.07898 1.17135 7.95669 1.17166H5.62335C5.49615 1.16502 5.37027 1.2002 5.26493 1.27183C5.1596 1.34345 5.08061 1.44759 5.04002 1.56833L4.71335 2.63583C4.66786 2.77086 4.5745 2.88457 4.45092 2.95549C4.32734 3.02642 4.18206 3.04966 4.04252 3.02083L2.91669 2.79916C2.80268 2.78305 2.68645 2.80104 2.58264 2.85087C2.47883 2.90069 2.3921 2.98013 2.33335 3.07916L1.16669 5.09749C1.1032 5.20287 1.07465 5.32563 1.08513 5.44821C1.0956 5.57079 1.14457 5.68692 1.22502 5.77999L1.96585 6.61999C2.05937 6.72645 2.11095 6.8633 2.11095 7.00499C2.11095 7.14669 2.05937 7.28354 1.96585 7.38999L1.22502 8.22999C1.14457 8.32307 1.0956 8.4392 1.08513 8.56178C1.07465 8.68436 1.1032 8.80712 1.16669 8.91249L2.33335 10.9308C2.39466 11.0373 2.48801 11.1216 2.60008 11.1719C2.71216 11.2222 2.83725 11.2358 2.95752 11.2108L4.05419 10.9892C4.19373 10.9603 4.339 10.9836 4.46259 11.0545C4.58617 11.1254 4.67952 11.2391 4.72502 11.3742L5.08085 12.4417C5.12144 12.5624 5.20044 12.6665 5.30577 12.7382C5.4111 12.8098 5.53698 12.845 5.66419 12.8383H7.99752C8.11981 12.8386 8.23911 12.8005 8.33855 12.7293C8.438 12.6582 8.51255 12.5575 8.55169 12.4417L8.90752 11.3742C8.95302 11.2391 9.04637 11.1254 9.16996 11.0545C9.29354 10.9836 9.43881 10.9603 9.57835 10.9892L10.675 11.2108C10.7953 11.2358 10.9204 11.2222 11.0325 11.1719C11.1445 11.1216 11.2379 11.0373 11.2992 10.9308L12.4659 8.91249C12.5278 8.80593 12.5544 8.68248 12.5418 8.55986C12.5292 8.43725 12.4781 8.32177 12.3959 8.22999L11.6084 7.38999ZM10.7392 8.17166L11.2059 8.69666L10.4592 9.99166L9.77085 9.85166C9.35073 9.76578 8.91369 9.83715 8.5427 10.0522C8.17172 10.2673 7.89261 10.6111 7.75835 11.0183L7.53669 11.6717H6.04335L5.83335 11.0067C5.6991 10.5994 5.41999 10.2556 5.04901 10.0405C4.67802 9.82548 4.24098 9.75412 3.82085 9.83999L3.13252 9.97999L2.37419 8.69083L2.84085 8.16583C3.12783 7.84498 3.28648 7.42962 3.28648 6.99916C3.28648 6.5687 3.12783 6.15334 2.84085 5.83249L2.37419 5.30749L3.12085 4.02416L3.80919 4.16416C4.22932 4.25004 4.66635 4.17867 5.03734 3.96361C5.40833 3.74855 5.68744 3.40475 5.82169 2.99749L6.04335 2.33833H7.53669L7.75835 3.00333C7.89261 3.41059 8.17172 3.75438 8.5427 3.96944C8.91369 4.18451 9.35073 4.25587 9.77085 4.16999L10.4592 4.02999L11.2059 5.32499L10.7392 5.84999C10.4554 6.1701 10.2988 6.58306 10.2988 7.01083C10.2988 7.4386 10.4554 7.85155 10.7392 8.17166ZM6.79002 4.67166C6.32853 4.67166 5.87741 4.80851 5.49369 5.0649C5.10998 5.32129 4.81091 5.68571 4.6343 6.11207C4.4577 6.53843 4.41149 7.00758 4.50152 7.46021C4.59155 7.91283 4.81378 8.32859 5.14011 8.65491C5.46643 8.98123 5.88219 9.20346 6.33481 9.29349C6.78743 9.38353 7.25659 9.33732 7.68295 9.16071C8.10931 8.98411 8.47373 8.68504 8.73012 8.30132C8.98651 7.91761 9.12335 7.46648 9.12335 7.00499C9.12335 6.38616 8.87752 5.79266 8.43994 5.35508C8.00235 4.91749 7.40886 4.67166 6.79002 4.67166ZM6.79002 8.17166C6.55928 8.17166 6.33371 8.10324 6.14186 7.97504C5.95 7.84685 5.80046 7.66464 5.71216 7.45146C5.62386 7.23828 5.60076 7.0037 5.64577 6.77739C5.69079 6.55108 5.8019 6.3432 5.96506 6.18004C6.12822 6.01688 6.3361 5.90576 6.56242 5.86074C6.78873 5.81573 7.0233 5.83883 7.23649 5.92713C7.44967 6.01544 7.63187 6.16497 7.76007 6.35683C7.88826 6.54869 7.95669 6.77425 7.95669 7.00499C7.95669 7.31441 7.83377 7.61116 7.61498 7.82995C7.39619 8.04874 7.09944 8.17166 6.79002 8.17166Z"
+    })
+  });
+};
+
+var Trash = function Trash(props) {
+  var className = props.className;
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    className: className,
+    width: "14",
+    height: "15",
+    viewBox: "0 0 14 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsxRuntime.jsx("g", {
+      clipPath: "url(#clip0_3863_19293)",
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M1.75 3.50499H2.91667M2.91667 3.50499H12.25M2.91667 3.50499V11.6717C2.91667 11.9811 3.03958 12.2778 3.25838 12.4966C3.47717 12.7154 3.77391 12.8383 4.08333 12.8383H9.91667C10.2261 12.8383 10.5228 12.7154 10.7416 12.4966C10.9604 12.2778 11.0833 11.9811 11.0833 11.6717V3.50499H2.91667ZM4.66667 3.50499V2.33833C4.66667 2.02891 4.78958 1.73216 5.00838 1.51337C5.22717 1.29458 5.52391 1.17166 5.83333 1.17166H8.16667C8.47609 1.17166 8.77283 1.29458 8.99162 1.51337C9.21042 1.73216 9.33333 2.02891 9.33333 2.33833V3.50499M5.83333 6.42166V9.92166M8.16667 6.42166V9.92166",
+        stroke: "#FF626A",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: "clip0_3863_19293",
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+          width: "14",
+          height: "14",
+          fill: "white",
+          transform: "translate(0 0.00500488)"
+        })
+      })
+    })]
+  });
+};
+
+var css$P = ".Accordion_module_root__a63f6f55 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 100%;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] > [data-elem=component1] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] > [data-elem=component1] .Accordion_module_icon__a63f6f55 {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] .Accordion_module_title__a63f6f55 {\n  flex: 1 1 auto;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover {\n  background: var(--background);\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover .Accordion_module_icon__a63f6f55,\n.Accordion_module_root__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell]:hover .Accordion_module_title__a63f6f55 {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.Accordion_module_root__a63f6f55 > .Accordion_module_body__a63f6f55 {\n  display: none;\n  padding: 0.5rem 2.5rem;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_header__a63f6f55[data-elem=base-cell] [data-elem=component1] .Accordion_module_icon__a63f6f55 {\n  transform: none;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 > button[data-elem=base-cell] {\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  align-self: flex-end;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n.Accordion_module_root__a63f6f55.Accordion_module_open__a63f6f55 > .Accordion_module_body__a63f6f55 > button[data-elem=base-cell] .Accordion_module_expand__a63f6f55 {\n  height: 1.5rem;\n  width: 1.5rem;\n}";
 var modules_8207625f = {"root":"Accordion_module_root__a63f6f55","header":"Accordion_module_header__a63f6f55","icon":"Accordion_module_icon__a63f6f55","title":"Accordion_module_title__a63f6f55","body":"Accordion_module_body__a63f6f55","open":"Accordion_module_open__a63f6f55","expand":"Accordion_module_expand__a63f6f55"};
-n(css$O,{});
+n(css$P,{});
 
 var Accordion = function Accordion(props) {
   var defaultOpen = props.defaultOpen,
@@ -2544,9 +2593,9 @@ Accordion.defaultProps = {
   onExpand: null
 };
 
-var css$N = ".Alert_module_root__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  position: fixed;\n  padding: 0.938rem;\n  width: 500px;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_positionBottomCenter__b5fc9a1d {\n  left: 50%;\n  bottom: 1rem;\n  transform: translate(-50%, 0);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_positionTopRight__b5fc9a1d {\n  right: 1rem;\n  top: 1rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_icons__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.313rem 0.938rem 0rem 0rem;\n  height: auto;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_icons__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_content__b5fc9a1d {\n  padding: 0.188rem 0.938rem 0rem 0rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_content__b5fc9a1d .Alert_module_title__b5fc9a1d {\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding-right: 2px;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_content__b5fc9a1d .Alert_module_description__b5fc9a1d {\n  word-wrap: break-word;\n  height: auto;\n  font-size: 0.875rem;\n  font-weight: 400;\n  margin-bottom: 0.5rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 5px;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d .Alert_module_button__b5fc9a1d {\n  padding: 0.313rem 1rem;\n  font-weight: 400;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d .Alert_module_close__b5fc9a1d {\n  padding-top: 0.313rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d .Alert_module_close__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  width: 1.25rem;\n  height: 1.25rem;\n  fill: var(--black);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_borderDefault__b5fc9a1d {\n  border-width: 0.063rem;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_borderThickLeft__b5fc9a1d {\n  border-width: 0.063rem 0.063rem 0.063rem 0.25rem;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_borderNone__b5fc9a1d {\n  border-width: 0rem 0rem 0rem 0.25rem;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_info__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--info);\n  background-color: #edf5ff;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_info__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--info);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_success__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--success);\n  background-color: var(--success-bg);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_success__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--success);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_danger__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--error);\n  background-color: var(--error-bg);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_danger__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--error);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_warning__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--warning);\n  background-color: var(--warning-bg);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_warning__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--warning);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_shadow__b5fc9a1d {\n  box-shadow: 0.125rem 0.5rem 1rem rgba(60, 60, 60, 0.12);\n}";
+var css$O = ".Alert_module_root__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  position: fixed;\n  padding: 0.938rem;\n  width: 500px;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_positionBottomCenter__b5fc9a1d {\n  left: 50%;\n  bottom: 1rem;\n  transform: translate(-50%, 0);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_positionTopRight__b5fc9a1d {\n  right: 1rem;\n  top: 1rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_icons__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.313rem 0.938rem 0rem 0rem;\n  height: auto;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_icons__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_content__b5fc9a1d {\n  padding: 0.188rem 0.938rem 0rem 0rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_content__b5fc9a1d .Alert_module_title__b5fc9a1d {\n  font-size: 0.875rem;\n  font-weight: 600;\n  padding-right: 2px;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_left__b5fc9a1d .Alert_module_content__b5fc9a1d .Alert_module_description__b5fc9a1d {\n  word-wrap: break-word;\n  height: auto;\n  font-size: 0.875rem;\n  font-weight: 400;\n  margin-bottom: 0.5rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 5px;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d .Alert_module_button__b5fc9a1d {\n  padding: 0.313rem 1rem;\n  font-weight: 400;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d .Alert_module_close__b5fc9a1d {\n  padding-top: 0.313rem;\n}\n.Alert_module_root__b5fc9a1d .Alert_module_actions__b5fc9a1d .Alert_module_close__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  width: 1.25rem;\n  height: 1.25rem;\n  fill: var(--black);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_borderDefault__b5fc9a1d {\n  border-width: 0.063rem;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_borderThickLeft__b5fc9a1d {\n  border-width: 0.063rem 0.063rem 0.063rem 0.25rem;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_borderNone__b5fc9a1d {\n  border-width: 0rem 0rem 0rem 0.25rem;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_info__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--info);\n  background-color: #edf5ff;\n}\n.Alert_module_root__b5fc9a1d.Alert_module_info__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--info);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_success__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--success);\n  background-color: var(--success-bg);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_success__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--success);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_danger__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--error);\n  background-color: var(--error-bg);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_danger__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--error);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_warning__b5fc9a1d {\n  border-style: solid;\n  border-color: var(--warning);\n  background-color: var(--warning-bg);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_warning__b5fc9a1d .Alert_module_icon__b5fc9a1d {\n  fill: var(--warning);\n}\n.Alert_module_root__b5fc9a1d.Alert_module_shadow__b5fc9a1d {\n  box-shadow: 0.125rem 0.5rem 1rem rgba(60, 60, 60, 0.12);\n}";
 var modules_3a764ea3 = {"root":"Alert_module_root__b5fc9a1d","position-bottom-center":"Alert_module_positionBottomCenter__b5fc9a1d","position-top-right":"Alert_module_positionTopRight__b5fc9a1d","left":"Alert_module_left__b5fc9a1d","icons":"Alert_module_icons__b5fc9a1d","icon":"Alert_module_icon__b5fc9a1d","content":"Alert_module_content__b5fc9a1d","title":"Alert_module_title__b5fc9a1d","description":"Alert_module_description__b5fc9a1d","actions":"Alert_module_actions__b5fc9a1d","button":"Alert_module_button__b5fc9a1d","close":"Alert_module_close__b5fc9a1d","border-default":"Alert_module_borderDefault__b5fc9a1d","border-thick-left":"Alert_module_borderThickLeft__b5fc9a1d","border-none":"Alert_module_borderNone__b5fc9a1d","info":"Alert_module_info__b5fc9a1d","success":"Alert_module_success__b5fc9a1d","danger":"Alert_module_danger__b5fc9a1d","warning":"Alert_module_warning__b5fc9a1d","shadow":"Alert_module_shadow__b5fc9a1d"};
-n(css$N,{});
+n(css$O,{});
 
 function getSide(placement) {
   return placement.split('-')[0];
@@ -2836,6 +2885,79 @@ function within(min$1, value, max$1) {
   return max$3(min$1, min$3(value, max$1));
 }
 
+/**
+ * Positions an inner element of the floating element such that it is centered
+ * to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => ({
+  name: 'arrow',
+  options,
+
+  async fn(middlewareArguments) {
+    // Since `element` is required, we don't Partial<> the type
+    const {
+      element,
+      padding = 0
+    } = options != null ? options : {};
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform
+    } = middlewareArguments;
+
+    if (element == null) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
+      }
+
+      return {};
+    }
+
+    const paddingObject = getSideObjectFromPadding(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getMainAxisFromPlacement(placement);
+    const alignment = getAlignment(placement);
+    const length = getLengthFromAxis(axis);
+    const arrowDimensions = await platform.getDimensions(element);
+    const minProp = axis === 'y' ? 'top' : 'left';
+    const maxProp = axis === 'y' ? 'bottom' : 'right';
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
+
+    if (clientSize === 0) {
+      clientSize = rects.floating[length];
+    }
+
+    const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
+    // point is outside the floating element's bounds
+
+    const min = paddingObject[minProp];
+    const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset = within(min, center, max); // Make sure that arrow points at the reference
+
+    const alignmentPadding = alignment === 'start' ? paddingObject[minProp] : paddingObject[maxProp];
+    const shouldAddOffset = alignmentPadding > 0 && center !== offset && rects.reference[length] <= rects.floating[length];
+    const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
+    return {
+      [axis]: coords[axis] - alignmentOffset,
+      data: {
+        [axis]: offset,
+        centerOffset: center - offset
+      }
+    };
+  }
+
+});
+
 const hash$1 = {
   left: 'right',
   right: 'left',
@@ -4024,6 +4146,50 @@ function useFloating$1(_temp) {
   }), [data, update, refs, setReference, setFloating]);
 }
 
+/**
+ * Positions an inner element of the floating element such that it is centered
+ * to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+
+const arrow = options => {
+  const {
+    element,
+    padding
+  } = options;
+
+  function isRef(value) {
+    return Object.prototype.hasOwnProperty.call(value, 'current');
+  }
+
+  return {
+    name: 'arrow',
+    options,
+
+    fn(args) {
+      if (isRef(element)) {
+        if (element.current != null) {
+          return arrow$1({
+            element: element.current,
+            padding
+          }).fn(args);
+        }
+
+        return {};
+      } else if (element) {
+        return arrow$1({
+          element,
+          padding
+        }).fn(args);
+      }
+
+      return {};
+    }
+
+  };
+};
+
 var getDefaultParent = function (originalTarget) {
     if (typeof document === 'undefined') {
         return null;
@@ -4895,6 +5061,313 @@ function usePrevious(value) {
   return ref.current;
 }
 
+function getDelay(value, prop, pointerType) {
+  if (pointerType && pointerType !== 'mouse') {
+    return 0;
+  }
+
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  return value == null ? void 0 : value[prop];
+}
+
+/**
+ * Adds hover event listeners that change the open state, like CSS :hover.
+ * @see https://floating-ui.com/docs/useHover
+ */
+const useHover = function (context, _temp) {
+  let {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true
+  } = _temp === void 0 ? {} : _temp;
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    events,
+    refs,
+    _
+  } = context;
+  const tree = useFloatingTree();
+  const parentId = useFloatingParentNodeId();
+  const handleCloseRef = useLatestRef(handleClose);
+  const delayRef = useLatestRef(delay);
+  const previousOpen = usePrevious(open);
+  const pointerTypeRef = React__namespace.useRef();
+  const timeoutRef = React__namespace.useRef();
+  const handlerRef = React__namespace.useRef();
+  const restTimeoutRef = React__namespace.useRef();
+  const blockMouseMoveRef = React__namespace.useRef(true);
+  const performedPointerEventsMutationRef = React__namespace.useRef(false);
+  const isHoverOpen = React__namespace.useCallback(() => {
+    var _dataRef$current$open;
+
+    const type = (_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type;
+    return (type == null ? void 0 : type.includes('mouse')) && type !== 'mousedown';
+  }, [dataRef]);
+  React__namespace.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    function onDismiss() {
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+      blockMouseMoveRef.current = true;
+    }
+
+    events.on('dismiss', onDismiss);
+    return () => {
+      events.off('dismiss', onDismiss);
+    };
+  }, [enabled, events, refs]);
+  React__namespace.useEffect(() => {
+    if (!enabled || !handleCloseRef.current) {
+      return;
+    }
+
+    function onLeave() {
+      if (isHoverOpen()) {
+        onOpenChange(false);
+      }
+    }
+
+    const html = getDocument(refs.floating.current).documentElement;
+    html.addEventListener('mouseleave', onLeave);
+    return () => {
+      html.removeEventListener('mouseleave', onLeave);
+    };
+  }, [refs, onOpenChange, enabled, handleCloseRef, dataRef, isHoverOpen]);
+  const closeWithDelay = React__namespace.useCallback(function (runElseBranch) {
+    if (runElseBranch === void 0) {
+      runElseBranch = true;
+    }
+
+    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+
+    if (closeDelay && !handlerRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => onOpenChange(false), closeDelay);
+    } else if (runElseBranch) {
+      clearTimeout(timeoutRef.current);
+      onOpenChange(false);
+    }
+  }, [delayRef, onOpenChange]);
+  const cleanupPointerMoveHandler = React__namespace.useCallback(() => {
+    if (handlerRef.current) {
+      getDocument(refs.floating.current).removeEventListener('pointermove', handlerRef.current);
+      handlerRef.current = undefined;
+    }
+  }, [refs]);
+  const clearPointerEvents = React__namespace.useCallback(() => {
+    getDocument(refs.floating.current).body.style.pointerEvents = '';
+    performedPointerEventsMutationRef.current = false;
+  }, [refs]); // Registering the mouse events on the reference directly to bypass React's
+  // delegation system. If the cursor was on a disabled element and then entered
+  // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
+
+  React__namespace.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    function isClickLikeOpenEvent() {
+      return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    }
+
+    function onMouseEnter(event) {
+      clearTimeout(timeoutRef.current);
+      blockMouseMoveRef.current = false;
+
+      if (mouseOnly && pointerTypeRef.current !== 'mouse' || restMs > 0 && getDelay(delayRef.current, 'open') === 0) {
+        return;
+      }
+
+      dataRef.current.openEvent = event;
+      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+
+      if (openDelay) {
+        timeoutRef.current = setTimeout(() => {
+          onOpenChange(true);
+        }, openDelay);
+      } else {
+        onOpenChange(true);
+      }
+    }
+
+    function onMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        return;
+      }
+
+      const doc = getDocument(refs.floating.current);
+      clearTimeout(restTimeoutRef.current);
+
+      if (handleCloseRef.current) {
+        clearTimeout(timeoutRef.current);
+        handlerRef.current && doc.removeEventListener('pointermove', handlerRef.current);
+        handlerRef.current = handleCloseRef.current({ ...context,
+          tree,
+          x: event.clientX,
+          y: event.clientY,
+
+          onClose() {
+            clearPointerEvents();
+            cleanupPointerMoveHandler();
+            closeWithDelay();
+          }
+
+        });
+        doc.addEventListener('pointermove', handlerRef.current);
+        return;
+      }
+
+      closeWithDelay();
+    } // Ensure the floating element closes after scrolling even if the pointer
+    // did not move.
+    // https://github.com/floating-ui/floating-ui/discussions/1692
+
+
+    function onScrollMouseLeave(event) {
+      if (isClickLikeOpenEvent()) {
+        return;
+      }
+
+      handleCloseRef.current == null ? void 0 : handleCloseRef.current({ ...context,
+        tree,
+        x: event.clientX,
+        y: event.clientY,
+        leave: true,
+
+        onClose() {
+          clearPointerEvents();
+          cleanupPointerMoveHandler();
+          closeWithDelay();
+        }
+
+      })(event);
+    }
+
+    const floating = refs.floating.current;
+    const reference = refs.domReference.current;
+
+    if (isElement(reference)) {
+      open && reference.addEventListener('mouseleave', onScrollMouseLeave);
+      floating == null ? void 0 : floating.addEventListener('mouseleave', onScrollMouseLeave);
+      move && reference.addEventListener('mousemove', onMouseEnter, {
+        once: true
+      });
+      reference.addEventListener('mouseenter', onMouseEnter);
+      reference.addEventListener('mouseleave', onMouseLeave);
+      return () => {
+        open && reference.removeEventListener('mouseleave', onScrollMouseLeave);
+        floating == null ? void 0 : floating.removeEventListener('mouseleave', onScrollMouseLeave);
+        move && reference.removeEventListener('mousemove', onMouseEnter);
+        reference.removeEventListener('mouseenter', onMouseEnter);
+        reference.removeEventListener('mouseleave', onMouseLeave);
+      };
+    }
+  }, [// Ensure the effect is re-run when the reference changes.
+  // https://github.com/floating-ui/floating-ui/issues/1833
+  _.domReference, enabled, context, mouseOnly, restMs, move, closeWithDelay, cleanupPointerMoveHandler, clearPointerEvents, onOpenChange, open, tree, refs, delayRef, handleCloseRef, dataRef]); // Block pointer-events of every element other than the reference and floating
+  // while the floating element is open and has a `handleClose` handler. Also
+  // handles nested floating elements.
+  // https://github.com/floating-ui/floating-ui/issues/1722
+
+  index(() => {
+    if (!enabled) {
+      return;
+    }
+
+    if (open && handleCloseRef.current && handleCloseRef.current.__options.blockPointerEvents && isHoverOpen()) {
+      getDocument(refs.floating.current).body.style.pointerEvents = 'none';
+      performedPointerEventsMutationRef.current = true;
+      const reference = refs.domReference.current;
+      const floating = refs.floating.current;
+
+      if (isElement(reference) && floating) {
+        var _tree$nodesRef$curren, _tree$nodesRef$curren2;
+
+        const parentFloating = tree == null ? void 0 : (_tree$nodesRef$curren = tree.nodesRef.current.find(node => node.id === parentId)) == null ? void 0 : (_tree$nodesRef$curren2 = _tree$nodesRef$curren.context) == null ? void 0 : _tree$nodesRef$curren2.refs.floating.current;
+
+        if (parentFloating) {
+          parentFloating.style.pointerEvents = '';
+        }
+
+        reference.style.pointerEvents = 'auto';
+        floating.style.pointerEvents = 'auto';
+        return () => {
+          reference.style.pointerEvents = '';
+          floating.style.pointerEvents = '';
+        };
+      }
+    }
+  }, [enabled, open, parentId, refs, tree, handleCloseRef, dataRef, isHoverOpen]);
+  index(() => {
+    if (previousOpen && !open) {
+      pointerTypeRef.current = undefined;
+      cleanupPointerMoveHandler();
+      clearPointerEvents();
+    }
+  });
+  React__namespace.useEffect(() => {
+    return () => {
+      cleanupPointerMoveHandler();
+      clearTimeout(timeoutRef.current);
+      clearTimeout(restTimeoutRef.current);
+
+      if (performedPointerEventsMutationRef.current) {
+        clearPointerEvents();
+      }
+    };
+  }, [enabled, cleanupPointerMoveHandler, clearPointerEvents]);
+
+  if (!enabled) {
+    return {};
+  }
+
+  function setPointerRef(event) {
+    pointerTypeRef.current = event.pointerType;
+  }
+
+  return {
+    reference: {
+      onPointerDown: setPointerRef,
+      onPointerEnter: setPointerRef,
+
+      onMouseMove() {
+        if (open || restMs === 0) {
+          return;
+        }
+
+        clearTimeout(restTimeoutRef.current);
+        restTimeoutRef.current = setTimeout(() => {
+          if (!blockMouseMoveRef.current) {
+            onOpenChange(true);
+          }
+        }, restMs);
+      }
+
+    },
+    floating: {
+      onMouseEnter() {
+        clearTimeout(timeoutRef.current);
+      },
+
+      onMouseLeave() {
+        closeWithDelay(false);
+      }
+
+    }
+  };
+};
+
 /**
  * Adds relevant screen reader props for a given element `role`.
  * @see https://floating-ui.com/docs/useRole
@@ -5259,6 +5732,123 @@ const useDismiss = function (_ref, _temp) {
   };
 };
 
+/**
+ * Adds focus event listeners that change the open state, like CSS :focus.
+ * @see https://floating-ui.com/docs/useFocus
+ */
+const useFocus = function (_ref, _temp) {
+  let {
+    open,
+    onOpenChange,
+    dataRef,
+    refs,
+    events
+  } = _ref;
+  let {
+    enabled = true,
+    keyboardOnly = true
+  } = _temp === void 0 ? {} : _temp;
+  const pointerTypeRef = React__namespace.useRef('');
+  const blockFocusRef = React__namespace.useRef(false);
+  const timeoutRef = React__namespace.useRef();
+  React__namespace.useEffect(() => {
+    var _doc$defaultView;
+
+    if (!enabled) {
+      return;
+    }
+
+    const doc = getDocument(refs.floating.current);
+    const win = (_doc$defaultView = doc.defaultView) != null ? _doc$defaultView : window;
+
+    function onBlur() {
+      if (!open && isHTMLElement(refs.domReference.current)) {
+        refs.domReference.current.blur();
+      }
+    }
+
+    win.addEventListener('blur', onBlur);
+    return () => {
+      win.removeEventListener('blur', onBlur);
+    };
+  }, [refs, open, enabled]);
+  React__namespace.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    function onDismiss() {
+      blockFocusRef.current = true;
+    }
+
+    events.on('dismiss', onDismiss);
+    return () => {
+      events.off('dismiss', onDismiss);
+    };
+  }, [events, enabled]);
+  React__namespace.useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  if (!enabled) {
+    return {};
+  }
+
+  return {
+    reference: {
+      onPointerDown(_ref2) {
+        let {
+          pointerType
+        } = _ref2;
+        pointerTypeRef.current = pointerType;
+        blockFocusRef.current = !!(pointerType && keyboardOnly);
+      },
+
+      onPointerLeave() {
+        blockFocusRef.current = false;
+      },
+
+      onFocus(event) {
+        var _dataRef$current$open, _refs$domReference$cu, _dataRef$current$open2;
+
+        if (blockFocusRef.current) {
+          return;
+        } // Dismiss with click should ignore the subsequent `focus` trigger, but
+        // only if the click originated inside the reference element.
+
+
+        if (event.type === 'focus' && ((_dataRef$current$open = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open.type) === 'mousedown' && (_refs$domReference$cu = refs.domReference.current) != null && _refs$domReference$cu.contains((_dataRef$current$open2 = dataRef.current.openEvent) == null ? void 0 : _dataRef$current$open2.target)) {
+          return;
+        }
+
+        dataRef.current.openEvent = event.nativeEvent;
+        onOpenChange(true);
+      },
+
+      onBlur(event) {
+        const target = event.relatedTarget; // Wait for the window blur listener to fire.
+
+        timeoutRef.current = setTimeout(() => {
+          var _refs$floating$curren, _refs$domReference$cu2;
+
+          // When focusing the reference element (e.g. regular click), then
+          // clicking into the floating element, prevent it from hiding.
+          // Note: it must be focusable, e.g. `tabindex="-1"`.
+          if ((_refs$floating$curren = refs.floating.current) != null && _refs$floating$curren.contains(target) || (_refs$domReference$cu2 = refs.domReference.current) != null && _refs$domReference$cu2.contains(target)) {
+            return;
+          }
+
+          blockFocusRef.current = false;
+          onOpenChange(false);
+        });
+      }
+
+    }
+  };
+};
+
 const ARROW_UP = 'ArrowUp';
 const ARROW_DOWN = 'ArrowDown';
 const ARROW_LEFT = 'ArrowLeft';
@@ -5843,9 +6433,9 @@ const useListNavigation = function (_ref, _temp2) {
   };
 };
 
-var css$M = ".Popper_module_backdrop__0c794282 {\n  position: fixed;\n  z-index: 100;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n}\n.Popper_module_backdrop__0c794282.Popper_module_transparent__0c794282 {\n  background: none;\n}\n.Popper_module_backdrop__0c794282.Popper_module_hideBackdrop__0c794282 {\n  position: static !important;\n}";
+var css$N = ".Popper_module_backdrop__0c794282 {\n  position: fixed;\n  z-index: 100;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n}\n.Popper_module_backdrop__0c794282.Popper_module_transparent__0c794282 {\n  background: none;\n}\n.Popper_module_backdrop__0c794282.Popper_module_hideBackdrop__0c794282 {\n  position: static !important;\n}";
 var modules_fe46b225 = {"backdrop":"Popper_module_backdrop__0c794282","transparent":"Popper_module_transparent__0c794282","hide-backdrop":"Popper_module_hideBackdrop__0c794282"};
-n(css$M,{});
+n(css$N,{});
 
 var Popper = function Popper(props) {
   var open = props.open,
@@ -11707,9 +12297,9 @@ process.env.NODE_ENV !== "production" ? Link.propTypes
 } : void 0;
 var Link$1 = Link;
 
-var css$L = ".Breadcrumbs_module_container__7d7f9279 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: auto;\n}\n.Breadcrumbs_module_container__7d7f9279 .Breadcrumbs_module_seperator__7d7f9279 {\n  width: 1.5rem;\n  height: 1.5rem;\n  stroke: var(--grey2);\n}\n.Breadcrumbs_module_container__7d7f9279 .Breadcrumbs_module_breadcrumbItem__7d7f9279 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n  color: var(--grey2);\n}\n.Breadcrumbs_module_container__7d7f9279 .Breadcrumbs_module_breadcrumbItem__7d7f9279.Breadcrumbs_module_active__7d7f9279 {\n  color: var(--black);\n}";
+var css$M = ".Breadcrumbs_module_container__7d7f9279 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: auto;\n}\n.Breadcrumbs_module_container__7d7f9279 .Breadcrumbs_module_seperator__7d7f9279 {\n  width: 1.5rem;\n  height: 1.5rem;\n  stroke: var(--grey2);\n}\n.Breadcrumbs_module_container__7d7f9279 .Breadcrumbs_module_breadcrumbItem__7d7f9279 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n  color: var(--grey2);\n}\n.Breadcrumbs_module_container__7d7f9279 .Breadcrumbs_module_breadcrumbItem__7d7f9279.Breadcrumbs_module_active__7d7f9279 {\n  color: var(--black);\n}";
 var modules_651f50a9 = {"container":"Breadcrumbs_module_container__7d7f9279","seperator":"Breadcrumbs_module_seperator__7d7f9279","breadcrumb-item":"Breadcrumbs_module_breadcrumbItem__7d7f9279","active":"Breadcrumbs_module_active__7d7f9279"};
-n(css$L,{});
+n(css$M,{});
 
 var BreadCrumbs = function BreadCrumbs(props) {
   var crumbs = props.crumbs,
@@ -13950,7 +14540,7 @@ var languageLoaders = {
     return Promise.resolve().then(function () { return cssExtras; });
   }),
   css: createLanguageAsyncLoader("css", function () {
-    return Promise.resolve().then(function () { return css$K; });
+    return Promise.resolve().then(function () { return css$L; });
   }),
   d: createLanguageAsyncLoader("d", function () {
     return Promise.resolve().then(function () { return d; });
@@ -21233,10 +21823,10 @@ var markup$2 = /*#__PURE__*/_mergeNamespaces({
   default: markup_1
 }, [markup_1]);
 
-var css_1 = css$J;
-css$J.displayName = 'css';
-css$J.aliases = [];
-function css$J(Prism) {
+var css_1 = css$K;
+css$K.displayName = 'css';
+css$K.aliases = [];
+function css$K(Prism) {
 (function(Prism) {
     var string = /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;
     Prism.languages.css = {
@@ -21296,7 +21886,7 @@ function css$J(Prism) {
   })(Prism);
 }
 
-var css$K = /*#__PURE__*/_mergeNamespaces({
+var css$L = /*#__PURE__*/_mergeNamespaces({
   __proto__: null,
   default: css_1
 }, [css_1]);
@@ -21462,7 +22052,7 @@ var h = hastscript.exports;
 var decode$1 = parseEntities_1;
 var Prism = prismCore.exports;
 var markup = markup_1;
-var css$I = css_1;
+var css$J = css_1;
 var clike = clike_1;
 var js = javascript_1;
 
@@ -21490,7 +22080,7 @@ refract.listLanguages = listLanguages;
 
 // Register bundled grammars.
 register$1(markup);
-register$1(css$I);
+register$1(css$J);
 register$1(clike);
 register$1(js);
 
@@ -32532,9 +33122,9 @@ var dracula = {
   numberColor: "#bd93f9"
 };
 
-var css$H = ".CodeSnippet_module_root__cea57b34 {\n  padding: 0.5rem, 1rem;\n  position: relative;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 {\n  position: absolute;\n  right: 1rem;\n  top: 0.5rem;\n  cursor: pointer;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_icon__cea57b34 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_icon__cea57b34.CodeSnippet_module_dark__cea57b34 {\n  fill: var(--white);\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_icon__cea57b34.CodeSnippet_module_light__cea57b34 {\n  fill: var(--black);\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_notCopied__cea57b34 {\n  display: none;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_copied__cea57b34 {\n  position: absolute;\n  right: 1.375rem;\n  top: 2.188rem;\n  padding: 0.5rem;\n  border-radius: 0.25rem;\n  background-color: var(--highlight);\n  color: var(--grey10);\n}";
+var css$I = ".CodeSnippet_module_root__cea57b34 {\n  padding: 0.5rem, 1rem;\n  position: relative;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 {\n  position: absolute;\n  right: 1rem;\n  top: 0.5rem;\n  cursor: pointer;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_icon__cea57b34 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_icon__cea57b34.CodeSnippet_module_dark__cea57b34 {\n  fill: var(--white);\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_icon__cea57b34.CodeSnippet_module_light__cea57b34 {\n  fill: var(--black);\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_notCopied__cea57b34 {\n  display: none;\n}\n.CodeSnippet_module_root__cea57b34 .CodeSnippet_module_copy__cea57b34 .CodeSnippet_module_copied__cea57b34 {\n  position: absolute;\n  right: 1.375rem;\n  top: 2.188rem;\n  padding: 0.5rem;\n  border-radius: 0.25rem;\n  background-color: var(--highlight);\n  color: var(--grey10);\n}";
 var modules_c548043f = {"root":"CodeSnippet_module_root__cea57b34","copy":"CodeSnippet_module_copy__cea57b34","icon":"CodeSnippet_module_icon__cea57b34","dark":"CodeSnippet_module_dark__cea57b34","light":"CodeSnippet_module_light__cea57b34","notCopied":"CodeSnippet_module_notCopied__cea57b34","copied":"CodeSnippet_module_copied__cea57b34"};
-n(css$H,{});
+n(css$I,{});
 
 var CodeSnippet = function CodeSnippet(props) {
   var copy = props.copy,
@@ -33418,9 +34008,9 @@ function sub$1(date, duration) {
   return finalDate;
 }
 
-var css$G = ".Header_module_container__26bf5a9c {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0rem 1.5625rem;\n}\n.Header_module_container__26bf5a9c .Header_module_title__26bf5a9c {\n  font-weight: 400;\n  font-size: 0.8rem;\n  color: var(--black);\n}\n.Header_module_container__26bf5a9c .Header_module_icon__26bf5a9c {\n  width: 1.5rem;\n  height: 1.5rem;\n  stroke: #181818;\n  cursor: pointer;\n}";
+var css$H = ".Header_module_container__26bf5a9c {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0rem 1.5625rem;\n}\n.Header_module_container__26bf5a9c .Header_module_title__26bf5a9c {\n  font-weight: 400;\n  font-size: 0.8rem;\n  color: var(--black);\n}\n.Header_module_container__26bf5a9c .Header_module_icon__26bf5a9c {\n  width: 1.5rem;\n  height: 1.5rem;\n  stroke: #181818;\n  cursor: pointer;\n}";
 var modules_cf337dc1 = {"container":"Header_module_container__26bf5a9c","title":"Header_module_title__26bf5a9c","icon":"Header_module_icon__26bf5a9c"};
-n(css$G,{});
+n(css$H,{});
 
 var Header = function Header(props) {
   var selectedMonth = props.selectedMonth,
@@ -33452,17 +34042,17 @@ var Header = function Header(props) {
   });
 };
 
-var css$F = ".Calender_module_root__5221cce4 {\n  padding: 1rem 0rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}";
+var css$G = ".Calender_module_root__5221cce4 {\n  padding: 1rem 0rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}";
 var modules_3722b5cd = {"root":"Calender_module_root__5221cce4"};
-n(css$F,{});
+n(css$G,{});
 
-var css$E = ".Body_module_root__85b1b679 {\n  padding: 0.5rem 0.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n}";
+var css$F = ".Body_module_root__85b1b679 {\n  padding: 0.5rem 0.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n}";
 var modules_e6b80d99 = {"root":"Body_module_root__85b1b679"};
-n(css$E,{});
+n(css$F,{});
 
-var css$D = ".Dates_module_dates__e3e1fc43 {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  align-items: center;\n  flex-wrap: wrap;\n}\n.Dates_module_dates__e3e1fc43 div {\n  flex-basis: 14.28%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 0.25rem;\n  cursor: pointer;\n  align-self: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_date__e3e1fc43 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  vertical-align: middle;\n  border-radius: 1.5rem;\n  height: 2.5rem;\n  width: 2.5rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  color: var(--black);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_selected__e3e1fc43 {\n  background-color: var(--highlight);\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_unSelected__e3e1fc43 {\n  background-color: var(--white);\n  border-color: var(--highlight);\n  border-width: 0.125rem;\n  border-style: solid;\n  color: var(--black);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_disabled__e3e1fc43 {\n  border-radius: 1.5rem;\n  color: var(--grey2);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_diffMonth__e3e1fc43 {\n  opacity: 0.6;\n}\n.Dates_module_dates__e3e1fc43 div:hover .Dates_module_date__e3e1fc43 {\n  background: var(--background);\n  color: var(--highlight);\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Dates_module_dates__e3e1fc43 div:hover .Dates_module_selected__e3e1fc43 {\n  background-color: var(--highlight);\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 div:hover .Dates_module_disabled__e3e1fc43 {\n  background: transparent;\n  box-shadow: none;\n  border-radius: 1.5rem;\n  color: var(--grey2);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_minInRange__e3e1fc43 {\n  background-color: var(--highlight);\n  border-radius: 1.5rem 0rem 0rem 1.5rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_minInRange__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_minInRange__e3e1fc43:hover .Dates_module_date__e3e1fc43 {\n  background: var(--highlight);\n  color: var(--white);\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_maxInRange__e3e1fc43 {\n  background-color: var(--highlight);\n  border-radius: 0rem 1.5rem 1.5rem 0rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_maxInRange__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_maxInRange__e3e1fc43:hover .Dates_module_date__e3e1fc43 {\n  background: var(--highlight);\n  color: var(--white);\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_midInRange__e3e1fc43 {\n  background: var(--background);\n  border-radius: 0rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_midInRange__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--highlight);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_firstHovered__e3e1fc43 {\n  background: var(--background);\n  border-radius: 0rem 1.5rem 1.5rem 0rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_firstHovered__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--highlight);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_lastHovered__e3e1fc43 {\n  background: var(--background);\n  border-radius: 1.5rem 0rem 0rem 1.5rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_lastHovered__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--highlight);\n}";
+var css$E = ".Dates_module_dates__e3e1fc43 {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  align-items: center;\n  flex-wrap: wrap;\n}\n.Dates_module_dates__e3e1fc43 div {\n  flex-basis: 14.28%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 0.25rem;\n  cursor: pointer;\n  align-self: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_date__e3e1fc43 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  vertical-align: middle;\n  border-radius: 1.5rem;\n  height: 2.5rem;\n  width: 2.5rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  color: var(--black);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_selected__e3e1fc43 {\n  background-color: var(--highlight);\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_unSelected__e3e1fc43 {\n  background-color: var(--white);\n  border-color: var(--highlight);\n  border-width: 0.125rem;\n  border-style: solid;\n  color: var(--black);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_disabled__e3e1fc43 {\n  border-radius: 1.5rem;\n  color: var(--grey2);\n}\n.Dates_module_dates__e3e1fc43 div .Dates_module_diffMonth__e3e1fc43 {\n  opacity: 0.6;\n}\n.Dates_module_dates__e3e1fc43 div:hover .Dates_module_date__e3e1fc43 {\n  background: var(--background);\n  color: var(--highlight);\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Dates_module_dates__e3e1fc43 div:hover .Dates_module_selected__e3e1fc43 {\n  background-color: var(--highlight);\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 div:hover .Dates_module_disabled__e3e1fc43 {\n  background: transparent;\n  box-shadow: none;\n  border-radius: 1.5rem;\n  color: var(--grey2);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_minInRange__e3e1fc43 {\n  background-color: var(--highlight);\n  border-radius: 1.5rem 0rem 0rem 1.5rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_minInRange__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_minInRange__e3e1fc43:hover .Dates_module_date__e3e1fc43 {\n  background: var(--highlight);\n  color: var(--white);\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_maxInRange__e3e1fc43 {\n  background-color: var(--highlight);\n  border-radius: 0rem 1.5rem 1.5rem 0rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_maxInRange__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--white);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_maxInRange__e3e1fc43:hover .Dates_module_date__e3e1fc43 {\n  background: var(--highlight);\n  color: var(--white);\n  box-shadow: -2px -2px 4px rgba(166, 166, 166, 0.25), 2px 2px 4px rgba(166, 166, 166, 0.24);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_midInRange__e3e1fc43 {\n  background: var(--background);\n  border-radius: 0rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_midInRange__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--highlight);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_firstHovered__e3e1fc43 {\n  background: var(--background);\n  border-radius: 0rem 1.5rem 1.5rem 0rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_firstHovered__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--highlight);\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_lastHovered__e3e1fc43 {\n  background: var(--background);\n  border-radius: 1.5rem 0rem 0rem 1.5rem;\n}\n.Dates_module_dates__e3e1fc43 .Dates_module_lastHovered__e3e1fc43 .Dates_module_date__e3e1fc43 {\n  color: var(--highlight);\n}";
 var modules_b02dadcc = {"dates":"Dates_module_dates__e3e1fc43","date":"Dates_module_date__e3e1fc43","selected":"Dates_module_selected__e3e1fc43","unSelected":"Dates_module_unSelected__e3e1fc43","disabled":"Dates_module_disabled__e3e1fc43","diffMonth":"Dates_module_diffMonth__e3e1fc43","minInRange":"Dates_module_minInRange__e3e1fc43","maxInRange":"Dates_module_maxInRange__e3e1fc43","midInRange":"Dates_module_midInRange__e3e1fc43","first-hovered":"Dates_module_firstHovered__e3e1fc43","last-hovered":"Dates_module_lastHovered__e3e1fc43"};
-n(css$D,{});
+n(css$E,{});
 
 var getDatesOfLastWeekOfLastMonth = function getDatesOfLastWeekOfLastMonth(_ref) {
   var monthAsNumber = _ref.monthAsNumber,
@@ -33711,9 +34301,9 @@ var Dates = function Dates(props) {
   });
 };
 
-var css$C = ".Days_module_days__0d7923fd {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n.Days_module_days__0d7923fd span {\n  padding: 0.75rem 0.5rem;\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: black;\n  flex-basis: 14.28%;\n}";
+var css$D = ".Days_module_days__0d7923fd {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n.Days_module_days__0d7923fd span {\n  padding: 0.75rem 0.5rem;\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: black;\n  flex-basis: 14.28%;\n}";
 var modules_82c45006 = {"days":"Days_module_days__0d7923fd"};
-n(css$C,{});
+n(css$D,{});
 
 var Days = function Days() {
   var daysInWeek = DAYS;
@@ -33734,341 +34324,335 @@ var Body = function Body(props) {
   });
 };
 
-var css$B = ".Footer_module_root__a02ecfd8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n  margin-inline: 1rem;\n}\n.Footer_module_root__a02ecfd8 .Footer_module_apply__a02ecfd8 {\n  margin-top: 0.5rem;\n  width: 100%;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n.Footer_module_selectedDate__a02ecfd8 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 1.125rem;\n  background: var(--white);\n  border: 0.0625rem solid var(--grey4);\n  border-radius: 0.25rem;\n  padding: 0.3rem 0rem 0.3rem 1rem;\n}\n.Footer_module_selectedDate__a02ecfd8 .Footer_module_date__a02ecfd8 {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.3125rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Footer_module_selectedDate__a02ecfd8 .Footer_module_date__a02ecfd8 .Footer_module_cross__a02ecfd8 {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.Footer_module_selectedDate__a02ecfd8 .Footer_module_date__a02ecfd8 .Footer_module_value__a02ecfd8 {\n  font-weight: 400;\n  padding-right: 0.7rem;\n  border-right: 1px var(--grey3) solid;\n}\n\n.Footer_module_dateRanges__a02ecfd8 {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n  margin-top: 0.5rem;\n}\n.Footer_module_dateRanges__a02ecfd8 .Footer_module_dateRange__a02ecfd8 {\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1rem;\n  gap: 1.125rem;\n  cursor: pointer;\n}\n.Footer_module_dateRanges__a02ecfd8 .Footer_module_dateRange__a02ecfd8:hover {\n  background-color: var(--background);\n}\n.Footer_module_dateRanges__a02ecfd8 .Footer_module_dateRange__a02ecfd8 span {\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.3125rem;\n  color: var(--black);\n}\n.Footer_module_dateRanges__a02ecfd8 .Footer_module_selected__a02ecfd8 {\n  background-color: var(--background);\n}";
-var modules_b490bd5d = {"root":"Footer_module_root__a02ecfd8","apply":"Footer_module_apply__a02ecfd8","selected-date":"Footer_module_selectedDate__a02ecfd8","date":"Footer_module_date__a02ecfd8","cross":"Footer_module_cross__a02ecfd8","value":"Footer_module_value__a02ecfd8","date-ranges":"Footer_module_dateRanges__a02ecfd8","date-range":"Footer_module_dateRange__a02ecfd8","selected":"Footer_module_selected__a02ecfd8"};
-n(css$B,{});
+var css$C = ".TextField_module_root__9cc1db47 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.TextField_module_root__9cc1db47 label {\n  width: 100%;\n  max-width: 100%;\n  font-weight: 400;\n  font-size: 0.75rem;\n  line-height: 1.125rem;\n  letter-spacing: 0.32px;\n  color: var(--grey);\n  height: 100%;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0rem 0.5rem;\n  max-width: 100%;\n  width: 100%;\n  border-color: var(--grey4);\n  border-style: solid;\n  border-radius: 0.25rem;\n  height: 100%;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 .TextField_module_icon__9cc1db47 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] {\n  flex: 1;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47 {\n  -moz-appearance: textfield;\n  flex: 1;\n  background-color: transparent;\n  border: none;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  letter-spacing: 0.16px;\n  color: var(--black);\n  width: 100%;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47::-webkit-outer-spin-button, .TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47:focus {\n  outline: none;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47:disabled {\n  background: var(--grey9);\n  color: var(--grey3);\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_sm__9cc1db47 {\n  padding: 0.5rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_md__9cc1db47 {\n  padding: 0.688rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_lg__9cc1db47 {\n  padding: 1rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 {\n  padding: 0;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47 {\n  resize: vertical;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_md__9cc1db47 {\n  padding: 0.313rem 0.75rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_lg__9cc1db47 {\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47:focus-within {\n  border: 0.063rem solid var(--info);\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47:focus-within.TextField_module_feedbackError__9cc1db47 {\n  border-color: var(--error);\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_borderDefault__9cc1db47 {\n  border-width: 0.063rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_borderBottom__9cc1db47 {\n  border-width: 0rem 0rem 0.063rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_borderNone__9cc1db47 {\n  border-width: 0rem;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  min-height: 2rem;\n  width: 100%;\n  gap: 1rem;\n  color: var(--grey3);\n  font-size: 0.75rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_feedback__9cc1db47 {\n  flex: 1;\n  margin-right: auto;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_feedback__9cc1db47.TextField_module_feedbackError__9cc1db47 {\n  color: var(--error);\n  fill: var(--error);\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_feedback__9cc1db47.TextField_module_feedbackSuccess__9cc1db47 {\n  color: var(--success);\n  fill: var(--success);\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_count__9cc1db47 {\n  text-align: right;\n  margin-left: auto;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_count__9cc1db47.TextField_module_exceeded__9cc1db47 {\n  color: var(--error);\n}";
+var modules_c1d23762 = {"root":"TextField_module_root__9cc1db47","input-wrapper":"TextField_module_inputWrapper__9cc1db47","icon":"TextField_module_icon__9cc1db47","input":"TextField_module_input__9cc1db47","sm":"TextField_module_sm__9cc1db47","md":"TextField_module_md__9cc1db47","lg":"TextField_module_lg__9cc1db47","type-textarea":"TextField_module_typeTextarea__9cc1db47","feedback-error":"TextField_module_feedbackError__9cc1db47","border-default":"TextField_module_borderDefault__9cc1db47","border-bottom":"TextField_module_borderBottom__9cc1db47","border-none":"TextField_module_borderNone__9cc1db47","bottom":"TextField_module_bottom__9cc1db47","feedback":"TextField_module_feedback__9cc1db47","feedback-success":"TextField_module_feedbackSuccess__9cc1db47","count":"TextField_module_count__9cc1db47","exceeded":"TextField_module_exceeded__9cc1db47"};
+n(css$C,{});
 
-var getDateAndUnixRange = function getDateAndUnixRange(duration) {
-  var startingDate = sub$1(new Date(), duration);
-  startingDate.setHours(0, 0, 0, 0);
-  var endingDate = new Date();
-  endingDate.setHours(0, 0, 0, 0);
-  var dates = ["".concat(startingDate.getDate(), " ").concat(MONTHS[startingDate.getMonth()].substring(0, 3), " ").concat(startingDate.getFullYear()), "".concat(endingDate.getDate(), " ").concat(MONTHS[endingDate.getMonth()].substring(0, 3), " ").concat(endingDate.getFullYear())];
-  var unix = [getUnixTime(startingDate), getUnixTime(endingDate)];
-  return {
-    dates: dates,
-    unix: unix
-  };
-};
-var dateRanges = [{
-  title: '7 Days',
-  dateRange: getDateAndUnixRange({
-    days: 7
-  })
-}, {
-  title: '15 Days',
-  dateRange: getDateAndUnixRange({
-    days: 15
-  })
-}, {
-  title: '1 Month',
-  dateRange: getDateAndUnixRange({
-    months: 1
-  })
-}];
+var TextField = /*#__PURE__*/React.forwardRef(function TextField(props, inputRef) {
+  var _inputValue$length;
+  var id = props.id,
+    name = props.name,
+    label = props.label,
+    placeholder = props.placeholder,
+    type = props.type,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    size = props.size,
+    border = props.border,
+    LeftComponent = props.LeftComponent,
+    RightComponent = props.RightComponent,
+    className = props.className,
+    disabled = props.disabled,
+    inputProps = props.inputProps,
+    feedback = props.feedback,
+    count = props.count,
+    feedbackAndCount = props.feedbackAndCount,
+    maxLength = props.maxLength,
+    onKeyDown = props.onKeyDown;
+  var _useRef = React.useRef(value !== undefined),
+    isControlled = _useRef.current;
 
-var SelectedDateView = function SelectedDateView(props) {
-  var value = props.value,
-    action = props.action,
-    Icon = props.icon;
+  // for uncontrolled input
+  var _useState = React.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledValue = _useState2[0],
+    setUncontrolledValue = _useState2[1];
+  var handleChange = function handleChange(event) {
+    var _inputHelper = inputHelper(event),
+      fieldValue = _inputHelper.fieldValue;
+    if (isControlled) {
+      onChange(event, fieldValue);
+    } else {
+      setUncontrolledValue(fieldValue);
+    }
+  };
+  var inputValue = isControlled ? value !== null && value !== void 0 ? value : '' : uncontrolledValue;
+  var Input = /*#__PURE__*/React.createElement(type === 'textarea' ? 'textarea' : 'input', _objectSpread2(_objectSpread2({
+    id: id,
+    name: name,
+    disabled: disabled,
+    type: type,
+    defaultValue: defaultValue,
+    placeholder: placeholder
+  }, maxLength !== null && {
+    maxLength: maxLength
+  }), {}, {
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    'data-elem': 'input',
+    ref: inputRef,
+    value: inputValue,
+    onChange: handleChange,
+    className: classes(modules_c1d23762[size], modules_c1d23762.input)
+  }, inputProps));
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: modules_b490bd5d['selected-date'],
-    children: [/*#__PURE__*/jsxRuntime.jsx(Calender$1, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: modules_b490bd5d.date,
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classes(modules_b490bd5d.value),
-        children: value
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        size: "auto",
-        variant: "text",
-        onClick: action,
-        leftComponent: Icon
+    className: classes(modules_c1d23762.root, className),
+    children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
+      children: [label, /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+        className: classes(modules_c1d23762['input-wrapper'], modules_c1d23762["border-".concat(border)], modules_c1d23762["type-".concat(type)], feedback != null ? modules_c1d23762["feedback-".concat(feedback === null || feedback === void 0 ? void 0 : feedback.type)] : ''),
+        component1: LeftComponent && /*#__PURE__*/jsxRuntime.jsx(LeftComponent, {}),
+        component2: Input,
+        component3: RightComponent && /*#__PURE__*/jsxRuntime.jsx(RightComponent, {})
+      })]
+    }), feedbackAndCount && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: modules_c1d23762.bottom,
+      children: [feedback != null && /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-elem": "feedback",
+        className: classes(modules_c1d23762.feedback, modules_c1d23762["feedback-".concat(feedback.type)]),
+        children: feedback.text
+      }), (count === null || count === void 0 ? void 0 : count.limit) != null && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-elem": "count",
+        className: classes(modules_c1d23762.count, (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > count.limit ? modules_c1d23762.exceeded : ''),
+        children: [(_inputValue$length = inputValue.length) !== null && _inputValue$length !== void 0 ? _inputValue$length : 0, "/", count.limit]
       })]
     })]
   });
+});
+TextField.propTypes = {
+  id: propTypes$1.exports.string,
+  name: propTypes$1.exports.string,
+  disabled: propTypes$1.exports.bool,
+  label: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
+  placeholder: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
+  type: propTypes$1.exports.oneOf(['text', 'email', 'password', 'number', 'textarea']),
+  value: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
+  defaultValue: propTypes$1.exports.string,
+  onChange: propTypes$1.exports.func,
+  size: propTypes$1.exports.oneOf(['sm', 'md', 'lg']),
+  border: propTypes$1.exports.oneOf(['default', 'bottom', 'none']),
+  LeftComponent: propTypes$1.exports.node,
+  RightComponent: propTypes$1.exports.node,
+  // eslint-disable-next-line react/forbid-prop-types
+  inputProps: propTypes$1.exports.object,
+  count: propTypes$1.exports.shape({
+    limit: propTypes$1.exports.number
+  }),
+  feedback: propTypes$1.exports.shape({
+    text: propTypes$1.exports.node,
+    type: propTypes$1.exports.oneOf(['error', 'success', 'default'])
+  }),
+  feedbackAndCount: propTypes$1.exports.bool,
+  maxLength: propTypes$1.exports.number,
+  onKeyDown: propTypes$1.exports.func
 };
-var Footer = function Footer(props) {
-  var _props$selectedDate = props.selectedDate,
-    selectedDate = _props$selectedDate === void 0 ? {} : _props$selectedDate,
-    _props$selectedRange = props.selectedRange,
-    selectedRange = _props$selectedRange === void 0 ? {} : _props$selectedRange,
-    setSelectedRange = props.setSelectedRange,
-    range = props.range,
-    goToDate = props.goToDate,
-    onApply = props.onApply;
-  var date = selectedDate.date,
-    month = selectedDate.month,
-    year = selectedDate.year;
-  var _selectedRange$dates = selectedRange.dates,
-    dates = _selectedRange$dates === void 0 ? [] : _selectedRange$dates;
-  var monthInShort = month === null || month === void 0 ? void 0 : month.substr(0, 3);
-  var datesSelected = date || dates.length === 2;
-  var selectFixedDateRange = function selectFixedDateRange(dateRange) {
-    setSelectedRange(dateRange);
-  };
-  var resetDate = function resetDate() {
-    goToDate(getUnixTime(new Date()));
-  };
-  var clearRangeSelection = function clearRangeSelection() {
-    setSelectedRange({});
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: modules_b490bd5d.root,
-    children: [datesSelected && (dates === null || dates === void 0 ? void 0 : dates.length) === 2 ? /*#__PURE__*/jsxRuntime.jsx(SelectedDateView, {
-      range: true,
-      value: "".concat(selectedRange.dates[0], " - ").concat(selectedRange.dates[1]),
-      icon: function icon() {
-        return /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
-          className: modules_b490bd5d.cross
-        });
-      },
-      action: clearRangeSelection
-    }) : datesSelected && /*#__PURE__*/jsxRuntime.jsx(SelectedDateView, {
-      value: "".concat(doubleDigitted(date), " ").concat(monthInShort, " ").concat(year),
-      icon: function icon() {
-        return /*#__PURE__*/jsxRuntime.jsx(Reset, {});
-      },
-      action: resetDate
-    }), range && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: modules_b490bd5d['date-ranges'],
-      children: dateRanges.map(function (_ref) {
-        var _selectedRange$unix;
-        var dateRange = _ref.dateRange,
-          title = _ref.title;
-        var selectedFixedDateRange = dateRange.unix.toString() === ((_selectedRange$unix = selectedRange.unix) === null || _selectedRange$unix === void 0 ? void 0 : _selectedRange$unix.toString());
-        return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: classes(modules_b490bd5d['date-range'], selectedFixedDateRange ? modules_b490bd5d.selected : ''),
-          onClick: function onClick() {
-            selectFixedDateRange(dateRange);
-          },
-          children: [/*#__PURE__*/jsxRuntime.jsx(HalfShade, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: title
-          })]
-        }, title);
-      })
-    }), datesSelected && /*#__PURE__*/jsxRuntime.jsx(Button, {
-      onClick: onApply,
-      title: "Apply",
-      className: modules_b490bd5d.apply
-    })]
-  });
+TextField.defaultProps = {
+  id: null,
+  name: null,
+  disabled: false,
+  label: '',
+  placeholder: '',
+  type: 'text',
+  value: undefined,
+  defaultValue: '',
+  onChange: function onChange() {},
+  size: 'md',
+  border: 'default',
+  LeftComponent: null,
+  RightComponent: null,
+  inputProps: {},
+  count: null,
+  feedback: null,
+  feedbackAndCount: false,
+  maxLength: null,
+  onKeyDown: function onKeyDown() {}
 };
 
-var Calender = function Calender(props) {
-  var range = props.range,
-    selectedDate = props.selectedDate,
-    setSelectedDate = props.setSelectedDate,
-    selectedRange = props.selectedRange,
-    setSelectedRange = props.setSelectedRange,
-    onApply = props.onApply,
-    disabledDates = props.disabledDates,
-    disableDatesBefore = props.disableDatesBefore,
-    value = props.value;
-  var _getDayInfo = getDayInfo(new Date()),
-    month = _getDayInfo.month,
-    year = _getDayInfo.year,
-    monthAsNumber = _getDayInfo.monthAsNumber,
-    dayAsNumber = _getDayInfo.dayAsNumber;
-  var _useState = React.useState({
-      month: month,
-      monthAsNumber: monthAsNumber,
-      year: year,
-      dayAsNumber: dayAsNumber
-    }),
+var css$B = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.CheckBox_module_root__d1bdcb36 {\n  cursor: pointer;\n  gap: 10px;\n}\n.CheckBox_module_root__d1bdcb36.CheckBox_module_positionLeft__d1bdcb36 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.CheckBox_module_root__d1bdcb36.CheckBox_module_positionRight__d1bdcb36 {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  align-items: center;\n}\n.CheckBox_module_root__d1bdcb36 input[type=checkbox] {\n  opacity: 0;\n  z-index: 1;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n}\n.CheckBox_module_root__d1bdcb36.CheckBox_module_disabled__d1bdcb36 {\n  cursor: default;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36 {\n  display: inline-block;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36.CheckBox_module_iconSm__d1bdcb36 {\n  width: 1rem;\n  height: 1rem;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36.CheckBox_module_iconMd__d1bdcb36 {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36.CheckBox_module_iconLg__d1bdcb36 {\n  width: 1.5rem;\n  height: 2rem;\n}\n.CheckBox_module_root__d1bdcb36 [data-elem=label] {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}";
+var modules_066398a2 = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","root":"CheckBox_module_root__d1bdcb36","position-left":"CheckBox_module_positionLeft__d1bdcb36","position-right":"CheckBox_module_positionRight__d1bdcb36","disabled":"CheckBox_module_disabled__d1bdcb36","icon":"CheckBox_module_icon__d1bdcb36","icon-sm":"CheckBox_module_iconSm__d1bdcb36","icon-md":"CheckBox_module_iconMd__d1bdcb36","icon-lg":"CheckBox_module_iconLg__d1bdcb36"};
+n(css$B,{});
+
+var Checkbox = function Checkbox(props) {
+  // eslint-disable-next-line object-curly-newline
+  var label = props.label,
+    onChange = props.onChange,
+    defaultChecked = props.defaultChecked,
+    checked = props.checked,
+    position = props.position,
+    size = props.size,
+    className = props.className,
+    disabled = props.disabled;
+  var _useRef = React.useRef(checked !== undefined),
+    isControlled = _useRef.current;
+
+  // for uncontrolled input
+  var _useState = React.useState(defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
-    selectedMonth = _useState2[0],
-    setSelectedMonth = _useState2[1];
-  React.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)) {
-      var _dateAsNumber = date.getDate();
-      setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
-        month: selectedMonth.month,
-        year: selectedMonth.year,
-        date: _dateAsNumber,
-        unix: getUnixTime(date.setHours(23, 59, 59, 59))
-      }));
-    }
-  }, []);
-  var goToDate = function goToDate(unix) {
-    var dayInfo = getDayInfo(new Date(unix * 1000));
-    setSelectedMonth({
-      month: dayInfo.month,
-      monthAsNumber: dayInfo.monthAsNumber,
-      year: dayInfo.year
-    });
-    setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
-      month: dayInfo.month,
-      year: dayInfo.year,
-      date: dayInfo.dateAsNumber,
-      unix: getUnixTime(new Date(unix * 1000).setHours(23, 59, 59, 59))
-    }));
-  };
-  var onMonthChange = function onMonthChange(switchSide) {
-    if (switchSide === 'prev') {
-      if (selectedMonth.monthAsNumber === 0) {
-        var _previousMonth = FULL_MONTHS[11];
-        setSelectedMonth({
-          month: _previousMonth,
-          monthAsNumber: 11,
-          year: selectedMonth.year - 1
-        });
-        return;
-      }
-      var previousMonthNumber = selectedMonth.monthAsNumber - 1;
-      var previousMonth = FULL_MONTHS[previousMonthNumber];
-      setSelectedMonth({
-        month: previousMonth,
-        monthAsNumber: previousMonthNumber,
-        year: selectedMonth.year
-      });
-      return;
-    }
-    if (switchSide === 'next') {
-      if (selectedMonth.monthAsNumber === 11) {
-        var _nextMonth = FULL_MONTHS[0];
-        setSelectedMonth({
-          month: _nextMonth,
-          monthAsNumber: 0,
-          year: selectedMonth.year + 1
-        });
-        return;
-      }
-      var nextMonthNumber = selectedMonth.monthAsNumber + 1;
-      var nextMonth = FULL_MONTHS[nextMonthNumber];
-      setSelectedMonth({
-        month: nextMonth,
-        monthAsNumber: nextMonthNumber,
-        year: selectedMonth.year
-      });
+    uncontrolledChecked = _useState2[0],
+    setUncontrolledChecked = _useState2[1];
+  var handleChange = function handleChange(event) {
+    var _inputHelper = inputHelper(event),
+      fieldValue = _inputHelper.fieldValue;
+    if (isControlled) {
+      onChange(event, fieldValue);
+    } else {
+      setUncontrolledChecked(fieldValue);
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: modules_3722b5cd.root,
-    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
-      selectedMonth: selectedMonth,
-      onMonthChange: onMonthChange
-    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-      selectedMonth: selectedMonth,
-      range: range,
-      selectedDate: selectedDate,
-      setSelectedDate: setSelectedDate,
-      selectedRange: selectedRange,
-      setSelectedRange: setSelectedRange,
-      disabledDates: disabledDates,
-      disableDatesBefore: disableDatesBefore
-    }), /*#__PURE__*/jsxRuntime.jsx(Footer, {
-      range: range,
-      selectedDate: selectedDate,
-      setSelectedDate: setSelectedDate,
-      selectedRange: selectedRange,
-      setSelectedRange: setSelectedRange,
-      onApply: onApply,
-      goToDate: goToDate
+  var isChecked = isControlled ? checked : uncontrolledChecked;
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: classes(modules_066398a2.root, modules_066398a2["position-".concat(position)], className, disabled ? modules_066398a2.disabled : ''),
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", _objectSpread2(_objectSpread2({
+      disabled: disabled,
+      type: "checkbox",
+      defaultChecked: defaultChecked
+    }, isControlled ? {
+      checked: checked
+    } : {}), {}, {
+      onChange: handleChange
+    })), isChecked ? /*#__PURE__*/jsxRuntime.jsx(CheckboxIcon.Checked, {
+      "data-elem": "icon",
+      className: classes(modules_066398a2["icon-".concat(size)], modules_066398a2.icon)
+    }) : /*#__PURE__*/jsxRuntime.jsx(CheckboxIcon.UnChecked, {
+      "data-elem": "icon",
+      className: classes(modules_066398a2["icon-".concat(size)], modules_066398a2.icon)
+    }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
+      "data-elem": "label",
+      children: label
     })]
   });
 };
+Checkbox.propTypes = {
+  disabled: propTypes$1.exports.bool,
+  label: propTypes$1.exports.string,
+  defaultChecked: propTypes$1.exports.bool,
+  checked: propTypes$1.exports.bool,
+  position: propTypes$1.exports.oneOf(['left', 'right']),
+  size: propTypes$1.exports.oneOf(['sm', 'md', 'lg']),
+  onChange: propTypes$1.exports.func
+};
+Checkbox.defaultProps = {
+  disabled: false,
+  label: null,
+  defaultChecked: false,
+  checked: undefined,
+  position: 'right',
+  size: 'sm',
+  onChange: function onChange() {}
+};
 
-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"};
+var css$A = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.Radio_module_root__dc9ececa {\n  cursor: pointer;\n  gap: 10px;\n}\n.Radio_module_root__dc9ececa.Radio_module_positionLeft__dc9ececa {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Radio_module_root__dc9ececa.Radio_module_positionRight__dc9ececa {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  align-items: center;\n}\n.Radio_module_root__dc9ececa.Radio_module_disabled__dc9ececa {\n  cursor: default;\n}\n.Radio_module_root__dc9ececa input[type=radio] {\n  opacity: 0;\n  z-index: 1;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa {\n  display: inline-block;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa.Radio_module_iconSm__dc9ececa {\n  width: 1rem;\n  height: 1rem;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa.Radio_module_iconMd__dc9ececa {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa.Radio_module_iconLg__dc9ececa {\n  width: 1.5rem;\n  height: 2rem;\n}\n.Radio_module_root__dc9ececa [data-elem=label] {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}";
+var modules_3705961f = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","root":"Radio_module_root__dc9ececa","position-left":"Radio_module_positionLeft__dc9ececa","position-right":"Radio_module_positionRight__dc9ececa","disabled":"Radio_module_disabled__dc9ececa","icon":"Radio_module_icon__dc9ececa","icon-sm":"Radio_module_iconSm__dc9ececa","icon-md":"Radio_module_iconMd__dc9ececa","icon-lg":"Radio_module_iconLg__dc9ececa"};
 n(css$A,{});
 
-var isMaxRangeExceeded = function isMaxRangeExceeded(_ref) {
-  var maxRange = _ref.maxRange,
-    selectedRange = _ref.selectedRange;
-  if (maxRange === null) {
-    return false;
-  }
-  var value = maxRange.value,
-    type = maxRange.type;
-  var unix = selectedRange.unix;
-  var _unix = _slicedToArray(unix, 2),
-    firstDateInRange = _unix[0],
-    secondDateInRange = _unix[1];
-  var diffInMonth = differenceInMonths(fromUnixTime(secondDateInRange), fromUnixTime(firstDateInRange));
-  var diffInDays = differenceInDays(fromUnixTime(secondDateInRange), fromUnixTime(firstDateInRange));
-  if (type === 'months') {
-    return diffInMonth <= value && diffInDays < value * 30;
-  }
-  if (type === 'days') {
-    return diffInDays <= value;
-  }
-  return false;
+var Radio = function Radio(props) {
+  // eslint-disable-next-line object-curly-newline
+  var label = props.label,
+    checked = props.checked,
+    defaultChecked = props.defaultChecked,
+    onChange = props.onChange,
+    position = props.position,
+    size = props.size,
+    className = props.className,
+    disabled = props.disabled;
+  var _useRef = React.useRef(checked !== undefined),
+    isControlled = _useRef.current;
+
+  // for uncontrolled input
+  var _useState = React.useState(defaultChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledChecked = _useState2[0],
+    setUncontrolledChecked = _useState2[1];
+  var handleChange = function handleChange(event) {
+    var _inputHelper = inputHelper(event),
+      fieldValue = _inputHelper.fieldValue;
+    if (isControlled) {
+      onChange(event, fieldValue);
+    } else {
+      setUncontrolledChecked(fieldValue);
+    }
+  };
+  var isChecked = isControlled ? checked : uncontrolledChecked;
+  return /*#__PURE__*/jsxRuntime.jsxs("label", {
+    className: classes(modules_3705961f.root, modules_3705961f["position-".concat(position)], className, disabled ? modules_3705961f.disabled : ''),
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+      disabled: disabled,
+      type: "radio",
+      checked: isChecked,
+      onChange: handleChange
+    }), isChecked ? /*#__PURE__*/jsxRuntime.jsx(RadioIcon.Checked, {
+      "data-elem": "icon",
+      className: classes(modules_3705961f["icon-".concat(size)], modules_3705961f.icon)
+    }) : /*#__PURE__*/jsxRuntime.jsx(RadioIcon.UnChecked, {
+      "data-elem": "icon",
+      className: classes(modules_3705961f["icon-".concat(size)], modules_3705961f.icon)
+    }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
+      "data-elem": "label",
+      children: label
+    })]
+  });
+};
+Radio.propTypes = {
+  disabled: propTypes$1.exports.bool,
+  label: propTypes$1.exports.string,
+  checked: propTypes$1.exports.bool,
+  defaultChecked: propTypes$1.exports.bool,
+  position: propTypes$1.exports.oneOf(['left', 'right']),
+  size: propTypes$1.exports.oneOf(['sm', 'md', 'lg']),
+  onChange: propTypes$1.exports.func
+};
+Radio.defaultProps = {
+  disabled: false,
+  label: null,
+  checked: undefined,
+  defaultChecked: false,
+  position: 'left',
+  size: 'sm',
+  onChange: function onChange() {}
 };
 
-var DatePicker = function DatePicker(props) {
-  var placeholder = props.placeholder,
-    label = props.label,
-    range = props.range,
-    onApply = props.onApply,
-    disabledDates = props.disabledDates,
-    maxRange = props.maxRange,
+var css$z = ".Dropdown_module_root__1ad8038e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 0.5rem;\n  position: relative;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: 100%;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_label__1ad8038e {\n  font-size: 0.75rem;\n  color: var(--grey);\n  width: auto;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  max-width: 100%;\n  position: relative;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_input__1ad8038e {\n  position: absolute;\n  opacity: 0;\n  width: 1px;\n  height: 1px;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_input__1ad8038e:focus + .Dropdown_module_select__1ad8038e {\n  border-color: var(--highlight);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_input__1ad8038e:focus + .Dropdown_module_select__1ad8038e.Dropdown_module_feedbackError__1ad8038e {\n  border-color: var(--error);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 25rem;\n  max-width: 100%;\n  gap: 0.5rem;\n  background: var(--white);\n  outline: none;\n  border: 1px solid var(--grey5);\n  border-radius: 0.25rem;\n  padding: 0.75rem 0.75rem 0.75rem 1rem;\n  cursor: pointer;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e .Dropdown_module_placeholder__1ad8038e {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  color: var(--black);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e .Dropdown_module_icon__1ad8038e {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e.Dropdown_module_feedbackError__1ad8038e {\n  border-color: var(--error);\n}\n.Dropdown_module_root__1ad8038e.Dropdown_module_open__1ad8038e .Dropdown_module_header__1ad8038e {\n  border-color: var(--highlight);\n}\n.Dropdown_module_root__1ad8038e.Dropdown_module_disabled__1ad8038e .Dropdown_module_select__1ad8038e {\n  background: var(--grey10);\n  cursor: not-allowed;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  min-height: 2rem;\n  width: 100%;\n  gap: 1rem;\n  color: var(--grey3);\n  font-size: 0.75rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_feedback__1ad8038e {\n  flex: 1;\n  margin-right: auto;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_feedback__1ad8038e.Dropdown_module_feedbackError__1ad8038e {\n  color: var(--error);\n  fill: var(--error);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_feedback__1ad8038e.Dropdown_module_feedbackSuccess__1ad8038e {\n  color: var(--success);\n  fill: var(--success);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_count__1ad8038e {\n  text-align: right;\n  margin-left: auto;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_count__1ad8038e.Dropdown_module_exceeded__1ad8038e {\n  color: var(--error);\n}\n\n.Dropdown_module_body__1ad8038e {\n  display: none;\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  background: var(--white);\n  width: auto;\n  border: 0.063rem solid var(--grey5);\n  box-shadow: 0rem 0.5rem 1.25rem rgba(24, 24, 24, 0.08);\n  border-radius: 0.25rem;\n  padding: 1rem;\n  overflow-y: auto;\n  min-height: 4rem;\n  outline: none;\n}\n.Dropdown_module_body__1ad8038e .Dropdown_module_multiOptions__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  list-style: none;\n}\n.Dropdown_module_body__1ad8038e .Dropdown_module_multiApply__1ad8038e {\n  margin-top: 0.5rem;\n}\n.Dropdown_module_body__1ad8038e.Dropdown_module_open__1ad8038e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
+var modules_1b90f5ea = {"root":"Dropdown_module_root__1ad8038e","label":"Dropdown_module_label__1ad8038e","header":"Dropdown_module_header__1ad8038e","input":"Dropdown_module_input__1ad8038e","select":"Dropdown_module_select__1ad8038e","feedback-error":"Dropdown_module_feedbackError__1ad8038e","placeholder":"Dropdown_module_placeholder__1ad8038e","icon":"Dropdown_module_icon__1ad8038e","open":"Dropdown_module_open__1ad8038e","disabled":"Dropdown_module_disabled__1ad8038e","bottom":"Dropdown_module_bottom__1ad8038e","feedback":"Dropdown_module_feedback__1ad8038e","feedback-success":"Dropdown_module_feedbackSuccess__1ad8038e","count":"Dropdown_module_count__1ad8038e","exceeded":"Dropdown_module_exceeded__1ad8038e","body":"Dropdown_module_body__1ad8038e","multi-options":"Dropdown_module_multiOptions__1ad8038e","multi-apply":"Dropdown_module_multiApply__1ad8038e"};
+n(css$z,{});
+
+var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(props, inputRef) {
+  var _selectedOptions$map, _ref2, _selectedOptions$;
+  // eslint-disable-next-line object-curly-newline
+  var className = props.className,
+    popperClassName = props.popperClassName,
     value = props.value,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    children = props.children,
+    label = props.label,
+    placeholder = props.placeholder,
+    multi = props.multi,
     disabled = props.disabled,
-    className = props.className,
-    disableDatesBefore = props.disableDatesBefore,
-    theme = props.theme,
-    onClear = props.onClear;
+    id = props.id,
+    name = props.name,
+    feedback = props.feedback,
+    formatter = props.formatter;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = React.useState(function () {
-      return {
-        dates: [],
-        unix: []
-      };
-    }),
+  var _useState3 = React.useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    selectedRange = _useState4[0],
-    setSelectedRange = _useState4[1];
-  var _useState5 = React.useState(function () {
-      return '';
-    }),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var _useState5 = React.useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectedDate = _useState6[0],
-    setSelectedDate = _useState6[1];
-  var _useState7 = React.useState(function () {
-      return '';
-    }),
+    selectedIndex = _useState6[0],
+    setSelectedIndex = _useState6[1];
+  var listItemsRef = React.useRef([]);
+  var multiOptionsRef = React.useRef(null);
+  var isControlled = value !== undefined;
+
+  // for uncontrolled input
+  var _useState7 = React.useState(value),
     _useState8 = _slicedToArray(_useState7, 2),
-    error = _useState8[0],
-    setError = _useState8[1];
-  var datePickerRef = React.useRef();
-  var sDate = fromUnixTime(value);
-  var displayValue = '';
-  if (!range && value) {
-    var _sDate$getMonth$toStr;
-    displayValue = " ".concat(sDate.getDate(), " ").concat(MONTHS[(_sDate$getMonth$toStr = sDate.getMonth().toString()) === null || _sDate$getMonth$toStr === void 0 ? void 0 : _sDate$getMonth$toStr.substring(0, 3)], " ").concat(sDate.getFullYear());
-  }
+    uncontrolledValue = _useState8[0],
+    setUncontrolledValue = _useState8[1];
   var _useFloating = useFloating({
       open: open,
       onOpenChange: setOpen,
       whileElementsMounted: autoUpdate,
-      middleware: [size({
+      middleware: [offset(5), flip({
+        padding: 8
+      }), shift({
+        padding: 8
+      }), size({
         apply: function apply(_ref) {
           var rects = _ref.rects,
             availableHeight = _ref.availableHeight,
@@ -34080,10 +34664,6 @@ var DatePicker = function DatePicker(props) {
           });
         },
         padding: 8
-      }), offset(5), flip({
-        padding: 8
-      }), shift({
-        padding: 8
       })]
     }),
     x = _useFloating.x,
@@ -34092,677 +34672,950 @@ var DatePicker = function DatePicker(props) {
     floating = _useFloating.floating,
     strategy = _useFloating.strategy,
     context = _useFloating.context;
-  useOutsideClickListener(floating, function () {
-    return setOpen(false);
-  });
   var _useInteractions = useInteractions([useClick(context, {
       enabled: !disabled
+    }), useRole(context, {
+      role: 'listbox'
+    }), useListNavigation(context, {
+      listRef: listItemsRef,
+      activeIndex: activeIndex,
+      selectedIndex: selectedIndex,
+      onNavigate: setActiveIndex
     }), useDismiss(context)]),
     getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  var apply = function apply() {
-    if (selectedRange.dates.length === 2) {
-      if (!isMaxRangeExceeded({
-        maxRange: maxRange,
-        selectedRange: selectedRange
-      })) {
-        setError('Invalid range of dates');
-        setOpen(false);
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+  var onSelect = function onSelect(child, selected) {
+    return function (event) {
+      var _itemValue$toString;
+      if (event.currentTarget.getAttribute('data-elem') !== 'dropdown-item') {
         return;
       }
-      setError('');
-      onApply(selectedRange.unix);
-      setOpen(false);
+      var itemValue = child.props.value;
+      var itemValueString = itemValue === null || itemValue === void 0 ? void 0 : (_itemValue$toString = itemValue.toString) === null || _itemValue$toString === void 0 ? void 0 : _itemValue$toString.call(itemValue);
+      var index = event.currentTarget.getAttribute('data-index');
+
+      // to support form libraries which require name and value on the event
+      var nativeEvent = event.nativeEvent || event;
+      var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: itemValueString,
+          name: name
+        }
+      });
+
+      // if (elem === 'dropdown-item') {
+      setSelectedIndex(parseInt(index, 10));
+      if (multi) {
+        // eslint-disable-next-line no-lonely-if
+        if (selected === true) {
+          setUncontrolledValue(uncontrolledValue.filter(function (val) {
+            return val !== itemValueString;
+          }));
+        } else {
+          setUncontrolledValue([].concat(_toConsumableArray(uncontrolledValue !== null && uncontrolledValue !== void 0 ? uncontrolledValue : []), [itemValueString]));
+        }
+        setActiveIndex(parseInt(index, 10));
+      } else {
+        if (isControlled) {
+          onChange(clonedEvent, itemValueString.toString());
+        } else {
+          setUncontrolledValue(itemValueString.toString());
+        }
+        setActiveIndex(null);
+        setOpen(false);
+      }
+      // }
+    };
+  };
+
+  var onNavigate = function onNavigate(child, selected) {
+    return function (event) {
+      var selectKey = [' ', 'Spacebar', 'Enter'].includes(event.key);
+      if (selectKey) {
+        event.stopPropagation();
+        onSelect(child, selected)(event);
+      }
+    };
+  };
+  React.useImperativeHandle(inputRef, function () {
+    return {
+      value: function value() {
+        var _inputRef$current$val, _inputRef$current$val2, _inputRef$current$val3, _inputValue$;
+        var inputValue = (_inputRef$current$val = (_inputRef$current$val2 = inputRef.current.value) === null || _inputRef$current$val2 === void 0 ? void 0 : (_inputRef$current$val3 = _inputRef$current$val2.split) === null || _inputRef$current$val3 === void 0 ? void 0 : _inputRef$current$val3.call(_inputRef$current$val2, ', ')) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : [];
+        if (multi) {
+          return inputRef;
+        }
+        return (_inputValue$ = inputValue === null || inputValue === void 0 ? void 0 : inputValue[0]) !== null && _inputValue$ !== void 0 ? _inputValue$ : null;
+      }
+    };
+  }, []);
+  var childrenArray = React.Children.toArray(children);
+  var selectedOptions = React.useMemo(function () {
+    var inputValue = uncontrolledValue;
+    if (isControlled && !multi) {
+      inputValue = value;
+    }
+    var options = [];
+    if (inputValue != null && inputValue !== '') {
+      childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.forEach(function (child) {
+        var _inputValue$indexOf, _inputValue, _inputValue$indexOf2, _child$props, _child$props$value, _child$props$value$to, _inputValue2, _child$props2, _child$props2$value, _child$props2$value$t;
+        if (multi && ((_inputValue$indexOf = (_inputValue = inputValue) === null || _inputValue === void 0 ? void 0 : (_inputValue$indexOf2 = _inputValue.indexOf) === null || _inputValue$indexOf2 === void 0 ? void 0 : _inputValue$indexOf2.call(_inputValue, child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$value = _child$props.value) === null || _child$props$value === void 0 ? void 0 : (_child$props$value$to = _child$props$value.toString) === null || _child$props$value$to === void 0 ? void 0 : _child$props$value$to.call(_child$props$value))) !== null && _inputValue$indexOf !== void 0 ? _inputValue$indexOf : -1) !== -1 || !multi && ((_inputValue2 = inputValue) === null || _inputValue2 === void 0 ? void 0 : _inputValue2.toString()) === (child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : (_child$props2$value = _child$props2.value) === null || _child$props2$value === void 0 ? void 0 : (_child$props2$value$t = _child$props2$value.toString) === null || _child$props2$value$t === void 0 ? void 0 : _child$props2$value$t.call(_child$props2$value))) {
+          var _child$props3, _child$props4, _child$props4$value, _child$props4$value$t;
+          options.push({
+            title: child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.title,
+            value: child === null || child === void 0 ? void 0 : (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : (_child$props4$value = _child$props4.value) === null || _child$props4$value === void 0 ? void 0 : (_child$props4$value$t = _child$props4$value.toString) === null || _child$props4$value$t === void 0 ? void 0 : _child$props4$value$t.call(_child$props4$value)
+          });
+        }
+      });
+    }
+    return options;
+  }, [value, uncontrolledValue, multi]);
+  var items = childrenArray.map(function (child, index) {
+    var _child$props6;
+    var selected = false;
+    if (selectedOptions.findIndex(function (option) {
+      var _child$props5, _child$props5$value, _child$props5$value$t;
+      return option.value === (child === null || child === void 0 ? void 0 : (_child$props5 = child.props) === null || _child$props5 === void 0 ? void 0 : (_child$props5$value = _child$props5.value) === null || _child$props5$value === void 0 ? void 0 : (_child$props5$value$t = _child$props5$value.toString) === null || _child$props5$value$t === void 0 ? void 0 : _child$props5$value$t.call(_child$props5$value));
+    }) !== -1) {
+      selected = true;
+    }
+    return /*#__PURE__*/React.cloneElement(child, _objectSpread2({}, getItemProps({
+      key: child === null || child === void 0 ? void 0 : (_child$props6 = child.props) === null || _child$props6 === void 0 ? void 0 : _child$props6.value,
+      onKeyDown: onNavigate(child, selected),
+      onClick: onSelect(child, selected),
+      onMouseEnter: function onMouseEnter() {
+        setActiveIndex(index);
+      },
+      dataAttrs: {
+        'data-index': index
+      },
+      selected: selected,
+      tabIndex: activeIndex === index ? 0 : -1,
+      ref: function ref(node) {
+        listItemsRef.current[index] = node;
+      }
+    })));
+  });
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pointer = _useState10[0],
+    setPointer = _useState10[1];
+  if (!open && pointer) {
+    setPointer(false);
+  }
+  React.useLayoutEffect(function () {
+    if (open && activeIndex != null && !pointer) {
+      requestAnimationFrame(function () {
+        var _listItemsRef$current;
+        (_listItemsRef$current = listItemsRef.current[activeIndex]) === null || _listItemsRef$current === void 0 ? void 0 : _listItemsRef$current.scrollIntoView({
+          block: 'nearest'
+        });
+      });
+    }
+  }, [open, activeIndex, pointer]);
+  React.useEffect(function () {
+    if (multi) {
+      setUncontrolledValue(value);
+    }
+  }, [open, multi, value]);
+  var onSelectAll = function onSelectAll(event, selected) {
+    // to support form libraries which require name and value on the event
+    var nativeEvent = event.nativeEvent || event;
+    var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+    var itemValue = [];
+    if (selected) {
+      itemValue = childrenArray.map(function (child) {
+        var _child$props7, _child$props7$value, _child$props7$value$t;
+        return child === null || child === void 0 ? void 0 : (_child$props7 = child.props) === null || _child$props7 === void 0 ? void 0 : (_child$props7$value = _child$props7.value) === null || _child$props7$value === void 0 ? void 0 : (_child$props7$value$t = _child$props7$value.toString) === null || _child$props7$value$t === void 0 ? void 0 : _child$props7$value$t.call(_child$props7$value);
+      });
+    }
+    Object.defineProperty(clonedEvent, 'target', {
+      writable: true,
+      value: {
+        value: itemValue,
+        name: name
+      }
+    });
+
+    // eslint-disable-next-line no-lonely-if
+    if (selected === true) {
+      setUncontrolledValue(itemValue);
     } else {
-      onApply(selectedDate.unix);
-      setOpen(false);
+      setUncontrolledValue(itemValue);
     }
+    setActiveIndex(0);
   };
-  var calenderProps = {
-    selectedDate: selectedDate,
-    setSelectedDate: setSelectedDate,
-    selectedRange: selectedRange,
-    setSelectedRange: setSelectedRange,
-    range: range,
-    onApply: function onApply() {
-      apply();
-    },
-    disabledDates: disabledDates,
-    disableDatesBefore: disableDatesBefore,
-    value: value
+  var onApply = function onApply(event) {
+    var nativeEvent = event.nativeEvent || event;
+    var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+    Object.defineProperty(clonedEvent, 'target', {
+      writable: true,
+      value: {
+        value: uncontrolledValue,
+        name: name
+      }
+    });
+    onChange(event, uncontrolledValue);
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classes(modules_5b831cd1.root, className),
-    ref: datePickerRef,
-    children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: classes(modules_5b831cd1.label, modules_5b831cd1[theme]),
-      children: label
+    className: classes(className, modules_1b90f5ea.root, open ? modules_1b90f5ea.open : '', disabled ? modules_1b90f5ea.disabled : ''),
+    children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
+      "data-elem": "label",
+      className: modules_1b90f5ea.label,
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: label
+      })
     }), /*#__PURE__*/jsxRuntime.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 : '', modules_5b831cd1[theme])
+      className: modules_1b90f5ea.header,
+      ref: reference
     }, getReferenceProps()), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        children: [/*#__PURE__*/jsxRuntime.jsx(Calender$1, {
-          className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme])
-        }), !displayValue && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classes(modules_5b831cd1.placeholder, modules_5b831cd1[theme]),
-          children: placeholder
-        }), displayValue && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classes(modules_5b831cd1.value, modules_5b831cd1[theme]),
-          children: /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: displayValue
-          })
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx("input", {
-        className: modules_5b831cd1.input,
-        value: displayValue
-      }), value ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        onClick: function onClick(event) {
-          event.stopPropagation();
-          onClear();
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
-          className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme])
-        })
-      }) : /*#__PURE__*/jsxRuntime.jsx(Chevron, {
-        className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme]),
-        position: open ? 'bottom' : 'top'
-      })]
-    })), error && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: modules_5b831cd1['error-text'],
-      children: error
-    }), /*#__PURE__*/jsxRuntime.jsx(Popper, {
-      open: open,
-      wrapperid: "datePicker-popper",
-      children: open && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
-        role: 'group',
-        ref: floating,
+      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+        id: id,
+        name: name,
+        ref: inputRef,
+        disabled: disabled,
+        tabIndex: 0,
+        className: modules_1b90f5ea.input,
         onKeyDown: function onKeyDown(event) {
-          if (event.key === 'Tab') {
-            setOpen(false);
+          var validKey = [' ', 'Spacebar', 'Enter'].includes(event.key);
+          if (validKey) {
+            setOpen(true);
           }
         },
-        style: {
-          position: strategy,
-          top: y !== null && y !== void 0 ? y : 0,
-          left: x !== null && x !== void 0 ? x : 0
-        }
-      })), {}, {
-        className: classes(modules_5b831cd1.popper, open ? modules_5b831cd1.open : ''),
-        children: /*#__PURE__*/jsxRuntime.jsx(Calender, _objectSpread2({}, calenderProps))
-      }))
-    })]
-  });
-};
-DatePicker.propTypes = {
-  placeholder: propTypes$1.exports.string,
-  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),
-  maxRange: propTypes$1.exports.shape({
-    value: propTypes$1.exports.number,
-    type: propTypes$1.exports.string
-  }),
-  className: propTypes$1.exports.string,
-  disableDatesBefore: propTypes$1.exports.arrayOf(propTypes$1.exports.string),
-  theme: propTypes$1.exports.string
-};
-DatePicker.defaultProps = {
-  placeholder: '',
-  label: '',
-  range: false,
-  onApply: null,
-  disabled: false,
-  disabledDates: [],
-  maxRange: null,
-  value: '',
-  className: '',
-  disableDatesBefore: [],
-  theme: 'dark',
-  onClear: function onClear() {}
-};
-
-var css$z = ".HierarchyItem_module_root__c993ecd0 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: 1;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 {\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: 0rem 0.5rem;\n  cursor: pointer;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1], .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1] .HierarchyItem_module_expand__c993ecd0, .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] .HierarchyItem_module_expand__c993ecd0 {\n  padding: 0;\n  height: auto;\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1] .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0, .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0 {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component2] {\n  flex: 1 1 auto;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component2] .HierarchyItem_module_title__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: auto;\n  padding: 0.25rem 0rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover {\n  background: var(--background);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_icon__c993ecd0,\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_title__c993ecd0,\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_title__c993ecd0 svg {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 {\n  display: none;\n  flex: 1 0 auto;\n  padding: 0px 0rem 0px 0.25rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] {\n  flex: 0 0 1.6rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] .HierarchyItem_module_tail__c993ecd0 {\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__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] .HierarchyItem_module_tail__c993ecd0::after {\n  content: \"\";\n  display: block;\n  margin: auto;\n  width: 1px;\n  flex: 1;\n  background: var(--grey1);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component2] {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component2] .HierarchyItem_module_children__c993ecd0 {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__c993ecd0.HierarchyItem_module_open__c993ecd0 > .HierarchyItem_module_header__c993ecd0 .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0 {\n  transform: none;\n}\n.HierarchyItem_module_root__c993ecd0.HierarchyItem_module_open__c993ecd0 > .HierarchyItem_module_body__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.25rem;\n  height: auto;\n}";
-var modules_6d03d164 = {"root":"HierarchyItem_module_root__c993ecd0","header":"HierarchyItem_module_header__c993ecd0","expand":"HierarchyItem_module_expand__c993ecd0","icon":"HierarchyItem_module_icon__c993ecd0","title":"HierarchyItem_module_title__c993ecd0","body":"HierarchyItem_module_body__c993ecd0","tail":"HierarchyItem_module_tail__c993ecd0","children":"HierarchyItem_module_children__c993ecd0","open":"HierarchyItem_module_open__c993ecd0"};
-n(css$z,{});
-
-var HierarchyItem = function HierarchyItem(props) {
-  var defaultOpen = props.defaultOpen,
-    iconPlacement = props.iconPlacement,
-    title = props.title,
-    children = props.children,
-    _onClick = props.onClick,
-    onDoubleClick = props.onDoubleClick;
-  var _useState = React.useState(defaultOpen),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var icon = /*#__PURE__*/jsxRuntime.jsx(Button, {
-    className: modules_6d03d164.expand,
-    size: "auto",
-    variant: "text",
-    color: "default",
-    onClick: function onClick() {
-      setOpen(function (prevState) {
-        var newState = !prevState;
-        _onClick === null || _onClick === void 0 ? void 0 : _onClick(newState);
-        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(newState);
-        return newState;
-      });
-    },
-    leftComponent: function leftComponent() {
-      return /*#__PURE__*/jsxRuntime.jsx(Caret, {
-        className: modules_6d03d164.icon
-      });
-    }
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classes(modules_6d03d164.root, open ? modules_6d03d164.open : ''),
-    children: [/*#__PURE__*/jsxRuntime.jsx(BaseCell, {
-      flexible: true,
-      size: "auto",
-      className: modules_6d03d164.header,
-      component1: iconPlacement === 'left' && icon,
-      component2: /*#__PURE__*/jsxRuntime.jsx(Button, {
-        className: modules_6d03d164.title,
-        flexible: true,
-        size: "auto",
-        variant: "text",
-        color: "default",
-        onClick: function onClick(event) {
-          var detail = event.detail;
-
-          // single click
-          if (detail === 1) {
-            _onClick === null || _onClick === void 0 ? void 0 : _onClick(open);
-            // double click
-          } else if (detail === 2) {
-            setOpen(function (prevState) {
-              var newState = !prevState;
-              onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(newState);
-              return newState;
-            });
-          }
-        },
-        leftComponent: function leftComponent() {
-          return title;
-        }
-      }),
-      component3: iconPlacement === 'right' && icon
-    }), /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
-      size: "auto",
-      className: modules_6d03d164.body,
-      component1: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: modules_6d03d164.tail
-      }),
-      component2: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: modules_6d03d164.children,
-        children: children
+        onBlur: onBlur,
+        value: selectedOptions === null || selectedOptions === void 0 ? void 0 : (_selectedOptions$map = selectedOptions.map(function (option) {
+          return option === null || option === void 0 ? void 0 : option.value;
+        })) === null || _selectedOptions$map === void 0 ? void 0 : _selectedOptions$map.join(', ')
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        "data-elem": "select",
+        role: "button",
+        className: classes(modules_1b90f5ea.select, feedback != null ? modules_1b90f5ea["feedback-".concat(feedback === null || feedback === void 0 ? void 0 : feedback.type)] : ''),
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          "data-elem": "placeholder",
+          className: modules_1b90f5ea.placeholder,
+          children: (_ref2 = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? formatter(selectedOptions.length) : selectedOptions === null || selectedOptions === void 0 ? void 0 : (_selectedOptions$ = selectedOptions[0]) === null || _selectedOptions$ === void 0 ? void 0 : _selectedOptions$.title) !== null && _ref2 !== void 0 ? _ref2 : placeholder
+        }), /*#__PURE__*/jsxRuntime.jsx(Caret, {
+          "data-elem": "icon",
+          className: classes(modules_1b90f5ea.icon, modules_1b90f5ea['drop-icon'])
+        })]
+      })]
+    })), /*#__PURE__*/jsxRuntime.jsx(Popper, {
+      open: open,
+      wrapperId: "dropdown-popper",
+      children: open && /*#__PURE__*/jsxRuntime.jsx(FloatingFocusManager, {
+        context: context,
+        initialFocus: -1,
+        modal: false,
+        children: /*#__PURE__*/jsxRuntime.jsxs("ul", _objectSpread2(_objectSpread2({}, getFloatingProps({
+          'data-elem': 'body',
+          role: 'group',
+          ref: floating,
+          onKeyDown: function onKeyDown(event) {
+            setPointer(false);
+            if (event.key === 'Tab' && !multi) {
+              setOpen(false);
+            }
+          },
+          onPointerMove: function onPointerMove() {
+            setPointer(true);
+          },
+          style: {
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : 0,
+            left: x !== null && x !== void 0 ? x : 0
+          },
+          className: classes(modules_1b90f5ea.body, popperClassName, open ? modules_1b90f5ea.open : '')
+        })), {}, {
+          children: [multi && /*#__PURE__*/jsxRuntime.jsxs("li", {
+            ref: multiOptionsRef,
+            className: modules_1b90f5ea['multi-options'],
+            tabIndex: -1,
+            children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+              label: "Select All",
+              position: "left",
+              checked: selectedOptions.length === childrenArray.length,
+              onChange: onSelectAll
+            }), ' ', /*#__PURE__*/jsxRuntime.jsx(Button, {
+              blurOnClick: false,
+              variant: "text",
+              title: "Clear",
+              size: "auto",
+              color: "danger",
+              onClick: function onClick(event) {
+                var _multiOptionsRef$curr;
+                multiOptionsRef === null || multiOptionsRef === void 0 ? void 0 : (_multiOptionsRef$curr = multiOptionsRef.current) === null || _multiOptionsRef$curr === void 0 ? void 0 : _multiOptionsRef$curr.focus();
+                onSelectAll(event, false);
+              }
+            })]
+          }), items, multi && /*#__PURE__*/jsxRuntime.jsx(Button, {
+            className: modules_1b90f5ea['multi-apply'],
+            title: "Apply",
+            size: "auto",
+            onClick: onApply
+          })]
+        }))
+      })
+    }), feedback != null && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: modules_1b90f5ea.bottom,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-elem": "feedback",
+        className: classes(modules_1b90f5ea.feedback, modules_1b90f5ea["feedback-".concat(feedback.type)]),
+        children: feedback.text
       })
     })]
   });
+});
+Dropdown.propTypes = {
+  popperClassName: propTypes$1.exports.string,
+  className: propTypes$1.exports.string,
+  disabled: propTypes$1.exports.bool,
+  label: propTypes$1.exports.string,
+  value: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.arrayOf(propTypes$1.exports.string)]),
+  placeholder: propTypes$1.exports.string,
+  // search: PropTypes.bool,
+  // max: PropTypes.number,
+  multi: propTypes$1.exports.bool,
+  onChange: propTypes$1.exports.func,
+  onBlur: propTypes$1.exports.func,
+  feedback: propTypes$1.exports.shape({
+    text: propTypes$1.exports.node,
+    type: propTypes$1.exports.oneOf(['error', 'success', 'default'])
+  }),
+  formatter: propTypes$1.exports.func
 };
-HierarchyItem.propTypes = {
-  iconPlacement: propTypes$1.exports.oneOf(['left', 'right', 'none']),
-  title: propTypes$1.exports.node,
-  defaultOpen: propTypes$1.exports.bool,
-  onClick: propTypes$1.exports.func
-};
-HierarchyItem.defaultProps = {
-  iconPlacement: 'left',
-  title: null,
-  defaultOpen: false,
-  onClick: function onClick() {}
+Dropdown.defaultProps = {
+  popperClassName: '',
+  className: '',
+  disabled: false,
+  label: null,
+  value: undefined,
+  placeholder: 'Select an option',
+  // search: false,
+  // max: null,
+  multi: false,
+  onChange: null,
+  onBlur: null,
+  feedback: null,
+  formatter: function formatter(totalSelected) {
+    return "".concat(totalSelected, " options selected");
+  }
 };
 
-var css$y = ".HierarchyBrowser_module_root__649d3da2 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 20rem;\n  position: relative;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_header__649d3da2 {\n  padding: 0.5rem;\n  background: var(--dark-grey);\n  color: var(--white);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_body__649d3da2 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  overflow: auto;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_item__649d3da2 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.25rem;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_item__649d3da2 .HierarchyBrowser_module_itemIcon__649d3da2 {\n  width: 1rem;\n}\n.HierarchyBrowser_module_root__649d3da2::after {\n  position: absolute;\n  right: 0;\n  content: \"\";\n  width: 1px;\n  height: 100%;\n  background: var(--grey4);\n}\n.HierarchyBrowser_module_root__649d3da2.HierarchyBrowser_module_resizable__649d3da2:hover::after {\n  width: 3px;\n  cursor: col-resize;\n}";
-var modules_5e29d515 = {"root":"HierarchyBrowser_module_root__649d3da2","header":"HierarchyBrowser_module_header__649d3da2","body":"HierarchyBrowser_module_body__649d3da2","item":"HierarchyBrowser_module_item__649d3da2","item-icon":"HierarchyBrowser_module_itemIcon__649d3da2","resizable":"HierarchyBrowser_module_resizable__649d3da2"};
+var css$y = ".DropdownItem_module_root__61492174 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.75rem;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  color: var(--grey);\n  outline: none;\n}\n.DropdownItem_module_root__61492174 > .DropdownItem_module_input__61492174 {\n  cursor: pointer;\n}\n.DropdownItem_module_root__61492174:focus {\n  background: var(--grey6);\n}\n.DropdownItem_module_root__61492174.DropdownItem_module_selected__61492174 {\n  background: var(--info-bg);\n}";
+var modules_bf949acd = {"root":"DropdownItem_module_root__61492174","input":"DropdownItem_module_input__61492174","selected":"DropdownItem_module_selected__61492174"};
 n(css$y,{});
 
-var Title = function Title(props) {
-  var item = props.item;
-  var Icon = null;
-  switch (item.id) {
-    case 'database':
-    case 'schema':
-    case 'object':
-      Icon = Server;
+var DropdownItem = /*#__PURE__*/React.forwardRef(function DropdownItem(props, ref) {
+  // eslint-disable-next-line object-curly-newline
+  var title = props.title,
+    value = props.value,
+    variant = props.variant,
+    selected = props.selected,
+    onKeyDown = props.onKeyDown,
+    onMouseEnter = props.onMouseEnter,
+    onClick = props.onClick,
+    dataAttrs = props.dataAttrs,
+    className = props.className,
+    tabIndex = props.tabIndex;
+  var action = null;
+  switch (variant) {
+    case 'checkbox':
+      action = /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
+        className: modules_bf949acd.input,
+        checked: selected,
+        disabled: true
+      });
+      break;
+    case 'radio':
+      action = /*#__PURE__*/jsxRuntime.jsx(Radio, {
+        className: modules_bf949acd.input,
+        checked: selected,
+        disabled: true
+      });
       break;
   }
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: modules_5e29d515.item,
-    children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
-      className: modules_5e29d515['item-icon']
-    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-      className: modules_5e29d515['item-title'],
-      children: item === null || item === void 0 ? void 0 : item.title
-    }), (item === null || item === void 0 ? void 0 : item.count) && /*#__PURE__*/jsxRuntime.jsxs("span", {
-      className: modules_5e29d515['item-count'],
-      children: ["(", item === null || item === void 0 ? void 0 : item.count, ")"]
-    })]
-  });
-};
-var HierarchyBrowser = function HierarchyBrowser(props) {
-  var className = props.className,
-    metadata = props.metadata,
-    onItemClick = props.onItemClick,
-    onItemDoubleClick = props.onItemDoubleClick,
-    minWidth = props.minWidth,
-    maxWidth = props.maxWidth,
-    borderSize = props.borderSize,
-    resizable = props.resizable,
-    setItemProps = props.setItemProps,
-    title = props.title;
-  var browserRef = React.useRef(null);
-  useResize({
-    ref: browserRef,
-    styles: {
-      minWidth: minWidth,
-      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : document.documentElement.getBoundingClientRect().width,
-      borderSize: borderSize
-    },
-    enabled: resizable
-  });
-  var handleItemClick = function handleItemClick(item, pathString) {
-    return function (open) {
-      onItemClick(item, pathString, open);
-    };
-  };
-  var handleItemDoubleClick = function handleItemDoubleClick(item, pathString) {
-    return function (open) {
-      onItemDoubleClick(item, pathString, open);
-    };
-  };
-  var renderTree = function renderTree(data) {
-    var _data$list$map, _data$list, _data$list$map2;
-    var pathString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    if (data == null) {
-      return null;
-    }
-    var hasChildren = (data === null || data === void 0 ? void 0 : data.list) === true || Array.isArray(data === null || data === void 0 ? void 0 : data.list);
-    return /*#__PURE__*/jsxRuntime.jsx(HierarchyItem, _objectSpread2(_objectSpread2({
-      title: /*#__PURE__*/jsxRuntime.jsx(Title, {
-        item: data
-      }),
-      iconPlacement: hasChildren ? 'left' : 'none',
-      onClick: handleItemClick(data, pathString),
-      onDoubleClick: handleItemDoubleClick(data, pathString)
-    }, setItemProps(data, pathString)), {}, {
-      children: hasChildren && ((_data$list$map = (_data$list = data.list) === null || _data$list === void 0 ? void 0 : (_data$list$map2 = _data$list.map) === null || _data$list$map2 === void 0 ? void 0 : _data$list$map2.call(_data$list, function (item, idx) {
-        return renderTree(item, "".concat(pathString).concat(pathString.length > 0 ? '.' : '', "list[").concat(idx, "]"));
-      })) !== null && _data$list$map !== void 0 ? _data$list$map : [])
-    }));
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    ref: browserRef,
-    className: classes(modules_5e29d515.root, className, resizable ? modules_5e29d515.resizable : ''),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: modules_5e29d515.header,
-      "data-elem": "header",
+  return /*#__PURE__*/jsxRuntime.jsxs("li", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: classes(className, modules_bf949acd.root, selected ? modules_bf949acd.selected : ''),
+    "data-elem": "dropdown-item",
+    "data-variant": variant,
+    "data-value": value,
+    "data-selected": selected,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, _objectSpread2({}, dataAttrs)), {}, {
+    tabIndex: tabIndex,
+    role: "option",
+    "aria-selected": selected,
+    onKeyDown: onKeyDown,
+    children: [action, /*#__PURE__*/jsxRuntime.jsx("span", {
+      "data-elem": "title",
       children: title
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: modules_5e29d515.body,
-      "data-elem": "body",
-      children: renderTree(metadata)
     })]
-  });
-};
-HierarchyBrowser.propTypes = {
+  }));
+});
+DropdownItem.propTypes = {
   className: propTypes$1.exports.string,
-  metadata: propTypes$1.exports.objectOf({
-    title: propTypes$1.exports.string,
-    id: propTypes$1.exports.string,
-    count: propTypes$1.exports.number,
-    list: propTypes$1.exports.array
-  }),
-  onItemClick: propTypes$1.exports.func,
-  onItemDoubleClick: propTypes$1.exports.func,
-  borderSize: propTypes$1.exports.number,
-  minWidth: propTypes$1.exports.number,
-  maxWidth: propTypes$1.exports.number,
-  resizable: propTypes$1.exports.bool,
-  setItemProps: propTypes$1.exports.func,
-  title: propTypes$1.exports.string
+  title: propTypes$1.exports.node,
+  variant: propTypes$1.exports.oneOf(['default', 'checkbox', 'radio']),
+  selected: propTypes$1.exports.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  dataAttrs: propTypes$1.exports.object
 };
-HierarchyBrowser.defaultProps = {
+DropdownItem.defaultProps = {
   className: '',
-  metadata: {},
-  onItemClick: function onItemClick() {},
-  onItemDoubleClick: function onItemDoubleClick() {},
-  borderSize: 4,
-  minWidth: 220,
-  maxWidth: null,
-  resizable: false,
-  setItemProps: function setItemProps() {
-    return {};
-  },
-  title: 'Browser'
+  title: '',
+  variant: 'default',
+  dataAttrs: {},
+  selected: false
 };
 
-var css$x = ".TextField_module_root__9cc1db47 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.TextField_module_root__9cc1db47 label {\n  width: 100%;\n  max-width: 100%;\n  font-weight: 400;\n  font-size: 0.75rem;\n  line-height: 1.125rem;\n  letter-spacing: 0.32px;\n  color: var(--grey);\n  height: 100%;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0rem 0.5rem;\n  max-width: 100%;\n  width: 100%;\n  border-color: var(--grey4);\n  border-style: solid;\n  border-radius: 0.25rem;\n  height: 100%;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 .TextField_module_icon__9cc1db47 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] {\n  flex: 1;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47 {\n  -moz-appearance: textfield;\n  flex: 1;\n  background-color: transparent;\n  border: none;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  letter-spacing: 0.16px;\n  color: var(--black);\n  width: 100%;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47::-webkit-outer-spin-button, .TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47:focus {\n  outline: none;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47:disabled {\n  background: var(--grey9);\n  color: var(--grey3);\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_sm__9cc1db47 {\n  padding: 0.5rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_md__9cc1db47 {\n  padding: 0.688rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_lg__9cc1db47 {\n  padding: 1rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 {\n  padding: 0;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47 {\n  resize: vertical;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_md__9cc1db47 {\n  padding: 0.313rem 0.75rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_typeTextarea__9cc1db47 > [data-elem=component2] .TextField_module_input__9cc1db47.TextField_module_lg__9cc1db47 {\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47:focus-within {\n  border: 0.063rem solid var(--info);\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47:focus-within.TextField_module_feedbackError__9cc1db47 {\n  border-color: var(--error);\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_borderDefault__9cc1db47 {\n  border-width: 0.063rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_borderBottom__9cc1db47 {\n  border-width: 0rem 0rem 0.063rem 0rem;\n}\n.TextField_module_root__9cc1db47 label .TextField_module_inputWrapper__9cc1db47.TextField_module_borderNone__9cc1db47 {\n  border-width: 0rem;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  min-height: 2rem;\n  width: 100%;\n  gap: 1rem;\n  color: var(--grey3);\n  font-size: 0.75rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_feedback__9cc1db47 {\n  flex: 1;\n  margin-right: auto;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_feedback__9cc1db47.TextField_module_feedbackError__9cc1db47 {\n  color: var(--error);\n  fill: var(--error);\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_feedback__9cc1db47.TextField_module_feedbackSuccess__9cc1db47 {\n  color: var(--success);\n  fill: var(--success);\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_count__9cc1db47 {\n  text-align: right;\n  margin-left: auto;\n}\n.TextField_module_root__9cc1db47 .TextField_module_bottom__9cc1db47 .TextField_module_count__9cc1db47.TextField_module_exceeded__9cc1db47 {\n  color: var(--error);\n}";
-var modules_c1d23762 = {"root":"TextField_module_root__9cc1db47","input-wrapper":"TextField_module_inputWrapper__9cc1db47","icon":"TextField_module_icon__9cc1db47","input":"TextField_module_input__9cc1db47","sm":"TextField_module_sm__9cc1db47","md":"TextField_module_md__9cc1db47","lg":"TextField_module_lg__9cc1db47","type-textarea":"TextField_module_typeTextarea__9cc1db47","feedback-error":"TextField_module_feedbackError__9cc1db47","border-default":"TextField_module_borderDefault__9cc1db47","border-bottom":"TextField_module_borderBottom__9cc1db47","border-none":"TextField_module_borderNone__9cc1db47","bottom":"TextField_module_bottom__9cc1db47","feedback":"TextField_module_feedback__9cc1db47","feedback-success":"TextField_module_feedbackSuccess__9cc1db47","count":"TextField_module_count__9cc1db47","exceeded":"TextField_module_exceeded__9cc1db47"};
+var css$x = ".TimePicker_module_root__2dd24d9e {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  border-top: 1px solid var(--grey5);\n  border-bottom: 1px solid var(--grey5);\n}\n.TimePicker_module_root__2dd24d9e .TimePicker_module_input__2dd24d9e {\n  width: 5.125rem;\n}\n.TimePicker_module_root__2dd24d9e .TimePicker_module_input__2dd24d9e > label [data-elem=base-cell] {\n  border: none;\n}\n.TimePicker_module_root__2dd24d9e .TimePicker_module_input__2dd24d9e > label [data-elem=base-cell] [data-elem=component2] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.TimePicker_module_root__2dd24d9e .TimePicker_module_input__2dd24d9e > label [data-elem=base-cell] [data-elem=component2] > input[data-elem=input] {\n  padding: 1rem 0rem;\n  text-align: center;\n  font-weight: 600;\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n  color: var(--dark-grey);\n}\n.TimePicker_module_root__2dd24d9e .TimePicker_module_colon__2dd24d9e {\n  font-weight: 500;\n  font-size: 1.25rem;\n  line-height: 1.5rem;\n  color: var(--dark-grey);\n}\n.TimePicker_module_root__2dd24d9e .TimePicker_module_separator__2dd24d9e {\n  width: 0.0625rem;\n  height: 1.5625rem;\n  background-color: var(--grey5);\n}";
+var modules_98a80317 = {"root":"TimePicker_module_root__2dd24d9e","input":"TimePicker_module_input__2dd24d9e","colon":"TimePicker_module_colon__2dd24d9e","separator":"TimePicker_module_separator__2dd24d9e"};
 n(css$x,{});
 
-var TextField = /*#__PURE__*/React.forwardRef(function TextField(props, inputRef) {
-  var _inputValue$length;
-  var id = props.id,
-    name = props.name,
-    label = props.label,
-    placeholder = props.placeholder,
-    type = props.type,
-    value = props.value,
-    defaultValue = props.defaultValue,
-    onBlur = props.onBlur,
-    onChange = props.onChange,
-    size = props.size,
-    border = props.border,
-    LeftComponent = props.LeftComponent,
-    RightComponent = props.RightComponent,
-    className = props.className,
-    disabled = props.disabled,
-    inputProps = props.inputProps,
-    feedback = props.feedback,
-    count = props.count,
-    feedbackAndCount = props.feedbackAndCount;
-  var _useRef = React.useRef(value !== undefined),
-    isControlled = _useRef.current;
+var isValidUnit = function isValidUnit(_ref) {
+  var type = _ref.type,
+    value = _ref.value;
+  if (type === 'hours') {
+    if (value >= 0 && value < 13) {
+      return true;
+    }
+  }
+  if (value >= 0 && value < 60) {
+    return true;
+  }
+  return false;
+};
+var isValidMeridian = function isValidMeridian(meridian) {
+  if (meridian === 'AM' || meridian === 'PM' || meridian === 'A' || meridian === 'P') {
+    return true;
+  }
+  return false;
+};
+var focusInput = function focusInput(ref) {
+  return ref === null || ref === void 0 ? void 0 : ref.current.focus();
+};
 
-  // for uncontrolled input
-  var _useState = React.useState(defaultValue),
+var TimePicker = function TimePicker(props) {
+  var className = props.className;
+  var today = getDayInfo(new Date());
+  var refs = {
+    hours: React.useRef(),
+    minutes: React.useRef(),
+    seconds: React.useRef(),
+    meridian: React.useRef()
+  };
+  var _useState = React.useState({
+      hours: doubleDigitted(today.hours),
+      minutes: doubleDigitted(today.minutes),
+      seconds: doubleDigitted(today.seconds),
+      meridian: today.meridian
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    uncontrolledValue = _useState2[0],
-    setUncontrolledValue = _useState2[1];
-  var handleChange = function handleChange(event) {
-    var _inputHelper = inputHelper(event),
-      fieldValue = _inputHelper.fieldValue;
-    if (isControlled) {
-      onChange(event, fieldValue);
-    } else {
-      setUncontrolledValue(fieldValue);
+    timePickerValue = _useState2[0],
+    setTimePickerValue = _useState2[1];
+  var hours = timePickerValue.hours,
+    minutes = timePickerValue.minutes,
+    seconds = timePickerValue.seconds,
+    meridian = timePickerValue.meridian;
+  React.useEffect(function () {
+    if (props.value) {
+      setTimePickerValue(props.value);
+    }
+  }, []);
+  React.useEffect(function () {
+    props.onChange(timePickerValue);
+  }, [timePickerValue]);
+  var _onChange = function onChange(id, value, nextInput, focus) {
+    if (value.length <= 2) {
+      setTimePickerValue(_objectSpread2(_objectSpread2({}, timePickerValue), {}, _defineProperty$1({}, id, value)));
+      if (focus && value && value.length === 2) {
+        focusInput(nextInput);
+      }
+    }
+  };
+  var onBlur = function onBlur(event) {
+    var target = event.target;
+    var id = target.id,
+      value = target.value;
+    if (id !== 'meridian' && !Number(value) > 0) {
+      setTimePickerValue(_objectSpread2(_objectSpread2({}, timePickerValue), {}, _defineProperty$1({}, id, '01')));
+      return;
+    }
+    if (id === 'meridian' && !['AM', 'PM'].includes(value)) {
+      setTimePickerValue(_objectSpread2(_objectSpread2({}, timePickerValue), {}, _defineProperty$1({}, id, 'AM')));
+      return;
+    }
+    setTimePickerValue(_objectSpread2(_objectSpread2({}, timePickerValue), {}, _defineProperty$1({}, id, doubleDigitted(value))));
+  };
+  var _onKeyDown = function onKeyDown(event) {
+    var keyCode = event.keyCode,
+      target = event.target;
+    var id = target.id,
+      value = target.value;
+    if (id === 'meridian' && keyCode === 40 || keyCode === 38) {
+      setTimePickerValue(_objectSpread2(_objectSpread2({}, timePickerValue), {}, _defineProperty$1({}, id, value === 'PM' ? 'AM' : 'PM')));
     }
   };
-  var inputValue = isControlled ? value !== null && value !== void 0 ? value : '' : uncontrolledValue;
-  var Input = /*#__PURE__*/React.createElement(type === 'textarea' ? 'textarea' : 'input', _objectSpread2({
-    id: id,
-    name: name,
-    disabled: disabled,
-    type: type,
-    defaultValue: defaultValue,
-    placeholder: placeholder,
-    onBlur: onBlur,
-    'data-elem': 'input',
-    ref: inputRef,
-    value: inputValue,
-    onChange: handleChange,
-    className: classes(modules_c1d23762[size], modules_c1d23762.input)
-  }, inputProps));
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classes(modules_c1d23762.root, className),
-    children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
-      children: [label, /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
-        className: classes(modules_c1d23762['input-wrapper'], modules_c1d23762["border-".concat(border)], modules_c1d23762["type-".concat(type)], feedback != null ? modules_c1d23762["feedback-".concat(feedback === null || feedback === void 0 ? void 0 : feedback.type)] : ''),
-        component1: LeftComponent && /*#__PURE__*/jsxRuntime.jsx(LeftComponent, {}),
-        component2: Input,
-        component3: RightComponent && /*#__PURE__*/jsxRuntime.jsx(RightComponent, {})
-      })]
-    }), feedbackAndCount && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: modules_c1d23762.bottom,
-      children: [feedback != null && /*#__PURE__*/jsxRuntime.jsx("div", {
-        "data-elem": "feedback",
-        className: classes(modules_c1d23762.feedback, modules_c1d23762["feedback-".concat(feedback.type)]),
-        children: feedback.text
-      }), (count === null || count === void 0 ? void 0 : count.limit) != null && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        "data-elem": "count",
-        className: classes(modules_c1d23762.count, (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > count.limit ? modules_c1d23762.exceeded : ''),
-        children: [(_inputValue$length = inputValue.length) !== null && _inputValue$length !== void 0 ? _inputValue$length : 0, "/", count.limit]
-      })]
+    className: classes(modules_98a80317.root, className),
+    children: [/*#__PURE__*/jsxRuntime.jsx(TextField, {
+      className: modules_98a80317.input,
+      placeholder: "00",
+      value: hours,
+      ref: refs.hours,
+      type: "number",
+      onBlur: onBlur,
+      id: "hours",
+      onChange: function onChange(event) {
+        var target = event.target,
+          nativeEvent = event.nativeEvent;
+        var id = target.id,
+          value = target.value;
+        if (isValidUnit({
+          type: 'hours',
+          value: value
+        })) {
+          _onChange(id, value, refs.minutes, nativeEvent.data);
+        }
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: modules_98a80317.colon,
+      children: ":"
+    }), /*#__PURE__*/jsxRuntime.jsx(TextField, {
+      className: modules_98a80317.input,
+      placeholder: "00",
+      value: minutes,
+      id: "minutes",
+      onBlur: onBlur,
+      ref: refs.minutes,
+      type: "number",
+      onChange: function onChange(event) {
+        var target = event.target,
+          nativeEvent = event.nativeEvent;
+        var id = target.id,
+          value = target.value;
+        if (isValidUnit({
+          type: 'minutes',
+          value: value
+        })) {
+          _onChange(id, value, refs.seconds, nativeEvent.data);
+        }
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: modules_98a80317.colon,
+      children: ":"
+    }), /*#__PURE__*/jsxRuntime.jsx(TextField, {
+      className: modules_98a80317.input,
+      placeholder: "00",
+      type: "number",
+      value: seconds,
+      ref: refs.seconds,
+      onBlur: onBlur,
+      id: "seconds",
+      onChange: function onChange(event) {
+        var target = event.target,
+          nativeEvent = event.nativeEvent;
+        var id = target.id,
+          value = target.value;
+        if (isValidUnit({
+          type: 'seconds',
+          value: value
+        })) {
+          _onChange(id, value, refs.meridian, nativeEvent.data);
+        }
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: modules_98a80317.separator,
+      children: "|"
+    }), /*#__PURE__*/jsxRuntime.jsx(TextField, {
+      className: modules_98a80317.input,
+      placeholder: "--",
+      value: meridian,
+      onBlur: onBlur,
+      ref: refs.meridian,
+      id: "meridian",
+      onKeyDown: function onKeyDown(e) {
+        _onKeyDown(e);
+      },
+      onChange: function onChange(event) {
+        var target = event.target;
+        var id = target.id,
+          value = target.value;
+        if (!value || isValidMeridian(value.toUpperCase())) {
+          _onChange(id, value.toUpperCase());
+        }
+      }
     })]
   });
-});
-TextField.propTypes = {
-  id: propTypes$1.exports.string,
-  name: propTypes$1.exports.string,
-  disabled: propTypes$1.exports.bool,
-  label: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
-  placeholder: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
-  type: propTypes$1.exports.oneOf(['text', 'email', 'password', 'number', 'textarea']),
-  value: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.number]),
-  defaultValue: propTypes$1.exports.string,
+};
+TimePicker.propTypes = {
+  className: propTypes$1.exports.string,
   onChange: propTypes$1.exports.func,
-  size: propTypes$1.exports.oneOf(['sm', 'md', 'lg']),
-  border: propTypes$1.exports.oneOf(['default', 'bottom', 'none']),
-  LeftComponent: propTypes$1.exports.node,
-  RightComponent: propTypes$1.exports.node,
-  // eslint-disable-next-line react/forbid-prop-types
-  inputProps: propTypes$1.exports.object,
-  count: propTypes$1.exports.shape({
-    limit: propTypes$1.exports.number
-  }),
-  feedback: propTypes$1.exports.shape({
-    text: propTypes$1.exports.node,
-    type: propTypes$1.exports.oneOf(['error', 'success', 'default'])
-  }),
-  feedbackAndCount: propTypes$1.exports.bool
+  value: propTypes$1.exports.shape({
+    hours: propTypes$1.exports.string,
+    minutes: propTypes$1.exports.string,
+    seconds: propTypes$1.exports.string,
+    meridian: propTypes$1.exports.string
+  })
 };
-TextField.defaultProps = {
-  id: null,
-  name: null,
-  disabled: false,
-  label: '',
-  placeholder: '',
-  type: 'text',
-  value: undefined,
-  defaultValue: '',
+TimePicker.defaultProps = {
+  className: '',
   onChange: function onChange() {},
-  size: 'md',
-  border: 'default',
-  LeftComponent: null,
-  RightComponent: null,
-  inputProps: {},
-  count: null,
-  feedback: null,
-  feedbackAndCount: false
+  value: null
 };
 
-var css$w = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.CheckBox_module_root__d1bdcb36 {\n  cursor: pointer;\n  gap: 10px;\n}\n.CheckBox_module_root__d1bdcb36.CheckBox_module_positionLeft__d1bdcb36 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.CheckBox_module_root__d1bdcb36.CheckBox_module_positionRight__d1bdcb36 {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  align-items: center;\n}\n.CheckBox_module_root__d1bdcb36 input[type=checkbox] {\n  opacity: 0;\n  z-index: 1;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n}\n.CheckBox_module_root__d1bdcb36.CheckBox_module_disabled__d1bdcb36 {\n  cursor: default;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36 {\n  display: inline-block;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36.CheckBox_module_iconSm__d1bdcb36 {\n  width: 1rem;\n  height: 1rem;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36.CheckBox_module_iconMd__d1bdcb36 {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.CheckBox_module_root__d1bdcb36 .CheckBox_module_icon__d1bdcb36.CheckBox_module_iconLg__d1bdcb36 {\n  width: 1.5rem;\n  height: 2rem;\n}\n.CheckBox_module_root__d1bdcb36 [data-elem=label] {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}";
-var modules_066398a2 = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","root":"CheckBox_module_root__d1bdcb36","position-left":"CheckBox_module_positionLeft__d1bdcb36","position-right":"CheckBox_module_positionRight__d1bdcb36","disabled":"CheckBox_module_disabled__d1bdcb36","icon":"CheckBox_module_icon__d1bdcb36","icon-sm":"CheckBox_module_iconSm__d1bdcb36","icon-md":"CheckBox_module_iconMd__d1bdcb36","icon-lg":"CheckBox_module_iconLg__d1bdcb36"};
+var css$w = ".Footer_module_root__0e6d72de {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n  margin-inline: 1rem;\n}\n.Footer_module_root__0e6d72de .Footer_module_apply__0e6d72de {\n  margin-top: 0.5rem;\n  width: 100%;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Footer_module_root__0e6d72de .Footer_module_timePicker__0e6d72de {\n  margin-bottom: 1.25rem;\n}\n\n.Footer_module_selectedDate__0e6d72de {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 1.125rem;\n  background: var(--white);\n  border: 0.0625rem solid var(--grey4);\n  border-radius: 0.25rem;\n}\n.Footer_module_selectedDate__0e6d72de .Footer_module_date__0e6d72de {\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.3125rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Footer_module_selectedDate__0e6d72de .Footer_module_date__0e6d72de .Footer_module_cross__0e6d72de {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.Footer_module_selectedDate__0e6d72de .Footer_module_date__0e6d72de .Footer_module_value__0e6d72de {\n  font-weight: 400;\n  padding-right: 0.7rem;\n  border-right: 1px var(--grey3) solid;\n}\n\n.Footer_module_dateRanges__0e6d72de {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: stretch;\n  margin-top: 0.5rem;\n}\n.Footer_module_dateRanges__0e6d72de .Footer_module_dateRange__0e6d72de {\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1rem;\n  gap: 1.125rem;\n  cursor: pointer;\n}\n.Footer_module_dateRanges__0e6d72de .Footer_module_dateRange__0e6d72de:hover {\n  background-color: var(--background);\n}\n.Footer_module_dateRanges__0e6d72de .Footer_module_dateRange__0e6d72de span {\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 1.3125rem;\n  color: var(--black);\n}\n.Footer_module_dateRanges__0e6d72de .Footer_module_selected__0e6d72de {\n  background-color: var(--background);\n}";
+var modules_b490bd5d = {"root":"Footer_module_root__0e6d72de","apply":"Footer_module_apply__0e6d72de","time-picker":"Footer_module_timePicker__0e6d72de","selected-date":"Footer_module_selectedDate__0e6d72de","date":"Footer_module_date__0e6d72de","cross":"Footer_module_cross__0e6d72de","value":"Footer_module_value__0e6d72de","date-ranges":"Footer_module_dateRanges__0e6d72de","date-range":"Footer_module_dateRange__0e6d72de","selected":"Footer_module_selected__0e6d72de"};
 n(css$w,{});
 
-var Checkbox = function Checkbox(props) {
-  // eslint-disable-next-line object-curly-newline
-  var label = props.label,
-    onChange = props.onChange,
-    defaultChecked = props.defaultChecked,
-    checked = props.checked,
-    position = props.position,
-    size = props.size,
-    className = props.className,
-    disabled = props.disabled;
-  var _useRef = React.useRef(checked !== undefined),
-    isControlled = _useRef.current;
+var getDateAndUnixRange = function getDateAndUnixRange(duration) {
+  var startingDate = sub$1(new Date(), duration);
+  startingDate.setHours(0, 0, 0, 0);
+  var endingDate = new Date();
+  endingDate.setHours(0, 0, 0, 0);
+  var dates = ["".concat(startingDate.getDate(), " ").concat(MONTHS[startingDate.getMonth()].substring(0, 3), " ").concat(startingDate.getFullYear()), "".concat(endingDate.getDate(), " ").concat(MONTHS[endingDate.getMonth()].substring(0, 3), " ").concat(endingDate.getFullYear())];
+  var unix = [getUnixTime(startingDate), getUnixTime(endingDate)];
+  return {
+    dates: dates,
+    unix: unix
+  };
+};
+var dateRanges = [{
+  title: '7 Days',
+  dateRange: getDateAndUnixRange({
+    days: 7
+  })
+}, {
+  title: '15 Days',
+  dateRange: getDateAndUnixRange({
+    days: 15
+  })
+}, {
+  title: '1 Month',
+  dateRange: getDateAndUnixRange({
+    months: 1
+  })
+}];
 
-  // for uncontrolled input
-  var _useState = React.useState(defaultChecked),
+var SelectedDateView = function SelectedDateView(props) {
+  var value = props.value,
+    action = props.action,
+    Icon = props.icon;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: modules_b490bd5d['selected-date'],
+    children: [/*#__PURE__*/jsxRuntime.jsx(Calender$1, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: modules_b490bd5d.date,
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: classes(modules_b490bd5d.value),
+        children: value
+      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
+        size: "auto",
+        variant: "text",
+        onClick: action,
+        leftComponent: Icon
+      })]
+    })]
+  });
+};
+var Footer = function Footer(props) {
+  var _props$selectedDate = props.selectedDate,
+    selectedDate = _props$selectedDate === void 0 ? {} : _props$selectedDate,
+    _props$selectedRange = props.selectedRange,
+    selectedRange = _props$selectedRange === void 0 ? {} : _props$selectedRange,
+    setSelectedDate = props.setSelectedDate,
+    setSelectedRange = props.setSelectedRange,
+    range = props.range,
+    goToDate = props.goToDate,
+    onApply = props.onApply;
+  var date = selectedDate.date,
+    month = selectedDate.month,
+    year = selectedDate.year;
+  var _selectedRange$dates = selectedRange.dates,
+    dates = _selectedRange$dates === void 0 ? [] : _selectedRange$dates;
+  var monthInShort = month === null || month === void 0 ? void 0 : month.substr(0, 3);
+  var datesSelected = date || dates.length === 2;
+  var selectFixedDateRange = function selectFixedDateRange(dateRange) {
+    setSelectedRange(dateRange);
+  };
+  var resetDate = function resetDate() {
+    goToDate(getUnixTime(new Date()));
+  };
+  var clearRangeSelection = function clearRangeSelection() {
+    setSelectedRange({});
+  };
+  var onTimeChange = function onTimeChange(time) {
+    var monthNumber = fromUnixTime(selectedDate.unix).getMonth();
+    var unix = getUnixTime(new Date(selectedDate.year, monthNumber, selectedDate.date, time.hours, time.minutes, time.seconds));
+    setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
+      unix: unix
+    }));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: modules_b490bd5d.root,
+    children: [/*#__PURE__*/jsxRuntime.jsx(TimePicker, {
+      onChange: onTimeChange,
+      className: modules_b490bd5d['time-picker']
+    }), datesSelected && (dates === null || dates === void 0 ? void 0 : dates.length) === 2 ? /*#__PURE__*/jsxRuntime.jsx(SelectedDateView, {
+      range: true,
+      value: "".concat(selectedRange.dates[0], " - ").concat(selectedRange.dates[1]),
+      icon: function icon() {
+        return /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
+          className: modules_b490bd5d.cross
+        });
+      },
+      action: clearRangeSelection
+    }) : datesSelected && /*#__PURE__*/jsxRuntime.jsx(SelectedDateView, {
+      value: "".concat(doubleDigitted(date), " ").concat(monthInShort, " ").concat(year),
+      icon: function icon() {
+        return /*#__PURE__*/jsxRuntime.jsx(Reset, {});
+      },
+      action: resetDate
+    }), range && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: modules_b490bd5d['date-ranges'],
+      children: dateRanges.map(function (_ref) {
+        var _selectedRange$unix;
+        var dateRange = _ref.dateRange,
+          title = _ref.title;
+        var selectedFixedDateRange = dateRange.unix.toString() === ((_selectedRange$unix = selectedRange.unix) === null || _selectedRange$unix === void 0 ? void 0 : _selectedRange$unix.toString());
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: classes(modules_b490bd5d['date-range'], selectedFixedDateRange ? modules_b490bd5d.selected : ''),
+          onClick: function onClick() {
+            selectFixedDateRange(dateRange);
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(HalfShade, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: title
+          })]
+        }, title);
+      })
+    }), datesSelected && /*#__PURE__*/jsxRuntime.jsx(Button, {
+      onClick: onApply,
+      title: "Apply",
+      className: modules_b490bd5d.apply
+    })]
+  });
+};
+
+var Calender = function Calender(props) {
+  var range = props.range,
+    selectedDate = props.selectedDate,
+    setSelectedDate = props.setSelectedDate,
+    selectedRange = props.selectedRange,
+    setSelectedRange = props.setSelectedRange,
+    onApply = props.onApply,
+    disabledDates = props.disabledDates,
+    disableDatesBefore = props.disableDatesBefore,
+    value = props.value;
+  var _getDayInfo = getDayInfo(new Date()),
+    month = _getDayInfo.month,
+    year = _getDayInfo.year,
+    monthAsNumber = _getDayInfo.monthAsNumber,
+    dayAsNumber = _getDayInfo.dayAsNumber;
+  var _useState = React.useState({
+      month: month,
+      monthAsNumber: monthAsNumber,
+      year: year,
+      dayAsNumber: dayAsNumber
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    uncontrolledChecked = _useState2[0],
-    setUncontrolledChecked = _useState2[1];
-  var handleChange = function handleChange(event) {
-    var _inputHelper = inputHelper(event),
-      fieldValue = _inputHelper.fieldValue;
-    if (isControlled) {
-      onChange(event, fieldValue);
-    } else {
-      setUncontrolledChecked(fieldValue);
+    selectedMonth = _useState2[0],
+    setSelectedMonth = _useState2[1];
+  React.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)) {
+      var _dateAsNumber = date.getDate();
+      setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
+        month: selectedMonth.month,
+        year: selectedMonth.year,
+        date: _dateAsNumber,
+        unix: getUnixTime(date.setHours(23, 59, 59, 59))
+      }));
     }
+  }, []);
+  var goToDate = function goToDate(unix) {
+    var dayInfo = getDayInfo(new Date(unix * 1000));
+    setSelectedMonth({
+      month: dayInfo.month,
+      monthAsNumber: dayInfo.monthAsNumber,
+      year: dayInfo.year
+    });
+    setSelectedDate(_objectSpread2(_objectSpread2({}, selectedDate), {}, {
+      month: dayInfo.month,
+      year: dayInfo.year,
+      date: dayInfo.dateAsNumber,
+      unix: getUnixTime(new Date(unix * 1000).setHours(23, 59, 59, 59))
+    }));
   };
-  var isChecked = isControlled ? checked : uncontrolledChecked;
-  return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: classes(modules_066398a2.root, modules_066398a2["position-".concat(position)], className, disabled ? modules_066398a2.disabled : ''),
-    children: [/*#__PURE__*/jsxRuntime.jsx("input", _objectSpread2(_objectSpread2({
-      disabled: disabled,
-      type: "checkbox",
-      defaultChecked: defaultChecked
-    }, isControlled ? {
-      checked: checked
-    } : {}), {}, {
-      onChange: handleChange
-    })), isChecked ? /*#__PURE__*/jsxRuntime.jsx(CheckboxIcon.Checked, {
-      "data-elem": "icon",
-      className: classes(modules_066398a2["icon-".concat(size)], modules_066398a2.icon)
-    }) : /*#__PURE__*/jsxRuntime.jsx(CheckboxIcon.UnChecked, {
-      "data-elem": "icon",
-      className: classes(modules_066398a2["icon-".concat(size)], modules_066398a2.icon)
-    }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
-      "data-elem": "label",
-      children: label
+  var onMonthChange = function onMonthChange(switchSide) {
+    if (switchSide === 'prev') {
+      if (selectedMonth.monthAsNumber === 0) {
+        var _previousMonth = FULL_MONTHS[11];
+        setSelectedMonth({
+          month: _previousMonth,
+          monthAsNumber: 11,
+          year: selectedMonth.year - 1
+        });
+        return;
+      }
+      var previousMonthNumber = selectedMonth.monthAsNumber - 1;
+      var previousMonth = FULL_MONTHS[previousMonthNumber];
+      setSelectedMonth({
+        month: previousMonth,
+        monthAsNumber: previousMonthNumber,
+        year: selectedMonth.year
+      });
+      return;
+    }
+    if (switchSide === 'next') {
+      if (selectedMonth.monthAsNumber === 11) {
+        var _nextMonth = FULL_MONTHS[0];
+        setSelectedMonth({
+          month: _nextMonth,
+          monthAsNumber: 0,
+          year: selectedMonth.year + 1
+        });
+        return;
+      }
+      var nextMonthNumber = selectedMonth.monthAsNumber + 1;
+      var nextMonth = FULL_MONTHS[nextMonthNumber];
+      setSelectedMonth({
+        month: nextMonth,
+        monthAsNumber: nextMonthNumber,
+        year: selectedMonth.year
+      });
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: modules_3722b5cd.root,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Header, {
+      selectedMonth: selectedMonth,
+      onMonthChange: onMonthChange
+    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+      selectedMonth: selectedMonth,
+      range: range,
+      selectedDate: selectedDate,
+      setSelectedDate: setSelectedDate,
+      selectedRange: selectedRange,
+      setSelectedRange: setSelectedRange,
+      disabledDates: disabledDates,
+      disableDatesBefore: disableDatesBefore
+    }), /*#__PURE__*/jsxRuntime.jsx(Footer, {
+      range: range,
+      selectedDate: selectedDate,
+      setSelectedDate: setSelectedDate,
+      selectedRange: selectedRange,
+      setSelectedRange: setSelectedRange,
+      onApply: onApply,
+      goToDate: goToDate
     })]
   });
 };
-Checkbox.propTypes = {
-  disabled: propTypes$1.exports.bool,
-  label: propTypes$1.exports.string,
-  defaultChecked: propTypes$1.exports.bool,
-  checked: propTypes$1.exports.bool,
-  position: propTypes$1.exports.oneOf(['left', 'right']),
-  size: propTypes$1.exports.oneOf(['sm', 'md', 'lg']),
-  onChange: propTypes$1.exports.func
-};
-Checkbox.defaultProps = {
-  disabled: false,
-  label: null,
-  defaultChecked: false,
-  checked: undefined,
-  position: 'right',
-  size: 'sm',
-  onChange: function onChange() {}
-};
 
-var css$v = ":root {\n  --white: #ffffff;\n  --black: #000000;\n  --dark-grey: #333333;\n  --dark-grey-o-85: rgba(51, 51, 51, 0.85);\n  --grey: #737373;\n  --grey1: #888888;\n  --grey2: #a6a6a6;\n  --grey3: #bbbbbb;\n  --grey4: #c4c4c4;\n  --grey5: #dddddd;\n  --grey6: #e8e8e8;\n  --grey7: #eeeeee;\n  --grey8: #f2f2f2;\n  --grey9: #eff0f0;\n  --grey10: #f7f7f7;\n  --highlight: #0f62fe;\n  --dark-blue: #001833;\n  --background: #d0e2ff;\n  --banyan-blue: #00037c;\n  --banyan-orange: #ff892a;\n  --banyan-pink: #ff1597;\n  --banyan-gradient: linear-gradient(\n  \t84.71deg,\n  \tvar(--banyan-pink) 0.48%,\n  \tvar(--banyan-orange) 99.57%\n  );\n  --error: #da1e28;\n  --error-bg: #fff1f1;\n  --error-outline: rgba(218, 30, 40, 0.08);\n  --success: #24a148;\n  --success-bg: #defbe6;\n  --success-outline: rgba(36, 161, 72, 0.08);\n  --warning: #f1c21b;\n  --warning-bg: #fff8e1;\n  --warning-outline: rgba(203, 160, 6, 0.08);\n  --info: #0043ce;\n  --info-bg: #edf5ff;\n  --info-outline: #2864db98;\n}\n\n.Radio_module_root__dc9ececa {\n  cursor: pointer;\n  gap: 10px;\n}\n.Radio_module_root__dc9ececa.Radio_module_positionLeft__dc9ececa {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Radio_module_root__dc9ececa.Radio_module_positionRight__dc9ececa {\n  display: flex;\n  flex-direction: row-reverse;\n  justify-content: flex-end;\n  align-items: center;\n}\n.Radio_module_root__dc9ececa.Radio_module_disabled__dc9ececa {\n  cursor: default;\n}\n.Radio_module_root__dc9ececa input[type=radio] {\n  opacity: 0;\n  z-index: 1;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa {\n  display: inline-block;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa.Radio_module_iconSm__dc9ececa {\n  width: 1rem;\n  height: 1rem;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa.Radio_module_iconMd__dc9ececa {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.Radio_module_root__dc9ececa .Radio_module_icon__dc9ececa.Radio_module_iconLg__dc9ececa {\n  width: 1.5rem;\n  height: 2rem;\n}\n.Radio_module_root__dc9ececa [data-elem=label] {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}";
-var modules_3705961f = {"white":"var(--white)","black":"var(--black)","dark-grey":"var(--dark-grey)","dark-grey-o-85":"var(--dark-grey-o-85)","grey":"var(--grey)","grey1":"var(--grey1)","grey2":"var(--grey2)","grey3":"var(--grey3)","grey4":"var(--grey4)","grey5":"var(--grey5)","grey6":"var(--grey6)","grey7":"var(--grey7)","grey8":"var(--grey8)","grey9":"var(--grey9)","grey10":"var(--grey10)","highlight":"var(--highlight)","dark-blue":"var(--dark-blue)","background":"var(--background)","banyan-blue":"var(--banyan-blue)","banyan-orange":"var(--banyan-orange)","banyan-pink":"var(--banyan-pink)","banyan-gradient":"var(--banyan-gradient)","error":"var(--error)","error-bg":"var(--error-bg)","error-outline":"var(--error-outline)","success":"var(--success)","success-bg":"var(--success-bg)","success-outline":"var(--success-outline)","warning":"var(--warning)","warning-bg":"var(--warning-bg)","warning-outline":"var(--warning-outline)","info":"var(--info)","info-bg":"var(--info-bg)","info-outline":"var(--info-outline)","root":"Radio_module_root__dc9ececa","position-left":"Radio_module_positionLeft__dc9ececa","position-right":"Radio_module_positionRight__dc9ececa","disabled":"Radio_module_disabled__dc9ececa","icon":"Radio_module_icon__dc9ececa","icon-sm":"Radio_module_iconSm__dc9ececa","icon-md":"Radio_module_iconMd__dc9ececa","icon-lg":"Radio_module_iconLg__dc9ececa"};
+var css$v = ".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$v,{});
 
-var Radio = function Radio(props) {
-  // eslint-disable-next-line object-curly-newline
-  var label = props.label,
-    checked = props.checked,
-    defaultChecked = props.defaultChecked,
-    onChange = props.onChange,
-    position = props.position,
-    size = props.size,
-    className = props.className,
-    disabled = props.disabled;
-  var _useRef = React.useRef(checked !== undefined),
-    isControlled = _useRef.current;
-
-  // for uncontrolled input
-  var _useState = React.useState(defaultChecked),
-    _useState2 = _slicedToArray(_useState, 2),
-    uncontrolledChecked = _useState2[0],
-    setUncontrolledChecked = _useState2[1];
-  var handleChange = function handleChange(event) {
-    var _inputHelper = inputHelper(event),
-      fieldValue = _inputHelper.fieldValue;
-    if (isControlled) {
-      onChange(event, fieldValue);
-    } else {
-      setUncontrolledChecked(fieldValue);
-    }
-  };
-  var isChecked = isControlled ? checked : uncontrolledChecked;
-  return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    className: classes(modules_3705961f.root, modules_3705961f["position-".concat(position)], className, disabled ? modules_3705961f.disabled : ''),
-    children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-      disabled: disabled,
-      type: "radio",
-      checked: isChecked,
-      onChange: handleChange
-    }), isChecked ? /*#__PURE__*/jsxRuntime.jsx(RadioIcon.Checked, {
-      "data-elem": "icon",
-      className: classes(modules_3705961f["icon-".concat(size)], modules_3705961f.icon)
-    }) : /*#__PURE__*/jsxRuntime.jsx(RadioIcon.UnChecked, {
-      "data-elem": "icon",
-      className: classes(modules_3705961f["icon-".concat(size)], modules_3705961f.icon)
-    }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
-      "data-elem": "label",
-      children: label
-    })]
-  });
-};
-Radio.propTypes = {
-  disabled: propTypes$1.exports.bool,
-  label: propTypes$1.exports.string,
-  checked: propTypes$1.exports.bool,
-  defaultChecked: propTypes$1.exports.bool,
-  position: propTypes$1.exports.oneOf(['left', 'right']),
-  size: propTypes$1.exports.oneOf(['sm', 'md', 'lg']),
-  onChange: propTypes$1.exports.func
-};
-Radio.defaultProps = {
-  disabled: false,
-  label: null,
-  checked: undefined,
-  defaultChecked: false,
-  position: 'left',
-  size: 'sm',
-  onChange: function onChange() {}
+var isMaxRangeExceeded = function isMaxRangeExceeded(_ref) {
+  var maxRange = _ref.maxRange,
+    selectedRange = _ref.selectedRange;
+  if (maxRange === null) {
+    return false;
+  }
+  var value = maxRange.value,
+    type = maxRange.type;
+  var unix = selectedRange.unix;
+  var _unix = _slicedToArray(unix, 2),
+    firstDateInRange = _unix[0],
+    secondDateInRange = _unix[1];
+  var diffInMonth = differenceInMonths(fromUnixTime(secondDateInRange), fromUnixTime(firstDateInRange));
+  var diffInDays = differenceInDays(fromUnixTime(secondDateInRange), fromUnixTime(firstDateInRange));
+  if (type === 'months') {
+    return diffInMonth <= value && diffInDays < value * 30;
+  }
+  if (type === 'days') {
+    return diffInDays <= value;
+  }
+  return false;
 };
 
-var css$u = ".Dropdown_module_root__1ad8038e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  gap: 0.5rem;\n  position: relative;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: 100%;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_label__1ad8038e {\n  font-size: 0.75rem;\n  color: var(--grey);\n  width: auto;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  max-width: 100%;\n  position: relative;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_input__1ad8038e {\n  position: absolute;\n  opacity: 0;\n  width: 1px;\n  height: 1px;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_input__1ad8038e:focus + .Dropdown_module_select__1ad8038e {\n  border-color: var(--highlight);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_input__1ad8038e:focus + .Dropdown_module_select__1ad8038e.Dropdown_module_feedbackError__1ad8038e {\n  border-color: var(--error);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 25rem;\n  max-width: 100%;\n  gap: 0.5rem;\n  background: var(--white);\n  outline: none;\n  border: 1px solid var(--grey5);\n  border-radius: 0.25rem;\n  padding: 0.75rem 0.75rem 0.75rem 1rem;\n  cursor: pointer;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e .Dropdown_module_placeholder__1ad8038e {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  color: var(--black);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e .Dropdown_module_icon__1ad8038e {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_header__1ad8038e .Dropdown_module_select__1ad8038e.Dropdown_module_feedbackError__1ad8038e {\n  border-color: var(--error);\n}\n.Dropdown_module_root__1ad8038e.Dropdown_module_open__1ad8038e .Dropdown_module_header__1ad8038e {\n  border-color: var(--highlight);\n}\n.Dropdown_module_root__1ad8038e.Dropdown_module_disabled__1ad8038e .Dropdown_module_select__1ad8038e {\n  background: var(--grey10);\n  cursor: not-allowed;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  min-height: 2rem;\n  width: 100%;\n  gap: 1rem;\n  color: var(--grey3);\n  font-size: 0.75rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_feedback__1ad8038e {\n  flex: 1;\n  margin-right: auto;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_feedback__1ad8038e.Dropdown_module_feedbackError__1ad8038e {\n  color: var(--error);\n  fill: var(--error);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_feedback__1ad8038e.Dropdown_module_feedbackSuccess__1ad8038e {\n  color: var(--success);\n  fill: var(--success);\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_count__1ad8038e {\n  text-align: right;\n  margin-left: auto;\n}\n.Dropdown_module_root__1ad8038e .Dropdown_module_bottom__1ad8038e .Dropdown_module_count__1ad8038e.Dropdown_module_exceeded__1ad8038e {\n  color: var(--error);\n}\n\n.Dropdown_module_body__1ad8038e {\n  display: none;\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  background: var(--white);\n  width: auto;\n  border: 0.063rem solid var(--grey5);\n  box-shadow: 0rem 0.5rem 1.25rem rgba(24, 24, 24, 0.08);\n  border-radius: 0.25rem;\n  padding: 1rem;\n  overflow-y: auto;\n  min-height: 4rem;\n  outline: none;\n}\n.Dropdown_module_body__1ad8038e .Dropdown_module_multiOptions__1ad8038e {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  list-style: none;\n}\n.Dropdown_module_body__1ad8038e .Dropdown_module_multiApply__1ad8038e {\n  margin-top: 0.5rem;\n}\n.Dropdown_module_body__1ad8038e.Dropdown_module_open__1ad8038e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n}";
-var modules_1b90f5ea = {"root":"Dropdown_module_root__1ad8038e","label":"Dropdown_module_label__1ad8038e","header":"Dropdown_module_header__1ad8038e","input":"Dropdown_module_input__1ad8038e","select":"Dropdown_module_select__1ad8038e","feedback-error":"Dropdown_module_feedbackError__1ad8038e","placeholder":"Dropdown_module_placeholder__1ad8038e","icon":"Dropdown_module_icon__1ad8038e","open":"Dropdown_module_open__1ad8038e","disabled":"Dropdown_module_disabled__1ad8038e","bottom":"Dropdown_module_bottom__1ad8038e","feedback":"Dropdown_module_feedback__1ad8038e","feedback-success":"Dropdown_module_feedbackSuccess__1ad8038e","count":"Dropdown_module_count__1ad8038e","exceeded":"Dropdown_module_exceeded__1ad8038e","body":"Dropdown_module_body__1ad8038e","multi-options":"Dropdown_module_multiOptions__1ad8038e","multi-apply":"Dropdown_module_multiApply__1ad8038e"};
-n(css$u,{});
-
-var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(props, inputRef) {
-  var _selectedOptions$map, _ref2, _selectedOptions$;
-  // eslint-disable-next-line object-curly-newline
-  var className = props.className,
-    popperClassName = props.popperClassName,
-    value = props.value,
-    onChange = props.onChange,
-    onBlur = props.onBlur,
-    children = props.children,
+var DatePicker = function DatePicker(props) {
+  var placeholder = props.placeholder,
     label = props.label,
-    placeholder = props.placeholder,
-    multi = props.multi,
+    range = props.range,
+    onApply = props.onApply,
+    disabledDates = props.disabledDates,
+    maxRange = props.maxRange,
+    value = props.value,
     disabled = props.disabled,
-    id = props.id,
-    name = props.name,
-    feedback = props.feedback,
-    formatter = props.formatter;
+    className = props.className,
+    disableDatesBefore = props.disableDatesBefore,
+    theme = props.theme,
+    onClear = props.onClear;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = React.useState(function () {
+      return {
+        dates: [],
+        unix: []
+      };
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    activeIndex = _useState4[0],
-    setActiveIndex = _useState4[1];
-  var _useState5 = React.useState(0),
+    selectedRange = _useState4[0],
+    setSelectedRange = _useState4[1];
+  var _useState5 = React.useState(function () {
+      return '';
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectedIndex = _useState6[0],
-    setSelectedIndex = _useState6[1];
-  var listItemsRef = React.useRef([]);
-  var multiOptionsRef = React.useRef(null);
-  var isControlled = value !== undefined;
-
-  // for uncontrolled input
-  var _useState7 = React.useState(value),
+    selectedDate = _useState6[0],
+    setSelectedDate = _useState6[1];
+  var _useState7 = React.useState(function () {
+      return '';
+    }),
     _useState8 = _slicedToArray(_useState7, 2),
-    uncontrolledValue = _useState8[0],
-    setUncontrolledValue = _useState8[1];
+    error = _useState8[0],
+    setError = _useState8[1];
+  var datePickerRef = React.useRef();
+  var sDate = fromUnixTime(value);
+  var displayValue = '';
+  if (!range && value) {
+    var _sDate$getMonth$toStr;
+    displayValue = " ".concat(sDate.getDate(), " ").concat(MONTHS[(_sDate$getMonth$toStr = sDate.getMonth().toString()) === null || _sDate$getMonth$toStr === void 0 ? void 0 : _sDate$getMonth$toStr.substring(0, 3)], " ").concat(sDate.getFullYear());
+  }
   var _useFloating = useFloating({
       open: open,
       onOpenChange: setOpen,
       whileElementsMounted: autoUpdate,
-      middleware: [offset(5), flip({
-        padding: 8
-      }), shift({
-        padding: 8
-      }), size({
+      middleware: [size({
         apply: function apply(_ref) {
           var rects = _ref.rects,
             availableHeight = _ref.availableHeight,
@@ -34774,6 +35627,10 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(props, inputRef)
           });
         },
         padding: 8
+      }), offset(5), flip({
+        padding: 8
+      }), shift({
+        padding: 8
       })]
     }),
     x = _useFloating.x,
@@ -34782,406 +35639,356 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(props, inputRef)
     floating = _useFloating.floating,
     strategy = _useFloating.strategy,
     context = _useFloating.context;
+  useOutsideClickListener(floating, function () {
+    return setOpen(false);
+  });
   var _useInteractions = useInteractions([useClick(context, {
       enabled: !disabled
-    }), useRole(context, {
-      role: 'listbox'
-    }), useListNavigation(context, {
-      listRef: listItemsRef,
-      activeIndex: activeIndex,
-      selectedIndex: selectedIndex,
-      onNavigate: setActiveIndex
     }), useDismiss(context)]),
     getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps,
-    getItemProps = _useInteractions.getItemProps;
-  var onSelect = function onSelect(child, selected) {
-    return function (event) {
-      var _itemValue$toString;
-      if (event.currentTarget.getAttribute('data-elem') !== 'dropdown-item') {
-        return;
-      }
-      var itemValue = child.props.value;
-      var itemValueString = itemValue === null || itemValue === void 0 ? void 0 : (_itemValue$toString = itemValue.toString) === null || _itemValue$toString === void 0 ? void 0 : _itemValue$toString.call(itemValue);
-      var index = event.currentTarget.getAttribute('data-index');
-
-      // to support form libraries which require name and value on the event
-      var nativeEvent = event.nativeEvent || event;
-      var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-      Object.defineProperty(clonedEvent, 'target', {
-        writable: true,
-        value: {
-          value: itemValueString,
-          name: name
-        }
-      });
-
-      // if (elem === 'dropdown-item') {
-      setSelectedIndex(parseInt(index, 10));
-      if (multi) {
-        // eslint-disable-next-line no-lonely-if
-        if (selected === true) {
-          setUncontrolledValue(uncontrolledValue.filter(function (val) {
-            return val !== itemValueString;
-          }));
-        } else {
-          setUncontrolledValue([].concat(_toConsumableArray(uncontrolledValue !== null && uncontrolledValue !== void 0 ? uncontrolledValue : []), [itemValueString]));
-        }
-        setActiveIndex(parseInt(index, 10));
-      } else {
-        if (isControlled) {
-          onChange(clonedEvent, itemValueString.toString());
-        } else {
-          setUncontrolledValue(itemValueString.toString());
-        }
-        setActiveIndex(null);
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var apply = function apply() {
+    if (selectedRange.dates.length === 2) {
+      if (!isMaxRangeExceeded({
+        maxRange: maxRange,
+        selectedRange: selectedRange
+      })) {
+        setError('Invalid range of dates');
         setOpen(false);
+        return;
       }
-      // }
-    };
+      setError('');
+      onApply(selectedRange.unix);
+      setOpen(false);
+    } else {
+      onApply(selectedDate.unix);
+      setOpen(false);
+    }
   };
-
-  var onNavigate = function onNavigate(child, selected) {
-    return function (event) {
-      var selectKey = [' ', 'Spacebar', 'Enter'].includes(event.key);
-      if (selectKey) {
-        event.stopPropagation();
-        onSelect(child, selected)(event);
-      }
-    };
+  var calenderProps = {
+    selectedDate: selectedDate,
+    setSelectedDate: setSelectedDate,
+    selectedRange: selectedRange,
+    setSelectedRange: setSelectedRange,
+    range: range,
+    onApply: function onApply() {
+      apply();
+    },
+    disabledDates: disabledDates,
+    disableDatesBefore: disableDatesBefore,
+    value: value
   };
-  React.useImperativeHandle(inputRef, function () {
-    return {
-      value: function value() {
-        var _inputRef$current$val, _inputRef$current$val2, _inputRef$current$val3, _inputValue$;
-        var inputValue = (_inputRef$current$val = (_inputRef$current$val2 = inputRef.current.value) === null || _inputRef$current$val2 === void 0 ? void 0 : (_inputRef$current$val3 = _inputRef$current$val2.split) === null || _inputRef$current$val3 === void 0 ? void 0 : _inputRef$current$val3.call(_inputRef$current$val2, ', ')) !== null && _inputRef$current$val !== void 0 ? _inputRef$current$val : [];
-        if (multi) {
-          return inputRef;
-        }
-        return (_inputValue$ = inputValue === null || inputValue === void 0 ? void 0 : inputValue[0]) !== null && _inputValue$ !== void 0 ? _inputValue$ : null;
-      }
-    };
-  }, []);
-  var childrenArray = React.Children.toArray(children);
-  var selectedOptions = React.useMemo(function () {
-    var inputValue = uncontrolledValue;
-    if (isControlled && !multi) {
-      inputValue = value;
-    }
-    var options = [];
-    if (inputValue != null && inputValue !== '') {
-      childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray.forEach(function (child) {
-        var _inputValue$indexOf, _inputValue, _inputValue$indexOf2, _child$props, _child$props$value, _child$props$value$to, _inputValue2, _child$props2, _child$props2$value, _child$props2$value$t;
-        if (multi && ((_inputValue$indexOf = (_inputValue = inputValue) === null || _inputValue === void 0 ? void 0 : (_inputValue$indexOf2 = _inputValue.indexOf) === null || _inputValue$indexOf2 === void 0 ? void 0 : _inputValue$indexOf2.call(_inputValue, child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$value = _child$props.value) === null || _child$props$value === void 0 ? void 0 : (_child$props$value$to = _child$props$value.toString) === null || _child$props$value$to === void 0 ? void 0 : _child$props$value$to.call(_child$props$value))) !== null && _inputValue$indexOf !== void 0 ? _inputValue$indexOf : -1) !== -1 || !multi && ((_inputValue2 = inputValue) === null || _inputValue2 === void 0 ? void 0 : _inputValue2.toString()) === (child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : (_child$props2$value = _child$props2.value) === null || _child$props2$value === void 0 ? void 0 : (_child$props2$value$t = _child$props2$value.toString) === null || _child$props2$value$t === void 0 ? void 0 : _child$props2$value$t.call(_child$props2$value))) {
-          var _child$props3, _child$props4, _child$props4$value, _child$props4$value$t;
-          options.push({
-            title: child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.title,
-            value: child === null || child === void 0 ? void 0 : (_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : (_child$props4$value = _child$props4.value) === null || _child$props4$value === void 0 ? void 0 : (_child$props4$value$t = _child$props4$value.toString) === null || _child$props4$value$t === void 0 ? void 0 : _child$props4$value$t.call(_child$props4$value)
-          });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classes(modules_5b831cd1.root, className),
+    ref: datePickerRef,
+    children: [label && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: classes(modules_5b831cd1.label, modules_5b831cd1[theme]),
+      children: label
+    }), /*#__PURE__*/jsxRuntime.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 : '', modules_5b831cd1[theme])
+    }, getReferenceProps()), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Calender$1, {
+          className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme])
+        }), !displayValue && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: classes(modules_5b831cd1.placeholder, modules_5b831cd1[theme]),
+          children: placeholder
+        }), displayValue && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classes(modules_5b831cd1.value, modules_5b831cd1[theme]),
+          children: /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: displayValue
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("input", {
+        className: modules_5b831cd1.input,
+        value: displayValue
+      }), value ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        onClick: function onClick(event) {
+          event.stopPropagation();
+          onClear();
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
+          className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme])
+        })
+      }) : /*#__PURE__*/jsxRuntime.jsx(Chevron, {
+        className: classes(modules_5b831cd1.icon, modules_5b831cd1[theme]),
+        position: open ? 'bottom' : 'top'
+      })]
+    })), error && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: modules_5b831cd1['error-text'],
+      children: error
+    }), /*#__PURE__*/jsxRuntime.jsx(Popper, {
+      open: open,
+      wrapperid: "datePicker-popper",
+      children: open && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
+        role: 'group',
+        ref: floating,
+        onKeyDown: function onKeyDown(event) {
+          if (event.key === 'Tab') {
+            setOpen(false);
+          }
+        },
+        style: {
+          position: strategy,
+          top: y !== null && y !== void 0 ? y : 0,
+          left: x !== null && x !== void 0 ? x : 0
         }
-      });
-    }
-    return options;
-  }, [value, uncontrolledValue, multi]);
-  var items = childrenArray.map(function (child, index) {
-    var _child$props6;
-    var selected = false;
-    if (selectedOptions.findIndex(function (option) {
-      var _child$props5, _child$props5$value, _child$props5$value$t;
-      return option.value === (child === null || child === void 0 ? void 0 : (_child$props5 = child.props) === null || _child$props5 === void 0 ? void 0 : (_child$props5$value = _child$props5.value) === null || _child$props5$value === void 0 ? void 0 : (_child$props5$value$t = _child$props5$value.toString) === null || _child$props5$value$t === void 0 ? void 0 : _child$props5$value$t.call(_child$props5$value));
-    }) !== -1) {
-      selected = true;
-    }
-    return /*#__PURE__*/React.cloneElement(child, _objectSpread2({}, getItemProps({
-      key: child === null || child === void 0 ? void 0 : (_child$props6 = child.props) === null || _child$props6 === void 0 ? void 0 : _child$props6.value,
-      onKeyDown: onNavigate(child, selected),
-      onClick: onSelect(child, selected),
-      onMouseEnter: function onMouseEnter() {
-        setActiveIndex(index);
-      },
-      dataAttrs: {
-        'data-index': index
-      },
-      selected: selected,
-      tabIndex: activeIndex === index ? 0 : -1,
-      ref: function ref(node) {
-        listItemsRef.current[index] = node;
-      }
-    })));
+      })), {}, {
+        className: classes(modules_5b831cd1.popper, open ? modules_5b831cd1.open : ''),
+        children: /*#__PURE__*/jsxRuntime.jsx(Calender, _objectSpread2({}, calenderProps))
+      }))
+    })]
   });
-  var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    pointer = _useState10[0],
-    setPointer = _useState10[1];
-  if (!open && pointer) {
-    setPointer(false);
-  }
-  React.useLayoutEffect(function () {
-    if (open && activeIndex != null && !pointer) {
-      requestAnimationFrame(function () {
-        var _listItemsRef$current;
-        (_listItemsRef$current = listItemsRef.current[activeIndex]) === null || _listItemsRef$current === void 0 ? void 0 : _listItemsRef$current.scrollIntoView({
-          block: 'nearest'
-        });
+};
+DatePicker.propTypes = {
+  placeholder: propTypes$1.exports.string,
+  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),
+  maxRange: propTypes$1.exports.shape({
+    value: propTypes$1.exports.number,
+    type: propTypes$1.exports.string
+  }),
+  className: propTypes$1.exports.string,
+  disableDatesBefore: propTypes$1.exports.arrayOf(propTypes$1.exports.string),
+  theme: propTypes$1.exports.string
+};
+DatePicker.defaultProps = {
+  placeholder: '',
+  label: '',
+  range: false,
+  onApply: null,
+  disabled: false,
+  disabledDates: [],
+  maxRange: null,
+  value: '',
+  className: '',
+  disableDatesBefore: [],
+  theme: 'dark',
+  onClear: function onClear() {}
+};
+
+var css$u = ".HierarchyItem_module_root__c993ecd0 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  flex: 1;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 {\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: 0rem 0.5rem;\n  cursor: pointer;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1], .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1] .HierarchyItem_module_expand__c993ecd0, .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] .HierarchyItem_module_expand__c993ecd0 {\n  padding: 0;\n  height: auto;\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component1] .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0, .HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component3] .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0 {\n  transform: rotate(-90deg);\n  width: 1rem;\n  height: 1rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component2] {\n  flex: 1 1 auto;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0 > [data-elem=component2] .HierarchyItem_module_title__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: 100%;\n  height: auto;\n  padding: 0.25rem 0rem;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover {\n  background: var(--background);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_icon__c993ecd0,\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_title__c993ecd0,\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_header__c993ecd0:hover .HierarchyItem_module_title__c993ecd0 svg {\n  color: var(--highlight);\n  fill: var(--highlight);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 {\n  display: none;\n  flex: 1 0 auto;\n  padding: 0px 0rem 0px 0.25rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] {\n  flex: 0 0 1.6rem;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] .HierarchyItem_module_tail__c993ecd0 {\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__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component1] .HierarchyItem_module_tail__c993ecd0::after {\n  content: \"\";\n  display: block;\n  margin: auto;\n  width: 1px;\n  flex: 1;\n  background: var(--grey1);\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component2] {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__c993ecd0 .HierarchyItem_module_body__c993ecd0 > [data-elem=component2] .HierarchyItem_module_children__c993ecd0 {\n  flex: 1 0 auto;\n}\n.HierarchyItem_module_root__c993ecd0.HierarchyItem_module_open__c993ecd0 > .HierarchyItem_module_header__c993ecd0 .HierarchyItem_module_expand__c993ecd0 .HierarchyItem_module_icon__c993ecd0 {\n  transform: none;\n}\n.HierarchyItem_module_root__c993ecd0.HierarchyItem_module_open__c993ecd0 > .HierarchyItem_module_body__c993ecd0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.25rem;\n  height: auto;\n}";
+var modules_6d03d164 = {"root":"HierarchyItem_module_root__c993ecd0","header":"HierarchyItem_module_header__c993ecd0","expand":"HierarchyItem_module_expand__c993ecd0","icon":"HierarchyItem_module_icon__c993ecd0","title":"HierarchyItem_module_title__c993ecd0","body":"HierarchyItem_module_body__c993ecd0","tail":"HierarchyItem_module_tail__c993ecd0","children":"HierarchyItem_module_children__c993ecd0","open":"HierarchyItem_module_open__c993ecd0"};
+n(css$u,{});
+
+var HierarchyItem = function HierarchyItem(props) {
+  var defaultOpen = props.defaultOpen,
+    iconPlacement = props.iconPlacement,
+    title = props.title,
+    children = props.children,
+    _onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick;
+  var _useState = React.useState(defaultOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var icon = /*#__PURE__*/jsxRuntime.jsx(Button, {
+    className: modules_6d03d164.expand,
+    size: "auto",
+    variant: "text",
+    color: "default",
+    onClick: function onClick() {
+      setOpen(function (prevState) {
+        var newState = !prevState;
+        _onClick === null || _onClick === void 0 ? void 0 : _onClick(newState);
+        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(newState);
+        return newState;
       });
-    }
-  }, [open, activeIndex, pointer]);
-  React.useEffect(function () {
-    if (multi) {
-      setUncontrolledValue(value);
-    }
-  }, [open, multi, value]);
-  var onSelectAll = function onSelectAll(event, selected) {
-    // to support form libraries which require name and value on the event
-    var nativeEvent = event.nativeEvent || event;
-    var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-    var itemValue = [];
-    if (selected) {
-      itemValue = childrenArray.map(function (child) {
-        var _child$props7, _child$props7$value, _child$props7$value$t;
-        return child === null || child === void 0 ? void 0 : (_child$props7 = child.props) === null || _child$props7 === void 0 ? void 0 : (_child$props7$value = _child$props7.value) === null || _child$props7$value === void 0 ? void 0 : (_child$props7$value$t = _child$props7$value.toString) === null || _child$props7$value$t === void 0 ? void 0 : _child$props7$value$t.call(_child$props7$value);
+    },
+    leftComponent: function leftComponent() {
+      return /*#__PURE__*/jsxRuntime.jsx(Caret, {
+        className: modules_6d03d164.icon
       });
     }
-    Object.defineProperty(clonedEvent, 'target', {
-      writable: true,
-      value: {
-        value: itemValue,
-        name: name
-      }
-    });
-
-    // eslint-disable-next-line no-lonely-if
-    if (selected === true) {
-      setUncontrolledValue(itemValue);
-    } else {
-      setUncontrolledValue(itemValue);
-    }
-    setActiveIndex(0);
-  };
-  var onApply = function onApply(event) {
-    var nativeEvent = event.nativeEvent || event;
-    var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
-    Object.defineProperty(clonedEvent, 'target', {
-      writable: true,
-      value: {
-        value: uncontrolledValue,
-        name: name
-      }
-    });
-    onChange(event, uncontrolledValue);
-  };
+  });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classes(className, modules_1b90f5ea.root, open ? modules_1b90f5ea.open : '', disabled ? modules_1b90f5ea.disabled : ''),
-    children: [label && /*#__PURE__*/jsxRuntime.jsx("div", {
-      "data-elem": "label",
-      className: modules_1b90f5ea.label,
-      children: /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: label
-      })
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({
-      "data-elem": "header",
-      className: modules_1b90f5ea.header,
-      ref: reference
-    }, getReferenceProps()), {}, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-        id: id,
-        name: name,
-        ref: inputRef,
-        disabled: disabled,
-        tabIndex: 0,
-        className: modules_1b90f5ea.input,
-        onKeyDown: function onKeyDown(event) {
-          var validKey = [' ', 'Spacebar', 'Enter'].includes(event.key);
-          if (validKey) {
-            setOpen(true);
+    className: classes(modules_6d03d164.root, open ? modules_6d03d164.open : ''),
+    children: [/*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+      flexible: true,
+      size: "auto",
+      className: modules_6d03d164.header,
+      component1: iconPlacement === 'left' && icon,
+      component2: /*#__PURE__*/jsxRuntime.jsx(Button, {
+        className: modules_6d03d164.title,
+        flexible: true,
+        size: "auto",
+        variant: "text",
+        color: "default",
+        onClick: function onClick(event) {
+          var detail = event.detail;
+
+          // single click
+          if (detail === 1) {
+            _onClick === null || _onClick === void 0 ? void 0 : _onClick(open);
+            // double click
+          } else if (detail === 2) {
+            setOpen(function (prevState) {
+              var newState = !prevState;
+              onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(newState);
+              return newState;
+            });
           }
         },
-        onBlur: onBlur,
-        value: selectedOptions === null || selectedOptions === void 0 ? void 0 : (_selectedOptions$map = selectedOptions.map(function (option) {
-          return option === null || option === void 0 ? void 0 : option.value;
-        })) === null || _selectedOptions$map === void 0 ? void 0 : _selectedOptions$map.join(', ')
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        "data-elem": "select",
-        role: "button",
-        className: classes(modules_1b90f5ea.select, feedback != null ? modules_1b90f5ea["feedback-".concat(feedback === null || feedback === void 0 ? void 0 : feedback.type)] : ''),
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          "data-elem": "placeholder",
-          className: modules_1b90f5ea.placeholder,
-          children: (_ref2 = (selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) > 1 ? formatter(selectedOptions.length) : selectedOptions === null || selectedOptions === void 0 ? void 0 : (_selectedOptions$ = selectedOptions[0]) === null || _selectedOptions$ === void 0 ? void 0 : _selectedOptions$.title) !== null && _ref2 !== void 0 ? _ref2 : placeholder
-        }), /*#__PURE__*/jsxRuntime.jsx(Caret, {
-          "data-elem": "icon",
-          className: classes(modules_1b90f5ea.icon, modules_1b90f5ea['drop-icon'])
-        })]
-      })]
-    })), /*#__PURE__*/jsxRuntime.jsx(Popper, {
-      open: open,
-      wrapperId: "dropdown-popper",
-      children: open && /*#__PURE__*/jsxRuntime.jsx(FloatingFocusManager, {
-        context: context,
-        initialFocus: -1,
-        modal: false,
-        children: /*#__PURE__*/jsxRuntime.jsxs("ul", _objectSpread2(_objectSpread2({}, getFloatingProps({
-          'data-elem': 'body',
-          role: 'group',
-          ref: floating,
-          onKeyDown: function onKeyDown(event) {
-            setPointer(false);
-            if (event.key === 'Tab' && !multi) {
-              setOpen(false);
-            }
-          },
-          onPointerMove: function onPointerMove() {
-            setPointer(true);
-          },
-          style: {
-            position: strategy,
-            top: y !== null && y !== void 0 ? y : 0,
-            left: x !== null && x !== void 0 ? x : 0
-          },
-          className: classes(modules_1b90f5ea.body, popperClassName, open ? modules_1b90f5ea.open : '')
-        })), {}, {
-          children: [multi && /*#__PURE__*/jsxRuntime.jsxs("li", {
-            ref: multiOptionsRef,
-            className: modules_1b90f5ea['multi-options'],
-            tabIndex: -1,
-            children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
-              label: "Select All",
-              position: "left",
-              checked: selectedOptions.length === childrenArray.length,
-              onChange: onSelectAll
-            }), ' ', /*#__PURE__*/jsxRuntime.jsx(Button, {
-              blurOnClick: false,
-              variant: "text",
-              title: "Clear",
-              size: "auto",
-              color: "danger",
-              onClick: function onClick(event) {
-                var _multiOptionsRef$curr;
-                multiOptionsRef === null || multiOptionsRef === void 0 ? void 0 : (_multiOptionsRef$curr = multiOptionsRef.current) === null || _multiOptionsRef$curr === void 0 ? void 0 : _multiOptionsRef$curr.focus();
-                onSelectAll(event, false);
-              }
-            })]
-          }), items, multi && /*#__PURE__*/jsxRuntime.jsx(Button, {
-            className: modules_1b90f5ea['multi-apply'],
-            title: "Apply",
-            size: "auto",
-            onClick: onApply
-          })]
-        }))
-      })
-    }), feedback != null && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: modules_1b90f5ea.bottom,
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        "data-elem": "feedback",
-        className: classes(modules_1b90f5ea.feedback, modules_1b90f5ea["feedback-".concat(feedback.type)]),
-        children: feedback.text
+        leftComponent: function leftComponent() {
+          return title;
+        }
+      }),
+      component3: iconPlacement === 'right' && icon
+    }), /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+      size: "auto",
+      className: modules_6d03d164.body,
+      component1: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: modules_6d03d164.tail
+      }),
+      component2: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: modules_6d03d164.children,
+        children: children
       })
     })]
   });
-});
-Dropdown.propTypes = {
-  popperClassName: propTypes$1.exports.string,
-  className: propTypes$1.exports.string,
-  disabled: propTypes$1.exports.bool,
-  label: propTypes$1.exports.string,
-  value: propTypes$1.exports.oneOfType([propTypes$1.exports.string, propTypes$1.exports.arrayOf(propTypes$1.exports.string)]),
-  placeholder: propTypes$1.exports.string,
-  // search: PropTypes.bool,
-  // max: PropTypes.number,
-  multi: propTypes$1.exports.bool,
-  onChange: propTypes$1.exports.func,
-  onBlur: propTypes$1.exports.func,
-  feedback: propTypes$1.exports.shape({
-    text: propTypes$1.exports.node,
-    type: propTypes$1.exports.oneOf(['error', 'success', 'default'])
-  }),
-  formatter: propTypes$1.exports.func
 };
-Dropdown.defaultProps = {
-  popperClassName: '',
-  className: '',
-  disabled: false,
-  label: null,
-  value: undefined,
-  placeholder: 'Select an option',
-  // search: false,
-  // max: null,
-  multi: false,
-  onChange: null,
-  onBlur: null,
-  feedback: null,
-  formatter: function formatter(totalSelected) {
-    return "".concat(totalSelected, " options selected");
-  }
+HierarchyItem.propTypes = {
+  iconPlacement: propTypes$1.exports.oneOf(['left', 'right', 'none']),
+  title: propTypes$1.exports.node,
+  defaultOpen: propTypes$1.exports.bool,
+  onClick: propTypes$1.exports.func
+};
+HierarchyItem.defaultProps = {
+  iconPlacement: 'left',
+  title: null,
+  defaultOpen: false,
+  onClick: function onClick() {}
 };
 
-var css$t = ".DropdownItem_module_root__61492174 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.75rem;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  color: var(--grey);\n  outline: none;\n}\n.DropdownItem_module_root__61492174 > .DropdownItem_module_input__61492174 {\n  cursor: pointer;\n}\n.DropdownItem_module_root__61492174:focus {\n  background: var(--grey6);\n}\n.DropdownItem_module_root__61492174.DropdownItem_module_selected__61492174 {\n  background: var(--info-bg);\n}";
-var modules_bf949acd = {"root":"DropdownItem_module_root__61492174","input":"DropdownItem_module_input__61492174","selected":"DropdownItem_module_selected__61492174"};
+var css$t = ".HierarchyBrowser_module_root__649d3da2 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  width: 20rem;\n  position: relative;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_header__649d3da2 {\n  padding: 0.5rem;\n  background: var(--dark-grey);\n  color: var(--white);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_body__649d3da2 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  overflow: auto;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_item__649d3da2 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.25rem;\n}\n.HierarchyBrowser_module_root__649d3da2 .HierarchyBrowser_module_item__649d3da2 .HierarchyBrowser_module_itemIcon__649d3da2 {\n  width: 1rem;\n}\n.HierarchyBrowser_module_root__649d3da2::after {\n  position: absolute;\n  right: 0;\n  content: \"\";\n  width: 1px;\n  height: 100%;\n  background: var(--grey4);\n}\n.HierarchyBrowser_module_root__649d3da2.HierarchyBrowser_module_resizable__649d3da2:hover::after {\n  width: 3px;\n  cursor: col-resize;\n}";
+var modules_5e29d515 = {"root":"HierarchyBrowser_module_root__649d3da2","header":"HierarchyBrowser_module_header__649d3da2","body":"HierarchyBrowser_module_body__649d3da2","item":"HierarchyBrowser_module_item__649d3da2","item-icon":"HierarchyBrowser_module_itemIcon__649d3da2","resizable":"HierarchyBrowser_module_resizable__649d3da2"};
 n(css$t,{});
 
-var DropdownItem = /*#__PURE__*/React.forwardRef(function DropdownItem(props, ref) {
-  // eslint-disable-next-line object-curly-newline
-  var title = props.title,
-    value = props.value,
-    variant = props.variant,
-    selected = props.selected,
-    onKeyDown = props.onKeyDown,
-    onMouseEnter = props.onMouseEnter,
-    onClick = props.onClick,
-    dataAttrs = props.dataAttrs,
-    className = props.className,
-    tabIndex = props.tabIndex;
-  var action = null;
-  switch (variant) {
-    case 'checkbox':
-      action = /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
-        className: modules_bf949acd.input,
-        checked: selected,
-        disabled: true
-      });
-      break;
-    case 'radio':
-      action = /*#__PURE__*/jsxRuntime.jsx(Radio, {
-        className: modules_bf949acd.input,
-        checked: selected,
-        disabled: true
-      });
+var Title = function Title(props) {
+  var item = props.item;
+  var Icon = null;
+  switch (item.id) {
+    case 'database':
+    case 'schema':
+    case 'object':
+      Icon = Server;
       break;
   }
-  return /*#__PURE__*/jsxRuntime.jsxs("li", _objectSpread2(_objectSpread2({
-    ref: ref,
-    className: classes(className, modules_bf949acd.root, selected ? modules_bf949acd.selected : ''),
-    "data-elem": "dropdown-item",
-    "data-variant": variant,
-    "data-value": value,
-    "data-selected": selected,
-    onClick: onClick,
-    onMouseEnter: onMouseEnter
-  }, _objectSpread2({}, dataAttrs)), {}, {
-    tabIndex: tabIndex,
-    role: "option",
-    "aria-selected": selected,
-    onKeyDown: onKeyDown,
-    children: [action, /*#__PURE__*/jsxRuntime.jsx("span", {
-      "data-elem": "title",
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    className: modules_5e29d515.item,
+    children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      className: modules_5e29d515['item-icon']
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: modules_5e29d515['item-title'],
+      children: item === null || item === void 0 ? void 0 : item.title
+    }), (item === null || item === void 0 ? void 0 : item.count) && /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: modules_5e29d515['item-count'],
+      children: ["(", item === null || item === void 0 ? void 0 : item.count, ")"]
+    })]
+  });
+};
+var HierarchyBrowser = function HierarchyBrowser(props) {
+  var className = props.className,
+    metadata = props.metadata,
+    onItemClick = props.onItemClick,
+    onItemDoubleClick = props.onItemDoubleClick,
+    minWidth = props.minWidth,
+    maxWidth = props.maxWidth,
+    borderSize = props.borderSize,
+    resizable = props.resizable,
+    setItemProps = props.setItemProps,
+    title = props.title;
+  var browserRef = React.useRef(null);
+  useResize({
+    ref: browserRef,
+    styles: {
+      minWidth: minWidth,
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : document.documentElement.getBoundingClientRect().width,
+      borderSize: borderSize
+    },
+    enabled: resizable
+  });
+  var handleItemClick = function handleItemClick(item, pathString) {
+    return function (open) {
+      onItemClick(item, pathString, open);
+    };
+  };
+  var handleItemDoubleClick = function handleItemDoubleClick(item, pathString) {
+    return function (open) {
+      onItemDoubleClick(item, pathString, open);
+    };
+  };
+  var renderTree = function renderTree(data) {
+    var _data$list$map, _data$list, _data$list$map2;
+    var pathString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (data == null) {
+      return null;
+    }
+    var hasChildren = (data === null || data === void 0 ? void 0 : data.list) === true || Array.isArray(data === null || data === void 0 ? void 0 : data.list);
+    return /*#__PURE__*/jsxRuntime.jsx(HierarchyItem, _objectSpread2(_objectSpread2({
+      title: /*#__PURE__*/jsxRuntime.jsx(Title, {
+        item: data
+      }),
+      iconPlacement: hasChildren ? 'left' : 'none',
+      onClick: handleItemClick(data, pathString),
+      onDoubleClick: handleItemDoubleClick(data, pathString)
+    }, setItemProps(data, pathString)), {}, {
+      children: hasChildren && ((_data$list$map = (_data$list = data.list) === null || _data$list === void 0 ? void 0 : (_data$list$map2 = _data$list.map) === null || _data$list$map2 === void 0 ? void 0 : _data$list$map2.call(_data$list, function (item, idx) {
+        return renderTree(item, "".concat(pathString).concat(pathString.length > 0 ? '.' : '', "list[").concat(idx, "]"));
+      })) !== null && _data$list$map !== void 0 ? _data$list$map : [])
+    }));
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: browserRef,
+    className: classes(modules_5e29d515.root, className, resizable ? modules_5e29d515.resizable : ''),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: modules_5e29d515.header,
+      "data-elem": "header",
       children: title
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: modules_5e29d515.body,
+      "data-elem": "body",
+      children: renderTree(metadata)
     })]
-  }));
-});
-DropdownItem.propTypes = {
+  });
+};
+HierarchyBrowser.propTypes = {
   className: propTypes$1.exports.string,
-  title: propTypes$1.exports.node,
-  variant: propTypes$1.exports.oneOf(['default', 'checkbox', 'radio']),
-  selected: propTypes$1.exports.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  dataAttrs: propTypes$1.exports.object
+  metadata: propTypes$1.exports.objectOf({
+    title: propTypes$1.exports.string,
+    id: propTypes$1.exports.string,
+    count: propTypes$1.exports.number,
+    list: propTypes$1.exports.array
+  }),
+  onItemClick: propTypes$1.exports.func,
+  onItemDoubleClick: propTypes$1.exports.func,
+  borderSize: propTypes$1.exports.number,
+  minWidth: propTypes$1.exports.number,
+  maxWidth: propTypes$1.exports.number,
+  resizable: propTypes$1.exports.bool,
+  setItemProps: propTypes$1.exports.func,
+  title: propTypes$1.exports.string
 };
-DropdownItem.defaultProps = {
+HierarchyBrowser.defaultProps = {
   className: '',
-  title: '',
-  variant: 'default',
-  dataAttrs: {},
-  selected: false
+  metadata: {},
+  onItemClick: function onItemClick() {},
+  onItemDoubleClick: function onItemDoubleClick() {},
+  borderSize: 4,
+  minWidth: 220,
+  maxWidth: null,
+  resizable: false,
+  setItemProps: function setItemProps() {
+    return {};
+  },
+  title: 'Browser'
 };
 
 var css$s = ".BaseModal_module_root__2dd7477e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  max-height: 100%;\n  width: 50%;\n  position: fixed;\n  background: #ffffff;\n  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.13);\n  border-radius: 5px;\n  outline: none;\n}\n.BaseModal_module_root__2dd7477e .BaseModal_module_body__2dd7477e {\n  overflow-y: scroll;\n  padding: 0 15px;\n}\n.BaseModal_module_root__2dd7477e .BaseModal_module_header__2dd7477e,\n.BaseModal_module_root__2dd7477e .BaseModal_module_footer__2dd7477e {\n  padding: 1rem;\n}\n.BaseModal_module_root__2dd7477e .BaseModal_module_header__2dd7477e {\n  font-weight: 500;\n  font-size: 1.375rem;\n}\n.BaseModal_module_root__2dd7477e .BaseModal_module_footer__2dd7477e {\n  margin-top: auto;\n}\n.BaseModal_module_root__2dd7477e .BaseModal_module_close__2dd7477e {\n  position: absolute;\n  right: 0.5rem;\n  top: 0.5rem;\n}\n.BaseModal_module_root__2dd7477e .BaseModal_module_close__2dd7477e .BaseModal_module_icon__2dd7477e {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--black);\n}";
@@ -36211,14 +37018,15 @@ var TableChipsSkeleton = function TableChipsSkeleton() {
   });
 };
 
-var css$e = ".TableChips_module_root__ed8402e9[data-elem=base-cell] {\n  padding: 0.5rem 1.5rem;\n  width: 100%;\n  background: var(--grey8);\n  border-radius: 0.25rem 0.25rem 0 0;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__ed8402e9 {\n  height: 2rem;\n  width: 2rem;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__ed8402e9 [data-elem=component1] .TableChips_module_icon__ed8402e9 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--white);\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component2] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  overflow-x: auto;\n  flex: 1;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component2]::-webkit-scrollbar {\n  display: none;\n}\n.TableChips_module_root__ed8402e9[data-elem=base-cell] > [data-elem=component2] .TableChips_module_chip__ed8402e9 .TableChips_module_chipIcon__ed8402e9 {\n  width: 1rem;\n  height: 1rem;\n}";
-var modules_016d9b3e = {"root":"TableChips_module_root__ed8402e9","back":"TableChips_module_back__ed8402e9","icon":"TableChips_module_icon__ed8402e9","chip":"TableChips_module_chip__ed8402e9","chip-icon":"TableChips_module_chipIcon__ed8402e9"};
+var css$e = ".TableChips_module_root__dfc60d0e[data-elem=base-cell] {\n  padding: 0.5rem 1.5rem;\n  width: 100%;\n  background: var(--grey8);\n  border-radius: 0.25rem 0.25rem 0 0;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__dfc60d0e {\n  height: 2rem;\n  width: 2rem;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component1] .TableChips_module_back__dfc60d0e [data-elem=component1] .TableChips_module_icon__dfc60d0e {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--white);\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component2] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  overflow-x: auto;\n  flex: 1;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component2]::-webkit-scrollbar {\n  display: none;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component2] .TableChips_module_chip__dfc60d0e .TableChips_module_chipIcon__dfc60d0e {\n  width: 1rem;\n  height: 1rem;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component3] {\n  height: 100%;\n}\n.TableChips_module_root__dfc60d0e[data-elem=base-cell] > [data-elem=component3] .TableChips_module_clear__dfc60d0e {\n  height: 100%;\n}";
+var modules_016d9b3e = {"root":"TableChips_module_root__dfc60d0e","back":"TableChips_module_back__dfc60d0e","icon":"TableChips_module_icon__dfc60d0e","chip":"TableChips_module_chip__dfc60d0e","chip-icon":"TableChips_module_chipIcon__dfc60d0e","clear":"TableChips_module_clear__dfc60d0e"};
 n(css$e,{});
 
 var TableChips = function TableChips(props) {
   var _chips$filter;
   var showBack = props.showBack,
     onBack = props.onBack,
+    onClear = props.onClear,
     chips = props.chips,
     className = props.className,
     style = props.style,
@@ -36266,7 +37074,20 @@ var TableChips = function TableChips(props) {
         },
         onClick: onBack
       }),
-      component2: (chipsDOM === null || chipsDOM === void 0 ? void 0 : chipsDOM.length) > 0 ? chipsDOM : null
+      component2: (chipsDOM === null || chipsDOM === void 0 ? void 0 : chipsDOM.length) > 0 ? chipsDOM : null,
+      component3: (chipsDOM === null || chipsDOM === void 0 ? void 0 : chipsDOM.length) > 0 ? /*#__PURE__*/jsxRuntime.jsx(Button, {
+        size: "auto",
+        variant: "outlined",
+        color: "danger",
+        title: "Clear All",
+        className: modules_016d9b3e.clear,
+        leftComponent: function leftComponent() {
+          return /*#__PURE__*/jsxRuntime.jsx(Trash, {
+            className: modules_016d9b3e.icon
+          });
+        },
+        onClick: onClear
+      }) : ''
     });
   }
   return null;
@@ -36277,6 +37098,7 @@ TableChips.propTypes = {
   style: propTypes$1.exports.object,
   showBack: propTypes$1.exports.bool,
   onBack: propTypes$1.exports.func,
+  onClear: propTypes$1.exports.func,
   chips: propTypes$1.exports.arrayOf(propTypes$1.exports.shape({
     key: propTypes$1.exports.string,
     icon: propTypes$1.exports.func,
@@ -36292,6 +37114,7 @@ TableChips.defaultProps = {
   style: {},
   showBack: false,
   onBack: function onBack() {},
+  onClear: function onClear() {},
   chips: [],
   loading: null
 };
@@ -36393,8 +37216,8 @@ Popover.defaultProps = {
   onClose: function onClose() {}
 };
 
-var css$c = ".Columns_module_popover__680b100e {\n  height: 100%;\n}\n\n.Columns_module_root__680b100e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 1rem;\n  position: relative;\n  height: 100%;\n  max-width: 100%;\n}\n.Columns_module_root__680b100e .Columns_module_header__680b100e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 1.5rem;\n  width: 100%;\n  padding: 0;\n  height: auto;\n}\n.Columns_module_root__680b100e .Columns_module_header__680b100e > [data-elem=component1] {\n  font-weight: 500;\n}\n.Columns_module_root__680b100e .Columns_module_header__680b100e > [data-elem=component2] .Columns_module_search__680b100e {\n  width: 100%;\n}\n.Columns_module_root__680b100e .Columns_module_close__680b100e {\n  position: absolute;\n  top: -1rem;\n  right: -1rem;\n}\n.Columns_module_root__680b100e .Columns_module_close__680b100e .Columns_module_icon__680b100e {\n  width: 1rem;\n  height: 1rem;\n}\n.Columns_module_root__680b100e .Columns_module_body__680b100e {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  overflow-y: auto;\n  flex: 1 1 auto;\n}\n.Columns_module_root__680b100e .Columns_module_body__680b100e .Columns_module_item__680b100e {\n  height: 3rem;\n}\n.Columns_module_root__680b100e .Columns_module_body__680b100e .Columns_module_item__680b100e > [data-elem=title] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.Columns_module_root__680b100e .Columns_module_footer__680b100e .Columns_module_expand__680b100e .Columns_module_icon__680b100e {\n  width: 1.5rem;\n  height: 1.5rem;\n  transform: rotate(180deg);\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_header__680b100e {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-right: 2rem;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_header__680b100e > [data-elem=component2] {\n  flex: 1;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_close__680b100e {\n  top: -0.25rem;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_body__680b100e {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  flex: 0 1 auto;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_body__680b100e .Columns_module_item__680b100e {\n  overflow: hidden;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_footer__680b100e {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  margin-top: auto;\n}\n.Columns_module_root__680b100e.Columns_module_expanded__680b100e .Columns_module_footer__680b100e .Columns_module_expand__680b100e .Columns_module_icon__680b100e {\n  transform: rotate(0deg);\n}";
-var modules_48c02c99 = {"popover":"Columns_module_popover__680b100e","root":"Columns_module_root__680b100e","header":"Columns_module_header__680b100e","search":"Columns_module_search__680b100e","close":"Columns_module_close__680b100e","icon":"Columns_module_icon__680b100e","body":"Columns_module_body__680b100e","item":"Columns_module_item__680b100e","footer":"Columns_module_footer__680b100e","expand":"Columns_module_expand__680b100e","expanded":"Columns_module_expanded__680b100e"};
+var css$c = ".Columns_module_popover__078e5868 {\n  height: 32rem;\n  padding: 0;\n  overflow: hidden;\n}\n\n.Columns_module_root__078e5868 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  position: relative;\n  height: 100%;\n  min-width: 18rem;\n  max-width: 100%;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--grey4);\n  padding: 0.75rem 2.5rem;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 > [data-elem=component1] {\n  font-weight: 500;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 > [data-elem=component2] .Columns_module_close__078e5868 {\n  height: auto;\n  padding: 0;\n}\n.Columns_module_root__078e5868 .Columns_module_header__078e5868 > [data-elem=component2] .Columns_module_close__078e5868 .Columns_module_icon__078e5868 {\n  width: 1rem;\n  height: 1rem;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  padding: 0.75rem 2.5rem;\n  max-height: 28rem;\n  overflow-y: auto;\n  flex: 1 1 auto;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_search__078e5868 {\n  position: -webkit-sticky;\n  position: sticky;\n  top: 0;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  gap: 0.5rem;\n  overflow-y: auto;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 .Columns_module_item__078e5868 {\n  height: 3rem;\n}\n.Columns_module_root__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 .Columns_module_item__078e5868 > [data-elem=title] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.Columns_module_root__078e5868 .Columns_module_footer__078e5868 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  height: auto;\n  margin-top: auto;\n  padding: 0.5rem 2.5rem;\n  border-top: 1px solid var(--grey4);\n}\n.Columns_module_root__078e5868 .Columns_module_footer__078e5868 button.Columns_module_expand__078e5868 {\n  height: auto;\n  background: var(--grey8);\n  border: 1px solid var(--grey4);\n  color: var(--black);\n}\n.Columns_module_root__078e5868 .Columns_module_footer__078e5868 button.Columns_module_expand__078e5868 .Columns_module_icon__078e5868 {\n  width: 1.5rem;\n  height: 1.5rem;\n  transform: rotate(180deg);\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_body__078e5868 {\n  flex: 0 1 auto;\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_body__078e5868 .Columns_module_columns__078e5868 .Columns_module_item__078e5868 {\n  overflow: hidden;\n}\n.Columns_module_root__078e5868.Columns_module_expanded__078e5868 .Columns_module_footer__078e5868 button.Columns_module_expand__078e5868 .Columns_module_icon__078e5868 {\n  transform: none;\n}";
+var modules_48c02c99 = {"popover":"Columns_module_popover__078e5868","root":"Columns_module_root__078e5868","header":"Columns_module_header__078e5868","close":"Columns_module_close__078e5868","icon":"Columns_module_icon__078e5868","body":"Columns_module_body__078e5868","search":"Columns_module_search__078e5868","columns":"Columns_module_columns__078e5868","item":"Columns_module_item__078e5868","footer":"Columns_module_footer__078e5868","expand":"Columns_module_expand__078e5868","expanded":"Columns_module_expanded__078e5868"};
 n(css$c,{});
 
 var Columns = function Columns(props) {
@@ -36423,61 +37246,68 @@ var Columns = function Columns(props) {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classes(modules_48c02c99.root, expanded ? modules_48c02c99.expanded : ''),
       children: [/*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+        size: "auto",
         className: modules_48c02c99.header,
         component1: "Columns",
-        component2: /*#__PURE__*/jsxRuntime.jsx(TextField, {
+        component2: /*#__PURE__*/jsxRuntime.jsx(Button, {
+          className: modules_48c02c99.close,
+          size: "auto",
+          radius: "round",
+          variant: "text",
+          leftComponent: function leftComponent() {
+            return /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
+              className: modules_48c02c99.icon
+            });
+          },
+          onClick: function onClick() {
+            setOpen(false);
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: modules_48c02c99.body,
+        children: [/*#__PURE__*/jsxRuntime.jsx(TextField, {
           className: modules_48c02c99.search,
-          placeholder: "Search Column name",
+          placeholder: "Search",
           value: search,
           onChange: function onChange(e) {
             var _inputHelper = inputHelper(e),
               fieldValue = _inputHelper.fieldValue;
             setSearch(fieldValue);
           }
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
-        className: modules_48c02c99.close,
-        size: "auto",
-        radius: "round",
-        variant: "text",
-        leftComponent: function leftComponent() {
-          return /*#__PURE__*/jsxRuntime.jsx(Cross$1, {
-            className: modules_48c02c99.icon
-          });
-        },
-        onClick: function onClick() {
-          setOpen(false);
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: modules_48c02c99.body,
-        children: columns === null || columns === void 0 ? void 0 : columns.filter(function (col) {
-          var _col$id;
-          return (col === null || col === void 0 ? void 0 : (_col$id = col.id) === null || _col$id === void 0 ? void 0 : _col$id.toLowerCase().indexOf(search === null || search === void 0 ? void 0 : search.toLowerCase())) !== -1 && search != null && search !== '' || search == null || search === '';
-        }).map(function (col) {
-          var selected = [null, false, undefined].includes(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns[col === null || col === void 0 ? void 0 : col.id]);
-          return /*#__PURE__*/jsxRuntime.jsx(DropdownItem, {
-            className: modules_48c02c99.item,
-            selected: selected,
-            title: col.title,
-            variant: "checkbox",
-            onClick: function onClick() {
-              if (selected) {
-                setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, true)));
-              } else {
-                setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, false)));
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: modules_48c02c99.columns,
+          children: columns === null || columns === void 0 ? void 0 : columns.filter(function (col) {
+            var _col$id;
+            return (col === null || col === void 0 ? void 0 : (_col$id = col.id) === null || _col$id === void 0 ? void 0 : _col$id.toLowerCase().indexOf(search === null || search === void 0 ? void 0 : search.toLowerCase())) !== -1 && search != null && search !== '' || search == null || search === '';
+          }).map(function (col) {
+            var selected = [null, false, undefined].includes(hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns[col === null || col === void 0 ? void 0 : col.id]);
+            return /*#__PURE__*/jsxRuntime.jsx(DropdownItem, {
+              className: modules_48c02c99.item,
+              selected: selected,
+              title: col.title,
+              variant: "checkbox",
+              onClick: function onClick() {
+                if (selected) {
+                  setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, true)));
+                } else {
+                  setHiddenColumns(_objectSpread2(_objectSpread2({}, hiddenColumns), {}, _defineProperty$1({}, col.id, false)));
+                }
               }
-            }
-          }, col.id);
-        })
+            }, col.id);
+          })
+        })]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: modules_48c02c99.footer,
-        children: /*#__PURE__*/jsxRuntime.jsx(Chip, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Button, {
           className: modules_48c02c99.expand,
-          size: "sm",
-          radius: "ellipse",
           color: "default",
           title: expanded ? 'See Less' : 'See More',
-          rightComponent: function rightComponent() {
+          rightComponent: !expanded && function () {
+            return /*#__PURE__*/jsxRuntime.jsx(AngleDouble, {
+              className: modules_48c02c99.icon
+            });
+          },
+          leftComponent: expanded && function () {
             return /*#__PURE__*/jsxRuntime.jsx(AngleDouble, {
               className: modules_48c02c99.icon
             });
@@ -36493,12 +37323,12 @@ var Columns = function Columns(props) {
   });
 };
 
-var css$b = ".TableFilters_module_root__8fb9adbb[data-elem=base-cell] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-x: auto;\n  padding: 0.5rem;\n  gap: 1.25rem;\n  width: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell]::-webkit-scrollbar {\n  display: none;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_icon__8fb9adbb {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_iconButton__8fb9adbb {\n  padding: 0rem;\n  height: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem*=component] {\n  height: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_left__8fb9adbb,\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_center__8fb9adbb,\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_right__8fb9adbb {\n  height: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__8fb9adbb {\n  gap: 1rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__8fb9adbb [data-elem=left] {\n  gap: 1rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__8fb9adbb .TableFilters_module_filterValue__8fb9adbb {\n  color: var(--white);\n  background: var(--highlight);\n  padding: 0.125rem 0.5rem;\n  border-radius: 50%;\n  font-size: 0.813rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] {\n  flex: 1;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__8fb9adbb {\n  width: 100%;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__8fb9adbb [data-elem=base-cell] {\n  background: var(--grey7);\n  border-color: var(--grey3);\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__8fb9adbb .TableFilters_module_icon__8fb9adbb {\n  width: 1.25rem;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_right__8fb9adbb {\n  width: auto;\n  padding: 0;\n  min-width: 0rem;\n  gap: 2.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.TableFilters_module_root__8fb9adbb[data-elem=base-cell] .TableFilters_module_right__8fb9adbb > [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}";
-var modules_a0fe63f9 = {"root":"TableFilters_module_root__8fb9adbb","icon":"TableFilters_module_icon__8fb9adbb","icon-button":"TableFilters_module_iconButton__8fb9adbb","left":"TableFilters_module_left__8fb9adbb","center":"TableFilters_module_center__8fb9adbb","right":"TableFilters_module_right__8fb9adbb","filter-value":"TableFilters_module_filterValue__8fb9adbb"};
+var css$b = ".TableFilters_module_root__3c1e35fb[data-elem=base-cell] {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-x: auto;\n  padding: 0.5rem;\n  gap: 1.25rem;\n  width: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell]::-webkit-scrollbar {\n  display: none;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_icon__3c1e35fb {\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] button.TableFilters_module_iconButton__3c1e35fb {\n  height: 100%;\n  background: var(--grey8);\n  border: 1px solid var(--grey4);\n  color: var(--black);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem*=component] {\n  height: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_left__3c1e35fb,\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_center__3c1e35fb,\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_right__3c1e35fb {\n  height: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb {\n  gap: 1rem;\n  background: var(--grey8);\n  border: 1px solid var(--grey4);\n  color: var(--black);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb [data-elem=left] {\n  gap: 1rem;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb .TableFilters_module_icon__3c1e35fb {\n  fill: var(--black);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component1] .TableFilters_module_left__3c1e35fb .TableFilters_module_filterValue__3c1e35fb {\n  color: var(--white);\n  background: var(--highlight);\n  padding: 0.125rem 0.5rem;\n  border-radius: 50%;\n  font-size: 0.813rem;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] {\n  flex: 1;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__3c1e35fb {\n  width: 100%;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__3c1e35fb [data-elem=base-cell] {\n  border-color: var(--grey4);\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] > [data-elem=component2] .TableFilters_module_center__3c1e35fb .TableFilters_module_icon__3c1e35fb {\n  width: 1.25rem;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_right__3c1e35fb {\n  width: auto;\n  padding: 0;\n  min-width: 0rem;\n  gap: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.TableFilters_module_root__3c1e35fb[data-elem=base-cell] .TableFilters_module_right__3c1e35fb > [data-elem*=component] {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}";
+var modules_a0fe63f9 = {"root":"TableFilters_module_root__3c1e35fb","icon":"TableFilters_module_icon__3c1e35fb","icon-button":"TableFilters_module_iconButton__3c1e35fb","left":"TableFilters_module_left__3c1e35fb","center":"TableFilters_module_center__3c1e35fb","right":"TableFilters_module_right__3c1e35fb","filter-value":"TableFilters_module_filterValue__3c1e35fb"};
 n(css$b,{});
 
-var css$a = ".Skeleton_module_root__d0937f9d[data-elem=base-cell] {\n  width: 100%;\n  gap: 1.25rem;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component1] {\n  flex: 1;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component2] {\n  flex: 6;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] {\n  flex: 1;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] {\n  padding: 0;\n  align-items: flex-start;\n  height: auto;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] {\n  flex: 1;\n}\n.Skeleton_module_root__d0937f9d[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] > [data-elem=skeleton] {\n  height: 1.5rem;\n}";
-var modules_37a5ff73 = {"root":"Skeleton_module_root__d0937f9d"};
+var css$a = ".Skeleton_module_root__bdc934d4[data-elem=base-cell] {\n  width: 100%;\n  gap: 1.25rem;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component1] {\n  flex: 1;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component2] {\n  flex: 6;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] {\n  flex: 3;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] {\n  padding: 0;\n  align-items: flex-start;\n  height: auto;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] {\n  flex: 1;\n}\n.Skeleton_module_root__bdc934d4[data-elem=base-cell] > [data-elem=component3] > [data-elem=base-cell] > [data-elem*=component] > [data-elem=skeleton] {\n  height: 1.5rem;\n}";
+var modules_37a5ff73 = {"root":"Skeleton_module_root__bdc934d4"};
 n(css$a,{});
 
 var TableFiltersSkeleton = function TableFiltersSkeleton() {
@@ -36512,16 +37342,15 @@ var TableFiltersSkeleton = function TableFiltersSkeleton() {
       className: modules_37a5ff73.search
     }),
     component3: /*#__PURE__*/jsxRuntime.jsx(BaseCell, {
+      flexible: true,
+      size: "auto",
       component1: /*#__PURE__*/jsxRuntime.jsx(Skeleton, {
-        variant: "circle",
         className: modules_37a5ff73.columns
       }),
       component2: /*#__PURE__*/jsxRuntime.jsx(Skeleton, {
-        variant: "circle",
         className: modules_37a5ff73.refresh
       }),
       component3: /*#__PURE__*/jsxRuntime.jsx(Skeleton, {
-        variant: "circle",
         className: modules_37a5ff73.settings
       })
     })
@@ -36602,12 +37431,13 @@ var TableFilters = function TableFilters(props) {
           },
           size: "auto",
           className: modules_a0fe63f9['icon-button'],
-          variant: "text",
+          color: "default",
           leftComponent: function leftComponent() {
             return /*#__PURE__*/jsxRuntime.jsx(Columns$1, {
               className: modules_a0fe63f9.icon
             });
           },
+          title: "Columns",
           onClick: function onClick() {
             setOpenColumns(function (prev) {
               return !prev;
@@ -36625,7 +37455,8 @@ var TableFilters = function TableFilters(props) {
       component2: !disabledRefresh && /*#__PURE__*/jsxRuntime.jsx(Button, {
         size: "auto",
         className: modules_a0fe63f9['icon-button'],
-        variant: "text",
+        color: "default",
+        title: "Refresh",
         onClick: onRefresh,
         leftComponent: function leftComponent() {
           return /*#__PURE__*/jsxRuntime.jsx(Refresh, {
@@ -36636,9 +37467,10 @@ var TableFilters = function TableFilters(props) {
       component3: !disabledSettings && /*#__PURE__*/jsxRuntime.jsx(Button, {
         size: "auto",
         className: modules_a0fe63f9['icon-button'],
-        variant: "text",
+        color: "default",
+        title: "Settings",
         leftComponent: function leftComponent() {
-          return /*#__PURE__*/jsxRuntime.jsx(Nut, {
+          return /*#__PURE__*/jsxRuntime.jsx(Settings, {
             className: modules_a0fe63f9.icon
           });
         }
@@ -36656,7 +37488,13 @@ TableFilters.propTypes = {
   filterValue: propTypes$1.exports.shape({
     applied: propTypes$1.exports.number
   }),
-  loading: propTypes$1.exports.bool
+  loading: propTypes$1.exports.bool,
+  disabledFilterOptions: propTypes$1.exports.shape({
+    filterButton: propTypes$1.exports.bool,
+    refresh: propTypes$1.exports.bool,
+    columnFilter: propTypes$1.exports.bool,
+    settings: propTypes$1.exports.bool
+  })
 };
 TableFilters.defaultProps = {
   className: '',
@@ -36667,7 +37505,13 @@ TableFilters.defaultProps = {
   filterValue: {
     applied: null
   },
-  loading: null
+  loading: null,
+  disabledFilterOptions: {
+    filterButton: false,
+    refresh: false,
+    columnFilter: false,
+    settings: false
+  }
 };
 
 var css$9 = ".Table_module_root__d17cb64f {\n  position: relative;\n  border-style: solid;\n  border-color: var(--grey4);\n  border-width: 1px 1px 0px 1px;\n  border-radius: 0.25rem;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.Table_module_root__d17cb64f .Table_module_table__d17cb64f {\n  height: calc(100% - 6rem);\n  padding-bottom: 3.5rem;\n}\n.Table_module_root__d17cb64f .Table_module_pagination__d17cb64f {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.Table_module_root__d17cb64f .Table_module_pagination__d17cb64f.Table_module_floating__d17cb64f {\n  bottom: 1rem;\n}\n.Table_module_root__d17cb64f .Table_module_chips__d17cb64f,\n.Table_module_root__d17cb64f .Table_module_filters__d17cb64f,\n.Table_module_root__d17cb64f .Table_module_table__d17cb64f > [data-elem=table-header] {\n  position: -webkit-sticky;\n  position: sticky;\n  z-index: 1;\n  top: 0;\n}";
@@ -36852,17 +37696,14 @@ Table.defaultProps = {
   }
 };
 
-var css$8 = ".Tabs_module_root__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.Tabs_module_tabView__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 {\n  cursor: pointer;\n  margin-right: 0.25rem;\n  padding: 0.5rem 0rem 0.5rem 0.5rem;\n  text-align: left;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--dark-grey);\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--dark-grey);\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0 {\n  border-right: 0.031rem solid var(--grey3);\n  border-radius: 0.625rem;\n  height: 1.438rem;\n  margin: 0rem 0rem 0rem 1rem;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n}\n.Tabs_module_tabView__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--dark-grey);\n}\n.Tabs_module_tabView__df3be7a0:hover, .Tabs_module_tabViewSelected__df3be7a0:hover {\n  background-color: var(--background);\n  border-radius: 0.25rem;\n  color: var(--highlight);\n}\n.Tabs_module_tabView__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}\n.Tabs_module_tabView__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0 {\n  border-right: 0.031rem solid var(--highlight);\n  border-radius: 0.625rem;\n  height: 1.438rem;\n  margin: 0rem 0rem 0rem 1rem;\n}\n.Tabs_module_tabView__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0, .Tabs_module_tabViewSelected__df3be7a0:hover .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}\n\n.Tabs_module_tabViewSelected__df3be7a0 {\n  color: var(--highlight);\n  border-bottom: 0.125rem solid var(--highlight);\n}\n.Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_left__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}\n.Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_saperator__df3be7a0 {\n  border-right: 0.031rem solid var(--highlight);\n  border-radius: 0.625rem;\n  height: 1.438rem;\n  margin: 0rem 0rem 0rem 1rem;\n}\n.Tabs_module_tabViewSelected__df3be7a0 .Tabs_module_content__df3be7a0 .Tabs_module_right__df3be7a0 .Tabs_module_iconContainer__df3be7a0 .Tabs_module_icon__df3be7a0 {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--highlight);\n}";
-var modules_78ab5066 = {"root":"Tabs_module_root__df3be7a0","tab-view":"Tabs_module_tabView__df3be7a0","tab-view-selected":"Tabs_module_tabViewSelected__df3be7a0","content":"Tabs_module_content__df3be7a0","left":"Tabs_module_left__df3be7a0","icon-container":"Tabs_module_iconContainer__df3be7a0","icon":"Tabs_module_icon__df3be7a0","right":"Tabs_module_right__df3be7a0","saperator":"Tabs_module_saperator__df3be7a0"};
+var css$8 = ".Tabs_module_root__83feec3e {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e {\n  padding: 0.75rem;\n  gap: 0.75rem;\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e > [data-elem=component1] > .Tabs_module_icon__83feec3e,\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e > [data-elem=component3] > .Tabs_module_icon__83feec3e {\n  width: 1.5rem;\n  height: 1.5rem;\n  fill: var(--black);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e > [data-elem=component2] {\n  color: var(--black);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e {\n  border-bottom: 2px solid var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e > [data-elem=component1] > .Tabs_module_icon__83feec3e,\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e > [data-elem=component3] > .Tabs_module_icon__83feec3e {\n  fill: var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e.Tabs_module_active__83feec3e > [data-elem=component2] {\n  color: var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover {\n  background: var(--info-bg);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover > [data-elem=component1] > .Tabs_module_icon__83feec3e,\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover > [data-elem=component3] > .Tabs_module_icon__83feec3e {\n  fill: var(--highlight);\n}\n.Tabs_module_root__83feec3e > .Tabs_module_tab__83feec3e:hover > [data-elem=component2] {\n  color: var(--highlight);\n}";
+var modules_78ab5066 = {"root":"Tabs_module_root__83feec3e","tab":"Tabs_module_tab__83feec3e","icon":"Tabs_module_icon__83feec3e","active":"Tabs_module_active__83feec3e"};
 n(css$8,{});
 
 var Tabs = function Tabs(props) {
   var tabs = props.tabs,
     selectedTab = props.selectedTab,
     setSelectedTab = props.setSelectedTab;
-  var tabViewClassName = function tabViewClassName(id) {
-    return id === selectedTab ? "".concat(modules_78ab5066['tab-view-selected']) : "".concat(modules_78ab5066['tab-view']);
-  };
   var onTabClick = function onTabClick(id) {
     setSelectedTab(id);
   };
@@ -36873,44 +37714,27 @@ var Tabs = function Tabs(props) {
         title = tab.title,
         LeftIcon = tab.leftIcon,
         RightIcon = tab.rightIcon;
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
+      return /*#__PURE__*/jsxRuntime.jsx(Button, {
+        size: "auto",
+        color: "default",
+        radius: "none",
+        variant: "text",
         onClick: function onClick() {
-          return onTabClick(id);
+          onTabClick(id);
         },
-        className: tabViewClassName(id),
-        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: modules_78ab5066.content,
-          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: modules_78ab5066.left,
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              style: {
-                paddingRight: LeftIcon ? 5 : 0
-              },
-              children: /*#__PURE__*/jsxRuntime.jsx("span", {
-                className: modules_78ab5066['icon-container'],
-                children: LeftIcon && /*#__PURE__*/jsxRuntime.jsx(LeftIcon, {
-                  className: classes(modules_78ab5066.icon)
-                })
-              })
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              style: {
-                paddingRight: !RightIcon ? 8 : 0
-              },
-              children: title
-            })]
-          }), RightIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: modules_78ab5066.right,
-            children: [/*#__PURE__*/jsxRuntime.jsx("vl", {
-              className: modules_78ab5066.saperator
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: modules_78ab5066['icon-container'],
-              children: /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
-                className: classes(modules_78ab5066.icon)
-              })
-            })]
-          })]
-        })
-      }, tab);
+        title: title,
+        className: classes(modules_78ab5066.tab, selectedTab === id ? modules_78ab5066.active : ''),
+        leftComponent: LeftIcon && function () {
+          return /*#__PURE__*/jsxRuntime.jsx(LeftIcon, {
+            className: modules_78ab5066.icon
+          });
+        },
+        rightComponent: RightIcon && function () {
+          return /*#__PURE__*/jsxRuntime.jsx(RightIcon, {
+            className: modules_78ab5066.icon
+          });
+        }
+      }, id);
     })
   });
 };
@@ -36945,92 +37769,102 @@ Tabs.defaultProps = {
   setSelectedTab: 'None'
 };
 
-var css$7 = ".Tooltip_module_root__c909817e {\n  display: inline-block;\n  position: relative;\n}\n.Tooltip_module_tooltip__c909817e {\n  text-align: center;\n  position: fixed;\n  border-radius: 0.25rem;\n  min-width: auto;\n  max-width: 12rem;\n  padding: 0.375rem;\n  font-size: 0.875rem;\n  font-family: sans-serif;\n  line-height: 1;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_light__c909817e {\n  color: var(--black);\n  background: var(--grey7);\n  border-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_dark__c909817e {\n  color: var(--white);\n  background: var(--black);\n  border-color: var(--white);\n}\n.Tooltip_module_tooltip__c909817e::before {\n  content: \"\";\n  border: solid transparent;\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-width: 0.375rem;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_top__c909817e::before {\n  top: 100%;\n  left: 50%;\n  transform: translate(-50%, 0%);\n  border-top-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_top__c909817e.Tooltip_module_light__c909817e::before {\n  border-top-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_top__c909817e.Tooltip_module_dark__c909817e::before {\n  border-top-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_bottom__c909817e::before {\n  top: 0%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  border-bottom-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_bottom__c909817e.Tooltip_module_light__c909817e::before {\n  border-bottom-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_bottom__c909817e.Tooltip_module_dark__c909817e::before {\n  border-bottom-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_left__c909817e::before {\n  top: 50%;\n  left: 100%;\n  transform: translate(0%, -50%);\n  border-left-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_left__c909817e.Tooltip_module_light__c909817e::before {\n  border-left-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_left__c909817e.Tooltip_module_dark__c909817e::before {\n  border-left-color: var(--black);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_right__c909817e::before {\n  top: 50%;\n  left: 0%;\n  transform: translate(-100%, -50%);\n  border-right-style: solid;\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_right__c909817e.Tooltip_module_light__c909817e::before {\n  border-right-color: var(--grey7);\n}\n.Tooltip_module_tooltip__c909817e.Tooltip_module_right__c909817e.Tooltip_module_dark__c909817e::before {\n  border-right-color: var(--black);\n}";
-var modules_e4619b04 = {"root":"Tooltip_module_root__c909817e","tooltip":"Tooltip_module_tooltip__c909817e","light":"Tooltip_module_light__c909817e","dark":"Tooltip_module_dark__c909817e","top":"Tooltip_module_top__c909817e","bottom":"Tooltip_module_bottom__c909817e","left":"Tooltip_module_left__c909817e","right":"Tooltip_module_right__c909817e"};
+function o(f){return r=>{f.forEach(n=>{typeof n=="function"?n(r):n!=null&&(n.current=r);});}}
+
+var css$7 = ".Tooltip_module_tooltip__1cb07177 {\n  text-align: center;\n  position: fixed;\n  border-radius: 0.25rem;\n  min-width: auto;\n  max-width: 12rem;\n  padding: 0.375rem;\n  font-size: 0.875rem;\n  font-family: sans-serif;\n  line-height: 1;\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_light__1cb07177 {\n  color: var(--black);\n  background: var(--grey7);\n  border-color: var(--black);\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_light__1cb07177 .Tooltip_module_arrow__1cb07177 {\n  background: var(--grey7);\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_dark__1cb07177 {\n  color: var(--white);\n  background: var(--black);\n  border-color: var(--white);\n}\n.Tooltip_module_tooltip__1cb07177.Tooltip_module_dark__1cb07177 .Tooltip_module_arrow__1cb07177 {\n  background: var(--black);\n}\n.Tooltip_module_tooltip__1cb07177 .Tooltip_module_arrow__1cb07177 {\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  z-index: -1;\n  pointer-events: none;\n  transform: rotate(45deg);\n}";
+var modules_e4619b04 = {"tooltip":"Tooltip_module_tooltip__1cb07177","light":"Tooltip_module_light__1cb07177","arrow":"Tooltip_module_arrow__1cb07177","dark":"Tooltip_module_dark__1cb07177"};
 n(css$7,{});
 
-var getPositionStyles = function getPositionStyles(_ref) {
-  var _anchor$current$getBo, _anchor$current, _anchor$current$getBo2, _anchor$current$getBo3, _anchor$current$getBo4, _anchor$current2, _anchor$current2$getB, _anchor$current2$getB2, _anchor$current$getBo5, _anchor$current3, _anchor$current3$getB, _anchor$current3$getB2, _anchor$current$getBo6, _anchor$current4, _anchor$current4$getB, _anchor$current4$getB2, _anchor$current$getBo7, _anchor$current5, _anchor$current5$getB, _anchor$current5$getB2, _anchor$current$getBo8, _anchor$current6, _anchor$current6$getB, _anchor$current6$getB2, _anchor$current$getBo9, _anchor$current7, _anchor$current7$getB, _anchor$current7$getB2, _anchor$current$getBo10, _anchor$current8, _anchor$current8$getB, _anchor$current8$getB2, _anchor$current$getBo11, _anchor$current9, _anchor$current9$getB, _anchor$current9$getB2, _anchor$current$getBo12, _anchor$current10, _anchor$current10$get, _anchor$current10$get2, _anchor$current$getBo13, _anchor$current11, _anchor$current11$get, _anchor$current11$get2, _anchor$current$getBo14, _anchor$current12, _anchor$current12$get, _anchor$current12$get2;
-  var position = _ref.position,
-    anchor = _ref.anchor,
-    content = _ref.content;
-  var style = {
-    width: "calc(".concat(content.length / 2, "rem + 0.75rem)")
-  };
-  switch (position) {
-    case 'top':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat((_anchor$current$getBo = anchor === null || anchor === void 0 ? void 0 : (_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : (_anchor$current$getBo2 = _anchor$current.getBoundingClientRect) === null || _anchor$current$getBo2 === void 0 ? void 0 : (_anchor$current$getBo3 = _anchor$current$getBo2.call(_anchor$current)) === null || _anchor$current$getBo3 === void 0 ? void 0 : _anchor$current$getBo3.top) !== null && _anchor$current$getBo !== void 0 ? _anchor$current$getBo : 0, "px - 0.375rem)"),
-        left: "calc(".concat(((_anchor$current$getBo4 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current2 = anchor.current) === null || _anchor$current2 === void 0 ? void 0 : (_anchor$current2$getB = _anchor$current2.getBoundingClientRect) === null || _anchor$current2$getB === void 0 ? void 0 : (_anchor$current2$getB2 = _anchor$current2$getB.call(_anchor$current2)) === null || _anchor$current2$getB2 === void 0 ? void 0 : _anchor$current2$getB2.left) !== null && _anchor$current$getBo4 !== void 0 ? _anchor$current$getBo4 : 0) + ((_anchor$current$getBo5 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current3 = anchor.current) === null || _anchor$current3 === void 0 ? void 0 : (_anchor$current3$getB = _anchor$current3.getBoundingClientRect) === null || _anchor$current3$getB === void 0 ? void 0 : (_anchor$current3$getB2 = _anchor$current3$getB.call(_anchor$current3)) === null || _anchor$current3$getB2 === void 0 ? void 0 : _anchor$current3$getB2.width) !== null && _anchor$current$getBo5 !== void 0 ? _anchor$current$getBo5 : 0) / 2, "px"),
-        transform: 'translate(-50%, -100%)'
-      });
-    case 'bottom':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat((_anchor$current$getBo6 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current4 = anchor.current) === null || _anchor$current4 === void 0 ? void 0 : (_anchor$current4$getB = _anchor$current4.getBoundingClientRect) === null || _anchor$current4$getB === void 0 ? void 0 : (_anchor$current4$getB2 = _anchor$current4$getB.call(_anchor$current4)) === null || _anchor$current4$getB2 === void 0 ? void 0 : _anchor$current4$getB2.bottom) !== null && _anchor$current$getBo6 !== void 0 ? _anchor$current$getBo6 : 0, "px + 0.375rem)"),
-        left: "calc(".concat(((_anchor$current$getBo7 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current5 = anchor.current) === null || _anchor$current5 === void 0 ? void 0 : (_anchor$current5$getB = _anchor$current5.getBoundingClientRect) === null || _anchor$current5$getB === void 0 ? void 0 : (_anchor$current5$getB2 = _anchor$current5$getB.call(_anchor$current5)) === null || _anchor$current5$getB2 === void 0 ? void 0 : _anchor$current5$getB2.left) !== null && _anchor$current$getBo7 !== void 0 ? _anchor$current$getBo7 : 0) + ((_anchor$current$getBo8 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current6 = anchor.current) === null || _anchor$current6 === void 0 ? void 0 : (_anchor$current6$getB = _anchor$current6.getBoundingClientRect) === null || _anchor$current6$getB === void 0 ? void 0 : (_anchor$current6$getB2 = _anchor$current6$getB.call(_anchor$current6)) === null || _anchor$current6$getB2 === void 0 ? void 0 : _anchor$current6$getB2.width) !== null && _anchor$current$getBo8 !== void 0 ? _anchor$current$getBo8 : 0) / 2, "px"),
-        transform: 'translate(-50%, 0%)'
-      });
-    case 'left':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat(((_anchor$current$getBo9 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current7 = anchor.current) === null || _anchor$current7 === void 0 ? void 0 : (_anchor$current7$getB = _anchor$current7.getBoundingClientRect) === null || _anchor$current7$getB === void 0 ? void 0 : (_anchor$current7$getB2 = _anchor$current7$getB.call(_anchor$current7)) === null || _anchor$current7$getB2 === void 0 ? void 0 : _anchor$current7$getB2.top) !== null && _anchor$current$getBo9 !== void 0 ? _anchor$current$getBo9 : 0) + ((_anchor$current$getBo10 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current8 = anchor.current) === null || _anchor$current8 === void 0 ? void 0 : (_anchor$current8$getB = _anchor$current8.getBoundingClientRect) === null || _anchor$current8$getB === void 0 ? void 0 : (_anchor$current8$getB2 = _anchor$current8$getB.call(_anchor$current8)) === null || _anchor$current8$getB2 === void 0 ? void 0 : _anchor$current8$getB2.height) !== null && _anchor$current$getBo10 !== void 0 ? _anchor$current$getBo10 : 0) / 2, "px)"),
-        left: "calc(".concat((_anchor$current$getBo11 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current9 = anchor.current) === null || _anchor$current9 === void 0 ? void 0 : (_anchor$current9$getB = _anchor$current9.getBoundingClientRect) === null || _anchor$current9$getB === void 0 ? void 0 : (_anchor$current9$getB2 = _anchor$current9$getB.call(_anchor$current9)) === null || _anchor$current9$getB2 === void 0 ? void 0 : _anchor$current9$getB2.left) !== null && _anchor$current$getBo11 !== void 0 ? _anchor$current$getBo11 : 0, "px - 0.375rem"),
-        transform: 'translate(-100%, -50%)'
-      });
-    case 'right':
-      return _objectSpread2(_objectSpread2({}, style), {}, {
-        top: "calc(".concat(((_anchor$current$getBo12 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current10 = anchor.current) === null || _anchor$current10 === void 0 ? void 0 : (_anchor$current10$get = _anchor$current10.getBoundingClientRect) === null || _anchor$current10$get === void 0 ? void 0 : (_anchor$current10$get2 = _anchor$current10$get.call(_anchor$current10)) === null || _anchor$current10$get2 === void 0 ? void 0 : _anchor$current10$get2.top) !== null && _anchor$current$getBo12 !== void 0 ? _anchor$current$getBo12 : 0) + ((_anchor$current$getBo13 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current11 = anchor.current) === null || _anchor$current11 === void 0 ? void 0 : (_anchor$current11$get = _anchor$current11.getBoundingClientRect) === null || _anchor$current11$get === void 0 ? void 0 : (_anchor$current11$get2 = _anchor$current11$get.call(_anchor$current11)) === null || _anchor$current11$get2 === void 0 ? void 0 : _anchor$current11$get2.height) !== null && _anchor$current$getBo13 !== void 0 ? _anchor$current$getBo13 : 0) / 2, "px)"),
-        left: "calc(".concat((_anchor$current$getBo14 = anchor === null || anchor === void 0 ? void 0 : (_anchor$current12 = anchor.current) === null || _anchor$current12 === void 0 ? void 0 : (_anchor$current12$get = _anchor$current12.getBoundingClientRect) === null || _anchor$current12$get === void 0 ? void 0 : (_anchor$current12$get2 = _anchor$current12$get.call(_anchor$current12)) === null || _anchor$current12$get2 === void 0 ? void 0 : _anchor$current12$get2.right) !== null && _anchor$current$getBo14 !== void 0 ? _anchor$current$getBo14 : 0, "px + 0.375rem"),
-        transform: 'translate(0%, -50%)'
-      });
-    default:
-      return {};
-  }
-};
-var Tooltip = function Tooltip(props) {
+var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, propRef) {
+  var _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$arrow4;
   var children = props.children,
     position = props.position,
     content = props.content,
     variant = props.variant,
     className = props.className;
-  var timeoutRef = React.useRef(null);
-  var tooltipRef = React.useRef(null);
+  var arrowEl = React.useRef(null);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var showTip = function showTip() {
-    timeoutRef.current = setTimeout(function () {
-      setOpen(true);
-    }, 0);
-  };
-  var hideTip = function hideTip() {
-    clearTimeout(timeoutRef.current);
-    setOpen(false);
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    ref: tooltipRef,
-    className: classes(modules_e4619b04.root, modules_e4619b04[variant])
-    // When to show the tooltip
-    ,
-    onMouseEnter: showTip,
-    onMouseLeave: hideTip,
-    children: [children, /*#__PURE__*/jsxRuntime.jsx(Popper, {
+
+  // eslint-disable-next-line object-curly-newline
+  var _useFloating = useFloating({
+      open: open,
+      onOpenChange: setOpen,
+      placement: position,
+      // Make sure the tooltip stays on the screen
+      whileElementsMounted: autoUpdate,
+      middleware: [offset(12), flip(), shift(), arrow({
+        element: arrowEl
+      })]
+    }),
+    x = _useFloating.x,
+    y = _useFloating.y,
+    reference = _useFloating.reference,
+    floating = _useFloating.floating,
+    strategy = _useFloating.strategy,
+    context = _useFloating.context,
+    middlewareData = _useFloating.middlewareData,
+    placement = _useFloating.placement;
+
+  // Event listeners to change the open state
+  var hover = useHover(context, {
+    move: true
+  });
+  var focus = useFocus(context);
+  var dismiss = useDismiss(context);
+  // Role props for screen readers
+  var role = useRole(context, {
+    role: 'tooltip'
+  });
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([hover, focus, dismiss, role]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var childrenRef = children.ref;
+  var ref = React.useMemo(function () {
+    return o([reference, childrenRef, propRef]);
+  }, [reference, childrenRef]);
+  var clonedChildren = /*#__PURE__*/React.cloneElement(children, getReferenceProps(_objectSpread2({
+    ref: ref
+  }, children.props)));
+  var side = placement.split('-')[0];
+  var staticSide = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+  }[side];
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [clonedChildren, /*#__PURE__*/jsxRuntime.jsx(Popper, {
       open: open,
       backdrop: false,
-      anchorEl: tooltipRef,
-      wrapperId: "tooltip-popper",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classes(modules_e4619b04.tooltip, modules_e4619b04[position], modules_e4619b04[variant], className),
-        style: _objectSpread2({}, getPositionStyles({
-          position: position,
-          anchor: tooltipRef,
-          content: content
-        })),
-        children: content
-      })
+      wrapperId: "tooltip",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
+        ref: floating,
+        className: classes(modules_e4619b04.tooltip, modules_e4619b04[variant], className),
+        style: {
+          position: strategy,
+          top: y !== null && y !== void 0 ? y : 0,
+          left: x !== null && x !== void 0 ? x : 0
+        }
+      })), {}, {
+        children: [content, /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: modules_e4619b04.arrow,
+          ref: arrowEl,
+          style: _defineProperty$1({
+            left: (_middlewareData$arrow = middlewareData === null || middlewareData === void 0 ? void 0 : (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.x) !== null && _middlewareData$arrow !== void 0 ? _middlewareData$arrow : '',
+            top: (_middlewareData$arrow3 = middlewareData === null || middlewareData === void 0 ? void 0 : (_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.y) !== null && _middlewareData$arrow3 !== void 0 ? _middlewareData$arrow3 : '',
+            right: '',
+            bottom: ''
+          }, staticSide, '-0.5rem')
+        })]
+      }))
     })]
   });
-};
+});
 Tooltip.propTypes = {
   variant: propTypes$1.exports.oneOf(['light', 'dark']),
   content: propTypes$1.exports.string,
@@ -86761,6 +87595,7 @@ exports.RadioIcon = RadioIcon;
 exports.RefreshIcon = Refresh;
 exports.ResetIcon = Reset;
 exports.ServerIcon = Server;
+exports.SettingsIcon = Settings;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.TableCell = TableCell;
@@ -86771,8 +87606,10 @@ exports.TableFilters = TableFilters;
 exports.Tabs = Tabs;
 exports.TextField = TextField;
 exports.TickIcon = Tick;
+exports.TimePicker = TimePicker;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.TrashIcon = Trash;
 exports.ViewIcon = View;
 exports.classes = classes;
 exports.cloneDeep = cloneDeep;