@paubox/ui 0.18.0 → 0.20.0

package/index.esm.js

@@ -878,7 +878,7 @@ function _object_spread_props$C(target, source) {
     }
     return target;
 }
-function _tagged_template_literal$v(strings, raw) {
+function _tagged_template_literal$w(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -888,16 +888,16 @@ function _tagged_template_literal$v(strings, raw) {
         }
     }));
 }
-function _templateObject$v() {
-    var data = _tagged_template_literal$v([
+function _templateObject$w() {
+    var data = _tagged_template_literal$w([
         "\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$v = function _templateObject() {
+    _templateObject$w = function _templateObject() {
         return data;
     };
     return data;
 }
-var RotatingSvg = styled.svg(_templateObject$v());
+var RotatingSvg = styled.svg(_templateObject$w());
 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$u(strings, raw) {
+function _tagged_template_literal$v(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -1588,17 +1588,17 @@ function _tagged_template_literal$u(strings, raw) {
         }
     }));
 }
-function _templateObject$u() {
-    var data = _tagged_template_literal$u([
+function _templateObject$v() {
+    var data = _tagged_template_literal$v([
         "\n  box-shadow: 0px 2px 8px 0px #0000001f;\n"
     ]);
-    _templateObject$u = function _templateObject() {
+    _templateObject$v = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$j() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$v([
         "\n  box-shadow: 0px 4px 12px 0px #00000029;\n"
     ]);
     _templateObject1$j = function _templateObject() {
@@ -1607,7 +1607,7 @@ function _templateObject1$j() {
     return data;
 }
 function _templateObject2$h() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$v([
         "\n  box-shadow: 0px 8px 16px 0px #0000001f;\n"
     ]);
     _templateObject2$h = function _templateObject() {
@@ -1616,7 +1616,7 @@ function _templateObject2$h() {
     return data;
 }
 function _templateObject3$d() {
-    var data = _tagged_template_literal$u([
+    var data = _tagged_template_literal$v([
         "\n  box-shadow: 0px 8px 32px 0px #00000029;\n"
     ]);
     _templateObject3$d = function _templateObject() {
@@ -1624,7 +1624,7 @@ function _templateObject3$d() {
     };
     return data;
 }
-var elevation100 = css(_templateObject$u());
+var elevation100 = css(_templateObject$v());
 var elevation200 = css(_templateObject1$j());
 var elevation300 = css(_templateObject2$h());
 var elevation400 = css(_templateObject3$d());
@@ -1642,7 +1642,7 @@ var spacing = function(multiple) {
     return multiple * DEFAULT_SPACING;
 };
 
-function _tagged_template_literal$t(strings, raw) {
+function _tagged_template_literal$u(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -1652,17 +1652,17 @@ function _tagged_template_literal$t(strings, raw) {
         }
     }));
 }
-function _templateObject$t() {
-    var data = _tagged_template_literal$t([
+function _templateObject$u() {
+    var data = _tagged_template_literal$u([
         "\n  font-family: 'Roboto', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-smooth: never;\n"
     ]);
-    _templateObject$t = function _templateObject() {
+    _templateObject$u = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$i() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1675,7 +1675,7 @@ function _templateObject1$i() {
     return data;
 }
 function _templateObject2$g() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1688,7 +1688,7 @@ function _templateObject2$g() {
     return data;
 }
 function _templateObject3$c() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\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$t([
+    var data = _tagged_template_literal$u([
         "\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$t([
+    var data = _tagged_template_literal$u([
         "\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$t([
+    var data = _tagged_template_literal$u([
         "\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$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1753,7 +1753,7 @@ function _templateObject7$1() {
     return data;
 }
 function _templateObject8() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1766,7 +1766,7 @@ function _templateObject8() {
     return data;
 }
 function _templateObject9() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1779,7 +1779,7 @@ function _templateObject9() {
     return data;
 }
 function _templateObject10() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1792,7 +1792,7 @@ function _templateObject10() {
     return data;
 }
 function _templateObject11() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1805,7 +1805,7 @@ function _templateObject11() {
     return data;
 }
 function _templateObject12() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1818,7 +1818,7 @@ function _templateObject12() {
     return data;
 }
 function _templateObject13() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1831,7 +1831,7 @@ function _templateObject13() {
     return data;
 }
 function _templateObject14() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1844,7 +1844,7 @@ function _templateObject14() {
     return data;
 }
 function _templateObject15() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1857,7 +1857,7 @@ function _templateObject15() {
     return data;
 }
 function _templateObject16() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1870,7 +1870,7 @@ function _templateObject16() {
     return data;
 }
 function _templateObject17() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1883,7 +1883,7 @@ function _templateObject17() {
     return data;
 }
 function _templateObject18() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1896,7 +1896,7 @@ function _templateObject18() {
     return data;
 }
 function _templateObject19() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1909,7 +1909,7 @@ function _templateObject19() {
     return data;
 }
 function _templateObject20() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1922,7 +1922,7 @@ function _templateObject20() {
     return data;
 }
 function _templateObject21() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1935,7 +1935,7 @@ function _templateObject21() {
     return data;
 }
 function _templateObject22() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1948,7 +1948,7 @@ function _templateObject22() {
     return data;
 }
 function _templateObject23() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1961,7 +1961,7 @@ function _templateObject23() {
     return data;
 }
 function _templateObject24() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1974,7 +1974,7 @@ function _templateObject24() {
     return data;
 }
 function _templateObject25() {
-    var data = _tagged_template_literal$t([
+    var data = _tagged_template_literal$u([
         "\n  ",
         "\n  font-size: ",
         "rem;\n  line-height: ",
@@ -1986,7 +1986,7 @@ function _templateObject25() {
     };
     return data;
 }
-var commonStyles = css(_templateObject$t());
+var commonStyles = css(_templateObject$u());
 // 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);
@@ -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$s(strings, raw) {
+function _tagged_template_literal$t(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$s() {
-    var data = _tagged_template_literal$s([
+function _templateObject$t() {
+    var data = _tagged_template_literal$t([
         "\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$s = function _templateObject() {
+    _templateObject$t = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$h() {
-    var data = _tagged_template_literal$s([
+    var data = _tagged_template_literal$t([
         "\n  ",
         ";\n  margin: 0;\n"
     ]);
@@ -2125,7 +2125,7 @@ function _templateObject1$h() {
     return data;
 }
 function _templateObject2$f() {
-    var data = _tagged_template_literal$s([
+    var data = _tagged_template_literal$t([
         "\n  ",
         ";\n  margin: 0;\n"
     ]);
@@ -2135,7 +2135,7 @@ function _templateObject2$f() {
     return data;
 }
 function _templateObject3$b() {
-    var data = _tagged_template_literal$s([
+    var data = _tagged_template_literal$t([
         "\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$s([
+    var data = _tagged_template_literal$t([
         "\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$s([
+    var data = _tagged_template_literal$t([
         "\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$s(), function(param) {
+var AlertContainer = styled.div(_templateObject$t(), function(param) {
     var size = param.size;
     return size === 'large' ? '1rem' : '0.5rem 0.625rem';
 }, neutral900, function(param) {
@@ -2233,7 +2233,7 @@ var AlertBar = function(props) {
     });
 };
 
-function _tagged_template_literal$r(strings, raw) {
+function _tagged_template_literal$s(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -2243,10 +2243,11 @@ function _tagged_template_literal$r(strings, raw) {
         }
     }));
 }
-function _templateObject$r() {
-    var data = _tagged_template_literal$r([
+function _templateObject$s() {
+    var data = _tagged_template_literal$s([
         "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: ",
-        ";\n  border: none;\n  transition: all;\n  transition-duration: 200ms;\n  border-radius: ",
+        ";\n  border: ",
+        ";\n  transition: all;\n  transition-duration: 200ms;\n  border-radius: ",
         ";\n  background-color: ",
         ";\n  ",
         "\n  color: ",
@@ -2258,7 +2259,7 @@ function _templateObject$r() {
         ";\n    cursor: not-allowed;\n\n    color: ",
         ";\n  }\n"
     ]);
-    _templateObject$r = function _templateObject() {
+    _templateObject$s = function _templateObject() {
         return data;
     };
     return data;
@@ -2290,40 +2291,50 @@ var getColor = function(color, shade) {
     }
 };
 var getTextColor = function(color) {
-    switch(color){
-        case 'primary':
+    var variant = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'contained';
+    switch("".concat(color, "|").concat(variant)){
+        case 'primary|contained':
             return textPrimaryWhite;
-        case 'secondary':
+        case 'primary|outlined':
+            return primary600;
+        case 'secondary|contained':
             return textPrimary;
-        case 'danger':
+        case 'secondary|outlined':
+            return textPrimary;
+        case 'danger|contained':
+            return danger700;
+        case 'danger|outlined':
             return danger700;
         default:
             return textPrimary;
     }
 };
-var BaseButton = styled.button(_templateObject$r(), function(props) {
+var BaseButton = styled.button(_templateObject$s(), function(props) {
     return props.size === 'large' ? '12px 16px' : '10px 12px';
+}, function(param) {
+    var color = param.color, variant = param.variant;
+    return variant === 'outlined' ? "1px solid ".concat(color === 'secondary' ? neutral400 : getColor(color, 600)) : 'none';
 }, function(param) {
     var round = param.round;
-    return round ? '50%' : '4px';
+    return round ? '50%' : "".concat(spacing(1), "px");
 }, function(param) {
-    var color = param.color, disabled = param.disabled;
-    return disabled ? undefined : color ? getColor(color, 600) : 'white';
+    var color = param.color, variant = param.variant, disabled = param.disabled;
+    return disabled ? undefined : variant === 'outlined' ? 'white' : color ? getColor(color, 600) : 'white';
 }, function(param) {
     var size = param.size;
     return size === 'large' ? $button100Medium : $button200Medium;
 }, function(param) {
-    var color = param.color, disabled = param.disabled;
-    return disabled ? undefined : getTextColor(color);
+    var color = param.color, variant = param.variant, disabled = param.disabled;
+    return disabled ? undefined : getTextColor(color, variant);
 }, function(param) {
-    var color = param.color, disabled = param.disabled;
-    return disabled ? undefined : color ? getColor(color, 700) : neutral100;
+    var color = param.color, variant = param.variant, disabled = param.disabled;
+    return disabled ? undefined : variant === 'outlined' ? neutral100 : color ? getColor(color, 700) : neutral100;
 }, function(param) {
     var color = param.color, disabled = param.disabled;
     return color === 'danger' && !disabled ? danger800 : undefined;
 }, function(param) {
-    var color = param.color, disabled = param.disabled;
-    return disabled ? undefined : color ? getColor(color, 800) : neutral200;
+    var color = param.color, variant = param.variant, disabled = param.disabled;
+    return disabled ? undefined : variant === 'outlined' ? 'white' : color ? getColor(color, 800) : neutral200;
 }, function(param) {
     var color = param.color, disabled = param.disabled;
     return color === 'danger' && !disabled ? danger900 : undefined;
@@ -2406,7 +2417,7 @@ function _object_without_properties_loose$m(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$q(strings, raw) {
+function _tagged_template_literal$r(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -2416,17 +2427,17 @@ function _tagged_template_literal$q(strings, raw) {
         }
     }));
 }
-function _templateObject$q() {
-    var data = _tagged_template_literal$q([
+function _templateObject$r() {
+    var data = _tagged_template_literal$r([
         "\n  display: flex;\n  margin: ",
         ";\n"
     ]);
-    _templateObject$q = function _templateObject() {
+    _templateObject$r = function _templateObject() {
         return data;
     };
     return data;
 }
-var IconWrapper$4 = styled.span(_templateObject$q(), function(props) {
+var IconWrapper$4 = styled.span(_templateObject$r(), function(props) {
     return props.iconLeft ? '0 8px 0 0' : props.iconRight ? '0 0 0 8px' : '0';
 });
 var Button = /*#__PURE__*/ forwardRef(function(_param, ref) {
@@ -21492,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$p(strings, raw) {
+function _tagged_template_literal$q(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21502,8 +21513,8 @@ function _tagged_template_literal$p(strings, raw) {
         }
     }));
 }
-function _templateObject$p() {
-    var data = _tagged_template_literal$p([
+function _templateObject$q() {
+    var data = _tagged_template_literal$q([
         "\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    ",
@@ -21515,13 +21526,13 @@ function _templateObject$p() {
         ";\n    background: ",
         ";\n  }\n"
     ]);
-    _templateObject$p = function _templateObject() {
+    _templateObject$q = function _templateObject() {
         return data;
     };
     return data;
 }
 function _templateObject1$g() {
-    var data = _tagged_template_literal$p([
+    var data = _tagged_template_literal$q([
         "\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: ",
@@ -21542,7 +21553,7 @@ function _templateObject1$g() {
     return data;
 }
 function _templateObject2$e() {
-    var data = _tagged_template_literal$p([
+    var data = _tagged_template_literal$q([
         "\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: ",
@@ -21558,7 +21569,7 @@ function _templateObject2$e() {
     };
     return data;
 }
-var dayStyles = css(_templateObject$p(), $paragraph300Medium, neutral400, $paragraph300Bold, primary600, $paragraph300Medium, neutral400, primary100, textPrimaryWhite, primary600);
+var dayStyles = css(_templateObject$q(), $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 CalendarContainer = function(param) {
@@ -21740,7 +21751,7 @@ function _object_without_properties_loose$j(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$o(strings, raw) {
+function _tagged_template_literal$p(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21750,16 +21761,16 @@ function _tagged_template_literal$o(strings, raw) {
         }
     }));
 }
-function _templateObject$o() {
-    var data = _tagged_template_literal$o([
+function _templateObject$p() {
+    var data = _tagged_template_literal$p([
         "\n  height: 15px;\n  width: 15px;\n  cursor: pointer;\n"
     ]);
-    _templateObject$o = function _templateObject() {
+    _templateObject$p = function _templateObject() {
         return data;
     };
     return data;
 }
-var StyledCheckbox = styled.input(_templateObject$o());
+var StyledCheckbox = styled.input(_templateObject$p());
 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",
@@ -21892,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$n(strings, raw) {
+function _tagged_template_literal$o(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21913,18 +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$n() {
-    var data = _tagged_template_literal$n([
+function _templateObject$o() {
+    var data = _tagged_template_literal$o([
         "\n  position: absolute;\n  z-index: 1;\n  padding: ",
-        "px;\n  border-radius: 8px;\n  background: white;\n  ",
+        "px;\n  border-radius: ",
+        "px;\n  background: white;\n  ",
         "\n"
     ]);
-    _templateObject$n = function _templateObject() {
+    _templateObject$o = function _templateObject() {
         return data;
     };
     return data;
 }
-var PopperContainer = styled.div(_templateObject$n(), spacing(2), elevation400);
+var PopperContainer = styled.div(_templateObject$o(), spacing(2), spacing(1), elevation400);
 var calculatePosition = function(anchorRect, popperRect, side, align, offset, detectEdges) {
     var top = 0;
     var left = 0;
@@ -21995,28 +22007,27 @@ var Popper = function(param) {
         containerRef
     ], onClose, open);
     var updatePosition = useCallback(function() {
-        if (anchorRef.current && containerRef.current) {
-            var anchorRect = anchorRef.current.getBoundingClientRect();
-            var popperRect = containerRef.current.getBoundingClientRect();
-            var el = anchorRef.current;
-            var isInsideFixedContainer = false;
-            while(el && el !== document.body){
-                var style = window.getComputedStyle(el);
-                if (style.position === 'fixed') {
-                    isInsideFixedContainer = true;
-                    break;
-                }
-                if (!el.parentElement) break;
-                el = el.parentElement;
+        if (!anchorRef.current || !containerRef.current) return;
+        var anchorRect = anchorRef.current.getBoundingClientRect();
+        var popperRect = containerRef.current.getBoundingClientRect();
+        var el = anchorRef.current;
+        var isInsideFixedContainer = false;
+        while(el && el !== document.body){
+            var style = window.getComputedStyle(el);
+            if (style.position === 'fixed') {
+                isInsideFixedContainer = true;
+                break;
             }
-            var scrollX = isInsideFixedContainer ? 0 : window.scrollX || document.documentElement.scrollLeft;
-            var scrollY = isInsideFixedContainer ? 0 : window.scrollY || document.documentElement.scrollTop;
-            var _calculatePosition = calculatePosition(anchorRect, popperRect, side, align, offset, detectEdges), top = _calculatePosition.top, left = _calculatePosition.left;
-            setPosition({
-                top: top + scrollY,
-                left: left + scrollX
-            });
+            if (!el.parentElement) break;
+            el = el.parentElement;
         }
+        var scrollX = isInsideFixedContainer ? 0 : window.scrollX || document.documentElement.scrollLeft;
+        var scrollY = isInsideFixedContainer ? 0 : window.scrollY || document.documentElement.scrollTop;
+        var _calculatePosition = calculatePosition(anchorRect, popperRect, side, align, offset, detectEdges), top = _calculatePosition.top, left = _calculatePosition.left;
+        setPosition({
+            top: top + scrollY,
+            left: left + scrollX
+        });
     }, [
         anchorRef,
         containerRef,
@@ -22025,20 +22036,28 @@ var Popper = function(param) {
         offset,
         detectEdges
     ]);
-    useEffect(function() {
-        updatePosition();
+    useLayoutEffect(function() {
         if (open) {
-            window.addEventListener('scroll', updatePosition, true);
-            window.addEventListener('resize', updatePosition);
-            return function() {
-                window.removeEventListener('scroll', updatePosition, true);
-                window.removeEventListener('resize', updatePosition);
-            };
+            updatePosition();
+        } else {
+            setPosition(null);
         }
     }, [
         open,
         updatePosition
     ]);
+    useEffect(function() {
+        if (!open) return;
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return function() {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [
+        open,
+        updatePosition
+    ]);
     if (!open) return null;
     return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(PopperContainer, {
         ref: containerRef,
@@ -22169,7 +22188,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$m(strings, raw) {
+function _tagged_template_literal$n(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22187,18 +22206,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$m() {
-    var data = _tagged_template_literal$m([
+function _templateObject$n() {
+    var data = _tagged_template_literal$n([
         "\n  display: flex;\n  justify-content: space-between;\n  padding: ",
         "px;\n  border: 1px solid ",
-        ";\n  border-radius: 6;\n  font-weight: 700;\n  opacity: 0.8;\n"
+        ";\n  border-radius: ",
+        "px;\n  font-weight: 700;\n  opacity: 0.8;\n"
     ]);
-    _templateObject$m = function _templateObject() {
+    _templateObject$n = function _templateObject() {
         return data;
     };
     return data;
 }
-var DatePickerButton = styled(Button)(_templateObject$m(), spacing(1), neutral300);
+var DatePickerButton = styled(Button)(_templateObject$n(), 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",
@@ -22368,6 +22388,16 @@ 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) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
 function _unsupported_iterable_to_array$h(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _array_like_to_array$h(o, minLen);
@@ -22376,30 +22406,64 @@ 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([
+        "\n  margin-left: ",
+        "px;\n  transition: all 150ms ease-in-out;\n  transform: ",
+        ";\n"
+    ]);
+    _templateObject$m = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var ArrowIcon = styled(ChevronDown)(_templateObject$m(), spacing(1), function(param) {
+    var open = param.open;
+    return open ? 'rotate(180deg)' : 'rotate(0deg)';
+});
 var DropdownMenu = function(param) {
-    var label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, iconLeft = param.iconLeft, _param_size = param.size, size = _param_size === void 0 ? 'small' : _param_size, align = param.align, _param_color = param.color, color = _param_color === void 0 ? 'primary' : _param_color, _param_testId = param.testId, testId = _param_testId === void 0 ? 'dropdown' : _param_testId;
+    var label = param.label, items = param.items, children = param.children, openProp = param.open, onOpenChange = param.onOpenChange, iconLeft = param.iconLeft, _param_size = param.size, size = _param_size === void 0 ? 'small' : _param_size, align = param.align, _param_buttonProps = param.buttonProps, buttonProps = _param_buttonProps === void 0 ? {
+        color: 'primary'
+    } : _param_buttonProps, _param_testId = param.testId, testId = _param_testId === void 0 ? 'dropdown' : _param_testId, childContainerRefs = param.childContainerRefs;
     var _useState = _sliced_to_array$e(useState(false), 2), open = _useState[0], setOpen = _useState[1];
     var buttonRef = useRef(null);
+    var isControlled = openProp !== undefined && onOpenChange;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx(Button, {
-                color: color,
+            /*#__PURE__*/ jsxs(Button, _object_spread_props$o(_object_spread$t({
                 ref: buttonRef,
                 iconLeft: iconLeft,
                 size: size,
-                iconRight: ChevronDown,
+                style: {
+                    whiteSpace: 'nowrap',
+                    borderColor: openProp || open ? primary600 : undefined
+                }
+            }, buttonProps), {
                 onClick: function() {
-                    setOpen(function(prev) {
-                        return !prev;
-                    });
+                    if (isControlled) {
+                        onOpenChange(!openProp);
+                    } else {
+                        setOpen(function(prev) {
+                            return !prev;
+                        });
+                    }
                 },
                 "data-testid": "".concat(testId, "-button"),
-                children: label
-            }),
-            /*#__PURE__*/ jsx(Popper, {
-                open: open,
+                children: [
+                    label,
+                    /*#__PURE__*/ jsx(ArrowIcon, {
+                        open: isControlled ? openProp : open
+                    })
+                ]
+            })),
+            /*#__PURE__*/ jsxs(Popper, {
+                open: isControlled ? openProp : open,
                 onClose: function() {
-                    return setOpen(false);
+                    if (isControlled) {
+                        onOpenChange(false);
+                    } else {
+                        setOpen(false);
+                    }
                 },
                 anchorRef: buttonRef,
                 align: align === 'center' ? 'middle' : align === 'right' ? 'end' : 'start',
@@ -22408,19 +22472,23 @@ var DropdownMenu = function(param) {
                 style: {
                     padding: "".concat(spacing(1), "px 0")
                 },
-                children: items.map(function(item) {
-                    return /*#__PURE__*/ jsx(MenuItem, _object_spread_props$o(_object_spread$t({
-                        size: size
-                    }, item), {
-                        onClick: function(e) {
-                            if (typeof item.onClick === 'function') {
-                                item.onClick(e);
-                            }
-                            setOpen(false);
-                        },
-                        "data-testid": "".concat(testId, "-").concat(formatForId(item.label), "-menu-item")
-                    }), item.label);
-                })
+                childContainerRefs: childContainerRefs,
+                children: [
+                    items === null || items === void 0 ? void 0 : items.map(function(item) {
+                        return /*#__PURE__*/ jsx(MenuItem, _object_spread_props$o(_object_spread$t({
+                            size: size
+                        }, item), {
+                            onClick: function(e) {
+                                if (typeof item.onClick === 'function') {
+                                    item.onClick(e);
+                                }
+                                setOpen(false);
+                            },
+                            "data-testid": "".concat(testId, "-").concat(formatForId(item.label), "-menu-item")
+                        }), formatForId(item.label));
+                    }),
+                    children
+                ]
             })
         ]
     });
@@ -22531,6 +22599,9 @@ var FilterRow = function(param) {
     var _touched_filters_filterKey_rowIndex, _touched_filters_filterKey, _touched_filters, _errors_filters_filterKey_rowIndex, _errors_filters_filterKey, _errors_filters, _touched_filters_filterKey_rowIndex1, _touched_filters_filterKey1, _touched_filters1, _errors_filters_filterKey_rowIndex1, _errors_filters_filterKey1, _errors_filters1, _touched_filters_filterKey_rowIndex2, _touched_filters_filterKey2, _touched_filters2, _errors_filters_filterKey_rowIndex2, _errors_filters_filterKey2, _errors_filters2;
     var currentFilter = values.filters[Number(filterKey)][Number(rowIndex)];
     var _useState = _sliced_to_array$d(useState(false), 2), isHovered = _useState[0], setIsHovered = _useState[1];
+    var currentField = fieldOptions.find(function(field) {
+        return field.value === currentFilter.field;
+    });
     return /*#__PURE__*/ jsxs(RowContainer, {
         isHovered: isHovered,
         children: [
@@ -22575,7 +22646,18 @@ var FilterRow = function(param) {
                         ]
                     }),
                     /*#__PURE__*/ jsx(MultiInputContainer, {
-                        children: /*#__PURE__*/ jsx(MultiInput, {
+                        children: currentFilter.field === 'select' ? /*#__PURE__*/ jsx(Select, {
+                            name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
+                            value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.terms,
+                            style: {
+                                width: '100%'
+                            },
+                            sz: "lg",
+                            options: currentField === null || currentField === void 0 ? void 0 : currentField.options,
+                            setValue: function(value) {
+                                return onChange("filters.".concat(filterKey, ".").concat(rowIndex, ".terms"), value);
+                            }
+                        }) : /*#__PURE__*/ jsx(MultiInput, {
                             name: "filters.".concat(filterKey, ".").concat(rowIndex, ".terms"),
                             values: currentFilter.terms,
                             setValues: function(terms) {
@@ -23376,7 +23458,7 @@ function _templateObject$i() {
 }
 function _templateObject1$c() {
     var data = _tagged_template_literal$i([
-        "\n  display: flex;\n  align-items: center;\n  width: max-content;\n  position: relative;\n  cursor: pointer;\n  &:hover {\n    background-color: ",
+        "\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: ",
         ";\n  }\n\n  border: 1px solid\n    ",
@@ -23517,7 +23599,7 @@ var IconWrapper$2 = styled.div(_templateObject5$1(), function(param) {
 var PlaceholderOption = styled.option(_templateObject6(), $paragraph100Semibold, textSecondary);
 var SelectedOption = styled.option(_templateObject7(), $paragraph200Regular, textPrimary);
 var MultiSelect = function(_param) {
-    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_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
+    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_options = _param.options, options = _param_options === void 0 ? [] : _param_options; _param.checkbox; var placeholder = _param.placeholder, label = _param.label, _param_chips = _param.chips, chips = _param_chips === void 0 ? false : _param_chips, className = _param.className, values = _param.values, setValues = _param.setValues, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_type = _param.type, type = _param_type === void 0 ? 'primary' : _param_type, props = _object_without_properties$f(_param, [
         "sz",
         "error",
         "options",
@@ -23525,6 +23607,7 @@ var MultiSelect = function(_param) {
         "placeholder",
         "label",
         "chips",
+        "className",
         "values",
         "setValues",
         "disabled",
@@ -23546,6 +23629,7 @@ var MultiSelect = function(_param) {
         type: type,
         error: error,
         open: open,
+        className: className,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
@@ -24045,8 +24129,8 @@ var MultiInput = function(_param) {
     var handleKeyDown = function(e) {
         if (e.key === 'Enter' && inputValue.trim()) {
             e.preventDefault();
-            if (!values.includes(inputValue.trim())) {
-                setValues(_to_consumable_array$5(values).concat([
+            if (!(values === null || values === void 0 ? void 0 : values.includes(inputValue.trim()))) {
+                setValues === null || setValues === void 0 ? void 0 : setValues(_to_consumable_array$5(values || []).concat([
                     inputValue.trim()
                 ]));
             }
@@ -24054,9 +24138,9 @@ var MultiInput = function(_param) {
         }
     };
     var removeValue = function(index) {
-        var newValues = _to_consumable_array$5(values);
+        var newValues = _to_consumable_array$5(values || []);
         newValues.splice(index, 1);
-        setValues(newValues);
+        setValues === null || setValues === void 0 ? void 0 : setValues(newValues);
     };
     return /*#__PURE__*/ jsxs(InputWrapper$1, _object_spread_props$k(_object_spread$n({
         error: error,
@@ -24099,7 +24183,7 @@ var MultiInput = function(_param) {
                         maxWidth: popperRef === null || popperRef === void 0 ? void 0 : (_popperRef_current = popperRef.current) === null || _popperRef_current === void 0 ? void 0 : _popperRef_current.offsetWidth,
                         side: "bottom",
                         align: "start",
-                        open: isFocused && values.length > 0,
+                        open: isFocused && !!(values === null || values === void 0 ? void 0 : values.length),
                         onClose: function() {
                             return setIsFocused(false);
                         },
@@ -24267,7 +24351,8 @@ function _templateObject1$a() {
         ";\n  }\n  transition: all 150ms ease-in-out;\n\n  &:focus-within {\n    border-color: ",
         ";\n  }\n\n  &:focus {\n    background-color: ",
         ";\n  }\n\n  border: 1px solid\n    ",
-        ";\n  border-radius: 0.5rem;\n\n  background-color: ",
+        ";\n  border-radius: ",
+        "px;\n\n  background-color: ",
         ";\n"
     ]);
     _templateObject1$a = function _templateObject() {
@@ -24291,7 +24376,8 @@ function _templateObject2$8() {
 }
 function _templateObject3$6() {
     var data = _tagged_template_literal$f([
-        "\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  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"
     ]);
     _templateObject3$6 = function _templateObject() {
@@ -24323,8 +24409,8 @@ var SelectWrapper = styled.div(_templateObject1$a(), function(param) {
     return type === 'primary' ? neutral100 : neutral200;
 }, function(param) {
     var error = param.error, disabled = param.disabled, type = param.type, open = param.open;
-    return type === 'primary' ? open ? primary600 : error && !disabled ? danger600 : neutral200 : error && !disabled ? danger600 : 'transparent';
-}, function(param) {
+    return type === 'primary' ? open ? primary600 : error && !disabled ? danger600 : neutral400 : error && !disabled ? danger600 : 'transparent';
+}, spacing(1), function(param) {
     var disabled = param.disabled, type = param.type;
     return disabled || type === 'secondary' ? neutral100 : 'white';
 });
@@ -24340,6 +24426,9 @@ var BaseSelect = styled.select(_templateObject2$8(), neutral500, function(param)
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
 var IconWrapper$1 = styled.div(_templateObject3$6(), function(param) {
+    var sz = param.sz;
+    return sz === 'lg' ? 1 : 0.75;
+}, function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
@@ -24367,6 +24456,7 @@ var Select = function(_param) {
         setOpen(false);
     };
     return /*#__PURE__*/ jsxs(SelectWrapper, {
+        ref: selectRef,
         disabled: disabled,
         type: type,
         error: error,
@@ -24376,7 +24466,6 @@ var Select = function(_param) {
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
                     /*#__PURE__*/ jsx(BaseSelect, _object_spread_props$j(_object_spread$m({
-                        ref: selectRef,
                         onClick: function() {
                             return setOpen(function(prev) {
                                 return !prev;
@@ -24405,6 +24494,7 @@ var Select = function(_param) {
                     })),
                     /*#__PURE__*/ jsx(IconWrapper$1, {
                         open: open,
+                        sz: sz,
                         children: /*#__PURE__*/ jsx(ChevronDown, {})
                     })
                 ]
@@ -24417,7 +24507,6 @@ var Select = function(_param) {
                 anchorRef: selectRef,
                 align: "start",
                 offset: 4,
-                detectEdges: false,
                 style: {
                     padding: "".concat(spacing(1), "px 0"),
                     maxHeight: maxHeight,
@@ -24941,7 +25030,8 @@ var MenuItem = function(_param) {
             onClick: onClick,
             style: {
                 cursor: disabled ? 'not-allowed' : 'pointer',
-                color: disabled ? "".concat(neutral500) : "".concat(neutral900)
+                color: disabled ? "".concat(neutral500) : "".concat(neutral900),
+                background: selected ? primary200 : undefined
             }
         }, props), {
             children: [
@@ -28951,28 +29041,25 @@ var Pagination = function(param) {
                         as: "span",
                         children: "Rows per page:"
                     }),
-                    /*#__PURE__*/ jsxs("select", {
-                        name: "pets",
-                        id: "pet-select",
+                    /*#__PURE__*/ jsx(Select, {
+                        name: "".concat(testId, "-pagesize-select"),
+                        id: "".concat(testId, "-pagesize-select"),
+                        options: [
+                            {
+                                value: '50',
+                                label: '50'
+                            },
+                            {
+                                value: '100',
+                                label: '100'
+                            }
+                        ],
                         value: pageInfo.items,
-                        onChange: function(e) {
-                            onPageSizeChange(Number(e.target.value));
+                        setValue: function(value) {
+                            onPageSizeChange(Number(value));
                         },
                         disabled: isLoading,
-                        style: {
-                            fontSize: '0.75rem'
-                        },
-                        "data-testid": "".concat(testId, "-pagesize-select"),
-                        children: [
-                            /*#__PURE__*/ jsx("option", {
-                                value: "50",
-                                children: "50"
-                            }),
-                            /*#__PURE__*/ jsx("option", {
-                                value: "100",
-                                children: "100"
-                            })
-                        ]
+                        "data-testid": "".concat(testId, "-pagesize-select")
                     }),
                     subText && /*#__PURE__*/ jsx(Typography, {
                         style: {
@@ -34505,10 +34592,9 @@ function _templateObject() {
         "\n  background-color: ",
         ";\n  border-radius: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  font-size: ",
         ";\n  color: ",
-        ";\n  white-space: 'wrap';\n  word-wrap: break-word;\n  display: ",
-        ";\n  min-height: 100%;\n  width: ",
-        ";\n  height: fit-content;\n  position: absolute;\n  display: flex;\n  align-items: center;\n\n  ",
-        "\n  margin-top: auto;\n  margin-bottom: auto;\n"
+        ";\n  z-index: 50;\n  white-space: 'wrap';\n  word-wrap: break-word;\n  display: ",
+        ";\n  width: ",
+        ";\n  position: fixed;\n  align-items: center;\n  height: min-content;\n"
     ]);
     _templateObject = function _templateObject() {
         return data;
@@ -34527,7 +34613,7 @@ function _templateObject1() {
 }
 function _templateObject2() {
     var data = _tagged_template_literal([
-        "\n  margin: auto;\n  position: absolute;\n  inset: 0;\n\n  ",
+        "\n  position: absolute;\n  ",
         "\n"
     ]);
     _templateObject2 = function _templateObject() {
@@ -34537,13 +34623,10 @@ function _templateObject2() {
 }
 var TooltipWrapper = styled.div(_templateObject(), neutral900, $paragraph300Regular, textPrimaryWhite, function(param) {
     var hover = param.hover;
-    return hover ? 'block' : 'none';
+    return hover ? 'flex' : 'none';
 }, function(param) {
     var size = param.size;
     return size === 'small' ? 'min-content' : 'max-content';
-}, function(param) {
-    var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
-    return "\n  margin-right: ".concat(x === 'left' ? '100%' : 'auto', ";\n  margin-left: ").concat(x === 'right' ? '100%' : 'auto', ";\n  z-index: 50;\n  top: ").concat(y === 'bottom' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n  bottom: ").concat(y === 'top' ? '150%' : y === 'center' ? '0rem' : 'auto', ";\n  left: ").concat(y === 'center' ? x === 'right' ? '1rem' : 'auto' : x === 'right' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n  right: ").concat(y === 'center' ? x === 'left' ? '1rem' : 'auto' : x === 'left' ? '-1.5rem' : x === 'center' ? '0' : 'auto', ";\n  ");
 });
 var TooltipContainer = styled.div(_templateObject1(), function(param) {
     var hover = param.hover;
@@ -34565,34 +34648,110 @@ var Triangle = function(param) {
     });
 };
 var ToolTipTriangle = styled(Triangle)(_templateObject2(), function(param) {
-    var _param_x = param.x, x = _param_x === void 0 ? 'bottom' : _param_x, _param_y = param.y, y = _param_y === void 0 ? 'left' : _param_y;
-    return "\n\n  top: ".concat(y === 'bottom' ? '-0.375rem' : y === 'center' ? '0' : 'auto', ";\n  bottom: ").concat(y === 'top' ? '-0.375rem' : y === 'center' ? '0' : 'auto', ";\n  left: ").concat(y === 'center' ? x === 'right' ? '-0.4rem' : 'auto' : x === 'right' ? '0.5rem' : x === 'center' ? '50%' : 'auto', ";\n  right: ").concat(y === 'center' ? x === 'left' ? '-0.4rem' : 'auto' : x === 'left' ? '0.5rem' : x === 'center' ? '50%' : 'auto', ";\n\n  display: ").concat(y === 'center' && x === 'center' ? 'none' : 'block', ";\n  transform: ").concat(y === 'top' ? 'rotate(180deg)' : y === 'bottom' ? 'rotate(0deg)' : x === 'left' ? 'rotate(90deg)' : x === 'right' ? 'rotate(-90deg)' : 'rotate(0deg)', ";\n  ");
+    var _param_placement = param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement;
+    if (placement === 'top') {
+        return "\n        bottom: -0.375rem;\n        left: 50%;\n        transform: translateX(-50%) rotate(180deg);\n        display: block;\n      ";
+    }
+    if (placement === 'bottom') {
+        return "\n        top: -0.375rem;\n        left: 50%;\n        transform: translateX(-50%) rotate(0deg);\n        display: block;\n      ";
+    }
+    if (placement === 'left') {
+        return "\n        right: -0.375rem;\n        top: 50%;\n        transform: translateY(-50%) rotate(90deg);\n        display: block;\n      ";
+    }
+    if (placement === 'right') {
+        return "\n        left: -0.375rem;\n        top: 50%;\n        transform: translateY(-50%) rotate(-90deg);\n        display: block;\n      ";
+    }
+    return '';
 });
 var Tooltip = function(_param) {
-    var children = _param.children, content = _param.content, rest = _object_without_properties(_param, [
+    var children = _param.children, content = _param.content, className = _param.className, placement = _param.placement, rest = _object_without_properties(_param, [
         "children",
-        "content"
+        "content",
+        "className",
+        "placement"
     ]);
-    var _useState = _sliced_to_array(useState(false), 2), hover = _useState[0], setHover = _useState[1];
+    var tooltipRef = useRef(null);
+    var childRef = useRef(null);
+    var _useState = _sliced_to_array(useState({
+        top: 0,
+        left: 0
+    }), 2), position = _useState[0], setPosition = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), hover = _useState1[0], setHover = _useState1[1];
     var handleMouseEnter = function() {
         setHover(true);
     };
     var handleMouseLeave = function() {
         setHover(false);
     };
+    useEffect(function() {
+        var updatePosition = function() {
+            if (!childRef.current || !tooltipRef.current) return;
+            var childRect = childRef.current.getBoundingClientRect();
+            var tooltipRect = tooltipRef.current.getBoundingClientRect();
+            var scrollX = window.scrollX || window.pageXOffset;
+            var scrollY = window.scrollY || window.pageYOffset;
+            var top = 0, left = 0;
+            switch(placement || 'bottom'){
+                case 'top':
+                    top = childRect.top + scrollY - tooltipRect.height - 5;
+                    left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
+                    break;
+                case 'bottom':
+                    top = childRect.bottom + scrollY + 5;
+                    left = childRect.left + scrollX + (childRect.width - tooltipRect.width) / 2;
+                    break;
+                case 'left':
+                    top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
+                    left = childRect.left + scrollX - tooltipRect.width - 5;
+                    break;
+                case 'right':
+                    top = childRect.top + scrollY + (childRect.height - tooltipRect.height) / 2;
+                    left = childRect.right + scrollX + 5;
+                    break;
+            }
+            setPosition({
+                top: top,
+                left: left
+            });
+        };
+        if (hover) {
+            updatePosition();
+            window.addEventListener('resize', updatePosition);
+            window.addEventListener('scroll', updatePosition);
+        }
+        return function() {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition);
+        };
+    }, [
+        hover,
+        placement
+    ]);
     return /*#__PURE__*/ jsxs(TooltipContainer, {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         hover: hover,
         children: [
             /*#__PURE__*/ jsx("div", {
+                ref: childRef,
                 children: children
             }),
-            /*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({}, rest), {
+            /*#__PURE__*/ jsxs(TooltipWrapper, _object_spread_props(_object_spread({
+                className: className,
+                ref: tooltipRef,
+                style: {
+                    top: position.top,
+                    left: position.left
+                }
+            }, rest), {
                 hover: hover,
                 children: [
-                    content,
-                    /*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({}, rest))
+                    /*#__PURE__*/ jsx("div", {
+                        children: content
+                    }),
+                    /*#__PURE__*/ jsx(ToolTipTriangle, _object_spread({
+                        placement: placement
+                    }, rest))
                 ]
             }))
         ]