willba-component-library 0.1.21 → 0.1.22

package/lib/index.umd.js

@@ -389,6 +389,118 @@
 	  });
 	}
 
+	var css_248z$b = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  background-color: #384265;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: auto;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
+	styleInject(css_248z$b);
+
+	function Divider() {
+	    return React__default.createElement("div", { className: "will-filter-bar-divider" });
+	}
+
+	var css_248z$a = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 0 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 14px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.4;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    margin: 5px 0;\n    padding: 10px 20px;\n  }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
+	styleInject(css_248z$a);
+
+	function SelectButton(_a) {
+	    var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date, description = _a.description;
+	    return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
+	        React__default.createElement("span", { className: "select-button-wrapper" },
+	            React__default.createElement("div", null,
+	                React__default.createElement("p", { className: "select-button-label" }, label),
+	                React__default.createElement("p", { className: "select-button-description" }, description)),
+	            !!date && (React__default.createElement(React__default.Fragment, null,
+	                React__default.createElement("span", { className: "select-button-divider" }, "|"),
+	                React__default.createElement("span", { className: "select-button-date" },
+	                    " ",
+	                    date))))));
+	}
+
+	var DefaultContext = {
+	  color: undefined,
+	  size: undefined,
+	  className: undefined,
+	  style: undefined,
+	  attr: undefined
+	};
+	var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
+
+	var __assign$2 = undefined && undefined.__assign || function () {
+	  __assign$2 = Object.assign || function (t) {
+	    for (var s, i = 1, n = arguments.length; i < n; i++) {
+	      s = arguments[i];
+	      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+	    }
+	    return t;
+	  };
+	  return __assign$2.apply(this, arguments);
+	};
+	var __rest$1 = undefined && undefined.__rest || function (s, e) {
+	  var t = {};
+	  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+	  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+	    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+	  }
+	  return t;
+	};
+	function Tree2Element(tree) {
+	  return tree && tree.map(function (node, i) {
+	    return React__default.createElement(node.tag, __assign$2({
+	      key: i
+	    }, node.attr), Tree2Element(node.child));
+	  });
+	}
+	function GenIcon(data) {
+	  // eslint-disable-next-line react/display-name
+	  return function (props) {
+	    return React__default.createElement(IconBase, __assign$2({
+	      attr: __assign$2({}, data.attr)
+	    }, props), Tree2Element(data.child));
+	  };
+	}
+	function IconBase(props) {
+	  var elem = function (conf) {
+	    var attr = props.attr,
+	      size = props.size,
+	      title = props.title,
+	      svgProps = __rest$1(props, ["attr", "size", "title"]);
+	    var computedSize = size || conf.size || "1em";
+	    var className;
+	    if (conf.className) className = conf.className;
+	    if (props.className) className = (className ? className + " " : "") + props.className;
+	    return React__default.createElement("svg", __assign$2({
+	      stroke: "currentColor",
+	      fill: "currentColor",
+	      strokeWidth: "0"
+	    }, conf.attr, attr, svgProps, {
+	      className: className,
+	      style: __assign$2(__assign$2({
+	        color: props.color || conf.color
+	      }, conf.style), props.style),
+	      height: computedSize,
+	      width: computedSize,
+	      xmlns: "http://www.w3.org/2000/svg"
+	    }), title && React__default.createElement("title", null, title), props.children);
+	  };
+	  return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
+	    return elem(conf);
+	  }) : elem(DefaultContext);
+	}
+
+	// THIS FILE IS AUTO GENERATED
+	function FaSearch (props) {
+	  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
+	}
+
+	var css_248z$9 = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n    margin-bottom: 5px;\n  }\n}\n";
+	styleInject(css_248z$9);
+
+	function SubmitButton$1(_a) {
+	    var onClick = _a.onClick;
+	    var t = useTranslation('filterBar').t;
+	    return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
+	        React__default.createElement("span", null,
+	            React__default.createElement(FaSearch, null)),
+	        t('submit.label')));
+	}
+
 	function _typeof(o) {
 	  "@babel/helpers - typeof";
 
@@ -3829,116 +3941,6 @@
 	  return date;
 	}
 
-	var css_248z$b = ".will-filter-bar-divider {\n  width: 1px;\n  margin: 0 10px;\n  height: 35px;\n  background-color: #384265;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-divider {\n    width: 100%;\n    margin: 0 10px;\n    height: 1px;\n    background-color: #384265;\n  }\n}";
-	styleInject(css_248z$b);
-
-	function Divider() {
-	    return React__default.createElement("div", { className: "will-filter-bar-divider" });
-	}
-
-	var css_248z$a = ".will-filter-bar-select-button {\n  width: 100%;\n  height: auto;\n  background-color: transparent;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 15px;\n  text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-select-button {\n    margin: 15px 0;\n  }\n\n  .will-filter-bar-select-button .select-button-wrapper {\n    justify-content: center;\n    text-align: center;\n  }\n\n  .will-filter-bar-select-button .select-button-divider {\n    display: none\n  }\n}\n\n\n";
-	styleInject(css_248z$a);
-
-	function SelectButton(_a) {
-	    var label = _a.label, onClick = _a.onClick, style = _a.style, date = _a.date;
-	    return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick, style: style },
-	        React__default.createElement("span", { className: "select-button-wrapper" },
-	            React__default.createElement("span", { className: "select-button-label" }, label),
-	            !!date && (React__default.createElement(React__default.Fragment, null,
-	                React__default.createElement("span", { className: "select-button-divider" }, "|"),
-	                React__default.createElement("span", { className: "select-button-date" },
-	                    " ",
-	                    date))))));
-	}
-
-	var DefaultContext = {
-	  color: undefined,
-	  size: undefined,
-	  className: undefined,
-	  style: undefined,
-	  attr: undefined
-	};
-	var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
-
-	var __assign$2 = undefined && undefined.__assign || function () {
-	  __assign$2 = Object.assign || function (t) {
-	    for (var s, i = 1, n = arguments.length; i < n; i++) {
-	      s = arguments[i];
-	      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-	    }
-	    return t;
-	  };
-	  return __assign$2.apply(this, arguments);
-	};
-	var __rest$1 = undefined && undefined.__rest || function (s, e) {
-	  var t = {};
-	  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-	  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-	    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-	  }
-	  return t;
-	};
-	function Tree2Element(tree) {
-	  return tree && tree.map(function (node, i) {
-	    return React__default.createElement(node.tag, __assign$2({
-	      key: i
-	    }, node.attr), Tree2Element(node.child));
-	  });
-	}
-	function GenIcon(data) {
-	  // eslint-disable-next-line react/display-name
-	  return function (props) {
-	    return React__default.createElement(IconBase, __assign$2({
-	      attr: __assign$2({}, data.attr)
-	    }, props), Tree2Element(data.child));
-	  };
-	}
-	function IconBase(props) {
-	  var elem = function (conf) {
-	    var attr = props.attr,
-	      size = props.size,
-	      title = props.title,
-	      svgProps = __rest$1(props, ["attr", "size", "title"]);
-	    var computedSize = size || conf.size || "1em";
-	    var className;
-	    if (conf.className) className = conf.className;
-	    if (props.className) className = (className ? className + " " : "") + props.className;
-	    return React__default.createElement("svg", __assign$2({
-	      stroke: "currentColor",
-	      fill: "currentColor",
-	      strokeWidth: "0"
-	    }, conf.attr, attr, svgProps, {
-	      className: className,
-	      style: __assign$2(__assign$2({
-	        color: props.color || conf.color
-	      }, conf.style), props.style),
-	      height: computedSize,
-	      width: computedSize,
-	      xmlns: "http://www.w3.org/2000/svg"
-	    }), title && React__default.createElement("title", null, title), props.children);
-	  };
-	  return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
-	    return elem(conf);
-	  }) : elem(DefaultContext);
-	}
-
-	// THIS FILE IS AUTO GENERATED
-	function FaSearch (props) {
-	  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"}}]})(props);
-	}
-
-	var css_248z$9 = ".will-filter-bar-submit-button {\n  width: auto;\n  height: auto;\n  background-color: var(--will-primary);\n  color: var(--will-white);\n  padding: 10px 20px;\n  border-radius: 20px;\n  cursor: pointer;\n  border: none;\n  white-space: nowrap;\n  text-transform: uppercase;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n\n.will-filter-bar-submit-button span {\n margin-right: 10px;\n display: flex;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-submit-button {\n    justify-content: center;\n    margin-bottom: 15px;\n  }\n}\n";
-	styleInject(css_248z$9);
-
-	function SubmitButton$1(_a) {
-	    var onClick = _a.onClick;
-	    var t = useTranslation('filterBar').t;
-	    return (React__default.createElement("button", { className: "will-filter-bar-submit-button", onClick: onClick },
-	        React__default.createElement("span", null,
-	            React__default.createElement(FaSearch, null)),
-	        t('submit.label')));
-	}
-
 	/******************************************************************************
 	Copyright (c) Microsoft Corporation.
 
@@ -7910,34 +7912,37 @@
 	var css_248z$8 = ".rdp {\n  --rdp-cell-size: 40px;\n  --rdp-caption-font-size: 18px;\n  --rdp-accent-color: #0000ff;\n  --rdp-background-color: #e7edff;\n  --rdp-accent-color-dark: #3003e1;\n  --rdp-background-color-dark: #180270;\n  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */\n  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */\n\n  margin: 1em;\n}\n\n/* Hide elements for devices that are not screen readers */\n.rdp-vhidden {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  position: absolute !important;\n  top: 0;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  border: 0 !important;\n}\n\n/* Buttons */\n.rdp-button_reset {\n  appearance: none;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  cursor: default;\n  color: inherit;\n  background: none;\n  font: inherit;\n\n  -moz-appearance: none;\n  -webkit-appearance: none;\n}\n\n.rdp-button_reset:focus-visible {\n  /* Make sure to reset outline only when :focus-visible is supported */\n  outline: none;\n}\n\n.rdp-button {\n  border: 2px solid transparent;\n}\n\n.rdp-button[disabled]:not(.rdp-day_selected) {\n  opacity: 0.25;\n}\n\n.rdp-button:not([disabled]) {\n  cursor: pointer;\n}\n\n.rdp-button:focus-visible:not([disabled]) {\n  color: inherit;\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n}\n\n.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {\n  background-color: var(--rdp-background-color);\n}\n\n.rdp-months {\n  display: flex;\n}\n\n.rdp-month {\n  margin: 0 1em;\n}\n\n.rdp-month:first-child {\n  margin-left: 0;\n}\n\n.rdp-month:last-child {\n  margin-right: 0;\n}\n\n.rdp-table {\n  margin: 0;\n  max-width: calc(var(--rdp-cell-size) * 7);\n  border-collapse: collapse;\n}\n\n.rdp-with_weeknumber .rdp-table {\n  max-width: calc(var(--rdp-cell-size) * 8);\n  border-collapse: collapse;\n}\n\n.rdp-caption {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0;\n  text-align: left;\n}\n\n.rdp-multiple_months .rdp-caption {\n  position: relative;\n  display: block;\n  text-align: center;\n}\n\n.rdp-caption_dropdowns {\n  position: relative;\n  display: inline-flex;\n}\n\n.rdp-caption_label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  padding: 0 0.25em;\n  white-space: nowrap;\n  color: currentColor;\n  border: 0;\n  border: 2px solid transparent;\n  font-family: inherit;\n  font-size: var(--rdp-caption-font-size);\n  font-weight: bold;\n}\n\n.rdp-nav {\n  white-space: nowrap;\n}\n\n.rdp-multiple_months .rdp-caption_start .rdp-nav {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-multiple_months .rdp-caption_end .rdp-nav {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n}\n\n.rdp-nav_button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  padding: 0.25em;\n  border-radius: 100%;\n}\n\n/* ---------- */\n/* Dropdowns  */\n/* ---------- */\n\n.rdp-dropdown_year,\n.rdp-dropdown_month {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown {\n  appearance: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  opacity: 0;\n  border: none;\n  background-color: transparent;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.rdp-dropdown[disabled] {\n  opacity: unset;\n  color: unset;\n}\n\n.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {\n  background-color: var(--rdp-background-color);\n  border: var(--rdp-outline);\n  border-radius: 6px;\n}\n\n.rdp-dropdown_icon {\n  margin: 0 0 0 5px;\n}\n\n.rdp-head {\n  border: 0;\n}\n\n.rdp-head_row,\n.rdp-row {\n  height: 100%;\n}\n\n.rdp-head_cell {\n  vertical-align: middle;\n  font-size: 0.75em;\n  font-weight: 700;\n  text-align: center;\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-transform: uppercase;\n}\n\n.rdp-tbody {\n  border: 0;\n}\n\n.rdp-tfoot {\n  margin: 0.5em;\n}\n\n.rdp-cell {\n  width: var(--rdp-cell-size);\n  height: 100%;\n  height: var(--rdp-cell-size);\n  padding: 0;\n  text-align: center;\n}\n\n.rdp-weeknumber {\n  font-size: 0.75em;\n}\n\n.rdp-weeknumber,\n.rdp-day {\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--rdp-cell-size);\n  max-width: var(--rdp-cell-size);\n  height: var(--rdp-cell-size);\n  margin: 0;\n  border: 2px solid transparent;\n  border-radius: 100%;\n}\n\n.rdp-day_today:not(.rdp-day_outside) {\n  font-weight: bold;\n}\n\n.rdp-day_selected,\n.rdp-day_selected:focus-visible,\n.rdp-day_selected:hover {\n  color: white;\n  opacity: 1;\n  background-color: var(--rdp-accent-color);\n}\n\n.rdp-day_outside {\n  opacity: 0.5;\n}\n\n.rdp-day_selected:focus-visible {\n  /* Since the background is the same use again the outline */\n  outline: var(--rdp-outline);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.rdp-day_range_end.rdp-day_range_start {\n  border-radius: 100%;\n}\n\n.rdp-day_range_middle {\n  border-radius: 0;\n}";
 	styleInject(css_248z$8);
 
-	var css_248z$7 = "/* .will-filter-bar-calendar {} */\n\n.will-calendar-filter-header {\n  padding: 15px 0;\n  border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n  text-align: left;\n}\n\n.will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n}\n\n/* Calendar overrides */\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n  left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n}\n\n\n";
+	var css_248z$7 = ".will-calendar-filter-header {\n  padding: 15px 0;\n  border-bottom: 1px solid var(--will-grey);\n}\n\n.will-calendar-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n  text-align: left;\n}\n\n.will-calendar-filter-container {\n  display: flex;\n  justify-content: center;\n}\n\n/* Calendar overrides */\n\n\n.will-calendar-filter-container .DayPicker {\n  font-size: 25px; /* Adjust this value to make the DayPicker bigger */\n}\n\n.will-calendar-filter-container .rdp-month {\n  position: relative;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_start {\n  padding-left: 70px;\n}\n\n.will-calendar-filter-container .rdp-month.rdp-caption_end {\n  padding-right: 70px;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav {\n  border: 1px solid var(--will-primary);\n  border-radius: 50%;\n  left: 25;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-nav svg {\n  color: var(--will-primary);\n}\n\n\n.will-calendar-filter-container .rdp-month .rdp-caption {\n  position: initial;\n}\n\n.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,\n.will-calendar-filter-container .rdp-table .rdp-head {\n  opacity: .6;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {\n  opacity: 0.7;\n}\n\n.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {\n  background-color: var(--will-primary);\n  opacity: 1;\n}\n\n.my-today:not(.rdp-day_selected) { \n  font-weight: 700;\n  opacity: 1;\n  color: var(--will-primary);\n}\n\n@media (max-width: 960px) {\n  .will-calendar-filter-container .rdp-month .rdp-nav {\n    border: none;\n    border-radius: initial;\n    \n  }\n}\n\n\n";
 	styleInject(css_248z$7);
 
-	var currentMonth = new Date();
 	function Calendar(_a) {
 	    var calendarRange = _a.calendarRange, setCalendarRange = _a.setCalendarRange;
-	    //const { t } = useTranslation('filterBar')
 	    var isTablet = reactResponsiveExports.useMediaQuery({ maxWidth: 960 });
-	    // Add default selection
-	    // const defaultCalendarSelected: DateRange = {
-	    //   from: currentMonth,
-	    //   to: addDays(currentMonth, 0),
-	    // }
-	    //--------------//----------------
+	    var today = startOfDay(new Date());
+	    var disabledDays = [
+	        {
+	            from: addDays(today, -2),
+	            to: addDays(today, -50),
+	        },
+	    ];
 	    React__default.useEffect(function () {
 	        if (!calendarRange)
 	            setCalendarRange(undefined);
 	    }, []);
 	    return (React__default.createElement("div", { className: "will-filter-bar-calendar" },
 	        React__default.createElement("div", { className: "will-calendar-filter-container" },
-	            React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, defaultMonth: currentMonth, selected: calendarRange, onSelect: setCalendarRange }))));
+	            React__default.createElement(DayPicker, { id: "will-calendar", mode: "range", showOutsideDays: true, numberOfMonths: !isTablet ? 2 : 1, weekStartsOn: 1, selected: calendarRange, onSelect: setCalendarRange, modifiersClassNames: {
+	                    today: 'my-today',
+	                }, modifiersStyles: {
+	                    disabled: { opacity: '0.2' },
+	                }, captionLayout: "dropdown-buttons", defaultMonth: today, disabled: disabledDays, fromMonth: today }))));
 	}
 
-	var css_248z$6 = ".will-guests-filter-label, .will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-inner {\n  margin-top: 30px;\n  margin-right: 50px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  margin-right: 20px;\n  font-weight: bold;\n \n}\n\n.will-guests-filter-inner > div {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-button {\n  border-radius: 50%;\n  border: none;\n  background-color: var(--will-onahau);\n  width: 25px;\n  height: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n@media (max-width: 960px) {\n\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}";
+	var css_248z$6 = ".will-guests-filter-label, .will-guests-filter-count {\n  font-size: 18px;\n  color: var(--will-text)\n}\n\n.will-guests-filter-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 30px;\n}\n\n.will-guests-filter-label {\n  display: block;\n  font-weight: 600;\n  margin-bottom: 10px;\n \n}\n\n.will-guests-filter-inner .will-guests-filter-counter {\n  display: flex;\n  align-items: center;\n}\n\n.will-guests-filter-count {\n  margin: 0 10px;\n  min-width: 30px;\n  text-align: center;\n}\n\n.will-guests-filter-counter-button {\n  border-radius: 50%;\n  border: none;\n  background-color: transparent;\n  border: 1px solid var(--will-grey);\n  width: 30px;\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n.will-guests-filter-counter-button:hover {\n  background-color: var(--will-onahau);\n}\n\n@media (max-width: 960px) {\n\n  .will-guests-filter-inner {\n    width: 100%;\n    margin: 15px 0;\n    justify-content: space-between;\n  }\n}";
 	styleInject(css_248z$6);
 
 	function GuestCount(_a) {
-	    var label = _a.label, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
+	    var label = _a.label, sortOrder = _a.sortOrder, id = _a.id, updateGuestsCount = _a.updateGuestsCount, count = _a.count, minVal = _a.minVal;
 	    var handleDecrement = function () {
 	        if (count > minVal) {
 	            updateGuestsCount(id, count - 1);
@@ -7946,10 +7951,10 @@
 	    var handleIncrement = function () {
 	        updateGuestsCount(id, count + 1);
 	    };
-	    return (React__default.createElement("div", { className: "will-guests-filter-inner" },
-	        React__default.createElement("span", { className: "will-guests-filter-label" }, label),
-	        React__default.createElement("div", null,
-	            React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleDecrement, disabled: minVal && count < 2 ? true : false, style: {
+	    return (React__default.createElement("div", { className: "will-guests-filter-inner", style: { order: "".concat(sortOrder) } },
+	        React__default.createElement("p", { className: "will-guests-filter-label" }, label),
+	        React__default.createElement("div", { className: "will-guests-filter-counter" },
+	            React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleDecrement, disabled: minVal && count < 2 ? true : false, style: {
 	                    cursor: minVal && count < 2
 	                        ? 'initial'
 	                        : !minVal && count < 1
@@ -7958,19 +7963,17 @@
 	                    paddingBottom: '4px',
 	                } }, "-"),
 	            React__default.createElement("span", { className: "will-guests-filter-count" }, count),
-	            React__default.createElement("button", { className: "will-guests-filter-button", onClick: handleIncrement }, "+"))));
+	            React__default.createElement("button", { className: "will-guests-filter-counter-button", onClick: handleIncrement }, "+"))));
 	}
 
-	var css_248z$5 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 16px;\n  text-transform: uppercase;\n  margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n  font-size: 15px;\n  font-weight: 500;\n  color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n\n@media (max-width: 960px) {\n  .will-guests-filter-container {\n   margin-top: 15px;\n  }\n}";
+	var css_248z$5 = ".will-filter-bar-guests {\n  text-align: initial;\n}\n\n.will-guests-filter-title {\n  font-size: 22px;\n  margin: 10px 0;\n}\n\n.will-guests-filter-subtitle {\n  font-size: 15px;\n  font-weight: 500;\n  color:var(--will-text)\n}\n\n\n.will-guests-filter-container {\n  display: flex;\n  flex-direction: column;\n  min-width: 300px;\n\n}\n\n\n@media (max-width: 960px) {\n  .will-guests-filter-title {\n    font-size: 18px;\n  }\n\n  .will-guests-filter-container {\n   margin-top: 15px;\n  }\n}";
 	styleInject(css_248z$5);
 
 	function Guests(_a) {
 	    var ageCategories = _a.ageCategories, updateGuestsCount = _a.updateGuestsCount, ageCategoryCounts = _a.ageCategoryCounts;
-	    var t = useTranslation('filterBar').t;
 	    return (React__default.createElement("div", { className: "will-filter-bar-guests" },
-	        React__default.createElement("h3", { className: "will-guests-filter-title" }, t('guests.title')),
-	        React__default.createElement("p", { className: "will-guests-filter-subtitle" }, t('guests.subtitle')),
-	        React__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts[category.id] ||
+	        React__default.createElement("h3", { className: "will-guests-filter-title" }, "Who's coming?"),
+	        React__default.createElement("div", { className: "will-guests-filter-container" }, ageCategories === null || ageCategories === void 0 ? void 0 : ageCategories.map(function (category) { return (React__default.createElement(GuestCount, { key: category.id, id: parseInt(category.id), label: category.name, minVal: category.minVal, sortOrder: category.sortOrder, updateGuestsCount: updateGuestsCount, count: ageCategoryCounts[category.id] ||
 	                category.minVal })); }))));
 	}
 
@@ -8130,10 +8133,10 @@
 	    };
 	}
 
-	var css_248z$3 = ".will-root {\n  z-index: 99999;\n  width: 100%;\n  max-height: 100vh;\n  position: relative;\n \n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n.will-filter-bar-underlay {\n  background-color: rgba(0,0,0,.8);\n  position: absolute;\n  /* top:0; */\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  min-height: 500vh;\n  z-index: 88888;\n\n  transform: translateY(-50%);\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  position: relative;\n  z-index: 222;\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 20px;\n  position: relative;\n  z-index: 222;\n  \n  \n  border-radius: 40px;\n  border-top-left-radius: 0;\n  background-color: var(--will-white);\n  \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n \n  padding: 90px 40px 30px 40px;\n  position: absolute;\n  top: 45px;\n  z-index: 111;\n  border-radius: 25px;\n  width: -webkit-fill-available;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {   \n    overflow-y: auto;\n    padding: 40px 10px;\n    top: 15px;\n    z-index: 0;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 20px;\n    padding: 30px 40px;\n    position: relative;\n  }\n\n  .will-root.isMobileAbsolute {\n    position: relative;\n    z-index: 99999;\n  }\n}\n\n";
+	var css_248z$3 = ".will-root {\n  z-index: 99999;\n  width: 100%;\n  max-height: 100vh;\n  position: relative;\n \n}\n\n.will-filter-bar {\n  box-sizing: border-box;\n  position: relative;\n}\n\n.will-filter-bar-underlay {\n  background-color: transparent;\n  position: absolute;\n  /* top:0; */\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  min-height: 500vh;\n  z-index: 88888;\n\n  transform: translateY(-50%);\n}\n\n/* Tabs */\n\n.will-filter-bar-tabs {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 222;\n  background: transparent;\n  padding: 10px;\n  gap: 10px\n}\n\n/* Header */\n.will-filter-bar-header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n  position: relative;\n  z-index: 222;\n  border-radius: 40px;\n  background-color: var(--will-white); \n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-header {\n    flex-direction: column;\n    padding: 20px;\n    border-radius: 25px;\n  }\n}\n\n/* Container */\n\n.will-filter-bar-container {\n  background-color: var(--will-white);\n  min-height: 100px;\n  padding: 40px 20px ;\n  position: absolute;\n  top: 125px;\n  z-index: 111;\n  border-radius: 25px;\n  box-shadow: var(--will-box-shadow);\n}\n\n@media (max-width: 960px) {\n  .will-root {   \n    overflow-y: auto;\n    padding: 40px 10px;\n    top: 15px;\n    z-index: 0;\n  }\n\n  .will-filter-bar-container {\n    margin-top: 10px;\n    top:0;\n    padding: 30px 20px;\n    position: relative;\n  }\n\n  .will-root.isMobileAbsolute {\n    position: relative;\n    z-index: 99999;\n  }\n}\n\n";
 	styleInject(css_248z$3);
 
-	var css_248z$2 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.8);\n\n  /* Confines */\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
+	var css_248z$2 = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n  font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n  \n  box-sizing: border-box;\n  font-size: 14px;\n  \n  color: #1E1E1E;\n\n  /* Palette */\n  --will-primary: #374269;\n  --will-secondary: #374269;\n  --will-grey: #ABA7AF;\n  --will-white: #fff;\n  --will-black: #000;\n  --will-onahau: #CDEEFF;\n  --will-text: #5A5959;\n  --will-transparent-white: rgba(255, 255, 255, 0.30);\n\n  /* Confines */\n  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;\n\n  /* Breakpoints */\n\n  --will-lg: 1140px;\n  --will-md: 960px;\n  --will-sm: 600px;\n  --will-xl: 1280px;\n  --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n  margin: 0;\n  padding: 0;\n}";
 	styleInject(css_248z$2);
 
 	const consoleLogger = {
@@ -10491,7 +10494,7 @@
 	  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M331.3 308.7L278.6 256l52.7-52.7c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-52.7-52.7c-6.2-6.2-15.6-7.1-22.6 0-7.1 7.1-6 16.6 0 22.6l52.7 52.7-52.7 52.7c-6.7 6.7-6.4 16.3 0 22.6 6.4 6.4 16.4 6.2 22.6 0l52.7-52.7 52.7 52.7c6.2 6.2 16.4 6.2 22.6 0 6.3-6.2 6.3-16.4 0-22.6z"}},{"tag":"path","attr":{"d":"M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"}}]})(props);
 	}
 
-	var css_248z$1 = ".will-filter-bar-close-button {\n  width: auto;\n  height: auto;\n  /* background-color: var(--will-grey); */\n  color: var(--will-grey);\n  padding: 2px 7px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  align-items: center;\n  font-size: 23px;\n  /* display: none; */\n\n  position: absolute;\n  top: 80px;\n  right: 20px;\n\n  min-height: 35px;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-close-button {\n    top: 10px;\n    right: 10px;\n\n    border-radius: 25px;\n    margin-left:0;\n   \n    display: flex;\n    justify-content: center;\n  }\n}\n";
+	var css_248z$1 = ".will-filter-bar-close-button {\n  width: auto;\n  height: auto;\n  /* background-color: var(--will-grey); */\n  color: var(--will-grey);\n  padding: 2px 7px;\n  border-radius: 50%;\n  cursor: pointer;\n  border: none;\n  display: flex;\n  align-items: center;\n  font-size: 23px;\n  /* display: none; */\n\n  position: absolute;\n  top: 10px;\n  right: 10px;\n\n  min-height: 35px;\n}\n\n@media (max-width: 960px) {\n  .will-filter-bar-close-button {\n    top: 10px;\n    right: 10px;\n\n    border-radius: 25px;\n    margin-left:0;\n   \n    display: flex;\n    justify-content: center;\n  }\n}\n";
 	styleInject(css_248z$1);
 
 	function CloseButton(_a) {
@@ -10500,7 +10503,7 @@
 	        React__default.createElement(IoIosCloseCircleOutline, null)));
 	}
 
-	var css_248z = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 50px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    text-transform: uppercase;\n    font-size: 12px;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--will-black);\n    border-top: none;\n    background-color: var(--will-transparent-white);\n    user-select: none;\n    font-weight: 600;\n  }\n\n  /* .will-filter-bar-tab-button:not(:first-child) {\n    border-left: none;\n  } */\n\n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-white);\n  }\n\n  .will-filter-bar-tab-button.active {\n    background-color: var(--will-white);\n    border-color: var(--will-white);\n  }\n\n\n\n\n  \n\n  /* @media (max-width: 960px) {\n    .will-filter-bar-tab-button {\n      justify-content: center;\n      margin-bottom: 15px;\n    }\n  } */\n  ";
+	var css_248z = ".will-filter-bar-tab-button {\n    width: auto;\n    height: auto;\n    padding: 10px 20px;\n    cursor: pointer;\n    border: none;\n    white-space: nowrap;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    background-color: transparent;\n    user-select: none;\n    font-weight: 600;\n    border-radius: 50px;\n    color: var(--will-white)\n  }\n\n \n  .will-filter-bar-tab-button:hover {\n    background-color: var(--will-transparent-white);\n  }\n\n  .will-filter-bar-tab-button.active {\n    background-color: var(--will-transparent-white);\n   \n  }\n\n\n  /* @media (max-width: 960px) {\n    .will-filter-bar-tab-button {\n      justify-content: center;\n      margin-bottom: 15px;\n    }\n  } */\n  ";
 	styleInject(css_248z);
 
 	function SubmitButton(_a) {
@@ -10541,17 +10544,15 @@
 	                React__default.createElement(SubmitButton, { label: t('tabs.events'), onClick: function () { return setSelectedPath('/events'); }, active: selectedPath === '/events' }),
 	                React__default.createElement(SubmitButton, { label: t('tabs.rooms'), onClick: function () { return setSelectedPath('/rooms'); }, active: selectedPath === '/rooms' })),
 	            React__default.createElement("div", { className: "will-filter-bar-header" },
-	                React__default.createElement(SelectButton, { style: fontWeightBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.startDate'), onClick: function () { return handleSelectedFilter(1); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.from)
-	                        ? format(calendarRange.from, 'dd.MM.yyyy')
-	                        : null }),
+	                React__default.createElement(SelectButton, { label: 'When', description: 'Add Check-in and -out', onClick: function () { return handleSelectedFilter(1); }, style: fontWeightBold(selectedFilter === 1) }),
 	                React__default.createElement(Divider, null),
-	                React__default.createElement(SelectButton, { style: fontWeightBold(selectedFilter === 1 || selectedFilter === 2), label: t('calendar.endDate'), onClick: function () { return handleSelectedFilter(2); }, date: (calendarRange === null || calendarRange === void 0 ? void 0 : calendarRange.to) ? format(calendarRange.to, 'dd.MM.yyyy') : null }),
+	                React__default.createElement(SelectButton, { label: 'Who', description: 'Add Guests', onClick: function () { return handleSelectedFilter(2); }, style: fontWeightBold(selectedFilter === 2) }),
 	                React__default.createElement(SubmitButton$1, { onClick: handleSubmit })),
 	            selectedFilter && (React__default.createElement("div", { className: "will-filter-bar-container" },
 	                React__default.createElement(CloseButton, { handleClose: function () { return handleSelectedFilter(false); } }),
-	                (selectedFilter === 1 || selectedFilter === 2) && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
-	                selectedFilter === 3 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
-	                selectedFilter === 4 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
+	                selectedFilter === 1 && (React__default.createElement(Calendar, { calendarRange: calendarRange, setCalendarRange: setCalendarRange })),
+	                selectedFilter === 2 && (React__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
+	                selectedFilter === 3 && (React__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
 	}
 	////////////
 	var fontWeightBold = function (input) {
@@ -10561,13 +10562,15 @@
 	    {
 	        id: '1',
 	        name: 'Adults',
+	        sortOrder: 1,
 	        minAge: null,
 	        maxAge: 6,
-	        minVal: 1,
+	        minVal: 0,
 	    },
 	    {
 	        id: '2',
 	        name: 'Kids',
+	        sortOrder: 2,
 	        minAge: 6,
 	        maxAge: 17,
 	        minVal: 0,