@luscii-healthtech/web-ui 2.3.1 → 2.5.0

package/dist/web-ui.cjs.development.js

@@ -6,8 +6,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
 var classNames = _interopDefault(require('classnames'));
+var PropTypes = _interopDefault(require('prop-types'));
 var Glider = _interopDefault(require('react-glider'));
 var router = require('@reach/router');
 var ReactModal = _interopDefault(require('react-modal'));
@@ -124,69 +124,295 @@ Text.defaultProps = {
   truncate: false
 };
 
-var img = "data:image/svg+xml,%3csvg version='1.1' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cpath d='m24 0c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24' fill='%236ABFA5'/%3e %3cpolyline points='33.599 19.25 24.648 28.201 21.028 31.821 16.001 26.793' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='7'/%3e %3c/g%3e%3c/svg%3e";
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    "data-test-id": props["data-test-id"],
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.7071 7.29289C19.0976 7.68342 19.0976 8.31658 18.7071 8.70711L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929C5.68342 10.9024 6.31658 10.9024 6.70711 11.2929L10 14.5858L17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289Z",
+    fill: "currentColor"
+  }));
+};
+
+var CrossIcon = function CrossIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    "data-test-id": props["data-test-id"],
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z",
+    fill: "currentColor"
+  }));
+};
 
-var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cg fill='none' fill-rule='evenodd'%3e %3ccircle cx='12' cy='12' r='12' fill='%23FF6266'/%3e %3ccircle cx='12' cy='17' r='2' fill='white'/%3e %3crect width='4' height='10' x='10' y='4' fill='white' rx='2'/%3e %3c/g%3e%3c/svg%3e";
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    "data-test-id": props["data-test-id"],
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 11C9.45 11 9 10.55 9 10V6C9 5.45 9.45 5 10 5C10.55 5 11 5.45 11 6V10C11 10.55 10.55 11 10 11ZM11 15H9V13H11V15Z",
+    fill: "currentColor"
+  }));
+};
 
-var css_248z$1 = ".cweb-acknowledgement {\n  position: fixed;\n  left: 0;\n  right: 0;\n  z-index: 10000;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  top: 0;\n  margin: 0 auto;\n  opacity: 0;\n  width: 354px;\n  max-width: calc(100% - 6px);\n  box-shadow: 0 0 20px 0 rgba(106, 191, 165, 0.2);\n  padding: 16px;\n  border-radius: 8px;\n  transform: translateY(-100%);\n  transition: transform ease-out 400ms, opacity 1ms linear 500ms;\n}\n\n.cweb-acknowledgement > .acknowledgement-icon-container {\n  width: 48px;\n  height: 48px;\n  margin-bottom: 12px;\n}\n\n.cweb-acknowledgement > .acknowledgement-icon-container > .acknowledgement-icon {\n  width: 100%;\n  height: 100%;\n}\n\n.cweb-acknowledgement.type-success {\n  background: #e7f5ec;\n}\n\n.cweb-acknowledgement.type-failure {\n  background: #fff1f1;\n}\n\n.cweb-acknowledgement.is-visible {\n  opacity: 1;\n  transform: translateY(32px);\n  transition: transform ease-in 150ms;\n}\n";
+var css_248z$1 = "#application-toaster {\n  position: fixed;\n  left: 50%;\n  transform: translate(-50%, 150%);\n  bottom: 48px;\n  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n#application-toaster.shelved {\n  transform: translate(-50%, 150%);\n}\n\n#application-toaster.expanded {\n  transform: translate(-50%, 0);\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-title\"] {\n  --text-opacity: 1;\n  color: #2f855a;\n  color: rgba(47, 133, 90, var(--text-opacity));\n}\n\n#application-toaster.type-success .failure-icon {\n  display: none;\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] {\n  --bg-opacity: 1;\n  background-color: #E7F5EC;\n  background-color: rgba(231, 245, 236, var(--bg-opacity));\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n  --bg-opacity: 1;\n  background-color: #68d391;\n  background-color: rgba(104, 211, 145, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-title\"] {\n  --text-opacity: 1;\n  color: #c53030;\n  color: rgba(197, 48, 48, var(--text-opacity));\n}\n\n#application-toaster.type-failure .success-icon {\n  display: none;\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] {\n  --bg-opacity: 1;\n  background-color: #FFF1F1;\n  background-color: rgba(255, 241, 241, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n  --bg-opacity: 1;\n  background-color: #fc8181;\n  background-color: rgba(252, 129, 129, var(--bg-opacity));\n}\n";
 styleInject(css_248z$1);
 
-var ACKNOWLEDGEMENT_TYPE_OPTIONS = {
+var TOASTER_TYPE_OPTIONS = {
   SUCCESS: "success",
   FAILURE: "failure"
 };
-Acknowledgement.propTypes = {
-  message: PropTypes.string,
-  type: /*#__PURE__*/PropTypes.oneOf([ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS, ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE]),
-  hasIcon: PropTypes.bool,
-  isVisible: PropTypes.bool,
-  className: PropTypes.string
-};
 
-function Acknowledgement(_ref) {
+var Toaster = function Toaster(_ref) {
   var _ref$message = _ref.message,
       message = _ref$message === void 0 ? "" : _ref$message,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? "" : _ref$title,
       _ref$type = _ref.type,
-      type = _ref$type === void 0 ? ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS : _ref$type,
-      _ref$isVisible = _ref.isVisible,
-      isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-      _ref$hasIcon = _ref.hasIcon,
-      hasIcon = _ref$hasIcon === void 0 ? false : _ref$hasIcon,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className;
-  var containerClassName = classNames("cweb-acknowledgement", className, {
-    "type-success": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS,
-    "type-failure": type === ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE,
-    "is-visible": isVisible
-  });
-  var iconContainerClasses = classNames("acknowledgement-icon-container", {
-    hidden: !hasIcon
-  });
-  var successIconClasses = classNames("icon success-icon acknowledgement-icon", {
-    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.SUCCESS
-  });
-  var failureIconClasses = classNames("icon failure-icon acknowledgement-icon", {
-    hidden: type !== ACKNOWLEDGEMENT_TYPE_OPTIONS.FAILURE
-  });
+      type = _ref$type === void 0 ? TOASTER_TYPE_OPTIONS.SUCCESS : _ref$type,
+      isVisible = _ref.isVisible,
+      styleOverwrite = _ref.styleOverwrite;
+  var isSuccess = type === TOASTER_TYPE_OPTIONS.SUCCESS;
+  var isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
   return /*#__PURE__*/React__default.createElement("div", {
-    id: "application-acknowledgement",
-    "data-test-id": "acknowledgement-panel-" + type,
-    className: containerClassName
+    style: styleOverwrite,
+    id: "application-toaster",
+    "data-test-id": "toaster-panel-" + type,
+    className: classNames("bg-white cursor-pointer", "rounded-md shadow-md", "min-h-13 max-h-19 w-104 transition-transform", {
+      shelved: !isVisible,
+      expanded: isVisible,
+      "type-success": isSuccess,
+      "type-failure": isFailure
+    })
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: iconContainerClasses
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: img,
-    className: successIconClasses,
-    alt: "Success icon"
-  }), /*#__PURE__*/React__default.createElement("img", {
-    src: img$1,
-    className: failureIconClasses,
-    alt: "Failure icon"
-  })), /*#__PURE__*/React__default.createElement(Text, {
-    "data-test-id": "acknowledgement-message",
+    className: "relative p-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "success-toaster-icon",
+    className: classNames("success-icon text-green-700", {
+      hidden: isFailure
+    })
+  }, /*#__PURE__*/React__default.createElement(CheckIcon, null)), /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "failure-toaster-icon",
+    className: classNames("failure-icon text-red-700", {
+      hidden: isSuccess
+    })
+  }, /*#__PURE__*/React__default.createElement(WarningIcon, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-3"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    type: "strong",
+    "data-test-id": "toaster-title",
+    text: title
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    "data-test-id": "toaster-message",
     text: message
-  }));
-}
+  })), /*#__PURE__*/React__default.createElement(CrossIcon, {
+    "data-test-id": "toaster-close-button",
+    className: "ml-auto cursor-pointer text-slate-500"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "toaster-progress-bar-container",
+    className: classNames("h-1 absolute bottom-0 w-full rounded-b-md")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": "toaster-progress-bar",
+    className: classNames("h-full")
+  })));
+};
+
+/**
+ *
+ * @param params.timeoutId - the timeoutId (that makes the toaster vanish), in case of a shortcut
+ * @param params.progressBarAnimationFrameHandler - animation frame id to be canceled in case of a shortcut
+ * @returns a collection of html elements to be manipulated by the animation
+ */
+var getToasterElements = function getToasterElements(params) {
+  var timeoutId = params.timeoutId,
+      progressBarAnimationFrameHandler = params.progressBarAnimationFrameHandler;
+  var toasterElementContainer = document.querySelector("#application-toaster");
+
+  if (!toasterElementContainer) {
+    clearTimeout(timeoutId);
+    clearTimeout(progressBarAnimationFrameHandler);
+    throw new Error("Make sure that the Toaster component element is rendered with an id [application-toaster]");
+  }
+
+  var toasterElementMessage = toasterElementContainer == null ? void 0 : toasterElementContainer.querySelector('[data-test-id="toaster-message"]');
+  var toasterElementTitle = toasterElementContainer == null ? void 0 : toasterElementContainer.querySelector('[data-test-id="toaster-title"]');
+  var toasterElementSuccessIcon = toasterElementContainer == null ? void 0 : toasterElementContainer.querySelector('[data-test-id="success-toaster-icon"]');
+  var toasterElementFailureIcon = toasterElementContainer == null ? void 0 : toasterElementContainer.querySelector('[data-test-id="failure-toaster-icon"]');
+  var toasterCloseButton = toasterElementContainer == null ? void 0 : toasterElementContainer.querySelector('[data-test-id="toaster-close-button"]');
+  var toasterProgressBar = toasterElementContainer == null ? void 0 : toasterElementContainer.querySelector('[data-test-id="toaster-progress-bar"]');
+  return {
+    toasterElementContainer: toasterElementContainer,
+    toasterElementMessage: toasterElementMessage,
+    toasterElementTitle: toasterElementTitle,
+    toasterProgressBar: toasterProgressBar,
+    toasterElementSuccessIcon: toasterElementSuccessIcon,
+    toasterElementFailureIcon: toasterElementFailureIcon,
+    toasterCloseButton: toasterCloseButton
+  };
+};
+
+/**
+ * Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+ * @param params.animationDuration - the amount of seconds the duration will take
+ * @param params.progressBarElement - the html element for the progress bar
+ * @returns the animation frame id
+ */
+var animateProgress = function animateProgress(params) {
+  var animationDuration = params.animationDuration,
+      progressBarElement = params.progressBarElement;
+  var progressBarAnimationFrameHandler;
+  var startingTimestamp = 0;
+  var previousTimestamp = 0;
+  var done = false;
+  var animationTick = 100 / animationDuration;
+
+  var animate = function animate(animationTimestamp) {
+    if (!startingTimestamp) {
+      startingTimestamp = animationTimestamp;
+    }
+
+    var elapsed = animationTimestamp - startingTimestamp;
+
+    if (previousTimestamp !== animationTimestamp) {
+      var count = 100 - animationTick * elapsed;
+      progressBarElement.style.width = count + "%";
+
+      if (count === 0) {
+        done = true;
+      }
+    }
+
+    if (elapsed < animationDuration) {
+      // Stop the animation after duration is finished
+      previousTimestamp = animationTimestamp;
+
+      if (!done) {
+        progressBarAnimationFrameHandler = window.requestAnimationFrame(animate);
+      }
+    }
+  };
+
+  progressBarElement.style.width = "100%";
+  progressBarAnimationFrameHandler = requestAnimationFrame(animate);
+  return progressBarAnimationFrameHandler;
+};
+
+var timeoutId;
+var progressBarAnimationFrameHandler;
+var defaultDurationInSeconds = 5;
+
+var showToaster = function showToaster(params) {
+  clearTimeout(timeoutId);
+  clearTimeout(progressBarAnimationFrameHandler);
+
+  var _getToasterElements = getToasterElements({
+    timeoutId: timeoutId,
+    progressBarAnimationFrameHandler: progressBarAnimationFrameHandler
+  }),
+      toasterElementContainer = _getToasterElements.toasterElementContainer,
+      toasterElementMessage = _getToasterElements.toasterElementMessage,
+      toasterElementTitle = _getToasterElements.toasterElementTitle,
+      toasterProgressBar = _getToasterElements.toasterProgressBar,
+      toasterElementSuccessIcon = _getToasterElements.toasterElementSuccessIcon,
+      toasterElementFailureIcon = _getToasterElements.toasterElementFailureIcon,
+      toasterCloseButton = _getToasterElements.toasterCloseButton;
+
+  var animationDuration = defaultDurationInSeconds * 1000;
+  progressBarAnimationFrameHandler = animateProgress({
+    animationDuration: animationDuration,
+    progressBarElement: toasterProgressBar
+  });
+  timeoutId = setTimeout(function () {
+    toasterElementContainer.classList.remove("expanded");
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }, animationDuration);
+
+  function shortcutAndClose() {
+    toasterElementContainer.classList.remove("expanded");
+    toasterElementContainer.classList.add("shelved");
+    clearTimeout(timeoutId);
+    cancelAnimationFrame(progressBarAnimationFrameHandler);
+  }
+
+  toasterCloseButton.removeEventListener("click", shortcutAndClose, true);
+  toasterCloseButton.addEventListener("click", shortcutAndClose);
+  toasterElementContainer.removeEventListener("click", shortcutAndClose, true);
+  toasterElementContainer.addEventListener("click", shortcutAndClose); // Basic usage, no need to manipulate any other element;
+
+  if (typeof params === "string") {
+    toasterElementMessage.textContent = params;
+    toasterElementTitle.classList.add("hidden");
+    toasterElementSuccessIcon.classList.remove("hidden");
+    toasterElementFailureIcon.classList.add("hidden");
+    toasterElementContainer.classList.remove("type-failure");
+    toasterElementContainer.classList.add("type-success");
+    toasterElementContainer.classList.add("expanded");
+    return;
+  }
+
+  var _params$title = params.title,
+      title = _params$title === void 0 ? "" : _params$title,
+      _params$showIcon = params.showIcon,
+      showIcon = _params$showIcon === void 0 ? true : _params$showIcon,
+      message = params.message,
+      type = params.type;
+  toasterElementTitle.classList.toggle("hidden", !title);
+  toasterElementTitle.textContent = title;
+  toasterElementSuccessIcon.classList.toggle("hidden", !showIcon);
+  toasterElementFailureIcon.classList.toggle("hidden", !showIcon);
+  toasterElementMessage.textContent = message;
+  toasterElementContainer.classList.remove("type-success");
+  toasterElementContainer.classList.remove("type-failure");
+  toasterElementContainer.classList.add("expanded");
+  toasterElementContainer.classList.add("type-" + type);
+};
+
+var toast = function toast(params) {
+  showToaster(params);
+};
+
+toast.error = function (message) {
+  showToaster({
+    message: message,
+    type: "failure",
+    showIcon: true,
+    title: ""
+  });
+};
+
+toast.info = function (message) {
+  showToaster({
+    message: message,
+    type: "success",
+    showIcon: true,
+    title: ""
+  });
+};
 
 var css_248z$2 = ".cweb-avatar {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: center;\n  width: 64px;\n  box-sizing: border-box;\n}\n\n.cweb-avatar > .avatar-content-container {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n\n.cweb-avatar > .avatar-content-container > .avatar-image {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n\n.cweb-avatar > .avatar-content-container > .avatar-initials-text {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 24px;\n  font-weight: 300;\n  line-height: 1;\n  color: #737373;\n  margin: 0;\n  pointer-events: none;\n}\n\n.cweb-avatar.size-large {\n  width: 128px;\n}\n\n.cweb-avatar.size-large > .avatar-content-container {\n  width: 128px;\n  height: 128px;\n}\n\n.cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n  font-size: 48px;\n}\n\n.cweb-avatar.size-medium {\n  width: 64px;\n}\n\n.cweb-avatar.size-medium > .avatar-content-container {\n  width: 64px;\n  height: 64px;\n}\n\n.cweb-avatar.size-medium > .avatar-content-container > .avatar-initials-text {\n  font-size: 24px;\n}\n\n.cweb-avatar.size-small {\n  width: 36px;\n}\n\n.cweb-avatar.size-small > .avatar-content-container {\n  width: 36px;\n  height: 36px;\n}\n\n.cweb-avatar.size-small > .avatar-content-container > .avatar-initials-text {\n  font-size: 14px;\n}\n\n.cweb-avatar.type-editable {\n  cursor: pointer;\n}\n\n.cweb-avatar.type-editable > .avatar-content-container {\n  position: relative;\n  border-color: #0074dd;\n  background-color: #ffffff;\n}\n\n.cweb-avatar.type-editable > .avatar-content-container:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n  border-radius: 50%;\n  transition: 0.4s ease background-color;\n}\n\n.cweb-avatar.type-editable > .avatar-content-container:hover:after {\n  background-color: rgba(0, 116, 221, 0.1);\n}\n\n.cweb-avatar.type-editable > .avatar-content-container > .avatar-initials-text {\n  color: #0074dd;\n}\n\n.cweb-avatar.type-readonly > .avatar-content-container {\n  border-color: #cccccc;\n  background-color: #f1f5f9;\n}\n\n.cweb-avatar.type-readonly > .avatar-content-container > .avatar-initials-text {\n  color: #64748b;\n}\n\n@media (max-width: 767px) {\n  .cweb-avatar.size-large {\n    width: 64px;\n  }\n\n  .cweb-avatar.size-large > .avatar-content-container {\n    width: 64px;\n    height: 64px;\n  }\n\n  .cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n    font-size: 24px;\n  }\n\n  .cweb-avatar.size-large.display-initials > .avatar-content-container {\n    border-width: 0.5px;\n  }\n}\n";
 styleInject(css_248z$2);
@@ -586,41 +812,41 @@ var PrintIcon = function PrintIcon(props) {
   }));
 };
 
-var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
 
-var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z' fill='%23EDF2F7'/%3e%3cpath d='M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z' fill='%23EDF2F7'/%3e%3cpath d='M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6Z' fill='%23EDF2F7'/%3e%3cpath d='M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12Z' fill='%23EDF2F7'/%3e%3cpath d='M4 17C3.44772 17 3 17.4477 3 18C3 18.5523 3.44772 19 4 19H20C20.5523 19 21 18.5523 21 18C21 17.4477 20.5523 17 20 17H4Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
 
-var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%230074DD'/%3e%3c/svg%3e";
+var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%230074DD'/%3e%3c/svg%3e";
 
-var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.31008 6.70978C8.92008 7.09978 8.92008 7.72978 9.31008 8.11978L13.1901 11.9998L9.31008 15.8798C8.92008 16.2698 8.92008 16.8998 9.31008 17.2898C9.70008 17.6798 10.3301 17.6798 10.7201 17.2898L15.3101 12.6998C15.7001 12.3098 15.7001 11.6798 15.3101 11.2898L10.7201 6.69978C10.3401 6.31978 9.70008 6.31978 9.31008 6.70978Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
 
-var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%230074DD'/%3e%3c/svg%3e";
+var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%230074DD'/%3e%3c/svg%3e";
 
-var img$7 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
+var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.6899 17.2902C14.0799 16.9002 14.0799 16.2702 13.6899 15.8802L9.80992 12.0002L13.6899 8.12022C14.0799 7.73022 14.0799 7.10022 13.6899 6.71022C13.2999 6.32022 12.6699 6.32022 12.2799 6.71022L7.68992 11.3002C7.29992 11.6902 7.29992 12.3202 7.68992 12.7102L12.2799 17.3002C12.6599 17.6802 13.2999 17.6802 13.6899 17.2902Z' fill='%23EDF2F7'/%3e%3c/svg%3e";
 
-var img$8 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.5006 11.0006H11.7106L11.4306 10.7306C12.6306 9.33063 13.2506 7.42063 12.9106 5.39063C12.4406 2.61063 10.1206 0.390626 7.32063 0.0506256C3.09063 -0.469374 -0.469374 3.09063 0.0506256 7.32063C0.390626 10.1206 2.61063 12.4406 5.39063 12.9106C7.42063 13.2506 9.33063 12.6306 10.7306 11.4306L11.0006 11.7106V12.5006L15.2506 16.7506C15.6606 17.1606 16.3306 17.1606 16.7406 16.7506C17.1506 16.3406 17.1506 15.6706 16.7406 15.2606L12.5006 11.0006ZM6.50063 11.0006C4.01063 11.0006 2.00063 8.99063 2.00063 6.50063C2.00063 4.01063 4.01063 2.00063 6.50063 2.00063C8.99063 2.00063 11.0006 4.01063 11.0006 6.50063C11.0006 8.99063 8.99063 11.0006 6.50063 11.0006Z' fill='%230074DD'/%3e%3c/svg%3e";
+var img$6 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.5006 11.0006H11.7106L11.4306 10.7306C12.6306 9.33063 13.2506 7.42063 12.9106 5.39063C12.4406 2.61063 10.1206 0.390626 7.32063 0.0506256C3.09063 -0.469374 -0.469374 3.09063 0.0506256 7.32063C0.390626 10.1206 2.61063 12.4406 5.39063 12.9106C7.42063 13.2506 9.33063 12.6306 10.7306 11.4306L11.0006 11.7106V12.5006L15.2506 16.7506C15.6606 17.1606 16.3306 17.1606 16.7406 16.7506C17.1506 16.3406 17.1506 15.6706 16.7406 15.2606L12.5006 11.0006ZM6.50063 11.0006C4.01063 11.0006 2.00063 8.99063 2.00063 6.50063C2.00063 4.01063 4.01063 2.00063 6.50063 2.00063C8.99063 2.00063 11.0006 4.01063 11.0006 6.50063C11.0006 8.99063 8.99063 11.0006 6.50063 11.0006Z' fill='%230074DD'/%3e%3c/svg%3e";
 
-var img$9 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.05086 0.636643C1.66033 0.246119 1.02717 0.246119 0.636643 0.636643C0.246119 1.02717 0.246119 1.66033 0.636643 2.05086L5.5867 7.00092L0.636672 11.9509C0.246148 12.3415 0.246148 12.9746 0.636672 13.3652C1.0272 13.7557 1.66036 13.7557 2.05089 13.3652L7.00091 8.41513L11.9503 13.3646C12.3409 13.7551 12.974 13.7551 13.3646 13.3646C13.7551 12.974 13.7551 12.3409 13.3646 11.9504L8.41513 7.00092L13.3646 2.05145C13.7551 1.66093 13.7551 1.02776 13.3646 0.637237C12.9741 0.246712 12.3409 0.246713 11.9504 0.637237L7.00092 5.5867L2.05086 0.636643Z' fill='%230074DD'/%3e%3c/svg%3e";
+var img$7 = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.05086 0.636643C1.66033 0.246119 1.02717 0.246119 0.636643 0.636643C0.246119 1.02717 0.246119 1.66033 0.636643 2.05086L5.5867 7.00092L0.636672 11.9509C0.246148 12.3415 0.246148 12.9746 0.636672 13.3652C1.0272 13.7557 1.66036 13.7557 2.05089 13.3652L7.00091 8.41513L11.9503 13.3646C12.3409 13.7551 12.974 13.7551 13.3646 13.3646C13.7551 12.974 13.7551 12.3409 13.3646 11.9504L8.41513 7.00092L13.3646 2.05145C13.7551 1.66093 13.7551 1.02776 13.3646 0.637237C12.9741 0.246712 12.3409 0.246713 11.9504 0.637237L7.00092 5.5867L2.05086 0.636643Z' fill='%230074DD'/%3e%3c/svg%3e";
 
-var img$a = "data:image/svg+xml,%3csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z' fill='%23009FE3'/%3e%3c/svg%3e";
+var img$8 = "data:image/svg+xml,%3csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.58663 1.04906C8.93899 0.258571 10.061 0.258571 10.4134 1.04906L12.1659 4.9807C12.3112 5.30673 12.6193 5.53057 12.9743 5.56804L17.2551 6.01985C18.1158 6.11069 18.4625 7.17779 17.8196 7.75718L14.6219 10.6389C14.3568 10.8778 14.2391 11.24 14.3131 11.5892L15.2063 15.8001C15.3858 16.6467 14.4781 17.3062 13.7284 16.8738L9.99962 14.7232C9.69041 14.5448 9.30959 14.5448 9.00038 14.7232L5.27159 16.8738C4.52189 17.3062 3.61416 16.6467 3.79373 15.8001L4.68686 11.5892C4.76093 11.24 4.64325 10.8778 4.37808 10.6389L1.18043 7.75718C0.537518 7.17779 0.88424 6.11069 1.74492 6.01985L6.0257 5.56804C6.38068 5.53057 6.68877 5.30673 6.8341 4.9807L8.58663 1.04906Z' fill='%23009FE3'/%3e%3c/svg%3e";
 
-var img$b = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cg transform='translate(1.5%2c 0.5)'%3e %3cpath fill='none' fill-rule='evenodd' stroke='%230074DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286'/%3e %3c/g%3e%3c/svg%3e";
+var img$9 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cg transform='translate(1.5%2c 0.5)'%3e %3cpath fill='none' fill-rule='evenodd' stroke='%230074DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286'/%3e %3c/g%3e%3c/svg%3e";
 
 var iconSrc = {
   // These need to be converted to svg files instead of components and added in
   //  "add": AddIcon,
   //  "delete": DeleteIcon,
   //  "edit": EditIcon,
-  close: img$2,
-  hamburger: img$3,
-  "chevron-right-blue": img$4,
-  "chevron-left-blue": img$6,
-  "chevron-right-grey": img$5,
-  "chevron-left-grey": img$7,
-  search: img$8,
-  star: img$a,
-  check: img$b,
-  "search-cancel": img$9
+  close: img,
+  hamburger: img$1,
+  "chevron-right-blue": img$2,
+  "chevron-left-blue": img$4,
+  "chevron-right-grey": img$3,
+  "chevron-left-grey": img$5,
+  search: img$6,
+  star: img$8,
+  check: img$9,
+  "search-cancel": img$7
 };
 var ButtonIcon = function ButtonIcon(props) {
   return /*#__PURE__*/React.createElement("img", {
@@ -1334,7 +1560,7 @@ Datepicker.propTypes = {
   isDisabled: PropTypes.bool
 };
 
-var img$c = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%239CA3AF'/%3e%3c/svg%3e";
+var img$a = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%239CA3AF'/%3e%3c/svg%3e";
 
 var css_248z$9 = ".cweb-box-shadow-default {\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-box-shadow-default {\n    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.cweb-dropdown {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  position: relative;\n  outline: none;\n  border-radius: 4px;\n}\n\n.cweb-dropdown:focus {\n  outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n\n.cweb-dropdown > .dropdown-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  height: 44px;\n  border-radius: 4px;\n  transition: all 0.4s ease;\n}\n\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n  opacity: 0.5;\n  transition: opacity 0.3s ease-in-out;\n}\n\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n  opacity: 1;\n}\n\n.cweb-dropdown > .dropdown-list {\n  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n  display: none;\n  position: absolute;\n  top: 100%;\n  z-index: 1;\n  width: 100%;\n  max-height: 360px;\n  overflow-y: auto;\n  align-self: stretch;\n  margin-top: 8px;\n  padding: 0;\n  background-color: #ffffff;\n  list-style: none;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n}\n\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n  cursor: pointer;\n}\n\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n  cursor: pointer;\n}\n\n.cweb-dropdown.is-open > .dropdown-list {\n  display: block;\n  margin-bottom: 32px;\n}\n\n.cweb-dropdown.is-open > .dropdown-list.wider {\n  width: 200%;\n}\n";
 styleInject(css_248z$9);
@@ -1533,7 +1759,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         className: classNames({
           hidden: !isItemSelected
         }),
-        src: img$b,
+        src: img$9,
         alt: "checked"
       }));
     };
@@ -1639,7 +1865,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
       truncate: true
     }), /*#__PURE__*/React__default.createElement("img", {
       className: "dropdown-header-icon",
-      src: img$c,
+      src: img$a,
       alt: "browse icon"
     })), this.renderItems());
   };
@@ -1701,16 +1927,16 @@ Dropdown.propTypes = {
   wider: PropTypes.bool
 };
 
-var img$d = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e";
+var img$b = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e";
 
-var img$e = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_1866_119823)'%3e%3cmask id='mask0_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%236ABFA5'/%3e%3c/g%3e%3cmask id='mask1_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask1_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3cg clip-path='url(%23clip1_1866_119823)'%3e%3cmask id='mask2_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask2_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%23BBE3D7'/%3e%3c/g%3e%3cmask id='mask3_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask3_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3ccircle cx='72' cy='72' r='72' fill='%23BBE3D7'/%3e%3cpath d='M57.8627 78L65 85.1367C65 85.1367 58.3298 97.4142 46.3849 109.359C42.1198 113.625 35.8091 114.23 32.2895 110.71C28.7706 107.19 29.3753 100.88 33.6404 96.6145C45.5853 84.6696 57.8627 78 57.8627 78Z' fill='%236670A5'/%3e%3cpath d='M49 83.6111C50.3607 85.6362 51.9273 87.5447 53.691 89.3083C55.4553 91.072 57.3631 92.6393 59.3882 94C63.0565 88.8161 65 85.239 65 85.239L57.7604 78C57.7604 78 54.1839 79.9435 49 83.6111Z' fill='%237A86C6'/%3e%3cpath d='M113 62.5C113 80.4489 98.4489 95 80.5 95C62.5511 95 48 80.4489 48 62.5C48 44.5504 62.5511 30 80.5 30C98.4489 30 113 44.5504 113 62.5Z' fill='%236670A5'/%3e%3cpath d='M104 62.5003C104 75.4788 93.4787 86 80.5 86C67.5213 86 57 75.4788 57 62.5003C57 49.5218 67.5213 39 80.5 39C93.4787 39 104 49.5218 104 62.5003Z' fill='%23CCECF9'/%3e%3cpath d='M66.5 64C65.6716 64 65 63.3273 65 62.4976V59.5024C65 58.6727 65.6716 58 66.5 58C67.3284 58 68 58.6727 68 59.5024V62.4974C68.0002 63.3272 67.3284 64 66.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M94.5 64C93.6716 64 93 63.3273 93 62.4976V59.5024C93 58.6727 93.6716 58 94.5 58C95.3284 58 96 58.6727 96 59.5024V62.4974C96.0002 63.3272 95.3284 64 94.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M80.5002 69C78.5064 69 76.6346 68.1213 75.3655 66.5887C74.828 65.9395 74.8906 64.9532 75.5057 64.3859C76.1208 63.8187 77.0552 63.8846 77.5928 64.5338C78.3 65.3879 79.3596 65.8776 80.5001 65.8776C81.6403 65.8776 82.6999 65.3879 83.4071 64.5338C83.9447 63.8846 84.8791 63.8183 85.4943 64.3859C86.1094 64.9532 86.1722 65.9395 85.6344 66.5887C84.3657 68.1213 82.4941 69 80.5002 69Z' fill='%232D2D2D'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3cclipPath id='clip1_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+var img$c = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_1866_119823)'%3e%3cmask id='mask0_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%236ABFA5'/%3e%3c/g%3e%3cmask id='mask1_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask1_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3cg clip-path='url(%23clip1_1866_119823)'%3e%3cmask id='mask2_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask2_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%23BBE3D7'/%3e%3c/g%3e%3cmask id='mask3_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask3_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3ccircle cx='72' cy='72' r='72' fill='%23BBE3D7'/%3e%3cpath d='M57.8627 78L65 85.1367C65 85.1367 58.3298 97.4142 46.3849 109.359C42.1198 113.625 35.8091 114.23 32.2895 110.71C28.7706 107.19 29.3753 100.88 33.6404 96.6145C45.5853 84.6696 57.8627 78 57.8627 78Z' fill='%236670A5'/%3e%3cpath d='M49 83.6111C50.3607 85.6362 51.9273 87.5447 53.691 89.3083C55.4553 91.072 57.3631 92.6393 59.3882 94C63.0565 88.8161 65 85.239 65 85.239L57.7604 78C57.7604 78 54.1839 79.9435 49 83.6111Z' fill='%237A86C6'/%3e%3cpath d='M113 62.5C113 80.4489 98.4489 95 80.5 95C62.5511 95 48 80.4489 48 62.5C48 44.5504 62.5511 30 80.5 30C98.4489 30 113 44.5504 113 62.5Z' fill='%236670A5'/%3e%3cpath d='M104 62.5003C104 75.4788 93.4787 86 80.5 86C67.5213 86 57 75.4788 57 62.5003C57 49.5218 67.5213 39 80.5 39C93.4787 39 104 49.5218 104 62.5003Z' fill='%23CCECF9'/%3e%3cpath d='M66.5 64C65.6716 64 65 63.3273 65 62.4976V59.5024C65 58.6727 65.6716 58 66.5 58C67.3284 58 68 58.6727 68 59.5024V62.4974C68.0002 63.3272 67.3284 64 66.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M94.5 64C93.6716 64 93 63.3273 93 62.4976V59.5024C93 58.6727 93.6716 58 94.5 58C95.3284 58 96 58.6727 96 59.5024V62.4974C96.0002 63.3272 95.3284 64 94.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M80.5002 69C78.5064 69 76.6346 68.1213 75.3655 66.5887C74.828 65.9395 74.8906 64.9532 75.5057 64.3859C76.1208 63.8187 77.0552 63.8846 77.5928 64.5338C78.3 65.3879 79.3596 65.8776 80.5001 65.8776C81.6403 65.8776 82.6999 65.3879 83.4071 64.5338C83.9447 63.8846 84.8791 63.8183 85.4943 64.3859C86.1094 64.9532 86.1722 65.9395 85.6344 66.5887C84.3657 68.1213 82.4941 69 80.5002 69Z' fill='%232D2D2D'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3cclipPath id='clip1_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
 
-var img$f = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6643 77.204C60.6643 74.8623 58.2883 72.9644 55.357 72.9644C52.4257 72.9644 50.0497 74.8623 50.0497 77.204C50.0497 79.545 52.4257 81.4436 55.357 81.4436C58.2883 81.4436 60.6643 79.545 60.6643 77.204Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9503 77.204C93.9503 74.8623 91.5743 72.9644 88.643 72.9644C85.7124 72.9644 83.3364 74.8623 83.3364 77.204C83.3364 79.545 85.7124 81.4436 88.643 81.4436C91.5743 81.4436 93.9503 79.545 93.9503 77.204Z' fill='%23FF83B4'/%3e%3cpath d='M72 76.516C70.2813 76.516 68.5625 75.9577 67.1285 74.8417C66.5491 74.3911 66.4437 73.554 66.8935 72.9727C67.3426 72.3915 68.1772 72.2858 68.7566 72.7363C70.666 74.2227 73.3341 74.2227 75.2442 72.7363C75.8236 72.2858 76.6575 72.3915 77.1073 72.9727C77.5564 73.554 77.451 74.3911 76.8716 74.8417C75.4375 75.9577 73.7188 76.516 72 76.516Z' fill='%23454545'/%3e%3cpath d='M58.626 73.96C58.3286 73.5222 57.8949 73.469 57.719 73.469C57.5431 73.469 57.102 73.5168 56.8119 73.96C56.4091 74.5749 55.586 74.746 54.973 74.3419C54.36 73.9384 54.1895 73.1121 54.5923 72.4972C55.2859 71.4378 56.4548 70.8047 57.719 70.8047C58.9832 70.8047 60.1521 71.4378 60.8463 72.4972C61.2485 73.1121 61.0779 73.9384 60.465 74.3419C60.24 74.49 59.2464 74.8739 58.626 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1882 73.96C86.8907 73.5222 86.4577 73.469 86.2811 73.469C86.1052 73.469 85.6648 73.5168 85.3747 73.96C84.9719 74.5749 84.1481 74.746 83.5351 74.3419C82.9222 73.9384 82.7516 73.1121 83.1545 72.4972C83.8487 71.4378 85.0176 70.8047 86.2818 70.8047C87.5453 70.8047 88.7142 71.4378 89.4084 72.4972C89.8113 73.1121 89.6407 73.9384 89.0278 74.3419C88.8028 74.49 87.8092 74.8739 87.1882 73.96Z' fill='%23454545'/%3e%3c/svg%3e";
+var img$d = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6643 77.204C60.6643 74.8623 58.2883 72.9644 55.357 72.9644C52.4257 72.9644 50.0497 74.8623 50.0497 77.204C50.0497 79.545 52.4257 81.4436 55.357 81.4436C58.2883 81.4436 60.6643 79.545 60.6643 77.204Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9503 77.204C93.9503 74.8623 91.5743 72.9644 88.643 72.9644C85.7124 72.9644 83.3364 74.8623 83.3364 77.204C83.3364 79.545 85.7124 81.4436 88.643 81.4436C91.5743 81.4436 93.9503 79.545 93.9503 77.204Z' fill='%23FF83B4'/%3e%3cpath d='M72 76.516C70.2813 76.516 68.5625 75.9577 67.1285 74.8417C66.5491 74.3911 66.4437 73.554 66.8935 72.9727C67.3426 72.3915 68.1772 72.2858 68.7566 72.7363C70.666 74.2227 73.3341 74.2227 75.2442 72.7363C75.8236 72.2858 76.6575 72.3915 77.1073 72.9727C77.5564 73.554 77.451 74.3911 76.8716 74.8417C75.4375 75.9577 73.7188 76.516 72 76.516Z' fill='%23454545'/%3e%3cpath d='M58.626 73.96C58.3286 73.5222 57.8949 73.469 57.719 73.469C57.5431 73.469 57.102 73.5168 56.8119 73.96C56.4091 74.5749 55.586 74.746 54.973 74.3419C54.36 73.9384 54.1895 73.1121 54.5923 72.4972C55.2859 71.4378 56.4548 70.8047 57.719 70.8047C58.9832 70.8047 60.1521 71.4378 60.8463 72.4972C61.2485 73.1121 61.0779 73.9384 60.465 74.3419C60.24 74.49 59.2464 74.8739 58.626 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1882 73.96C86.8907 73.5222 86.4577 73.469 86.2811 73.469C86.1052 73.469 85.6648 73.5168 85.3747 73.96C84.9719 74.5749 84.1481 74.746 83.5351 74.3419C82.9222 73.9384 82.7516 73.1121 83.1545 72.4972C83.8487 71.4378 85.0176 70.8047 86.2818 70.8047C87.5453 70.8047 88.7142 71.4378 89.4084 72.4972C89.8113 73.1121 89.6407 73.9384 89.0278 74.3419C88.8028 74.49 87.8092 74.8739 87.1882 73.96Z' fill='%23454545'/%3e%3c/svg%3e";
 
 var imageSrc = {
-  "no-open-alerts": img$d,
-  "search-not-found": img$e,
-  "no-notes-found": img$f
+  "no-open-alerts": img$b,
+  "search-not-found": img$c,
+  "no-notes-found": img$d
 };
 var EmptyListMessage = function EmptyListMessage(_ref) {
   var text = _ref.text,
@@ -1845,22 +2071,6 @@ InfoField.defaultProps = {
   linkType: "none"
 };
 
-var CrossIcon = function CrossIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M7.05037 5.63664C6.65984 5.24612 6.02668 5.24612 5.63615 5.63664C5.24563 6.02717 5.24563 6.66033 5.63616 7.05086L10.5862 12.0009L5.63618 16.9509C5.24566 17.3415 5.24566 17.9746 5.63618 18.3652C6.02671 18.7557 6.65987 18.7557 7.0504 18.3652L12.0004 13.4151L16.9499 18.3646C17.3404 18.7551 17.9736 18.7551 18.3641 18.3646C18.7546 17.974 18.7546 17.3409 18.3641 16.9504L13.4146 12.0009L18.3641 7.05145C18.7546 6.66093 18.7546 6.02776 18.3641 5.63724C17.9736 5.24671 17.3404 5.24671 16.9499 5.63724L12.0004 10.5867L7.05037 5.63664Z",
-    fill: "currentColor"
-  }));
-};
-
 var css_248z$c = ".input::-ms-clear {\n  display: none;\n}";
 styleInject(css_248z$c);
 
@@ -2050,11 +2260,11 @@ function TableHeader(props) {
   })));
 }
 
-var img$g = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='68' height='20' viewBox='0 0 68 20'%3e %3cg fill='none' fill-rule='nonzero'%3e %3ccircle cx='10' cy='10' r='10' fill='%23F09'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.1'/%3e %3c/circle%3e %3ccircle cx='34' cy='10' r='10' fill='%236ABFA5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.6'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.6'/%3e %3c/circle%3e %3ccircle cx='58' cy='10' r='10' fill='%236670A5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='1.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='1.1'/%3e %3c/circle%3e %3c/g%3e%3c/svg%3e";
+var img$e = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='68' height='20' viewBox='0 0 68 20'%3e %3cg fill='none' fill-rule='nonzero'%3e %3ccircle cx='10' cy='10' r='10' fill='%23F09'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.1'/%3e %3c/circle%3e %3ccircle cx='34' cy='10' r='10' fill='%236ABFA5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.6'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.6'/%3e %3c/circle%3e %3ccircle cx='58' cy='10' r='10' fill='%236670A5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='1.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='1.1'/%3e %3c/circle%3e %3c/g%3e%3c/svg%3e";
 
-var img$h = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23009fe3' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c/svg%3e";
+var img$f = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23009fe3' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c/svg%3e";
 
-var img$i = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
+var img$g = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
 
 var css_248z$d = ".cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n";
 styleInject(css_248z$d);
@@ -2071,14 +2281,14 @@ function LoadingIndicator(_ref) {
       spinnerColor = _ref$spinnerColor === void 0 ? "blue" : _ref$spinnerColor,
       restProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
-  var spinnerToRender = spinnerColor === "blue" ? img$h : img$i;
+  var spinnerToRender = spinnerColor === "blue" ? img$f : img$g;
   var containerClassName = classNames("cweb-loading", className, {
     "as-modal": asModal
   });
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, restProps, {
     className: containerClassName
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: asSpinner ? spinnerToRender : img$g,
+    src: asSpinner ? spinnerToRender : img$e,
     className: classNames("text-gray-600 fill-current stroke-current", {
       "h-4 w-4": asSpinner,
       "h-12 w-12": !asSpinner
@@ -3806,7 +4016,7 @@ CRUDPage.propTypes = {
   localization: PropTypes.object
 };
 
-var img$j = "data:image/svg+xml,%3csvg width='340' height='638' viewBox='0 0 340 638' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect x='8' y='60' width='50' height='8' rx='4' transform='rotate(90 8 60)' fill='%23111827'/%3e %3crect x='8' y='118' width='50' height='8' rx='4' transform='rotate(90 8 118)' fill='%23111827'/%3e %3crect x='340' y='67' width='30' height='8' rx='4' transform='rotate(90 340 67)' fill='%23111827'/%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M36 0C18.3269 0 4 14.3269 4 32V606C4 623.673 18.3269 638 36 638H304C321.673 638 336 623.673 336 606V32C336 14.3269 321.673 0 304 0H36ZM28 43C23.5817 43 20 46.5817 20 51V549C20 553.418 23.5817 557 28 557H312C316.418 557 320 553.418 320 549V51C320 46.5817 316.418 43 312 43H28Z' fill='%23374151'/%3e %3ccircle cx='171' cy='598' r='16' fill='%236B7280'/%3e %3ccircle cx='105.5' cy='22.5' r='4.5' fill='%236B7280'/%3e %3crect x='118' y='18' width='104' height='9' rx='4' fill='%239CA3AF'/%3e%3c/svg%3e";
+var img$h = "data:image/svg+xml,%3csvg width='340' height='638' viewBox='0 0 340 638' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect x='8' y='60' width='50' height='8' rx='4' transform='rotate(90 8 60)' fill='%23111827'/%3e %3crect x='8' y='118' width='50' height='8' rx='4' transform='rotate(90 8 118)' fill='%23111827'/%3e %3crect x='340' y='67' width='30' height='8' rx='4' transform='rotate(90 340 67)' fill='%23111827'/%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M36 0C18.3269 0 4 14.3269 4 32V606C4 623.673 18.3269 638 36 638H304C321.673 638 336 623.673 336 606V32C336 14.3269 321.673 0 304 0H36ZM28 43C23.5817 43 20 46.5817 20 51V549C20 553.418 23.5817 557 28 557H312C316.418 557 320 553.418 320 549V51C320 46.5817 316.418 43 312 43H28Z' fill='%23374151'/%3e %3ccircle cx='171' cy='598' r='16' fill='%236B7280'/%3e %3ccircle cx='105.5' cy='22.5' r='4.5' fill='%236B7280'/%3e %3crect x='118' y='18' width='104' height='9' rx='4' fill='%239CA3AF'/%3e%3c/svg%3e";
 
 var useWindowDimensions = function useWindowDimensions() {
   var _useState = React.useState(window.innerHeight),
@@ -3888,7 +4098,7 @@ var PreviewPhone = function PreviewPhone(_ref) {
     className: "h-full overflow-y-auto bg-white"
   }, children)), /*#__PURE__*/React__default.createElement("img", {
     className: "absolute top-0 pointer-events-none",
-    src: img$j,
+    src: img$h,
     alt: "phone mockup"
   }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
@@ -4057,10 +4267,96 @@ RadioGroup.propTypes = {
   onChange: PropTypes.func
 };
 
-var css_248z$m = ".cweb-section .cweb-button:last-of-type {\n  margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n  margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid #eeeeee;\n  width: 100%;\n  padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-top: 1px solid #eeeeee;\n  width: 100%;\n  padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n  width: 32px;\n  height: 32px;\n}\n";
+var css_248z$m = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n  --bg-opacity: 1;\n  background-color: #0074DD;\n  background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n  --border-opacity: 1;\n  border-color: #c53030;\n  border-color: rgba(197, 48, 48, var(--border-opacity));\n  outline: 4px solid rgba(255, 98, 102, 0.3);\n  outline-offset: 0;\n}\n\n.radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .radio-circle\n  .radio-inner-circle {\n  --bg-opacity: 1;\n  background-color: #fff;\n  background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
 styleInject(css_248z$m);
 
-var _excluded$c = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
+var _excluded$c = ["text", "info", "isError", "innerRef", "className"];
+
+function RadioInner(_ref) {
+  var text = _ref.text,
+      info = _ref.info,
+      isError = _ref.isError,
+      innerRef = _ref.innerRef,
+      className = _ref.className,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+
+  var value = otherProps.value,
+      disabled = otherProps.disabled;
+  var nameHtmlFor = "field-" + value;
+  return /*#__PURE__*/React__default.createElement("label", {
+    className: "radio-form-field-label leading-tight",
+    htmlFor: nameHtmlFor,
+    "data-has-error": isError,
+    "data-test-id": nameHtmlFor
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-row items-center "
+  }, /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
+    className: classNames("appearance-none", className),
+    ref: innerRef,
+    type: "radio",
+    id: nameHtmlFor,
+    disabled: disabled
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: classNames("flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"
+  })), text && /*#__PURE__*/React__default.createElement("div", {
+    className: "ml-2"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    inline: true,
+    text: text,
+    type: "base",
+    color: disabled ? "slate-500" : undefined
+  }))), info && /*#__PURE__*/React__default.createElement(Text, {
+    inline: true,
+    className: "ml-6",
+    text: info,
+    type: "sm",
+    color: disabled ? "slate-200" : "slate-500"
+  }));
+}
+/**
+ * TODO: The CSS styling is all messed up, including isError
+ * Warning: don't use this prop before this is resolved
+ * Issue to track: https://github.com/Luscii/web-ui/issues/57
+ * TODO: remove this comment once this is resolved
+ */
+
+
+var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(RadioInner, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+
+var _excluded$d = ["innerRef", "options"];
+
+function RadioGroupInner(_ref) {
+  var innerRef = _ref.innerRef,
+      options = _ref.options,
+      registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames("flex flex-col space-y-2")
+  }, options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(RadioV2, Object.assign({
+      key: option.value
+    }, option, registerProps, {
+      ref: innerRef
+    }));
+  }));
+}
+
+var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(RadioGroupInner, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+
+var css_248z$n = ".cweb-section .cweb-button:last-of-type {\n  margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n  margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n  margin-left: auto;\n  width: 32px;\n  height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid #eeeeee;\n  width: 100%;\n  padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  border-top: 1px solid #eeeeee;\n  width: 100%;\n  padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n  width: 32px;\n  height: 32px;\n}\n";
+styleInject(css_248z$n);
+
+var _excluded$e = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
 function Section(_ref) {
   var title = _ref.title,
       buttons = _ref.buttons,
@@ -4070,7 +4366,7 @@ function Section(_ref) {
       _ref$isLoading = _ref.isLoading,
       isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       loadingIndicatorProps = _ref.loadingIndicatorProps,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, restProps, {
     className: classNames("cweb-section", "flex justify-start flex-col items-start", "rounded-lg", "mx-0 my-4", "bg-white", "w-full", className)
@@ -4098,15 +4394,15 @@ function Section(_ref) {
   }, footer));
 }
 
-var css_248z$n = ".cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}\n";
-styleInject(css_248z$n);
+var css_248z$o = ".cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}\n";
+styleInject(css_248z$o);
 
-var _excluded$d = ["children", "className", "onClick"];
+var _excluded$f = ["children", "className", "onClick"];
 var SectionItem = function SectionItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$d);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$f);
 
   var classes = classNames("cweb-list-item", className, {
     "cweb-list-item-clickable": !!onClick
@@ -4117,7 +4413,7 @@ var SectionItem = function SectionItem(props) {
   }, rest), children);
 };
 
-var _excluded$e = ["text", "icon", "className", "iconClass", "onClick"];
+var _excluded$g = ["text", "icon", "className", "iconClass", "onClick"];
 
 function SectionItemWithContent(props) {
   var text = props.text,
@@ -4125,7 +4421,7 @@ function SectionItemWithContent(props) {
       className = props.className,
       iconClass = props.iconClass,
       onClick = props.onClick,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$e);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$g);
 
   var mergedClasses = classNames("cweb-section-text-item", className);
   var iconClasses = classNames("w-6 h-6 mr-4", iconClass);
@@ -4141,47 +4437,191 @@ function SectionItemWithContent(props) {
   }));
 }
 
-var useOutsideClick = function useOutsideClick(ref, callback) {
-  var handleClick = function handleClick(e) {
-    if (ref.current && !ref.current.contains(e.target)) {
-      callback();
-    }
-  };
-
-  React.useEffect(function () {
-    document.addEventListener("click", handleClick);
-    return function () {
-      document.removeEventListener("click", handleClick);
-    };
-  });
-};
-
-var SettingsMenuButton = function SettingsMenuButton(props) {
-  var _props$configuration = props.configuration,
-      configFromProps = _props$configuration === void 0 ? [] : _props$configuration,
-      onConfigurationChange = props.onConfigurationChange,
-      shiftMenuTo = props.shiftMenuTo,
-      buttonTitle = props.buttonTitle,
-      iconComponent = props.iconComponent,
-      menuTitle = props.menuTitle;
-
-  var _useState = React.useState(configFromProps),
-      innerConfiguration = _useState[0],
-      setInnerConfiguration = _useState[1];
-
-  var _useState2 = React.useState(false),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
-
-  var menuRef = React.useRef(null);
-  useOutsideClick(menuRef, function () {
-    if (showMenu) {
-      setShowMenu(false);
-    }
-  });
-  React.useEffect(function () {
-    setInnerConfiguration(configFromProps);
-  }, [configFromProps]);
+var _excluded$h = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
+
+function generateCustomStyles$1(hasError, isIE11) {
+  return {
+    option: function option(baseStyles, state) {
+      return _extends({}, baseStyles, {
+        fontWeight: state.isSelected ? "bold" : "normal",
+        fontSize: "14px",
+        backgroundColor: "none",
+        color: "inherit",
+        position: "relative",
+        padding: "0.75rem",
+        opacity: state.isDisabled ? "0.5" : 1,
+        "&:after": {
+          visibility: state.isSelected ? "visible" : "hidden"
+        },
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover": {
+          // tailwind blue-50
+          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
+        },
+        pointerEvents: state.isDisabled ? "none" : "auto"
+      });
+    },
+    container: function container(baseStyles) {
+      return _extends({}, baseStyles, {
+        flexGrow: isIE11 ? 0.5 : "initial"
+      });
+    },
+    control: function control(baseStyles, state) {
+      var defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
+      var validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
+      var defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
+      var validatedOutline = "4px solid " + (state.isFocused ? defaultOutline : "transparent");
+      return _extends({}, baseStyles, {
+        fontSize: "14px",
+        transition: "border 0.3s ease-in-out",
+        height: isIE11 ? "50px" : "2.75rem",
+        // primary outline
+        outline: validatedOutline,
+        borderColor: validatedBorderColor,
+        borderWidth: "1px !important",
+        borderStyle: "solid",
+        borderRadius: "4px",
+        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+        "&:hover": {
+          borderColor: "#9CA3AF",
+          // selector for the chevron
+          "> [class*=\"IndicatorsContainer\"]": {
+            opacity: 1
+          }
+        }
+      });
+    },
+    // The placeholder has the following css prop: grid-area: 1/1/2/3;
+    // And grid-area doesn't work on IE11, so we need to style it slightly different.
+    placeholder: function placeholder(baseStyles) {
+      return _extends({}, baseStyles, {
+        fontWeight: 100,
+        color: "#6B7280",
+        paddingTop: isIE11 ? "1.2rem" : undefined
+      });
+    },
+    singleValue: function singleValue(baseStyles) {
+      return _extends({}, baseStyles, {
+        paddingTop: isIE11 ? "1.2rem" : undefined,
+        fontSize: "14px"
+      });
+    },
+    indicatorSeparator: function indicatorSeparator() {
+      return {
+        display: "none"
+      };
+    },
+    menu: function menu(baseStyles) {
+      return _extends({}, baseStyles, {
+        zIndex: 20
+      });
+    }
+  };
+}
+/**
+ * A wrapper around react-select to style it according to our design specification.
+ *
+ * In addition, the value is taken out of the option, instead of returning the complete option.
+ *
+ * Care when using grouped options: the value of the options overspanning all groups need to be unique!
+ * For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
+ * This is a problem within react-select itself, not our wrapper.
+ *
+ * Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
+ * So far there wasn't a use-case for this.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
+  var _ref$isError = _ref.isError,
+      isError = _ref$isError === void 0 ? false : _ref$isError,
+      styles = _ref.styles,
+      options = _ref.options,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      isMulti = _ref.isMulti,
+      className = _ref.className,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+
+  var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
+  var customStyles = generateCustomStyles$1(isError, isIE11);
+  var mergedStyles = ReactSelect.mergeStyles(customStyles, styles); // the options can be either a list of options or a grouped list of options
+  // this is a typechecker to verify it is the case.
+
+  var isOptionsGrouped = !options ? false : options.reduce(function (acc, o) {
+    return acc || "options" in o && !("values" in o);
+  }, false); // we subsequently flatmap to ensure it's always a list of options
+
+  var flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap(function (g) {
+    return g.options;
+  }) : options; // based on: https://stackoverflow.com/a/70022957
+
+  var onChangeWrapped = !onChange ? undefined : isMulti ? function (val, a) {
+    return onChange(val.map(function (v) {
+      return v.value;
+    }), a);
+  } : function (val, a) {
+    return onChange(val == null ? void 0 : val.value, a);
+  }; // TODO: how can we report the error if a value was given that is not within the options?
+
+  var valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter(function (o) {
+    return value.includes(o.value);
+  }) : flatmappedOptions.find(function (o) {
+    return o.value === value;
+  });
+  return /*#__PURE__*/React__default.createElement(ReactSelect__default, Object.assign({}, otherProps, {
+    ref: innerRef,
+    styles: mergedStyles,
+    options: options,
+    onChange: onChangeWrapped,
+    value: valueWrapped,
+    isMulti: isMulti,
+    className: classNames("customized-select", className)
+  }));
+});
+
+var useOutsideClick = function useOutsideClick(ref, callback) {
+  var handleClick = function handleClick(e) {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  React.useEffect(function () {
+    document.addEventListener("click", handleClick);
+    return function () {
+      document.removeEventListener("click", handleClick);
+    };
+  });
+};
+
+var SettingsMenuButton = function SettingsMenuButton(props) {
+  var _props$configuration = props.configuration,
+      configFromProps = _props$configuration === void 0 ? [] : _props$configuration,
+      onConfigurationChange = props.onConfigurationChange,
+      shiftMenuTo = props.shiftMenuTo,
+      buttonTitle = props.buttonTitle,
+      iconComponent = props.iconComponent,
+      menuTitle = props.menuTitle;
+
+  var _useState = React.useState(configFromProps),
+      innerConfiguration = _useState[0],
+      setInnerConfiguration = _useState[1];
+
+  var _useState2 = React.useState(false),
+      showMenu = _useState2[0],
+      setShowMenu = _useState2[1];
+
+  var menuRef = React.useRef(null);
+  useOutsideClick(menuRef, function () {
+    if (showMenu) {
+      setShowMenu(false);
+    }
+  });
+  React.useEffect(function () {
+    setInnerConfiguration(configFromProps);
+  }, [configFromProps]);
 
   var handleShowMenu = function handleShowMenu() {
     setShowMenu(true);
@@ -4247,8 +4687,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
   })));
 };
 
-var css_248z$o = ".cweb-switcher-item {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n  display: flex;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n      .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  width: 20px;\n  height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #737373;\n  transition: color 0.4s ease;\n  padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n  margin-left: 8px;\n  padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n  border-color: #0074dd;\n  z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n  display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n  pointer-events: none;\n}\n";
-styleInject(css_248z$o);
+var css_248z$p = ".cweb-switcher-item {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n  display: flex;\n  align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n      .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  width: 20px;\n  height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #737373;\n  transition: color 0.4s ease;\n  padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n  margin-left: 8px;\n  padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n  border-color: #0074dd;\n  z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n  display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n  pointer-events: none;\n}\n";
+styleInject(css_248z$p);
 
 SwitcherItem.propTypes = {
   name: PropTypes.string,
@@ -4581,10 +5021,10 @@ var TagGroup = function TagGroup(_ref) {
   }));
 };
 
-var css_248z$p = ".cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  resize: none;\n}\n\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n  resize: both;\n}\n\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #737373;\n}\n\n.cweb-textarea::placeholder {\n  color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-textarea:focus {\n  border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n  border: 1px solid #ff6266;\n  color: #ff6266;\n}\n";
-styleInject(css_248z$p);
+var css_248z$q = ".cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  resize: none;\n}\n\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n  resize: both;\n}\n\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #737373;\n}\n\n.cweb-textarea::placeholder {\n  color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.cweb-textarea:focus {\n  border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n  border: 1px solid #ff6266;\n  color: #ff6266;\n}\n";
+styleInject(css_248z$q);
 
-var _excluded$f = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
+var _excluded$i = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
 var RESIZE_TYPES = {
   NONE: "none",
   BOTH: "both",
@@ -4628,7 +5068,7 @@ function Textarea(props) {
       onKeyPress = props.onKeyPress,
       _onKeyDown = props.onKeyDown,
       onCtrlEnter = props.onCtrlEnter,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded$f);
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$i);
 
   var style;
 
@@ -4669,8 +5109,8 @@ function Textarea(props) {
   }));
 }
 
-var css_248z$q = ".ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}\n";
-styleInject(css_248z$q);
+var css_248z$r = ".ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}\n";
+styleInject(css_248z$r);
 
 function TextEditor(_ref) {
   var defaultValue = _ref.defaultValue,
@@ -4724,8 +5164,8 @@ TextEditor.propTypes = {
   onValueChange: PropTypes.func.isRequired
 };
 
-var css_248z$r = ".editor .rdw-editor {\n  overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n  width: 20rem;\n  height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n    .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n  font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n  margin-bottom: 1rem;\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n      .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n  width: 22rem;\n  height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n    .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n  width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n      .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n  min-height: 14rem;\n  overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n  margin: 0 12px;\n}\n";
-styleInject(css_248z$r);
+var css_248z$s = ".editor .rdw-editor {\n  overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n  width: 20rem;\n  height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n    .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n  font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n  margin-bottom: 1rem;\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n      .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n  width: 22rem;\n  height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n    .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  font-size: 16px;\n  font-weight: normal;\n  line-height: 21px;\n  color: #2d2d2d;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  padding: 12px;\n  caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n  width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n  width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n  border-radius: 1.375rem;\n  width: 6.5rem;\n  height: 2.75rem;\n  border: 1px solid #009fe3;\n  background-color: transparent;\n  color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n      .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n  background: #009fe3;\n  color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n  min-height: 14rem;\n  overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n  margin: 0 12px;\n}\n";
+styleInject(css_248z$s);
 
 var TextEditorV2 = function TextEditorV2(_ref) {
   var defaultValue = _ref.defaultValue,
@@ -4804,7 +5244,7 @@ var Timeline = function Timeline(props) {
   }, props.loadMoreButtonProps)));
 };
 
-var _excluded$g = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];
+var _excluded$j = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];
 function ViewItem(_ref) {
   var titleProps = _ref.titleProps,
       title = _ref.title,
@@ -4815,7 +5255,7 @@ function ViewItem(_ref) {
       defaultContent = _ref$defaultContent === void 0 ? "-" : _ref$defaultContent,
       className = _ref.className,
       buttons = _ref.buttons,
-      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   var titlePropsMerged = titleProps != null ? titleProps : {
     text: title != null ? title : defaultContent
@@ -4933,7 +5373,7 @@ var isRequired = function isRequired(options) {
   return !!(options && "required" in options);
 };
 
-var _excluded$h = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var _excluded$k = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 /**
  * Input field that can be used in any react-hook-form context.
  */
@@ -4945,7 +5385,7 @@ var FormInputInner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       label = _ref.label,
       info = _ref.info,
       decoratorClassname = _ref.decoratorClassname,
-      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
     name: name,
@@ -4966,93 +5406,7 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   }));
 });
 
-var css_248z$s = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n  --bg-opacity: 1;\n  background-color: #0074DD;\n  background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n  --border-opacity: 1;\n  border-color: #c53030;\n  border-color: rgba(197, 48, 48, var(--border-opacity));\n  outline: 4px solid rgba(255, 98, 102, 0.3);\n  outline-offset: 0;\n}\n\n.radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .radio-circle\n  .radio-inner-circle {\n  --bg-opacity: 1;\n  background-color: #fff;\n  background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
-styleInject(css_248z$s);
-
-var _excluded$i = ["text", "info", "isError", "innerRef", "className"];
-
-function RadioInner(_ref) {
-  var text = _ref.text,
-      info = _ref.info,
-      isError = _ref.isError,
-      innerRef = _ref.innerRef,
-      className = _ref.className,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
-
-  var value = otherProps.value,
-      disabled = otherProps.disabled;
-  var nameHtmlFor = "field-" + value;
-  return /*#__PURE__*/React__default.createElement("label", {
-    className: "radio-form-field-label leading-tight",
-    htmlFor: nameHtmlFor,
-    "data-has-error": isError,
-    "data-test-id": nameHtmlFor
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-row items-center "
-  }, /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
-    className: classNames("appearance-none", className),
-    ref: innerRef,
-    type: "radio",
-    id: nameHtmlFor,
-    disabled: disabled
-  })), /*#__PURE__*/React__default.createElement("span", {
-    className: classNames("flex flex-col items-center justify-center w-4 h-4 transition-colors duration-300 ease-in-out border radio-circle rounded-xl border-slate-300")
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "block transition-colors duration-300 ease-in-out radio-inner-circle w-1.5 h-1.5 rounded-xl"
-  })), text && /*#__PURE__*/React__default.createElement("div", {
-    className: "ml-2"
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    inline: true,
-    text: text,
-    type: "base",
-    color: disabled ? "slate-500" : undefined
-  }))), info && /*#__PURE__*/React__default.createElement(Text, {
-    inline: true,
-    className: "ml-6",
-    text: info,
-    type: "sm",
-    color: disabled ? "slate-200" : "slate-500"
-  }));
-}
-/**
- * TODO: The CSS styling is all messed up, including isError
- * Warning: don't use this prop before this is resolved
- * Issue to track: https://github.com/Luscii/web-ui/issues/57
- * TODO: remove this comment once this is resolved
- */
-
-
-var RadioV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(RadioInner, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-
-var _excluded$j = ["innerRef", "options"];
-
-function RadioGroupInner(_ref) {
-  var innerRef = _ref.innerRef,
-      options = _ref.options,
-      registerProps = _objectWithoutPropertiesLoose(_ref, _excluded$j);
-
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames("flex flex-col space-y-2")
-  }, options.map(function (option) {
-    return /*#__PURE__*/React__default.createElement(RadioV2, Object.assign({
-      key: option.value
-    }, option, registerProps, {
-      ref: innerRef
-    }));
-  }));
-}
-
-var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default.createElement(RadioGroupInner, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-
-var _excluded$k = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var _excluded$l = ["innerRef", "name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 /**
  * Input field that can be used in any react-hook-form context.
  */
@@ -5065,7 +5419,7 @@ function FormRadioGroupInner(_ref) {
       label = _ref.label,
       info = _ref.info,
       decoratorClassname = _ref.decoratorClassname,
-      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
     name: name,
@@ -5087,150 +5441,6 @@ var FormRadioGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref
   }));
 });
 
-var _excluded$l = ["isError", "styles", "options", "onChange", "value", "isMulti", "className"];
-
-function generateCustomStyles$1(hasError, isIE11) {
-  return {
-    option: function option(baseStyles, state) {
-      return _extends({}, baseStyles, {
-        fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
-        backgroundColor: "none",
-        color: "inherit",
-        position: "relative",
-        padding: "0.75rem",
-        opacity: state.isDisabled ? "0.5" : 1,
-        "&:after": {
-          visibility: state.isSelected ? "visible" : "hidden"
-        },
-        transition: "background-color 0.3s ease-in-out",
-        "&:hover": {
-          // tailwind blue-50
-          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
-        },
-        pointerEvents: state.isDisabled ? "none" : "auto"
-      });
-    },
-    container: function container(baseStyles) {
-      return _extends({}, baseStyles, {
-        flexGrow: isIE11 ? 0.5 : "initial"
-      });
-    },
-    control: function control(baseStyles, state) {
-      var defaultBorderColor = state.isFocused ? "#045baa" : "#D1D5DB";
-      var validatedBorderColor = hasError ? "#c53030" : defaultBorderColor;
-      var defaultOutline = hasError ? "rgba(255, 98, 102, 0.3)" : "rgba(0, 159, 227, 0.3)";
-      var validatedOutline = "4px solid " + (state.isFocused ? defaultOutline : "transparent");
-      return _extends({}, baseStyles, {
-        fontSize: "14px",
-        transition: "border 0.3s ease-in-out",
-        height: isIE11 ? "50px" : "2.75rem",
-        // primary outline
-        outline: validatedOutline,
-        borderColor: validatedBorderColor,
-        borderWidth: "1px !important",
-        borderStyle: "solid",
-        borderRadius: "4px",
-        boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.05)",
-        "&:hover": {
-          borderColor: "#9CA3AF",
-          // selector for the chevron
-          "> [class*=\"IndicatorsContainer\"]": {
-            opacity: 1
-          }
-        }
-      });
-    },
-    // The placeholder has the following css prop: grid-area: 1/1/2/3;
-    // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: function placeholder(baseStyles) {
-      return _extends({}, baseStyles, {
-        fontWeight: 100,
-        color: "#6B7280",
-        paddingTop: isIE11 ? "1.2rem" : undefined
-      });
-    },
-    singleValue: function singleValue(baseStyles) {
-      return _extends({}, baseStyles, {
-        paddingTop: isIE11 ? "1.2rem" : undefined,
-        fontSize: "14px"
-      });
-    },
-    indicatorSeparator: function indicatorSeparator() {
-      return {
-        display: "none"
-      };
-    },
-    menu: function menu(baseStyles) {
-      return _extends({}, baseStyles, {
-        zIndex: 20
-      });
-    }
-  };
-}
-/**
- * A wrapper around react-select to style it according to our design specification.
- *
- * In addition, the value is taken out of the option, instead of returning the complete option.
- *
- * Care when using grouped options: the value of the options overspanning all groups need to be unique!
- * For instance, if you have an option with value "chocolate" in both the groups "flavor" and "dip", then you get unforeseen errors.
- * This is a problem within react-select itself, not our wrapper.
- *
- * Care when using defaultValue: this still requires the complete Option (instead of the value of the Option).
- * So far there wasn't a use-case for this.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
-  var _ref$isError = _ref.isError,
-      isError = _ref$isError === void 0 ? false : _ref$isError,
-      styles = _ref.styles,
-      options = _ref.options,
-      onChange = _ref.onChange,
-      value = _ref.value,
-      isMulti = _ref.isMulti,
-      className = _ref.className,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-
-  var isIE11 = "MSInputMethodContext" in window && "documentMode" in document;
-  var customStyles = generateCustomStyles$1(isError, isIE11);
-  var mergedStyles = ReactSelect.mergeStyles(customStyles, styles); // the options can be either a list of options or a grouped list of options
-  // this is a typechecker to verify it is the case.
-
-  var isOptionsGrouped = !options ? false : options.reduce(function (acc, o) {
-    return acc || "options" in o && !("values" in o);
-  }, false); // we subsequently flatmap to ensure it's always a list of options
-
-  var flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap(function (g) {
-    return g.options;
-  }) : options; // based on: https://stackoverflow.com/a/70022957
-
-  var onChangeWrapped = !onChange ? undefined : isMulti ? function (val, a) {
-    return onChange(val.map(function (v) {
-      return v.value;
-    }), a);
-  } : function (val, a) {
-    return onChange(val == null ? void 0 : val.value, a);
-  }; // TODO: how can we report the error if a value was given that is not within the options?
-
-  var valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter(function (o) {
-    return value.includes(o.value);
-  }) : flatmappedOptions.find(function (o) {
-    return o.value === value;
-  });
-  return /*#__PURE__*/React__default.createElement(ReactSelect__default, Object.assign({}, otherProps, {
-    ref: innerRef,
-    styles: mergedStyles,
-    options: options,
-    onChange: onChangeWrapped,
-    value: valueWrapped,
-    isMulti: isMulti,
-    className: classNames("customized-select", className)
-  }));
-});
-
 var _excluded$m = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
 
 var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
@@ -5267,74 +5477,45 @@ var FormSelect = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef
 
 var _excluded$n = ["type", "name", "options", "fieldProps"];
 /**
- * Create a straight forward Form.
+ * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
+ *
+ * You will probably don't want to use this component for now, given that the button is hardcoded.
+ * This is an example for the Form for now, though it could be improved to enforce further unification.
  *
- * TODO: wrap this in some Page component to style the div and buttons
- * WARNING: don't use this component before some styling errors are resolved.
+ * TODO: make the buttons configurable.
  */
 
-function Form(_ref) {
+function GenericForm(_ref) {
   var fields = _ref.fields,
       onValid = _ref.onValid,
       onError = _ref.onError,
       defaultValues = _ref.defaultValues;
-
-  var _useForm = reactHookForm.useForm({
+  var useFormReturn = reactHookForm.useForm({
     criteriaMode: "all",
     defaultValues: defaultValues
-  }),
-      register = _useForm.register,
-      handleSubmit = _useForm.handleSubmit,
-      control = _useForm.control,
-      errors = _useForm.formState.errors;
-
-  var fieldMapper = function fieldMapper(_ref2) {
-    var type = _ref2.type,
-        name = _ref2.name,
-        options = _ref2.options,
-        _ref2$fieldProps = _ref2.fieldProps,
-        fieldProps = _ref2$fieldProps === void 0 ? {} : _ref2$fieldProps,
-        decoratorProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
-
-    switch (type) {
-      case "text":
-      case "number":
-      case "email":
-      case "password":
-        return /*#__PURE__*/React__default.createElement(FormInput, Object.assign({
-          key: name
-        }, decoratorProps, {
-          fieldRequired: isRequired(options),
-          fieldErrors: errors
-        }, fieldProps, register(name, options), {
-          type: type || "text"
-        }));
-
-      case "select":
-        return /*#__PURE__*/React__default.createElement(FormSelect, Object.assign({
-          key: name
-        }, decoratorProps, {
-          fieldRequired: isRequired(options),
-          fieldErrors: errors
-        }, fieldProps, {
-          control: control,
-          rules: options,
-          name: name
-        }));
-
-      case "radioGroup":
-        return /*#__PURE__*/React__default.createElement(FormRadioGroup, Object.assign({
-          key: name
-        }, decoratorProps, {
-          fieldRequired: isRequired(options),
-          fieldErrors: errors
-        }, fieldProps, register(name, options)));
-
-      default:
-        return undefined;
-    }
-  };
+  });
+  var handleSubmit = useFormReturn.handleSubmit;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React__default.createElement(Form, {
+    fields: fields,
+    useFormReturn: useFormReturn
+  }), /*#__PURE__*/React__default.createElement(PrimaryButton, {
+    onClick: handleSubmit(onValid, onError),
+    text: "submit"
+  }));
+}
+/**
+ * Creates a Form based on the fields input.
+ *
+ * Expects the results of the useForm hook to be injected into the useFormReturn parameter.
+ *
+ * This allows you to use and modify the useFormReturn before injecting it here.
+ */
 
+function Form(_ref2) {
+  var fields = _ref2.fields,
+      useFormReturn = _ref2.useFormReturn;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-4"
   }, fields.map(function (props) {
@@ -5342,18 +5523,68 @@ function Form(_ref) {
       var rowFields = props.fields,
           key = props.key;
       return /*#__PURE__*/React__default.createElement("div", {
-        className: "flex flex-row",
+        className: "flex flex-row space-x-4",
         key: key
-      }, rowFields.map(fieldMapper));
+      }, rowFields.map(function (field) {
+        return FormFieldMapper(field, useFormReturn);
+      }));
     }
 
-    return fieldMapper(props);
-  }), /*#__PURE__*/React__default.createElement(PrimaryButton, {
-    onClick: handleSubmit(onValid, onError),
-    text: "submit"
+    return FormFieldMapper(props, useFormReturn);
   }));
 }
 
+function FormFieldMapper(formFieldProps, useFormReturn) {
+  var type = formFieldProps.type,
+      name = formFieldProps.name,
+      options = formFieldProps.options,
+      _formFieldProps$field = formFieldProps.fieldProps,
+      fieldProps = _formFieldProps$field === void 0 ? {} : _formFieldProps$field,
+      decoratorProps = _objectWithoutPropertiesLoose(formFieldProps, _excluded$n);
+
+  var register = useFormReturn.register,
+      control = useFormReturn.control,
+      errors = useFormReturn.formState.errors;
+
+  switch (type) {
+    case "text":
+    case "number":
+    case "email":
+    case "password":
+      return /*#__PURE__*/React__default.createElement(FormInput, Object.assign({
+        key: name
+      }, decoratorProps, {
+        fieldRequired: isRequired(options),
+        fieldErrors: errors
+      }, fieldProps, register(name, options), {
+        type: type || "text"
+      }));
+
+    case "select":
+      return /*#__PURE__*/React__default.createElement(FormSelect, Object.assign({
+        key: name
+      }, decoratorProps, {
+        fieldRequired: isRequired(options),
+        fieldErrors: errors
+      }, fieldProps, {
+        control: control,
+        rules: options,
+        name: name
+      }));
+
+    case "radioGroup":
+      return /*#__PURE__*/React__default.createElement(FormRadioGroup, Object.assign({
+        key: name
+      }, decoratorProps, {
+        fieldRequired: isRequired(options),
+        fieldErrors: errors
+      }, fieldProps, register(name, options)));
+
+    default:
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  }
+}
+
 var AlertsIcon = function AlertsIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
@@ -5428,24 +5659,6 @@ var ChatBoxIcon = function ChatBoxIcon(props) {
   }));
 };
 
-var CheckIcon = function CheckIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M18.7071 7.29289C19.0976 7.68342 19.0976 8.31658 18.7071 8.70711L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071L5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929C5.68342 10.9024 6.31658 10.9024 6.70711 11.2929L10 14.5858L17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289Z",
-    fill: "currentColor"
-  }));
-};
-
 var ChevronDoubleIcon = function ChevronDoubleIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
@@ -6125,8 +6338,6 @@ var SearchCancelIcon = function SearchCancelIcon(props) {
   }));
 };
 
-exports.ACKNOWLEDGEMENT_TYPE_OPTIONS = ACKNOWLEDGEMENT_TYPE_OPTIONS;
-exports.Acknowledgement = Acknowledgement;
 exports.AddIcon = AddIcon;
 exports.AlertsIcon = AlertsIcon;
 exports.Avatar = Avatar;
@@ -6157,6 +6368,7 @@ exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.EyeIcon = EyeIcon;
 exports.Form = Form;
 exports.GearIcon = GearIcon;
+exports.GenericForm = GenericForm;
 exports.GroupIcon = GroupIcon;
 exports.HamburgerIcon = HamburgerIcon;
 exports.HeartIcon = HeartIcon;
@@ -6186,6 +6398,8 @@ exports.PrimaryButton = PrimaryButton;
 exports.PrintIcon = PrintIcon;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.RadioGroupV2 = RadioGroupV2;
+exports.RadioV2 = RadioV2;
 exports.RightArrowIcon = RightArrowIcon;
 exports.SearchCancelIcon = SearchCancelIcon;
 exports.SearchIcon = SearchIcon;
@@ -6194,6 +6408,7 @@ exports.SecondaryButton = SecondaryButton;
 exports.Section = Section;
 exports.SectionItem = SectionItem;
 exports.SectionItemWithContent = SectionItemWithContent;
+exports.Select = Select;
 exports.SettingsMenuButton = SettingsMenuButton;
 exports.SmallCircleIcon = SmallCircleIcon;
 exports.SmallDiamondIcon = SmallDiamondIcon;
@@ -6203,6 +6418,7 @@ exports.Spinner = Spinner;
 exports.StarIcon = StarIcon;
 exports.Steps = Steps;
 exports.Switcher = Switcher;
+exports.TOASTER_TYPE_OPTIONS = TOASTER_TYPE_OPTIONS;
 exports.TabLinks = TabLinks;
 exports.Tabbar = Tabbar;
 exports.Table = Table;
@@ -6216,5 +6432,7 @@ exports.TextEditorV2 = TextEditorV2;
 exports.TextLink = TextLink;
 exports.Timeline = Timeline;
 exports.Title = Title;
+exports.Toaster = Toaster;
 exports.ViewItem = ViewItem;
+exports.toast = toast;
 //# sourceMappingURL=web-ui.cjs.development.js.map