@paubox/ui 0.22.0 → 1.0.0

package/index.esm.js

@@ -878,7 +878,7 @@ function _object_spread_props$C(target, source) {
     }
     return target;
 }
-function _tagged_template_literal$w(strings, raw) {
+function _tagged_template_literal$v(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -888,16 +888,16 @@ function _tagged_template_literal$w(strings, raw) {
         }
     }));
 }
-function _templateObject$w() {
-    var data = _tagged_template_literal$w([
+function _templateObject$v() {
+    var data = _tagged_template_literal$v([
         "\n  animation: rotate 1s linear infinite;\n\n  @keyframes rotate {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"
     ]);
-    _templateObject$w = function _templateObject() {
+    _templateObject$v = function _templateObject() {
         return data;
     };
     return data;
 }
-var RotatingSvg = styled.svg(_templateObject$w());
+var RotatingSvg = styled.svg(_templateObject$v());
 var LoadingWheel = function(props) {
     return /*#__PURE__*/ jsxs(RotatingSvg, _object_spread_props$C(_object_spread$K({
         width: "1em",
@@ -1578,7 +1578,7 @@ var colors = /*#__PURE__*/Object.freeze({
   warning900: warning900
 });
 
-function _tagged_template_literal$v(strings, raw) {
+function _tagged_template_literal$u(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -1588,17 +1588,17 @@ function _tagged_template_literal$v(strings, raw) {
         }
     }));
 }
-function _templateObject$v() {
-    var data = _tagged_template_literal$v([
+function _templateObject$u() {
+    var data = _tagged_template_literal$u([
         "\n  box-shadow: 0px 2px 8px 0px #0000001f;\n"
     ]);
-    _templateObject$v = function _templateObject() {
+    _templateObject$u = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$j() {
-    var data = _tagged_template_literal$v([
+    var data = _tagged_template_literal$u([
         "\n  box-shadow: 0px 4px 12px 0px #00000029;\n"
     ]);
     _templateObject1$j = function _templateObject() {
@@ -1606,17 +1606,17 @@ function _templateObject1$j() {
     };
     return data;
 }
-function _templateObject2$h() {
-    var data = _tagged_template_literal$v([
+function _templateObject2$i() {
+    var data = _tagged_template_literal$u([
         "\n  box-shadow: 0px 8px 16px 0px #0000001f;\n"
     ]);
-    _templateObject2$h = function _templateObject() {
+    _templateObject2$i = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$d() {
-    var data = _tagged_template_literal$v([
+    var data = _tagged_template_literal$u([
         "\n  box-shadow: 0px 8px 32px 0px #00000029;\n"
     ]);
     _templateObject3$d = function _templateObject() {
@@ -1624,9 +1624,9 @@ function _templateObject3$d() {
     };
     return data;
 }
-var elevation100 = css(_templateObject$v());
+var elevation100 = css(_templateObject$u());
 var elevation200 = css(_templateObject1$j());
-var elevation300 = css(_templateObject2$h());
+var elevation300 = css(_templateObject2$i());
 var elevation400 = css(_templateObject3$d());
 
 var elevation = /*#__PURE__*/Object.freeze({
@@ -1642,7 +1642,7 @@ var spacing = function(multiple) {
     return multiple * DEFAULT_SPACING;
 };
 
-function _tagged_template_literal$u(strings, raw) {
+function _tagged_template_literal$t(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -1652,17 +1652,17 @@ function _tagged_template_literal$u(strings, raw) {
         }
     }));
 }
-function _templateObject$u() {
-    var data = _tagged_template_literal$u([
+function _templateObject$t() {
+    var data = _tagged_template_literal$t([
         "\n  font-family: 'Roboto', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-smooth: never;\n"
     ]);
-    _templateObject$u = function _templateObject() {
+    _templateObject$t = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$i() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1674,21 +1674,21 @@ function _templateObject1$i() {
     };
     return data;
 }
-function _templateObject2$g() {
-    var data = _tagged_template_literal$u([
+function _templateObject2$h() {
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject2$g = function _templateObject() {
+    _templateObject2$h = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$c() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1701,7 +1701,7 @@ function _templateObject3$c() {
     return data;
 }
 function _templateObject4$9() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1714,7 +1714,7 @@ function _templateObject4$9() {
     return data;
 }
 function _templateObject5$4() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1727,7 +1727,7 @@ function _templateObject5$4() {
     return data;
 }
 function _templateObject6$2() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1740,7 +1740,7 @@ function _templateObject6$2() {
     return data;
 }
 function _templateObject7$1() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1753,7 +1753,7 @@ function _templateObject7$1() {
     return data;
 }
 function _templateObject8() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1766,7 +1766,7 @@ function _templateObject8() {
     return data;
 }
 function _templateObject9() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1779,7 +1779,7 @@ function _templateObject9() {
     return data;
 }
 function _templateObject10() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1792,7 +1792,7 @@ function _templateObject10() {
     return data;
 }
 function _templateObject11() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1805,7 +1805,7 @@ function _templateObject11() {
     return data;
 }
 function _templateObject12() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1818,7 +1818,7 @@ function _templateObject12() {
     return data;
 }
 function _templateObject13() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1831,7 +1831,7 @@ function _templateObject13() {
     return data;
 }
 function _templateObject14() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1844,7 +1844,7 @@ function _templateObject14() {
     return data;
 }
 function _templateObject15() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1857,7 +1857,7 @@ function _templateObject15() {
     return data;
 }
 function _templateObject16() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1870,7 +1870,7 @@ function _templateObject16() {
     return data;
 }
 function _templateObject17() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1883,7 +1883,7 @@ function _templateObject17() {
     return data;
 }
 function _templateObject18() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1896,7 +1896,7 @@ function _templateObject18() {
     return data;
 }
 function _templateObject19() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1909,7 +1909,7 @@ function _templateObject19() {
     return data;
 }
 function _templateObject20() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1922,7 +1922,7 @@ function _templateObject20() {
     return data;
 }
 function _templateObject21() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1935,7 +1935,7 @@ function _templateObject21() {
     return data;
 }
 function _templateObject22() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1948,7 +1948,7 @@ function _templateObject22() {
     return data;
 }
 function _templateObject23() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1961,7 +1961,7 @@ function _templateObject23() {
     return data;
 }
 function _templateObject24() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1974,7 +1974,7 @@ function _templateObject24() {
     return data;
 }
 function _templateObject25() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$t([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1986,10 +1986,10 @@ function _templateObject25() {
     };
     return data;
 }
-var commonStyles = css(_templateObject$u());
+var commonStyles = css(_templateObject$t());
 // HEADLINES
 var $headline100Regular = css(_templateObject1$i(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
-var $headline100Semibold = css(_templateObject2$g(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
+var $headline100Semibold = css(_templateObject2$h(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline200Regular = css(_templateObject3$c(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline200Semibold = css(_templateObject4$9(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline300Regular = css(_templateObject5$4(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
@@ -2084,7 +2084,7 @@ function _non_iterable_rest$l() {
 function _sliced_to_array$l(arr, i) {
     return _array_with_holes$l(arr) || _iterable_to_array_limit$l(arr, i) || _unsupported_iterable_to_array$p(arr, i) || _non_iterable_rest$l();
 }
-function _tagged_template_literal$t(strings, raw) {
+function _tagged_template_literal$s(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -2102,20 +2102,20 @@ function _unsupported_iterable_to_array$p(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$p(o, minLen);
 }
-function _templateObject$t() {
-    var data = _tagged_template_literal$t([
+function _templateObject$s() {
+    var data = _tagged_template_literal$s([
         "\n  padding: ",
         ";\n  margin: 10px;\n  border-radius: 5px;\n  color: ",
         ";\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: 0.5rem;\n  background-color: ",
         ";\n"
     ]);
-    _templateObject$t = function _templateObject() {
+    _templateObject$s = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$h() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$s([
         "\n  ",
         ";\n  margin: 0;\n"
     ]);
@@ -2124,18 +2124,18 @@ function _templateObject1$h() {
     };
     return data;
 }
-function _templateObject2$f() {
-    var data = _tagged_template_literal$t([
+function _templateObject2$g() {
+    var data = _tagged_template_literal$s([
         "\n  ",
         ";\n  margin: 0;\n"
     ]);
-    _templateObject2$f = function _templateObject() {
+    _templateObject2$g = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$b() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$s([
         "\n  font-size: 1.5rem;\n  color: ",
         ";\n  margin-bottom: auto;\n  flex-shrink: 0;\n"
     ]);
@@ -2145,7 +2145,7 @@ function _templateObject3$b() {
     return data;
 }
 function _templateObject4$8() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$s([
         "\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n"
     ]);
     _templateObject4$8 = function _templateObject() {
@@ -2154,7 +2154,7 @@ function _templateObject4$8() {
     return data;
 }
 function _templateObject5$3() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$s([
         "\n  background-color: transparent;\n  border: none;\n  color: ",
         ";\n  cursor: pointer;\n  padding: 0.25rem;\n  font-size: 0.75rem;\n  margin-left: ",
         ";\n"
@@ -2164,7 +2164,7 @@ function _templateObject5$3() {
     };
     return data;
 }
-var AlertContainer = styled.div(_templateObject$t(), function(param) {
+var AlertContainer = styled.div(_templateObject$s(), function(param) {
     var size = param.size;
     return size === 'large' ? '1rem' : '0.5rem 0.625rem';
 }, neutral900, function(param) {
@@ -2175,7 +2175,7 @@ var Title = styled.h1(_templateObject1$h(), function(param) {
     var size = param.size;
     return size === 'large' ? $paragraph100Semibold : $paragraph200Regular;
 });
-var Text = styled.p(_templateObject2$f(), $paragraph200Regular);
+var Text = styled.p(_templateObject2$g(), $paragraph200Regular);
 var StyledIcon = styled.div(_templateObject3$b(), function(param) {
     var type = param.type;
     return type === 'info' ? primary700 : type === 'error' ? danger700 : type === 'success' ? success700 : warning700;
@@ -2233,7 +2233,7 @@ var AlertBar = function(props) {
     });
 };
 
-function _tagged_template_literal$s(strings, raw) {
+function _tagged_template_literal$r(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -2243,8 +2243,8 @@ function _tagged_template_literal$s(strings, raw) {
         }
     }));
 }
-function _templateObject$s() {
-    var data = _tagged_template_literal$s([
+function _templateObject$r() {
+    var data = _tagged_template_literal$r([
         "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: ",
         ";\n  border: ",
         ";\n  transition: all;\n  transition-duration: 200ms;\n  border-radius: ",
@@ -2259,7 +2259,7 @@ function _templateObject$s() {
         ";\n    cursor: not-allowed;\n\n    color: ",
         ";\n  }\n"
     ]);
-    _templateObject$s = function _templateObject() {
+    _templateObject$r = function _templateObject() {
         return data;
     };
     return data;
@@ -2309,7 +2309,7 @@ var getTextColor = function(color) {
             return textPrimary;
     }
 };
-var BaseButton = styled.button(_templateObject$s(), function(props) {
+var BaseButton = styled.button(_templateObject$r(), function(props) {
     return props.size === 'large' ? '12px 16px' : '10px 12px';
 }, function(param) {
     var color = param.color, variant = param.variant;
@@ -2417,7 +2417,7 @@ function _object_without_properties_loose$m(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$r(strings, raw) {
+function _tagged_template_literal$q(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -2427,17 +2427,17 @@ function _tagged_template_literal$r(strings, raw) {
         }
     }));
 }
-function _templateObject$r() {
-    var data = _tagged_template_literal$r([
+function _templateObject$q() {
+    var data = _tagged_template_literal$q([
         "\n  display: flex;\n  margin: ",
         ";\n"
     ]);
-    _templateObject$r = function _templateObject() {
+    _templateObject$q = function _templateObject() {
         return data;
     };
     return data;
 }
-var IconWrapper$4 = styled.span(_templateObject$r(), function(props) {
+var IconWrapper$4 = styled.span(_templateObject$q(), function(props) {
     return props.iconLeft ? '0 8px 0 0' : props.iconRight ? '0 0 0 8px' : '0';
 });
 var Button = /*#__PURE__*/ forwardRef(function(_param, ref) {
@@ -21503,7 +21503,7 @@ var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 
 var datepickerStyles = ".react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon::before{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:\"\";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:\"Helvetica Neue\",helvetica,arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative;line-height:initial}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{z-index:1;line-height:0}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:bold;font-size:.944rem}h2.react-datepicker__current-month{padding:0;margin:0}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover *::before{border-color:#a6a6a6}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-7px}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-7px}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:.3rem;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:#fff;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + 1.7rem/2);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:bold}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:rgba(0,0,0,0)}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__week-number--selected{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__week-number--keyboard-selected{border-radius:.3rem;background-color:#2a87d0;color:#fff}.react-datepicker__week-number--keyboard-selected:hover{background-color:#1d5d90}.react-datepicker__day-names{white-space:nowrap;margin-bottom:-8px}.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:.3rem;background-color:#ff6803;color:#fff}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:.3rem;background-color:#bad9f1;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{position:absolute;bottom:70%;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:.5rem;box-sizing:content-box}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid rgba(0,0,0,0);border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:rgba(0,0,0,0);border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon::after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:\"×\"}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled::after{cursor:default;background-color:#ccc}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:bold;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:rgba(0,0,0,.8);left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media(max-width: 400px),(max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__children-container{width:13.8rem;margin:.4rem;padding-right:.2rem;padding-left:.2rem;height:auto}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-0.125em}\n";
 
-function _tagged_template_literal$q(strings, raw) {
+function _tagged_template_literal$p(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21513,8 +21513,8 @@ function _tagged_template_literal$q(strings, raw) {
         }
     }));
 }
-function _templateObject$q() {
-    var data = _tagged_template_literal$q([
+function _templateObject$p() {
+    var data = _tagged_template_literal$p([
         "\n  .react-datepicker__day-name {\n    ",
         "\n    color: ",
         ";\n\n    &:first-of-type {\n      width: 35px;\n      padding-right: 5px;\n    }\n    &:last-of-type {\n      width: 35px;\n      padding-left: 5px;\n    }\n  }\n  .react-datepicker__day-names {\n    margin: 12px 0;\n  }\n  .react-datepicker__day-name {\n    width: 40px;\n    margin: 0;\n  }\n  .react-datepicker__week {\n    &:last-child {\n      .react-datepicker__day {\n        border-top: 5px solid white;\n        border-bottom: none;\n      }\n    }\n  }\n  .react-datepicker__day {\n    height: 30px;\n    width: 40px;\n    margin: 0;\n    border-top: 5px solid white;\n    border-bottom: 5px solid white;\n    border-radius: 0;\n\n    &:first-of-type {\n      width: 35px;\n      padding-right: 5px;\n    }\n    &:last-of-type {\n      width: 35px;\n      padding-left: 5px;\n    }\n  }\n  .react-datepicker__day:hover,\n  .react-datepicker__day--today,\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected {\n    background: none;\n  }\n  .react-datepicker__day div {\n    ",
@@ -21526,13 +21526,13 @@ function _templateObject$q() {
         ";\n    background: ",
         ";\n  }\n"
     ]);
-    _templateObject$q = function _templateObject() {
+    _templateObject$p = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$g() {
-    var data = _tagged_template_literal$q([
+    var data = _tagged_template_literal$p([
         "\n  .react-datepicker__day--in-selecting-range:not(\n      .react-datepicker__day--selecting-range-start\n    ):not(.react-datepicker__day--selecting-range-end),\n  .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(\n      .react-datepicker__day--range-end\n    ) {\n    color: ",
         ";\n    background: ",
         ";\n\n    &:hover {\n      background: ",
@@ -21552,8 +21552,8 @@ function _templateObject1$g() {
     };
     return data;
 }
-function _templateObject2$e() {
-    var data = _tagged_template_literal$q([
+function _templateObject2$f() {
+    var data = _tagged_template_literal$p([
         "\n  ",
         "\n\n  & * {\n    box-sizing: content-box;\n  }\n\n  &.calendar-container {\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    position: relative;\n\n    border: none;\n    font-family: 'Roboto', sans-serif;\n    color: ",
         ";\n\n    .react-datepicker__header {\n      padding: 0;\n      border-bottom: none;\n      background: none;\n    }\n    .react-datepicker__navigation {\n      top: 0;\n      background: ",
@@ -21564,14 +21564,14 @@ function _templateObject2$e() {
         "\n    ",
         "\n  }\n"
     ]);
-    _templateObject2$e = function _templateObject() {
+    _templateObject2$f = function _templateObject() {
         return data;
     };
     return data;
 }
-var dayStyles = css(_templateObject$q(), $paragraph300Medium, neutral400, $paragraph300Bold, primary600, $paragraph300Medium, neutral400, primary100, textPrimaryWhite, primary600);
+var dayStyles = css(_templateObject$p(), $paragraph300Medium, neutral400, $paragraph300Bold, primary600, $paragraph300Medium, neutral400, primary100, textPrimaryWhite, primary600);
 var rangeStyles = css(_templateObject1$g(), primary600, primary100, primary100, textPrimaryWhite, primary600, primary200, textPrimaryWhite, primary600, primary100, textPrimaryWhite, primary600, primary100);
-var Container$3 = styled.div(_templateObject2$e(), datepickerStyles, textPrimary, neutral100, neutral300, $paragraph100Semibold, spacing(4), dayStyles, rangeStyles);
+var Container$3 = styled.div(_templateObject2$f(), datepickerStyles, textPrimary, neutral100, neutral300, $paragraph100Semibold, spacing(4), dayStyles, rangeStyles);
 var CalendarContainer = function(param) {
     var children = param.children;
     return /*#__PURE__*/ jsx("div", {
@@ -21751,7 +21751,7 @@ function _object_without_properties_loose$j(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$p(strings, raw) {
+function _tagged_template_literal$o(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21761,16 +21761,16 @@ function _tagged_template_literal$p(strings, raw) {
         }
     }));
 }
-function _templateObject$p() {
-    var data = _tagged_template_literal$p([
+function _templateObject$o() {
+    var data = _tagged_template_literal$o([
         "\n  height: 15px;\n  width: 15px;\n  cursor: pointer;\n"
     ]);
-    _templateObject$p = function _templateObject() {
+    _templateObject$o = function _templateObject() {
         return data;
     };
     return data;
 }
-var StyledCheckbox = styled.input(_templateObject$p());
+var StyledCheckbox = styled.input(_templateObject$o());
 var Checkbox = function(_param) {
     var _param_checked = _param.checked, checked = _param_checked === void 0 ? false : _param_checked, _param_indeterminate = _param.indeterminate, indeterminate = _param_indeterminate === void 0 ? false : _param_indeterminate, onChange = _param.onChange, props = _object_without_properties$j(_param, [
         "checked",
@@ -21903,7 +21903,7 @@ function _object_spread$v(target) {
 function _sliced_to_array$g(arr, i) {
     return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$g();
 }
-function _tagged_template_literal$o(strings, raw) {
+function _tagged_template_literal$n(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21924,19 +21924,19 @@ function _unsupported_iterable_to_array$j(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
 }
-function _templateObject$o() {
-    var data = _tagged_template_literal$o([
+function _templateObject$n() {
+    var data = _tagged_template_literal$n([
         "\n  position: absolute;\n  z-index: 1;\n  padding: ",
         "px;\n  border-radius: ",
         "px;\n  background: white;\n  ",
         "\n"
     ]);
-    _templateObject$o = function _templateObject() {
+    _templateObject$n = function _templateObject() {
         return data;
     };
     return data;
 }
-var PopperContainer = styled.div(_templateObject$o(), spacing(2), spacing(1), elevation400);
+var PopperContainer = styled.div(_templateObject$n(), spacing(2), spacing(1), elevation400);
 var calculatePosition = function(anchorRect, popperRect, side, align, offset, detectEdges) {
     var top = 0;
     var left = 0;
@@ -22037,11 +22037,14 @@ var Popper = function(param) {
         detectEdges
     ]);
     useLayoutEffect(function() {
-        if (open) {
-            updatePosition();
-        } else {
+        if (!open) {
             setPosition(null);
+            return;
         }
+        var handle = requestAnimationFrame(updatePosition);
+        return function() {
+            return cancelAnimationFrame(handle);
+        };
     }, [
         open,
         updatePosition
@@ -22188,7 +22191,7 @@ function _object_without_properties_loose$i(source, excluded) {
 function _sliced_to_array$f(arr, i) {
     return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$f();
 }
-function _tagged_template_literal$n(strings, raw) {
+function _tagged_template_literal$m(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22206,19 +22209,19 @@ function _unsupported_iterable_to_array$i(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
-function _templateObject$n() {
-    var data = _tagged_template_literal$n([
+function _templateObject$m() {
+    var data = _tagged_template_literal$m([
         "\n  display: flex;\n  justify-content: space-between;\n  padding: ",
         "px;\n  border: 1px solid ",
         ";\n  border-radius: ",
         "px;\n  font-weight: 700;\n  opacity: 0.8;\n"
     ]);
-    _templateObject$n = function _templateObject() {
+    _templateObject$m = function _templateObject() {
         return data;
     };
     return data;
 }
-var DatePickerButton = styled(Button)(_templateObject$n(), spacing(1), neutral300, spacing(1));
+var DatePickerButton = styled(Button)(_templateObject$m(), spacing(1), neutral300, spacing(1));
 var DatePicker = function(_param) {
     var _param_rangeSelect = _param.rangeSelect, rangeSelect = _param_rangeSelect === void 0 ? false : _param_rangeSelect, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? new Date() : _param_selectedDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) : _param_startDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? new Date() : _param_endDate, onChange = _param.onChange, rest = _object_without_properties$i(_param, [
         "rangeSelect",
@@ -22388,7 +22391,7 @@ function _object_spread_props$o(target, source) {
 function _sliced_to_array$e(arr, i) {
     return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$e();
 }
-function _tagged_template_literal$m(strings, raw) {
+function _tagged_template_literal$l(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22406,18 +22409,18 @@ function _unsupported_iterable_to_array$h(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
 }
-function _templateObject$m() {
-    var data = _tagged_template_literal$m([
+function _templateObject$l() {
+    var data = _tagged_template_literal$l([
         "\n  margin-left: ",
         "px;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
-    _templateObject$m = function _templateObject() {
+    _templateObject$l = function _templateObject() {
         return data;
     };
     return data;
 }
-var ArrowIcon = styled(ChevronDown)(_templateObject$m(), spacing(1), function(param) {
+var ArrowIcon = styled(ChevronDown)(_templateObject$l(), spacing(1), function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
@@ -22533,7 +22536,7 @@ function _non_iterable_rest$d() {
 function _sliced_to_array$d(arr, i) {
     return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$d();
 }
-function _tagged_template_literal$l(strings, raw) {
+function _tagged_template_literal$k(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22551,18 +22554,18 @@ function _unsupported_iterable_to_array$g(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
 }
-function _templateObject$l() {
-    var data = _tagged_template_literal$l([
+function _templateObject$k() {
+    var data = _tagged_template_literal$k([
         "\n  display: flex;\n  width: 100%;\n  padding: 1rem;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  border-radius: 0.5rem;\n  transition: all ease-in-out;\n  background-color: ",
         ";\n"
     ]);
-    _templateObject$l = function _templateObject() {
+    _templateObject$k = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$f() {
-    var data = _tagged_template_literal$l([
+    var data = _tagged_template_literal$k([
         "\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 0.5rem;\n"
     ]);
     _templateObject1$f = function _templateObject() {
@@ -22570,17 +22573,17 @@ function _templateObject1$f() {
     };
     return data;
 }
-function _templateObject2$d() {
-    var data = _tagged_template_literal$l([
+function _templateObject2$e() {
+    var data = _tagged_template_literal$k([
         "\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  gap: 0.5rem;\n"
     ]);
-    _templateObject2$d = function _templateObject() {
+    _templateObject2$e = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$a() {
-    var data = _tagged_template_literal$l([
+    var data = _tagged_template_literal$k([
         "\n  width: 100%;\n  min-width: 0;\n"
     ]);
     _templateObject3$a = function _templateObject() {
@@ -22588,12 +22591,12 @@ function _templateObject3$a() {
     };
     return data;
 }
-var RowContainer = styled.div(_templateObject$l(), function(param) {
+var RowContainer = styled.div(_templateObject$k(), function(param) {
     var isHovered = param.isHovered;
     return isHovered ? '#FEE2E2' : 'transparent';
 });
 var ContentContainer = styled.div(_templateObject1$f());
-var SelectContainer = styled.div(_templateObject2$d());
+var SelectContainer = styled.div(_templateObject2$e());
 var MultiInputContainer = styled.div(_templateObject3$a());
 var FilterRow = function(param) {
     var filterKey = param.filterKey, rowIndex = param.rowIndex, values = param.values, errors = param.errors, touched = param.touched, onChange = param.onChange, onRemove = param.onRemove, fieldOptions = param.fieldOptions, operatorOptions = param.operatorOptions, showRemove = param.showRemove;
@@ -22767,7 +22770,7 @@ function _object_spread$s(target) {
 function _sliced_to_array$c(arr, i) {
     return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$c();
 }
-function _tagged_template_literal$k(strings, raw) {
+function _tagged_template_literal$j(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22788,17 +22791,17 @@ function _unsupported_iterable_to_array$f(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
-function _templateObject$k() {
-    var data = _tagged_template_literal$k([
+function _templateObject$j() {
+    var data = _tagged_template_literal$j([
         "\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n"
     ]);
-    _templateObject$k = function _templateObject() {
+    _templateObject$j = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$e() {
-    var data = _tagged_template_literal$k([
+    var data = _tagged_template_literal$j([
         "\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  background-color: ",
         ";\n  border: 1px solid\n    ",
         ";\n"
@@ -22808,17 +22811,17 @@ function _templateObject1$e() {
     };
     return data;
 }
-function _templateObject2$c() {
-    var data = _tagged_template_literal$k([
+function _templateObject2$d() {
+    var data = _tagged_template_literal$j([
         "\n  position: absolute;\n  display: flex;\n\n  justify-content: center;\n  align-items: center;\n  right: -0.75rem;\n  top: -0.75rem;\n  border-radius: 9999px;\n  border: 1px solid #e5e7eb;\n  background-color: white;\n  padding: 0.25rem;\n  &:hover {\n    cursor: pointer;\n  }\n"
     ]);
-    _templateObject2$c = function _templateObject() {
+    _templateObject2$d = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$9() {
-    var data = _tagged_template_literal$k([
+    var data = _tagged_template_literal$j([
         "\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: 1rem;\n  border-color: #e5e7eb;\n"
     ]);
     _templateObject3$9 = function _templateObject() {
@@ -22827,7 +22830,7 @@ function _templateObject3$9() {
     return data;
 }
 function _templateObject4$7() {
-    var data = _tagged_template_literal$k([
+    var data = _tagged_template_literal$j([
         "\n  width: 100%;\n  border-radius: 0.5rem;\n  border: 4px dashed #e5e7eb;\n  background-color: #f9fafb;\n  padding: 2rem;\n\n  &:hover {\n    cursor: pointer;\n    &:not(:disabled) {\n      background-color: ",
         ";\n    }\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n"
     ]);
@@ -22837,7 +22840,7 @@ function _templateObject4$7() {
     return data;
 }
 function _templateObject5$2() {
-    var data = _tagged_template_literal$k([
+    var data = _tagged_template_literal$j([
         "\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n"
     ]);
     _templateObject5$2 = function _templateObject() {
@@ -22846,7 +22849,7 @@ function _templateObject5$2() {
     return data;
 }
 function _templateObject6$1() {
-    var data = _tagged_template_literal$k([
+    var data = _tagged_template_literal$j([
         "\n  width: 100%;\n  padding: 1rem;\n  padding-top: 0;\n  box-sizing: border-box;\n"
     ]);
     _templateObject6$1 = function _templateObject() {
@@ -22854,7 +22857,7 @@ function _templateObject6$1() {
     };
     return data;
 }
-var Container$2 = styled.div(_templateObject$k());
+var Container$2 = styled.div(_templateObject$j());
 var FilterGroup = styled.div(_templateObject1$e(), function(param) {
     var isHovered = param.isHovered;
     return isHovered ? danger200 : 'white';
@@ -22862,7 +22865,7 @@ var FilterGroup = styled.div(_templateObject1$e(), function(param) {
     var isHovered = param.isHovered;
     return isHovered ? danger200 : '#e5e7eb';
 });
-var CloseButton$1 = styled.button(_templateObject2$c());
+var CloseButton$1 = styled.button(_templateObject2$d());
 var FilterRowsContainer = styled.div(_templateObject3$9());
 var OrButton = styled.button(_templateObject4$7(), neutral100);
 var ButtonGroup = styled.div(_templateObject5$2());
@@ -23179,7 +23182,7 @@ function _object_without_properties_loose$g(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$j(strings, raw) {
+function _tagged_template_literal$i(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -23189,17 +23192,17 @@ function _tagged_template_literal$j(strings, raw) {
         }
     }));
 }
-function _templateObject$j() {
-    var data = _tagged_template_literal$j([
+function _templateObject$i() {
+    var data = _tagged_template_literal$i([
         "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n"
     ]);
-    _templateObject$j = function _templateObject() {
+    _templateObject$i = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$d() {
-    var data = _tagged_template_literal$j([
+    var data = _tagged_template_literal$i([
         "\n  flex: 1;\n  border: 1px solid\n    ",
         ";\n\n  background-color: ",
         ";\n  border-radius: 0.5rem;\n\n  color: ",
@@ -23215,19 +23218,19 @@ function _templateObject1$d() {
     };
     return data;
 }
-function _templateObject2$b() {
-    var data = _tagged_template_literal$j([
+function _templateObject2$c() {
+    var data = _tagged_template_literal$i([
         "\n  position: absolute;\n  left: ",
         ";\n  right: ",
         ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & svg {\n    font-size: 1rem;\n  }\n"
     ]);
-    _templateObject2$b = function _templateObject() {
+    _templateObject2$c = function _templateObject() {
         return data;
     };
     return data;
 }
 // Wrapper for the Input and Icons
-var InputWrapper$3 = styled.div(_templateObject$j());
+var InputWrapper$3 = styled.div(_templateObject$i());
 // Style for the Input itself
 var BaseInput$1 = styled.input(_templateObject1$d(), function(param) {
     var error = param.error, disabled = param.disabled;
@@ -23249,7 +23252,7 @@ var BaseInput$1 = styled.input(_templateObject1$d(), function(param) {
     return sz === 'lg' ? $paragraph100Regular : $paragraph200Regular;
 });
 // Style for the Icons
-var IconWrapper$3 = styled.span(_templateObject2$b(), function(param) {
+var IconWrapper$3 = styled.span(_templateObject2$c(), function(param) {
     var position = param.position;
     return position === 'left' ? '0.5rem' : 'auto';
 }, function(param) {
@@ -23427,7 +23430,7 @@ function _object_without_properties_loose$f(source, excluded) {
 function _sliced_to_array$b(arr, i) {
     return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$b();
 }
-function _tagged_template_literal$i(strings, raw) {
+function _tagged_template_literal$h(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -23448,17 +23451,17 @@ function _unsupported_iterable_to_array$e(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
-function _templateObject$i() {
-    var data = _tagged_template_literal$i([
+function _templateObject$h() {
+    var data = _tagged_template_literal$h([
         "\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n"
     ]);
-    _templateObject$i = function _templateObject() {
+    _templateObject$h = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$c() {
-    var data = _tagged_template_literal$i([
+    var data = _tagged_template_literal$h([
         "\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
@@ -23471,8 +23474,8 @@ function _templateObject1$c() {
     };
     return data;
 }
-function _templateObject2$a() {
-    var data = _tagged_template_literal$i([
+function _templateObject2$b() {
+    var data = _tagged_template_literal$h([
         "\n  flex: 1;\n  z-index: 2;\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
         ";\n  }\n  color: ",
         ";\n  padding: ",
@@ -23480,13 +23483,13 @@ function _templateObject2$a() {
         ";\n    opacity: 0.3;\n  }\n\n  ",
         "\n"
     ]);
-    _templateObject2$a = function _templateObject() {
+    _templateObject2$b = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$8() {
-    var data = _tagged_template_literal$i([
+    var data = _tagged_template_literal$h([
         "\n  background-color: ",
         ";\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem 0.313rem;\n  white-space: nowrap;\n  display: flex;\n  gap: 0.25rem;\n  ",
         "\n  align-items: center;\n  justify-content: center;\n"
@@ -23497,7 +23500,7 @@ function _templateObject3$8() {
     return data;
 }
 function _templateObject4$6() {
-    var data = _tagged_template_literal$i([
+    var data = _tagged_template_literal$h([
         "\n  position: absolute;\n  display: flex;\n  gap: 0.25rem;\n  width: min-content;\n  max-width: 85%;\n  height: auto;\n  overflow-x: auto;\n\n  /* Always show scrollbar when overflowing */\n  &::-webkit-scrollbar {\n    height: 4px;\n    display: block;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: ",
         ";\n    border-radius: 2px;\n    display: block;\n    width: 95%;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ",
         ";\n    border-radius: 2px;\n    display: block;\n  }\n\n  padding: ",
@@ -23509,7 +23512,7 @@ function _templateObject4$6() {
     return data;
 }
 function _templateObject5$1() {
-    var data = _tagged_template_literal$i([
+    var data = _tagged_template_literal$h([
         "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 0;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
@@ -23519,7 +23522,7 @@ function _templateObject5$1() {
     return data;
 }
 function _templateObject6() {
-    var data = _tagged_template_literal$i([
+    var data = _tagged_template_literal$h([
         "\n  ",
         "\n  color: ",
         "/80;\n"
@@ -23530,7 +23533,7 @@ function _templateObject6() {
     return data;
 }
 function _templateObject7() {
-    var data = _tagged_template_literal$i([
+    var data = _tagged_template_literal$h([
         "\n  ",
         "\n  color: ",
         ";\n"
@@ -23541,7 +23544,7 @@ function _templateObject7() {
     return data;
 }
 // Wrapper for the Input and Icons
-var InputWrapper$2 = styled.div(_templateObject$i());
+var InputWrapper$2 = styled.div(_templateObject$h());
 var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
@@ -23559,7 +23562,7 @@ var MultiSelectWrapper = styled.div(_templateObject1$c(), function(param) {
     return disabled || type === 'secondary' ? neutral100 : 'white';
 });
 // Style for the Select itself
-var BaseSelect$1 = styled.select(_templateObject2$a(), neutral500, function(param) {
+var BaseSelect$1 = styled.select(_templateObject2$b(), neutral500, function(param) {
     var value = param.value;
     return Array.isArray(value) && value.length > 0 ? textPrimary : neutral500;
 }, function(param) {
@@ -23809,7 +23812,7 @@ function _object_without_properties_loose$e(source, excluded) {
 function _sliced_to_array$a(arr, i) {
     return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$a();
 }
-function _tagged_template_literal$h(strings, raw) {
+function _tagged_template_literal$g(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -23827,17 +23830,17 @@ function _unsupported_iterable_to_array$d(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
-function _templateObject$h() {
-    var data = _tagged_template_literal$h([
+function _templateObject$g() {
+    var data = _tagged_template_literal$g([
         "\n  font-size: 1rem;\n  animation: spin 500ms linear infinite;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ",
         ";\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"
     ]);
-    _templateObject$h = function _templateObject() {
+    _templateObject$g = function _templateObject() {
         return data;
     };
     return data;
 }
-var loadingWheelStyle = css(_templateObject$h(), primary500);
+var loadingWheelStyle = css(_templateObject$g(), primary500);
 var Loader = function() {
     return /*#__PURE__*/ jsx("div", {
         css: loadingWheelStyle,
@@ -24003,7 +24006,7 @@ function _object_without_properties_loose$d(source, excluded) {
 function _sliced_to_array$9(arr, i) {
     return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$9();
 }
-function _tagged_template_literal$g(strings, raw) {
+function _tagged_template_literal$f(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -24024,20 +24027,20 @@ function _unsupported_iterable_to_array$c(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
-function _templateObject$g() {
-    var data = _tagged_template_literal$g([
+function _templateObject$f() {
+    var data = _tagged_template_literal$f([
         "\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n  align-items: center;\n  flex: 1;\n  background-color: white;\n  position: relative;\n  border: 1px solid\n    ",
         ";\n  border-radius: 0.5rem;\n  color: ",
         ";\n  padding: ",
         ";\n  outline: none;\n  transition: all 150ms ease-in-out;\n"
     ]);
-    _templateObject$g = function _templateObject() {
+    _templateObject$f = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$b() {
-    var data = _tagged_template_literal$g([
+    var data = _tagged_template_literal$f([
         "\n  flex: 1;\n  border: none;\n  overflow: scroll;\n  min-width: 10rem;\n  background-color: transparent;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n\n  :focus-visible {\n    outline: none;\n  }\n\n  &::placeholder {\n    color: ",
         ";\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  ",
         "\n"
@@ -24047,19 +24050,19 @@ function _templateObject1$b() {
     };
     return data;
 }
-function _templateObject2$9() {
-    var data = _tagged_template_literal$g([
+function _templateObject2$a() {
+    var data = _tagged_template_literal$f([
         "\n  background-color: ",
         ";\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0.313rem;\n  white-space: nowrap;\n  gap: 0.25rem;\n  ",
         "\n  align-items: center;\n  justify-content: center;\n"
     ]);
-    _templateObject2$9 = function _templateObject() {
+    _templateObject2$a = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$7() {
-    var data = _tagged_template_literal$g([
+    var data = _tagged_template_literal$f([
         "\n  display: flex;\n  gap: 0.25rem;\n  flex-wrap: wrap;\n  height: auto;\n"
     ]);
     _templateObject3$7 = function _templateObject() {
@@ -24068,7 +24071,7 @@ function _templateObject3$7() {
     return data;
 }
 function _templateObject4$5() {
-    var data = _tagged_template_literal$g([
+    var data = _tagged_template_literal$f([
         "\n  position: absolute;\n  right: 0.5rem;\n  opacity: 0.8;\n\n  ",
         "\n"
     ]);
@@ -24077,7 +24080,7 @@ function _templateObject4$5() {
     };
     return data;
 }
-var InputWrapper$1 = styled.div(_templateObject$g(), function(param) {
+var InputWrapper$1 = styled.div(_templateObject$f(), function(param) {
     var isFocused = param.isFocused, error = param.error;
     return isFocused ? primary600 : error ? danger600 : neutral200;
 }, textPrimary, function(param) {
@@ -24089,7 +24092,7 @@ var BaseInput = styled.input(_templateObject1$b(), neutral500, function(param) {
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
 // Reusing Chip from MultiSelect
-var Chip = styled.button(_templateObject2$9(), function(param) {
+var Chip = styled.button(_templateObject2$a(), function(param) {
     var secondary = param.secondary;
     return secondary ? neutral300 : neutral100;
 }, $label200Medium);
@@ -24319,7 +24322,7 @@ function _object_without_properties_loose$c(source, excluded) {
 function _sliced_to_array$8(arr, i) {
     return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$8();
 }
-function _tagged_template_literal$f(strings, raw) {
+function _tagged_template_literal$e(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -24337,17 +24340,17 @@ function _unsupported_iterable_to_array$b(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
-function _templateObject$f() {
-    var data = _tagged_template_literal$f([
+function _templateObject$e() {
+    var data = _tagged_template_literal$e([
         "\n  display: flex;\n  align-items: center;\n  width: 100%;\n"
     ]);
-    _templateObject$f = function _templateObject() {
+    _templateObject$e = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$a() {
-    var data = _tagged_template_literal$f([
+    var data = _tagged_template_literal$e([
         "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
@@ -24361,8 +24364,8 @@ function _templateObject1$a() {
     };
     return data;
 }
-function _templateObject2$8() {
-    var data = _tagged_template_literal$f([
+function _templateObject2$9() {
+    var data = _tagged_template_literal$e([
         "\n  flex: 1;\n  cursor: pointer;\n  border: none;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background-color: transparent;\n  z-index: 1;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  &::-ms-expand {\n    display: none;\n  }\n  &::placeholder {\n    color: ",
         ";\n  }\n  color: ",
         ";\n  padding: ",
@@ -24370,13 +24373,13 @@ function _templateObject2$8() {
         ";\n    opacity: 0.3;\n  }\n\n  ",
         "\n"
     ]);
-    _templateObject2$8 = function _templateObject() {
+    _templateObject2$9 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$6() {
-    var data = _tagged_template_literal$f([
+    var data = _tagged_template_literal$e([
         "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  font-size: ",
         "rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
@@ -24387,7 +24390,7 @@ function _templateObject3$6() {
     return data;
 }
 function _templateObject4$4() {
-    var data = _tagged_template_literal$f([
+    var data = _tagged_template_literal$e([
         "\n  ",
         "\n  color: ",
         ";\n"
@@ -24398,7 +24401,7 @@ function _templateObject4$4() {
     return data;
 }
 // Wrapper for the Input and Icons
-var InputWrapper = styled.div(_templateObject$f());
+var InputWrapper = styled.div(_templateObject$e());
 var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
@@ -24416,7 +24419,7 @@ var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
     return disabled || type === 'secondary' ? neutral100 : 'white';
 });
 // Style for the Select itself
-var BaseSelect = styled.select(_templateObject2$8(), neutral500, function(param) {
+var BaseSelect = styled.select(_templateObject2$9(), neutral500, function(param) {
     var value = param.value;
     return value ? textPrimary : neutral500;
 }, function(param) {
@@ -24602,7 +24605,7 @@ function _object_without_properties_loose$b(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$e(strings, raw) {
+function _tagged_template_literal$d(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -24612,17 +24615,17 @@ function _tagged_template_literal$e(strings, raw) {
         }
     }));
 }
-function _templateObject$e() {
-    var data = _tagged_template_literal$e([
+function _templateObject$d() {
+    var data = _tagged_template_literal$d([
         "\n  display: flex;\n  align-items: center;\n  position: relative;\n"
     ]);
-    _templateObject$e = function _templateObject() {
+    _templateObject$d = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$9() {
-    var data = _tagged_template_literal$e([
+    var data = _tagged_template_literal$d([
         "\n  flex: 1;\n  padding-top: ",
         ";\n  padding-bottom: ",
         ";\n  border: 1px solid\n    ",
@@ -24638,16 +24641,16 @@ function _templateObject1$9() {
     };
     return data;
 }
-function _templateObject2$7() {
-    var data = _tagged_template_literal$e([
+function _templateObject2$8() {
+    var data = _tagged_template_literal$d([
         "\n  position: absolute;\n  right: 0.5rem;\n"
     ]);
-    _templateObject2$7 = function _templateObject() {
+    _templateObject2$8 = function _templateObject() {
         return data;
     };
     return data;
 }
-var Wrapper = styled.div(_templateObject$e());
+var Wrapper = styled.div(_templateObject$d());
 var BaseTextArea = styled.textarea(_templateObject1$9(), function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem' : '0.375rem';
@@ -24667,7 +24670,7 @@ var BaseTextArea = styled.textarea(_templateObject1$9(), function(param) {
     var sz = param.sz;
     return sz === 'lg' ? $paragraph100Regular : $paragraph200Regular;
 });
-var CloseButton = styled(IconButton)(_templateObject2$7());
+var CloseButton = styled(IconButton)(_templateObject2$8());
 var TextArea = /*#__PURE__*/ forwardRef(function(_param, ref) {
     var _param_sz = _param.sz, sz = _param_sz === void 0 ? 'sm' : _param_sz, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, _param_clearable = _param.clearable, clearable = _param_clearable === void 0 ? false : _param_clearable, onClear = _param.onClear, style = _param.style, props = _object_without_properties$b(_param, [
         "sz",
@@ -24793,7 +24796,7 @@ function _object_without_properties_loose$a(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$d(strings, raw) {
+function _tagged_template_literal$c(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -24803,18 +24806,18 @@ function _tagged_template_literal$d(strings, raw) {
         }
     }));
 }
-function _templateObject$d() {
-    var data = _tagged_template_literal$d([
+function _templateObject$c() {
+    var data = _tagged_template_literal$c([
         "\n  ",
         "\n  color: ",
         ";\n  font-family: 'Roboto', sans-serif;\n"
     ]);
-    _templateObject$d = function _templateObject() {
+    _templateObject$c = function _templateObject() {
         return data;
     };
     return data;
 }
-var StyledTypography = styled.div(_templateObject$d(), function(param) {
+var StyledTypography = styled.div(_templateObject$c(), function(param) {
     var $variant = param.$variant;
     return typography["$".concat($variant)];
 }, function(param) {
@@ -24946,7 +24949,7 @@ function _object_without_properties_loose$9(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$c(strings, raw) {
+function _tagged_template_literal$b(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -24956,18 +24959,18 @@ function _tagged_template_literal$c(strings, raw) {
         }
     }));
 }
-function _templateObject$c() {
-    var data = _tagged_template_literal$c([
+function _templateObject$b() {
+    var data = _tagged_template_literal$b([
         "\n  box-sizing: border-box;\n  width: 100%;\n  cursor: pointer;\n  white-space: nowrap;\n  &:hover {\n    background-color: ",
         ";\n  }\n"
     ]);
-    _templateObject$c = function _templateObject() {
+    _templateObject$b = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$8() {
-    var data = _tagged_template_literal$c([
+    var data = _tagged_template_literal$b([
         "\n  display: flex;\n  align-items: center;\n  font-size: inherit;\n  color: inherit;\n  justify-content: center;\n"
     ]);
     _templateObject1$8 = function _templateObject() {
@@ -24975,20 +24978,20 @@ function _templateObject1$8() {
     };
     return data;
 }
-function _templateObject2$6() {
-    var data = _tagged_template_literal$c([
+function _templateObject2$7() {
+    var data = _tagged_template_literal$b([
         "\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n  background-color: transparent;\n  text-align: left;\n  border: none;\n  white-space: nowrap;\n  width: 100%;\n  padding: ",
         "px ",
         "px;\n  text-decoration: none;\n  ",
         "\n"
     ]);
-    _templateObject2$6 = function _templateObject() {
+    _templateObject2$7 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$5() {
-    var data = _tagged_template_literal$c([
+    var data = _tagged_template_literal$b([
         "\n  ",
         "\n"
     ]);
@@ -24998,7 +25001,7 @@ function _templateObject3$5() {
     return data;
 }
 function _templateObject4$3() {
-    var data = _tagged_template_literal$c([
+    var data = _tagged_template_literal$b([
         "\n  ",
         "\n"
     ]);
@@ -25007,9 +25010,9 @@ function _templateObject4$3() {
     };
     return data;
 }
-var MenuItemContainer = styled.div(_templateObject$c(), primary100);
+var MenuItemContainer = styled.div(_templateObject$b(), primary100);
 var IconContainer = styled.div(_templateObject1$8());
-var buttonStyles = css(_templateObject2$6(), spacing(1), spacing(2), $paragraph200Regular);
+var buttonStyles = css(_templateObject2$7(), spacing(1), spacing(2), $paragraph200Regular);
 var StyledItem = styled.button(_templateObject3$5(), buttonStyles);
 var StyledLink = styled.a(_templateObject4$3(), buttonStyles);
 var MenuItem = function(_param) {
@@ -28736,7 +28739,7 @@ function _object_without_properties_loose$5(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$b(strings, raw) {
+function _tagged_template_literal$a(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -28746,11 +28749,11 @@ function _tagged_template_literal$b(strings, raw) {
         }
     }));
 }
-function _templateObject$b() {
-    var data = _tagged_template_literal$b([
+function _templateObject$a() {
+    var data = _tagged_template_literal$a([
         "\n  z-index: -1;\n  position: fixed;\n  inset: 0;\n  background-color: rgb(0 0 0 / 0.2);\n  -webkit-tap-highlight-color: transparent;\n"
     ]);
-    _templateObject$b = function _templateObject() {
+    _templateObject$a = function _templateObject() {
         return data;
     };
     return data;
@@ -28765,9 +28768,9 @@ var BaseBackdrop = /*#__PURE__*/ forwardRef(function(props, ref) {
         ref: ref
     }, other));
 });
-var Backdrop = styled(BaseBackdrop)(_templateObject$b());
+var Backdrop = styled(BaseBackdrop)(_templateObject$a());
 
-function _tagged_template_literal$a(strings, raw) {
+function _tagged_template_literal$9(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -28777,16 +28780,16 @@ function _tagged_template_literal$a(strings, raw) {
         }
     }));
 }
-function _templateObject$a() {
-    var data = _tagged_template_literal$a([
+function _templateObject$9() {
+    var data = _tagged_template_literal$9([
         "\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.2);\n  font-size: 32px;\n"
     ]);
-    _templateObject$a = function _templateObject() {
+    _templateObject$9 = function _templateObject() {
         return data;
     };
     return data;
 }
-var Overlay = styled.div(_templateObject$a());
+var Overlay = styled.div(_templateObject$9());
 var LoadingOverlay = function() {
     return /*#__PURE__*/ jsx(Overlay, {
         children: /*#__PURE__*/ jsx(LoadingWheel, {
@@ -28869,7 +28872,7 @@ function _object_without_properties_loose$4(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$9(strings, raw) {
+function _tagged_template_literal$8(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -28879,17 +28882,17 @@ function _tagged_template_literal$9(strings, raw) {
         }
     }));
 }
-function _templateObject$9() {
-    var data = _tagged_template_literal$9([
+function _templateObject$8() {
+    var data = _tagged_template_literal$8([
         "\n  position: fixed;\n  z-index: 1300;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
     ]);
-    _templateObject$9 = function _templateObject() {
+    _templateObject$8 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$7() {
-    var data = _tagged_template_literal$9([
+    var data = _tagged_template_literal$8([
         "\n  position: relative;\n  overflow: scroll;\n  display: flex;\n  flex-direction: column;\n  max-height: 80%;\n  max-width: 800px; // TODO: this should be controllable via props\n  gap: ",
         "px;\n  background-color: white;\n  border-radius: ",
         "px;\n  outline: none;\n  padding: ",
@@ -28901,17 +28904,17 @@ function _templateObject1$7() {
     };
     return data;
 }
-function _templateObject2$5() {
-    var data = _tagged_template_literal$9([
+function _templateObject2$6() {
+    var data = _tagged_template_literal$8([
         ""
     ]);
-    _templateObject2$5 = function _templateObject() {
+    _templateObject2$6 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$4() {
-    var data = _tagged_template_literal$9([
+    var data = _tagged_template_literal$8([
         "\n  overflow-y: scroll;\n"
     ]);
     _templateObject3$4 = function _templateObject() {
@@ -28920,7 +28923,7 @@ function _templateObject3$4() {
     return data;
 }
 function _templateObject4$2() {
-    var data = _tagged_template_literal$9([
+    var data = _tagged_template_literal$8([
         "\n  display: flex;\n  justify-content: end;\n  gap: ",
         "px;\n"
     ]);
@@ -28929,9 +28932,9 @@ function _templateObject4$2() {
     };
     return data;
 }
-var StyledModal = styled(Modal$1)(_templateObject$9());
+var StyledModal = styled(Modal$1)(_templateObject$8());
 var ModalContent = styled.div(_templateObject1$7(), spacing(2), spacing(1), spacing(3), elevation400);
-var ModalHeader = styled.div(_templateObject2$5());
+var ModalHeader = styled.div(_templateObject2$6());
 var ModalBody = styled.div(_templateObject3$4());
 var ModalFooter = styled.div(_templateObject4$2(), spacing(1));
 var Modal = function(param) {
@@ -28995,7 +28998,7 @@ var Modal = function(param) {
     });
 };
 
-function _tagged_template_literal$8(strings, raw) {
+function _tagged_template_literal$7(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -29005,20 +29008,20 @@ function _tagged_template_literal$8(strings, raw) {
         }
     }));
 }
-function _templateObject$8() {
-    var data = _tagged_template_literal$8([
+function _templateObject$7() {
+    var data = _tagged_template_literal$7([
         "\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ",
         "px ",
         "px ",
         "px;\n"
     ]);
-    _templateObject$8 = function _templateObject() {
+    _templateObject$7 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$6() {
-    var data = _tagged_template_literal$8([
+    var data = _tagged_template_literal$7([
         "\n  display: flex;\n  align-items: center;\n"
     ]);
     _templateObject1$6 = function _templateObject() {
@@ -29026,10 +29029,10 @@ function _templateObject1$6() {
     };
     return data;
 }
-var PaginationContainer = styled.div(_templateObject$8(), spacing(2), spacing(1), spacing(1));
+var PaginationContainer = styled.div(_templateObject$7(), spacing(2), spacing(1), spacing(1));
 var PageControls = styled.div(_templateObject1$6());
 var Pagination = function(param) {
-    var pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
+    var mode = param.mode, pageInfo = param.pageInfo, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, onPageSizeChange = param.onPageSizeChange, subText = param.subText, onPageChange = param.onPageChange, _param_testId = param.testId, testId = _param_testId === void 0 ? 'pagination' : _param_testId;
     return /*#__PURE__*/ jsxs(PaginationContainer, {
         children: [
             /*#__PURE__*/ jsxs(PageControls, {
@@ -29055,7 +29058,7 @@ var Pagination = function(param) {
                                 label: '100'
                             }
                         ],
-                        value: pageInfo.items,
+                        value: pageInfo.pageSize,
                         setValue: function(value) {
                             onPageSizeChange(Number(value));
                         },
@@ -29074,38 +29077,79 @@ var Pagination = function(param) {
             }),
             /*#__PURE__*/ jsxs(PageControls, {
                 children: [
-                    /*#__PURE__*/ jsx(Typography, {
-                        variant: "paragraph300Regular",
-                        as: "span",
-                        children: "".concat(pageInfo.items * (pageInfo.currentPage - 1) + 1, " – ").concat(pageInfo.currentPage >= pageInfo.pageCount ? pageInfo.itemCount : pageInfo.items * pageInfo.currentPage, " of ").concat(pageInfo.itemCount)
-                    }),
-                    /*#__PURE__*/ jsx(Button, {
-                        color: "secondary",
-                        onClick: function() {
-                            return onPageChange(pageInfo.currentPage - 1);
-                        },
-                        disabled: isLoading || pageInfo.currentPage === 1,
-                        style: {
-                            fontSize: 10,
-                            padding: spacing(1),
-                            marginLeft: spacing(1)
-                        },
-                        "data-testid": "".concat(testId, "-prev-button"),
-                        children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                    mode === 'page' && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph300Regular",
+                                as: "span",
+                                children: "".concat(pageInfo.pageSize * (pageInfo.currentPage - 1) + 1, " – ").concat(pageInfo.currentPage >= pageInfo.pageCount ? pageInfo.itemCount : pageInfo.pageSize * pageInfo.currentPage, " of ").concat(pageInfo.itemCount)
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange(pageInfo.currentPage - 1);
+                                },
+                                disabled: isLoading || pageInfo.currentPage === 1,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-prev-button"),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange(pageInfo.currentPage + 1);
+                                },
+                                disabled: isLoading || pageInfo.currentPage >= pageInfo.pageCount,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-next-button"),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {})
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ jsx(Button, {
-                        color: "secondary",
-                        onClick: function() {
-                            return onPageChange(pageInfo.currentPage + 1);
-                        },
-                        disabled: isLoading || pageInfo.currentPage >= pageInfo.pageCount,
-                        style: {
-                            fontSize: 10,
-                            padding: spacing(1),
-                            marginLeft: spacing(1)
-                        },
-                        "data-testid": "".concat(testId, "-next-button"),
-                        children: /*#__PURE__*/ jsx(ChevronRight, {})
+                    mode === 'cursor' && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph300Regular",
+                                as: "span",
+                                children: "".concat(pageInfo.pageIndex * pageInfo.pageSize + 1, " – ").concat((pageInfo.pageIndex + 1) * pageInfo.pageSize > pageInfo.itemCount ? pageInfo.itemCount : (pageInfo.pageIndex + 1) * pageInfo.pageSize, " of ").concat(pageInfo.itemCount)
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange('prev');
+                                },
+                                disabled: isLoading || !pageInfo.hasPrevPage,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-prev-button"),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                color: "secondary",
+                                onClick: function() {
+                                    return onPageChange('next');
+                                },
+                                disabled: isLoading || !pageInfo.hasNextPage,
+                                style: {
+                                    fontSize: 10,
+                                    padding: spacing(1),
+                                    marginLeft: spacing(1)
+                                },
+                                "data-testid": "".concat(testId, "-next-button"),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {})
+                            })
+                        ]
                     })
                 ]
             })
@@ -29168,7 +29212,7 @@ function _object_without_properties_loose$3(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$7(strings, raw) {
+function _tagged_template_literal$6(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -29178,16 +29222,16 @@ function _tagged_template_literal$7(strings, raw) {
         }
     }));
 }
-function _templateObject$7() {
-    var data = _tagged_template_literal$7([
+function _templateObject$6() {
+    var data = _tagged_template_literal$6([
         "\n  display: flex;\n  align-items: center;\n"
     ]);
-    _templateObject$7 = function _templateObject() {
+    _templateObject$6 = function _templateObject() {
         return data;
     };
     return data;
 }
-var RadioButtonContainer = styled.div(_templateObject$7());
+var RadioButtonContainer = styled.div(_templateObject$6());
 var RadioButton = function(_param) {
     var id = _param.id, name = _param.name, label = _param.label, value = _param.value, checked = _param.checked, onChange = _param.onChange, disabled = _param.disabled, required = _param.required, className = _param.className, style = _param.style, props = _object_without_properties$3(_param, [
         "id",
@@ -29401,7 +29445,7 @@ function _object_without_properties_loose$2(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$6(strings, raw) {
+function _tagged_template_literal$5(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -29411,18 +29455,18 @@ function _tagged_template_literal$6(strings, raw) {
         }
     }));
 }
-function _templateObject$6() {
-    var data = _tagged_template_literal$6([
+function _templateObject$5() {
+    var data = _tagged_template_literal$5([
         "\n  display: flex;\n  align-items: center;\n  gap: ",
         "px;\n"
     ]);
-    _templateObject$6 = function _templateObject() {
+    _templateObject$5 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$5() {
-    var data = _tagged_template_literal$6([
+    var data = _tagged_template_literal$5([
         "\n  display: flex;\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n\n  &:hover {\n    background: ",
         ";\n  }\n\n  & svg {\n    color: ",
         ";\n    font-size: 1.5rem;\n  }\n"
@@ -29432,17 +29476,17 @@ function _templateObject1$5() {
     };
     return data;
 }
-function _templateObject2$4() {
-    var data = _tagged_template_literal$6([
+function _templateObject2$5() {
+    var data = _tagged_template_literal$5([
         "\n  padding-left: 3.25rem;\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n"
     ]);
-    _templateObject2$4 = function _templateObject() {
+    _templateObject2$5 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$3() {
-    var data = _tagged_template_literal$6([
+    var data = _tagged_template_literal$5([
         "\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  border-radius: 0px ",
         "px ",
         "px 0px;\n  padding: 0 1.5rem;\n"
@@ -29452,9 +29496,9 @@ function _templateObject3$3() {
     };
     return data;
 }
-var Container$1 = styled.div(_templateObject$6(), spacing(1));
+var Container$1 = styled.div(_templateObject$5(), spacing(1));
 var IconWrapper = styled(IconWrapper$3)(_templateObject1$5(), neutral200, neutral600);
-var StyledInput = styled(BaseInput$1)(_templateObject2$4());
+var StyledInput = styled(BaseInput$1)(_templateObject2$5());
 var GoButton = styled(Button)(_templateObject3$3(), spacing(1), spacing(1));
 var SearchBar = function(_param) {
     var placeholder = _param.placeholder, _param_error = _param.error, error = _param_error === void 0 ? false : _param_error, onClear = _param.onClear, onSubmit = _param.onSubmit, _param_showButton = _param.showButton, showButton = _param_showButton === void 0 ? true : _param_showButton, _param_showFilters = _param.showFilters, showFilters = _param_showFilters === void 0 ? false : _param_showFilters, _param_testId = _param.testId, testId = _param_testId === void 0 ? 'search' : _param_testId, props = _object_without_properties$2(_param, [
@@ -33079,22 +33123,6 @@ function getCoreRowModel() {
         }));
     };
 }
-function expandRows(rowModel) {
-    var expandedRows = [];
-    var handleRow = function(row) {
-        var _row$subRows;
-        expandedRows.push(row);
-        if ((_row$subRows = row.subRows) != null && _row$subRows.length && row.getIsExpanded()) {
-            row.subRows.forEach(handleRow);
-        }
-    };
-    rowModel.rows.forEach(handleRow);
-    return {
-        rows: expandedRows,
-        flatRows: rowModel.flatRows,
-        rowsById: rowModel.rowsById
-    };
-}
 function filterRows(rows, filterRowImpl, table) {
     if (table.options.filterFromLeafRows) {
         return filterRowModelFromLeafs(rows, filterRowImpl, table);
@@ -33295,49 +33323,6 @@ function getFilteredRowModel() {
         }));
     };
 }
-function getPaginationRowModel(opts) {
-    return function(table) {
-        return memo(function() {
-            return [
-                table.getState().pagination,
-                table.getPrePaginationRowModel(),
-                table.options.paginateExpandedRows ? undefined : table.getState().expanded
-            ];
-        }, function(pagination, rowModel) {
-            if (!rowModel.rows.length) {
-                return rowModel;
-            }
-            var pageSize = pagination.pageSize, pageIndex = pagination.pageIndex;
-            var rows = rowModel.rows, flatRows = rowModel.flatRows, rowsById = rowModel.rowsById;
-            var pageStart = pageSize * pageIndex;
-            var pageEnd = pageStart + pageSize;
-            rows = rows.slice(pageStart, pageEnd);
-            var paginatedRowModel;
-            if (!table.options.paginateExpandedRows) {
-                paginatedRowModel = expandRows({
-                    rows: rows,
-                    flatRows: flatRows,
-                    rowsById: rowsById
-                });
-            } else {
-                paginatedRowModel = {
-                    rows: rows,
-                    flatRows: flatRows,
-                    rowsById: rowsById
-                };
-            }
-            paginatedRowModel.flatRows = [];
-            var handleRow = function(row) {
-                paginatedRowModel.flatRows.push(row);
-                if (row.subRows.length) {
-                    row.subRows.forEach(handleRow);
-                }
-            };
-            paginatedRowModel.rows.forEach(handleRow);
-            return paginatedRowModel;
-        }, getMemoOptions(table.options, 'debugTable', 'getPaginationRowModel'));
-    };
-}
 function getSortedRowModel() {
     return function(table) {
         return memo(function() {
@@ -33591,7 +33576,7 @@ function useReactTable(options) {
     return tableRef.current;
 }
 
-function _tagged_template_literal$5(strings, raw) {
+function _tagged_template_literal$4(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -33601,17 +33586,17 @@ function _tagged_template_literal$5(strings, raw) {
         }
     }));
 }
-function _templateObject$5() {
-    var data = _tagged_template_literal$5([
+function _templateObject$4() {
+    var data = _tagged_template_literal$4([
         "\n  position: sticky;\n  top: 0;\n  z-index: 1;\n"
     ]);
-    _templateObject$5 = function _templateObject() {
+    _templateObject$4 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$4() {
-    var data = _tagged_template_literal$5([
+    var data = _tagged_template_literal$4([
         "\n  padding: ",
         "px;\n  text-align: left;\n  position: relative;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: ",
         ";\n  border-bottom: 1px solid ",
@@ -33622,17 +33607,17 @@ function _templateObject1$4() {
     };
     return data;
 }
-function _templateObject2$3() {
-    var data = _tagged_template_literal$5([
+function _templateObject2$4() {
+    var data = _tagged_template_literal$4([
         "\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"
     ]);
-    _templateObject2$3 = function _templateObject() {
+    _templateObject2$4 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$2() {
-    var data = _tagged_template_literal$5([
+    var data = _tagged_template_literal$4([
         "\n  position: absolute;\n  right: 0;\n  top: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  width: 6px;\n  padding-right: 10px;\n"
     ]);
     _templateObject3$2 = function _templateObject() {
@@ -33641,7 +33626,7 @@ function _templateObject3$2() {
     return data;
 }
 function _templateObject4$1() {
-    var data = _tagged_template_literal$5([
+    var data = _tagged_template_literal$4([
         "\n  position: absolute;\n  height: 0%;\n  width: 6px;\n  background-color: ",
         ";\n  cursor: col-resize;\n  user-select: none;\n  touch-action: none;\n  transition: height ease 0.25s;\n"
     ]);
@@ -33651,7 +33636,7 @@ function _templateObject4$1() {
     return data;
 }
 function _templateObject5() {
-    var data = _tagged_template_literal$5([
+    var data = _tagged_template_literal$4([
         "\n  font-size: 9px;\n  display: inline-flex;\n  flex-direction: column;\n  margin-left: ",
         "px;\n  align-items: center;\n\n  & svg:first-of-type {\n    margin-bottom: -1.5px;\n  }\n  & svg:last-of-type {\n    margin-top: -1.5px;\n  }\n"
     ]);
@@ -33660,9 +33645,9 @@ function _templateObject5() {
     };
     return data;
 }
-var StyledHeader = styled.thead(_templateObject$5());
+var StyledHeader = styled.thead(_templateObject$4());
 var Th = styled(Typography)(_templateObject1$4(), spacing(1), neutral100, neutral300);
-var HeaderContent = styled.div(_templateObject2$3());
+var HeaderContent = styled.div(_templateObject2$4());
 var ResizeHandleContainer = styled.div(_templateObject3$2());
 var ResizeHandle = styled.div(_templateObject4$1(), neutral300);
 var SortIcon = styled.span(_templateObject5(), spacing(1));
@@ -33777,7 +33762,7 @@ function _object_spread_props$3(target, source) {
     }
     return target;
 }
-function _tagged_template_literal$4(strings, raw) {
+function _tagged_template_literal$3(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -33787,17 +33772,17 @@ function _tagged_template_literal$4(strings, raw) {
         }
     }));
 }
-function _templateObject$4() {
-    var data = _tagged_template_literal$4([
+function _templateObject$3() {
+    var data = _tagged_template_literal$3([
         "\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n"
     ]);
-    _templateObject$4 = function _templateObject() {
+    _templateObject$3 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$3() {
-    var data = _tagged_template_literal$4([
+    var data = _tagged_template_literal$3([
         "\n      &:hover {\n        background: ",
         ";\n      }\n    "
     ]);
@@ -33806,18 +33791,18 @@ function _templateObject1$3() {
     };
     return data;
 }
-function _templateObject2$2() {
-    var data = _tagged_template_literal$4([
+function _templateObject2$3() {
+    var data = _tagged_template_literal$3([
         "\n  ",
         "\n\n  &:last-child td {\n    border-bottom: none;\n  }\n"
     ]);
-    _templateObject2$2 = function _templateObject() {
+    _templateObject2$3 = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject3$1() {
-    var data = _tagged_template_literal$4([
+    var data = _tagged_template_literal$3([
         "\n  border-bottom: 1px solid ",
         ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"
     ]);
@@ -33826,8 +33811,8 @@ function _templateObject3$1() {
     };
     return data;
 }
-var StyledTableBody = styled.tbody(_templateObject$4());
-var Tr = styled.tr(_templateObject2$2(), function(props) {
+var StyledTableBody = styled.tbody(_templateObject$3());
+var Tr = styled.tr(_templateObject2$3(), function(props) {
     return props.enableHover && css(_templateObject1$3(), props.disabled ? neutral100 : primary100);
 });
 var Td = styled(Typography)(_templateObject3$1(), neutral300);
@@ -33858,20 +33843,16 @@ var TableBody = function(param) {
                     "data-testid": "".concat(testId, "-row-").concat(row.id),
                     children: row.getVisibleCells().map(function(cell) {
                         var _cell_column_columnDef;
-                        var isContextCell = cell.column.id === 'context';
                         return /*#__PURE__*/ jsx(Td, _object_spread_props$3(_object_spread$3({
                             variant: "paragraph200Regular",
                             as: "td"
                         }, ((_cell_column_columnDef = cell.column.columnDef) === null || _cell_column_columnDef === void 0 ? void 0 : _cell_column_columnDef.tooltip) && {
                             title: "".concat(cell.getValue())
                         }), {
-                            style: _object_spread$3({
+                            style: {
                                 width: "".concat(cell.column.getSize(), "px"),
                                 padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
-                            }, isContextCell && {
-                                display: 'flex',
-                                justifyContent: 'center'
-                            }),
+                            },
                             children: flexRender(cell.column.columnDef.cell, cell.getContext())
                         }), cell.id);
                     })
@@ -33881,70 +33862,31 @@ var TableBody = function(param) {
     });
 };
 
-function _tagged_template_literal$3(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject$3() {
-    var data = _tagged_template_literal$3([
-        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ",
-        "px;\n  background: none;\n  font-size: 20px;\n"
-    ]);
-    _templateObject$3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var ContextMenuButton = styled(Button)(_templateObject$3(), spacing(0.5));
-var ContextMenuCell = function(param) {
-    var row = param.row, setOpenMenuId = param.setOpenMenuId, openMenuId = param.openMenuId, contextMenuActions = param.contextMenuActions, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
-    var cellRef = useRef(null);
-    return /*#__PURE__*/ jsxs("div", {
-        ref: cellRef,
+var RowContextMenu = function(param) {
+    var anchorRef = param.anchorRef, _param_actions = param.actions, actions = _param_actions === void 0 ? [] : _param_actions, activeRow = param.activeRow, setActiveRow = param.setActiveRow;
+    return /*#__PURE__*/ jsx(Popper, {
+        open: !!activeRow,
+        anchorRef: anchorRef,
+        onClose: function() {
+            anchorRef.current = null;
+            setActiveRow(null);
+        },
+        offset: 4,
         style: {
-            position: 'relative'
+            padding: "".concat(spacing(1), "px 0")
         },
-        children: [
-            /*#__PURE__*/ jsx(ContextMenuButton, {
+        children: actions.map(function(action, i) {
+            return /*#__PURE__*/ jsx(MenuItem, {
+                disabled: activeRow == null ? true : typeof action.disabled === 'function' ? action.disabled(activeRow) : action.disabled,
                 onClick: function(e) {
                     e.stopPropagation();
-                    setOpenMenuId(openMenuId === row.id ? null : row.id);
+                    if (activeRow) action.onClick(activeRow);
+                    anchorRef.current = null;
+                    setActiveRow(null);
                 },
-                "data-testid": "".concat(testId, "-row-").concat(row.id, "-context-menu-button"),
-                children: /*#__PURE__*/ jsx(MoreVertical, {})
-            }),
-            /*#__PURE__*/ jsx(Popper, {
-                anchorRef: cellRef,
-                open: openMenuId === row.id,
-                onClose: function() {
-                    return setOpenMenuId(null);
-                },
-                style: {
-                    padding: "".concat(spacing(1), "px 0")
-                },
-                children: contextMenuActions.map(function(action, index) {
-                    var isDisabled = typeof action.disabled === 'function' ? action.disabled(row.original) : action.disabled;
-                    return /*#__PURE__*/ jsx(MenuItem, {
-                        disabled: isDisabled,
-                        onClick: function(e) {
-                            e.stopPropagation();
-                            if (!isDisabled) {
-                                action.onClick(row.original);
-                                setOpenMenuId(null);
-                            }
-                        },
-                        label: action.label,
-                        "data-testid": "".concat(testId, "-row-").concat(row.id, "-context-menu-").concat(formatForId(action.label), "-button")
-                    }, index);
-                })
-            })
-        ]
+                label: action.label
+            }, i);
+        })
     });
 };
 
@@ -34083,17 +34025,29 @@ function _templateObject1$2() {
     };
     return data;
 }
+function _templateObject2$2() {
+    var data = _tagged_template_literal$2([
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ",
+        "px;\n  background: none;\n  font-size: 20px;\n"
+    ]);
+    _templateObject2$2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 var TableContainer = styled(/*#__PURE__*/ forwardRef(function(props, ref) {
     return /*#__PURE__*/ jsx("div", _object_spread_props$2(_object_spread$2({}, props), {
         ref: ref
     }));
 }))(_templateObject$2(), neutral300, spacing(1));
 var TableWrapper = styled.table(_templateObject1$2());
+var ContextMenuButton = styled(Button)(_templateObject2$2(), spacing(0.5));
 var Table = function(param) {
-    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
+    var columns = param.columns, _param_data = param.data, data = _param_data === void 0 ? [] : _param_data, getRowId = param.getRowId, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, _param_paginationMode = param.paginationMode, paginationMode = _param_paginationMode === void 0 ? 'page' : _param_paginationMode, pageInfo = param.pageInfo, subText = param.subText, onPageSizeChange = param.onPageSizeChange, onPageChange = param.onPageChange, sortBy = param.sortBy, sortOrder = param.sortOrder, onSortChange = param.onSortChange, _param_enableRowSelection = param.enableRowSelection, enableRowSelection = _param_enableRowSelection === void 0 ? false : _param_enableRowSelection, _param_selectedRows = param.selectedRows, selectedRows = _param_selectedRows === void 0 ? {} : _param_selectedRows, onRowSelectionChange = param.onRowSelectionChange, getRowDisabled = param.getRowDisabled, onRowClick = param.onRowClick, contextMenuActions = param.contextMenuActions, _param_dense = param.dense, dense = _param_dense === void 0 ? false : _param_dense, height = param.height, error = param.error, _param_testId = param.testId, testId = _param_testId === void 0 ? 'table' : _param_testId;
     var containerRef = useRef(null);
+    var ctxMenuAnchorRef = useRef(null);
     var _useState = _sliced_to_array$1(useState({}), 2), columnSizing = _useState[0], setColumnSizing = _useState[1];
-    var _useState1 = _sliced_to_array$1(useState(null), 2), openMenuId = _useState1[0], setOpenMenuId = _useState1[1];
+    var _useState1 = _sliced_to_array$1(useState(null), 2), ctxMenuRow = _useState1[0], setCtxMenuRow = _useState1[1];
     var disableControls = isLoading || !(data === null || data === void 0 ? void 0 : data.length) || !!error;
     var hasSomePageProps = !!(pageInfo || onPageSizeChange || onPageChange);
     var hasAllPageProps = !!(pageInfo && onPageSizeChange && onPageChange);
@@ -34113,69 +34067,90 @@ var Table = function(param) {
     }, [
         columns
     ]);
+    var rowSelectColumn = useMemo(function() {
+        return {
+            id: 'row-select',
+            size: 50,
+            minSize: 50,
+            maxSize: 50,
+            enableResizing: false,
+            header: function(param) {
+                var table = param.table;
+                return /*#__PURE__*/ jsx(Checkbox, {
+                    width: 'min-content',
+                    checked: table.getIsAllRowsSelected(),
+                    indeterminate: table.getIsSomeRowsSelected(),
+                    onChange: table.getToggleAllPageRowsSelectedHandler(),
+                    disabled: disableControls,
+                    "data-testid": "".concat(testId, "-header-checkbox")
+                });
+            },
+            cell: function(param) {
+                var row = param.row;
+                return /*#__PURE__*/ jsx(Checkbox, {
+                    width: 'min-content',
+                    checked: row.getIsSelected(),
+                    disabled: disableControls || !row.getCanSelect(),
+                    onClick: function(e) {
+                        return e.stopPropagation();
+                    },
+                    onChange: row.getToggleSelectedHandler(),
+                    "data-testid": "".concat(testId, "-row-").concat(row.id, "-checkbox")
+                });
+            }
+        };
+    }, [
+        disableControls,
+        testId
+    ]);
+    var handleContextMenu = useCallback(function(e, row) {
+        e.stopPropagation();
+        setCtxMenuRow(function(prev) {
+            if (prev === row.original) {
+                ctxMenuAnchorRef.current = null;
+                return null;
+            }
+            ctxMenuAnchorRef.current = e.currentTarget;
+            return row.original;
+        });
+    }, []);
+    var contextColumn = useMemo(function() {
+        return {
+            id: 'context',
+            size: 50,
+            minSize: 50,
+            maxSize: 50,
+            enableResizing: false,
+            cell: function(param) {
+                var row = param.row;
+                return /*#__PURE__*/ jsx(ContextMenuButton, {
+                    onClick: function(e) {
+                        e.stopPropagation();
+                        handleContextMenu(e, row);
+                    },
+                    "data-testid": "".concat(testId, "-row-").concat(row.id, "-context-menu-button"),
+                    style: {
+                        margin: '0 auto'
+                    },
+                    children: /*#__PURE__*/ jsx(MoreVertical, {})
+                });
+            }
+        };
+    }, [
+        handleContextMenu,
+        testId
+    ]);
     var allColumns = useMemo(function() {
         var cols = _to_consumable_array(tableColumns);
-        if (enableRowSelection) {
-            cols.unshift({
-                id: 'row-select',
-                size: 32,
-                minSize: 32,
-                maxSize: 32,
-                header: function(param) {
-                    var table = param.table;
-                    return /*#__PURE__*/ jsx(Checkbox, {
-                        width: 'min-content',
-                        checked: table.getIsAllRowsSelected(),
-                        indeterminate: table.getIsSomeRowsSelected(),
-                        onChange: table.getToggleAllPageRowsSelectedHandler(),
-                        disabled: disableControls,
-                        "data-testid": "".concat(testId, "-header-checkbox")
-                    });
-                },
-                cell: function(param) {
-                    var row = param.row;
-                    return /*#__PURE__*/ jsx(Checkbox, {
-                        width: 'min-content',
-                        checked: row.getIsSelected(),
-                        disabled: disableControls || !row.getCanSelect(),
-                        onClick: function(e) {
-                            return e.stopPropagation();
-                        },
-                        onChange: row.getToggleSelectedHandler(),
-                        "data-testid": "".concat(testId, "-row-").concat(row.id, "-checkbox")
-                    });
-                },
-                enableResizing: false
-            });
-        }
-        if (contextMenuActions === null || contextMenuActions === void 0 ? void 0 : contextMenuActions.length) {
-            cols.push({
-                id: 'context',
-                size: 32,
-                minSize: 32,
-                maxSize: 32,
-                header: '',
-                cell: function(param) {
-                    var row = param.row;
-                    return /*#__PURE__*/ jsx(ContextMenuCell, {
-                        row: row,
-                        setOpenMenuId: setOpenMenuId,
-                        openMenuId: openMenuId,
-                        contextMenuActions: contextMenuActions,
-                        testId: testId
-                    });
-                },
-                enableResizing: false
-            });
-        }
+        if (enableRowSelection) cols.unshift(rowSelectColumn);
+        if (contextMenuActions === null || contextMenuActions === void 0 ? void 0 : contextMenuActions.length) cols.push(contextColumn);
         return cols;
     }, [
         tableColumns,
         enableRowSelection,
+        rowSelectColumn,
         contextMenuActions,
-        disableControls,
-        openMenuId,
-        testId
+        contextColumn
     ]);
     var handleSortingChange = useCallback(function(updater) {
         var currentSort = sortBy ? [
@@ -34213,10 +34188,6 @@ var Table = function(param) {
             sortDescFirst: false
         },
         state: {
-            pagination: pageInfo && {
-                pageIndex: pageInfo.currentPage - 1,
-                pageSize: pageInfo.items
-            },
             columnSizing: columnSizing,
             sorting: sortBy ? [
                 {
@@ -34229,12 +34200,11 @@ var Table = function(param) {
         onSortingChange: handleSortingChange,
         manualPagination: true,
         manualSorting: true,
-        pageCount: pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageCount,
+        pageCount: paginationMode === 'page' && pageInfo && 'currentPage' in pageInfo ? pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.pageCount : undefined,
         enableColumnResizing: true,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
         onRowSelectionChange: onRowSelectionChange,
         enableRowSelection: !!enableRowSelection,
         onColumnSizingChange: setColumnSizing,
@@ -34248,47 +34218,57 @@ var Table = function(param) {
     });
     return /*#__PURE__*/ jsxs("div", {
         children: [
-            /*#__PURE__*/ jsxs(TableContainer, {
+            /*#__PURE__*/ jsxs("div", {
                 style: {
-                    height: height
+                    position: 'relative',
+                    borderRadius: "".concat(spacing(1), "px"),
+                    overflow: 'hidden'
                 },
-                ref: containerRef,
                 children: [
                     isLoading && /*#__PURE__*/ jsx(LoadingOverlay, {}),
-                    Boolean(!isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || error)) && /*#__PURE__*/ jsx(Typography, {
-                        variant: "paragraph200Regular",
-                        as: "div",
+                    /*#__PURE__*/ jsxs(TableContainer, {
                         style: {
-                            position: 'absolute',
-                            left: '50%',
-                            top: '50%',
-                            transform: 'translate(-50%, -50%)'
+                            height: height
                         },
-                        children: !error ? 'No results found.' : error
-                    }),
-                    /*#__PURE__*/ jsxs(TableWrapper, {
+                        ref: containerRef,
                         children: [
-                            /*#__PURE__*/ jsx(TableHeader, {
-                                table: table,
-                                columnWidths: columnWidths,
-                                disableControls: disableControls,
-                                dense: dense,
-                                testId: testId
+                            Boolean(!isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || error)) && /*#__PURE__*/ jsx(Typography, {
+                                variant: "paragraph200Regular",
+                                as: "div",
+                                style: {
+                                    position: 'absolute',
+                                    left: '50%',
+                                    top: '50%',
+                                    transform: 'translate(-50%, -50%)'
+                                },
+                                children: !error ? 'No results found.' : error
                             }),
-                            /*#__PURE__*/ jsx(TableBody, {
-                                table: table,
-                                columnWidths: columnWidths,
-                                enableRowSelection: enableRowSelection,
-                                onRowClick: onRowClick,
-                                getRowDisabled: getRowDisabled,
-                                dense: dense,
-                                testId: testId
+                            /*#__PURE__*/ jsxs(TableWrapper, {
+                                children: [
+                                    /*#__PURE__*/ jsx(TableHeader, {
+                                        table: table,
+                                        columnWidths: columnWidths,
+                                        disableControls: disableControls,
+                                        dense: dense,
+                                        testId: testId
+                                    }),
+                                    /*#__PURE__*/ jsx(TableBody, {
+                                        table: table,
+                                        columnWidths: columnWidths,
+                                        enableRowSelection: enableRowSelection,
+                                        onRowClick: onRowClick,
+                                        getRowDisabled: getRowDisabled,
+                                        dense: dense,
+                                        testId: testId
+                                    })
+                                ]
                             })
                         ]
                     })
                 ]
             }),
-            onPageSizeChange && onPageChange && pageInfo && /*#__PURE__*/ jsx(Pagination, {
+            onPageSizeChange && onPageChange && pageInfo && (paginationMode === 'page' && 'currentPage' in pageInfo ? /*#__PURE__*/ jsx(Pagination, {
+                mode: "page",
                 pageInfo: pageInfo,
                 subText: subText,
                 isLoading: isLoading,
@@ -34301,6 +34281,26 @@ var Table = function(param) {
                     onPageChange(page);
                 },
                 testId: "".concat(testId, "-pagination")
+            }) : /*#__PURE__*/ jsx(Pagination, {
+                mode: "cursor",
+                pageInfo: pageInfo,
+                subText: subText,
+                isLoading: isLoading,
+                onPageSizeChange: function(size) {
+                    resetContainerScroll();
+                    onPageSizeChange(size);
+                },
+                onPageChange: function(page) {
+                    resetContainerScroll();
+                    onPageChange(page);
+                },
+                testId: "".concat(testId, "-pagination")
+            })),
+            /*#__PURE__*/ jsx(RowContextMenu, {
+                anchorRef: ctxMenuAnchorRef,
+                actions: contextMenuActions,
+                activeRow: ctxMenuRow,
+                setActiveRow: setCtxMenuRow
             })
         ]
     });