@genspectrum/dashboard-components 0.1.4 → 0.1.5

package/dist/dashboard-components.js

@@ -1225,6 +1225,12 @@ const ErrorDisplay = ({ error }) => {
   ] });
 };
 const Headline = ({ heading, children }) => {
+  if (!heading) {
+    return /* @__PURE__ */ u$1(Fragment, { children });
+  }
+  return /* @__PURE__ */ u$1(ResizingHeadline, { heading, children });
+};
+const ResizingHeadline = ({ heading, children }) => {
   const ref = F(null);
   const [h1Height, setH1Height] = p("2rem");
   _(() => {
@@ -1238,8 +1244,37 @@ const Headline = ({ heading, children }) => {
     /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
   ] });
 };
-const Info = ({ content, className }) => {
-  return /* @__PURE__ */ u$1("div", { class: `${className} tooltip`, "data-tip": content, children: /* @__PURE__ */ u$1("button", { class: "btn btn-xs", children: "?" }) });
+const Info = ({ children, size }) => {
+  const [showHelp, setShowHelp] = p(false);
+  const toggleHelp = () => {
+    setShowHelp(!showHelp);
+  };
+  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
+    /* @__PURE__ */ u$1("button", { className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
+    showHelp && /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: "absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50",
+        style: size,
+        children: [
+          /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
+          /* @__PURE__ */ u$1("div", { className: "flex justify-end", children: /* @__PURE__ */ u$1("button", { className: "text-sm underline mt-2", onClick: toggleHelp, children: "Close" }) })
+        ]
+      }
+    )
+  ] });
+};
+const InfoHeadline1 = ({ children }) => {
+  return /* @__PURE__ */ u$1("h1", { className: "text-lg font-bold", children });
+};
+const InfoHeadline2 = ({ children }) => {
+  return /* @__PURE__ */ u$1("h2", { className: "text-base font-bold mt-4", children });
+};
+const InfoParagraph = ({ children }) => {
+  return /* @__PURE__ */ u$1("p", { className: "text-justify my-1", children });
+};
+const InfoLink = ({ children, href }) => {
+  return /* @__PURE__ */ u$1("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
 };
 const LoadingDisplay = () => {
   return /* @__PURE__ */ u$1("div", { children: "Loading..." });
@@ -1503,13 +1538,13 @@ const MutationComparison = ({
   variants,
   sequenceType,
   views,
-  size
+  size,
+  headline = "Mutation comparison"
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(variants, sequenceType, lapis);
   }, [variants, sequenceType, lapis]);
-  const headline = "Mutation comparison";
   if (isLoading) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
   }
@@ -1612,7 +1647,7 @@ const Toolbar$3 = ({
         filename: "mutation_comparison.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutation comparison" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutation comparison" })
   ] });
 };
 const gridJsStyle = '.gridjs-head button, .gridjs-footer button {\n  cursor: pointer;\n  background-color: transparent;\n  background-image: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n}\n\n.gridjs-temp {\n  position: relative;\n}\n\n.gridjs-head {\n  width: 100%;\n  margin-bottom: 5px;\n  padding: 5px 1px;\n}\n.gridjs-head::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-head:empty {\n  padding: 0;\n  border: none;\n}\n\n.gridjs-container {\n  overflow: hidden;\n  display: inline-block;\n  padding: 2px;\n  color: #000;\n  position: relative;\n  z-index: 0;\n}\n\n.gridjs-footer {\n  display: block;\n  position: relative;\n  width: 100%;\n  z-index: 5;\n  padding: 12px 24px;\n  border-top: 1px solid #e5e7eb;\n  background-color: #fff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 0 0 8px 8px;\n  border-bottom-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-footer:empty {\n  padding: 0;\n  border: none;\n}\n\ninput.gridjs-input {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #d2d6dc;\n  border-radius: 5px;\n  padding: 10px 13px;\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\ninput.gridjs-input:focus {\n  box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);\n  border-color: #9bc2f7;\n}\n\n.gridjs-pagination {\n  color: #3d4044;\n}\n.gridjs-pagination::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-pagination .gridjs-summary {\n  float: left;\n  margin-top: 5px;\n}\n.gridjs-pagination .gridjs-pages {\n  float: right;\n}\n.gridjs-pagination .gridjs-pages button {\n  padding: 5px 14px;\n  border: 1px solid #d2d6dc;\n  background-color: #fff;\n  border-right: none;\n  outline: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.gridjs-pagination .gridjs-pages button:focus {\n  box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);\n  position: relative;\n  margin-right: -1px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:hover {\n  background-color: #f7f7f7;\n  color: rgb(60, 66, 87);\n  outline: none;\n}\n.gridjs-pagination .gridjs-pages button:disabled,\n.gridjs-pagination .gridjs-pages button[disabled],\n.gridjs-pagination .gridjs-pages button:hover:disabled {\n  cursor: default;\n  background-color: #fff;\n  color: #6b7280;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-spread {\n  cursor: default;\n  box-shadow: none;\n  background-color: #fff;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-currentPage {\n  background-color: #f7f7f7;\n  font-weight: bold;\n}\n.gridjs-pagination .gridjs-pages button:last-child {\n  border-bottom-right-radius: 6px;\n  border-top-right-radius: 6px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n}\n.gridjs-pagination .gridjs-pages button:last-child:focus {\n  margin-right: 0;\n}\n\nbutton.gridjs-sort {\n  float: right;\n  height: 24px;\n  width: 13px;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position-x: center;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n  background-size: contain;\n}\nbutton.gridjs-sort-neutral {\n  opacity: 0.3;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: center;\n}\nbutton.gridjs-sort-asc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 35%;\n  background-size: 10px;\n}\nbutton.gridjs-sort-desc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 65%;\n  background-size: 10px;\n}\nbutton.gridjs-sort:focus {\n  outline: none;\n}\n\ntable.gridjs-table {\n  width: 100%;\n  max-width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n  display: table;\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  table-layout: fixed;\n}\n\n.gridjs-tbody {\n  background-color: #fff;\n}\n\ntd.gridjs-td {\n  border: 1px solid #e5e7eb;\n  padding: 12px 24px;\n  background-color: #fff;\n  box-sizing: content-box;\n}\ntd.gridjs-td:first-child {\n  border-left: none;\n}\ntd.gridjs-td:last-child {\n  border-right: none;\n}\ntd.gridjs-message {\n  text-align: center;\n}\n\nth.gridjs-th {\n  position: relative;\n  color: #6b7280;\n  background-color: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-top: none;\n  padding: 14px 24px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  outline: none;\n  vertical-align: middle;\n}\nth.gridjs-th .gridjs-th-content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n  float: left;\n}\nth.gridjs-th-sort {\n  cursor: pointer;\n}\nth.gridjs-th-sort .gridjs-th-content {\n  width: calc(100% - 15px);\n}\nth.gridjs-th-sort:hover {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-sort:focus {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-fixed {\n  position: sticky;\n  box-shadow: 0 1px 0 0 #e5e7eb;\n}\n@supports (-moz-appearance: none) {\n  th.gridjs-th-fixed {\n    box-shadow: 0 0 0 1px #e5e7eb;\n  }\n}\nth.gridjs-th:first-child {\n  border-left: none;\n}\nth.gridjs-th:last-child {\n  border-right: none;\n}\n\n.gridjs-tr {\n  border: none;\n}\n.gridjs-tr-selected td {\n  background-color: #ebf5ff;\n}\n.gridjs-tr:last-child td {\n  border-bottom: 0;\n}\n\n.gridjs *,\n.gridjs :after,\n.gridjs :before {\n  box-sizing: border-box;\n}\n\n.gridjs-wrapper {\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 8px 8px 0 0;\n  display: block;\n  border-top-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-wrapper:nth-last-of-type(2) {\n  border-radius: 8px;\n  border-bottom-width: 1px;\n}\n\n.gridjs-search {\n  float: left;\n}\n.gridjs-search-input {\n  width: 250px;\n}\n\n.gridjs-loading-bar {\n  z-index: 10;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  opacity: 0.5;\n}\n.gridjs-loading-bar::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));\n  animation: shimmer 2s infinite;\n  content: "";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.gridjs-td .gridjs-checkbox {\n  display: block;\n  margin: auto;\n  cursor: pointer;\n}\n\n.gridjs-resizable {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 5px;\n}\n.gridjs-resizable:hover {\n  cursor: ew-resize;\n  background-color: #9bc2f7;\n}\n/*# sourceMappingURL=mermaid.css?inline.map */';
@@ -2307,7 +2342,6 @@ html {
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   border-width: var(--border-btn, 1px);
-  animation: button-pop var(--animation-btn, 0.25s) ease-out;
   transition-property: color, background-color, border-color, opacity, box-shadow, transform;
   --tw-text-opacity: 1;
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -2782,6 +2816,14 @@ html {
   z-index: 3;
   opacity: 1;
 }
+.steps {
+  display: inline-grid;
+  grid-auto-flow: column;
+  overflow: hidden;
+  overflow-x: auto;
+  counter-reset: step;
+  grid-auto-columns: 1fr;
+}
 .steps .step {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -2796,8 +2838,7 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
-  .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
+.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -2842,7 +2883,7 @@ html {
   grid-column-start: span 9999;
 }
 input.tab:checked + .tab-content,
-.tab-active + .tab-content {
+:is(.tab-active, [aria-selected="true"]) + .tab-content {
   display: block;
 }
 .table {
@@ -2887,6 +2928,12 @@ input.tab:checked + .tab-content,
   font-size: 1rem;
   line-height: 1.5rem;
 }
+@media (prefers-reduced-motion: no-preference) {
+
+  .btn {
+    animation: button-pop var(--animation-btn, 0.25s) ease-out;
+  }
+}
 .btn:active:hover,
   .btn:active:focus {
   animation: button-pop 0s ease-out;
@@ -3464,12 +3511,79 @@ input.tab:checked + .tab-content,
 .steps .step[data-content]:after {
   content: attr(data-content);
 }
+.steps .step-neutral + .step-neutral:before,
+  .steps .step-neutral:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+}
+.steps .step-primary + .step-primary:before,
+  .steps .step-primary:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+.steps .step-secondary + .step-secondary:before,
+  .steps .step-secondary:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+}
+.steps .step-accent + .step-accent:before,
+  .steps .step-accent:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+}
+.steps .step-info + .step-info:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+}
+.steps .step-info:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+}
+.steps .step-success + .step-success:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+}
+.steps .step-success:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+}
+.steps .step-warning + .step-warning:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+}
+.steps .step-warning:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+.steps .step-error + .step-error:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+}
+.steps .step-error:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+}
 .tabs-lifted > .tab:focus-visible {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
-.tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tab:is(input:checked) {
+.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
   border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
   --tw-border-opacity: 1;
   --tw-text-opacity: 1;
@@ -3504,8 +3618,7 @@ input.tab:checked + .tab-content,
   padding-inline-end: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tabs-lifted > .tab:is(input:checked) {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
   background-color: var(--tab-bg);
   border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
   border-inline-start-color: var(--tab-border-color);
@@ -3516,7 +3629,7 @@ input.tab:checked + .tab-content,
   padding-bottom: var(--tab-border, 1px);
   padding-top: 0;
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
   z-index: 1;
   content: "";
   display: block;
@@ -3545,26 +3658,26 @@ input.tab:checked + .tab-content,
       );
   background-image: var(--radius-start), var(--radius-end);
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
   background-image: var(--radius-end);
   background-position: top right;
 }
-[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
   background-image: var(--radius-start);
   background-position: top left;
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
   background-image: var(--radius-start);
   background-position: top left;
 }
-[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
   background-image: var(--radius-end);
   background-position: top right;
 }
 .tabs-lifted
-  > .tab-active:not(.tab-disabled):not([disabled])
+  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
   + .tabs-lifted
-  .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
+  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
   background-image: var(--radius-end);
   background-position: top right;
 }
@@ -3885,9 +3998,21 @@ input.tab:checked + .tab-content,
 .static {
   position: static;
 }
+.absolute {
+  position: absolute;
+}
 .relative {
   position: relative;
 }
+.right-6 {
+  right: 1.5rem;
+}
+.top-8 {
+  top: 2rem;
+}
+.z-50 {
+  z-index: 50;
+}
 .z-\\[1\\] {
   z-index: 1;
 }
@@ -3924,6 +4049,9 @@ input.tab:checked + .tab-content,
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .inline {
   display: inline;
 }
@@ -3984,6 +4112,9 @@ input.tab:checked + .tab-content,
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -4039,6 +4170,10 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
 .border-error {
   --tw-border-opacity: 1;
   border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
@@ -4098,6 +4233,13 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.text-justify {
+  text-align: justify;
+}
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -4123,15 +4265,31 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.underline {
+  text-decoration-line: underline;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -4147,6 +4305,10 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hover\\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -4210,6 +4372,7 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.sequenceType = "nucleotide";
     this.views = ["table"];
     this.size = void 0;
+    this.headline = "Mutation comparison";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -4218,7 +4381,8 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
         variants: this.variants,
         sequenceType: this.sequenceType,
         views: this.views,
-        size: this.size
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -4235,6 +4399,9 @@ __decorateClass$8([
 __decorateClass$8([
   n2({ type: Object })
 ], MutationComparisonComponent.prototype, "size", 2);
+__decorateClass$8([
+  n2({ type: String })
+], MutationComparisonComponent.prototype, "headline", 2);
 MutationComparisonComponent = __decorateClass$8([
   t$2("gs-mutation-comparison-component")
 ], MutationComparisonComponent);
@@ -4496,12 +4663,17 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({ variant, sequenceType, views, size }) => {
+const Mutations = ({
+  variant,
+  sequenceType,
+  views,
+  size,
+  headline = "Mutations"
+}) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(variant, sequenceType, lapis);
   }, [variant, sequenceType, lapis]);
-  const headline = "Mutations";
   if (isLoading) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
   }
@@ -4614,7 +4786,7 @@ const Toolbar$2 = ({
         filename: "insertions.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutations" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutations" })
   ] });
 };
 var __defProp$7 = Object.defineProperty;
@@ -4635,9 +4807,19 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
     this.size = void 0;
+    this.headline = "Mutations";
   }
   render() {
-    return /* @__PURE__ */ u$1(Mutations, { variant: this.variant, sequenceType: this.sequenceType, views: this.views, size: this.size });
+    return /* @__PURE__ */ u$1(
+      Mutations,
+      {
+        variant: this.variant,
+        sequenceType: this.sequenceType,
+        views: this.views,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$7([
@@ -4652,6 +4834,9 @@ __decorateClass$7([
 __decorateClass$7([
   n2({ type: Object })
 ], MutationsComponent.prototype, "size", 2);
+__decorateClass$7([
+  n2({ type: String })
+], MutationsComponent.prototype, "headline", 2);
 MutationsComponent = __decorateClass$7([
   t$2("gs-mutations-component")
 ], MutationsComponent);
@@ -6194,14 +6379,14 @@ const PrevalenceOverTime = ({
   smoothingWindow,
   views,
   confidenceIntervalMethods,
-  size
+  size,
+  headline = "Prevalence over time"
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
     () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
     [lapis, numerator, denominator, granularity, smoothingWindow]
   );
-  const headline = "Prevalence over time";
   if (isLoading) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
   }
@@ -6313,7 +6498,13 @@ const Toolbar$1 = ({
         filename: "prevalence-over-time.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Info for prevalence over time" })
+    /* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
+  ] });
+};
+const PrevalenceOverTimeInfo = () => {
+  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence over time" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
   ] });
 };
 var __defProp$6 = Object.defineProperty;
@@ -6336,6 +6527,7 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["wilson"];
+    this.headline = "Prevalence over time";
     this.size = void 0;
   }
   render() {
@@ -6348,7 +6540,8 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         smoothingWindow: this.smoothingWindow,
         views: this.views,
         confidenceIntervalMethods: this.confidenceIntervalMethods,
-        size: this.size
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -6371,6 +6564,9 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "headline", 2);
 __decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "size", 2);
@@ -6567,7 +6763,8 @@ const RelativeGrowthAdvantage = ({
   denominator,
   generationTime,
   views,
-  size
+  size,
+  headline = "Relative growth advantage"
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
@@ -6575,7 +6772,6 @@ const RelativeGrowthAdvantage = ({
     () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
     [lapis, numerator, denominator, generationTime, views]
   );
-  const headline = "Relative growth advantage";
   if (isLoading) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
   }
@@ -6591,7 +6787,8 @@ const RelativeGrowthAdvantage = ({
       data,
       yAxisScaleType,
       setYAxisScaleType,
-      views
+      views,
+      generationTime
     }
   ) }) });
 };
@@ -6599,7 +6796,8 @@ const RelativeGrowthAdvantageTabs = ({
   data,
   yAxisScaleType,
   setYAxisScaleType,
-  views
+  views,
+  generationTime
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -6621,16 +6819,45 @@ const RelativeGrowthAdvantageTabs = ({
     }
   };
   const tabs = views.map((view) => getTab(view));
-  const toolbar = () => /* @__PURE__ */ u$1(RelativeGrowthAdvantageToolbar, { yAxisScaleType, setYAxisScaleType });
+  const toolbar = () => /* @__PURE__ */ u$1(
+    RelativeGrowthAdvantageToolbar,
+    {
+      generationTime,
+      yAxisScaleType,
+      setYAxisScaleType
+    }
+  );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
 const RelativeGrowthAdvantageToolbar = ({
   yAxisScaleType,
-  setYAxisScaleType
+  setYAxisScaleType,
+  generationTime
 }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex", children: [
     /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
-    /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Line chart" })
+    /* @__PURE__ */ u$1(RelativeGrowthAdvantageInfo, { generationTime })
+  ] });
+};
+const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
+  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Relative growth advantage" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "If variants spread pre-dominantly by local transmission across demographic groups, this estimate reflects the relative viral intrinsic growth advantage of the focal variant in the selected country and time frame. We report the relative growth advantage per ",
+      generationTime,
+      " days (in percentage; 0% means equal growth). Importantly, the relative growth advantage estimate reflects the advantage compared to the co-circulating variants. Thus, as new variants spread, the advantage of the focal variant may decrease. Different mechanisms can alter the intrinsic growth rate, including an intrinsic transmission advantage, immune evasion, and a prolonged infectious period. When absolute numbers of a variant are low, the growth advantage may merely reflect the current importance of introductions from abroad or the variant spreading in a particular demographic group. In this case, the estimate does not provide information on any intrinsic fitness advantages."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Example: Assume that 10 infections from the focal variant and 100 infections from the co-circulating variants occur today and that the focal variant has a relative growth advantage of 50%. Then, if the number of new infections from the co-circulating variants remains at 100 in ",
+      generationTime,
+      " days from today, we expect the number of new infections from the focal variant to be 15."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Reference" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      'Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland." Epidemics (2021); doi:',
+      " ",
+      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.sciencedirect.com/science/article/pii/S1755436521000335?via=ihub", children: "10.1016/j.epidem.2021.100480" })
+    ] })
   ] });
 };
 var __defProp$5 = Object.defineProperty;
@@ -6651,6 +6878,7 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.denominator = {};
     this.generationTime = 7;
     this.views = ["line"];
+    this.headline = "Relative growth advantage";
     this.size = void 0;
   }
   render() {
@@ -6661,7 +6889,8 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         denominator: this.denominator,
         generationTime: this.generationTime,
         views: this.views,
-        size: this.size
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -6678,6 +6907,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "headline", 2);
 __decorateClass$5([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "size", 2);
@@ -6715,12 +6947,17 @@ async function queryAggregateData(variant, fields, lapis, signal) {
     })
   );
 }
-const Aggregate = ({ fields, views, filter, size }) => {
+const Aggregate = ({
+  fields,
+  views,
+  filter,
+  size,
+  headline = "Aggregate"
+}) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(filter, fields, lapis);
   }, [filter, fields, lapis]);
-  const headline = "Aggregate";
   if (isLoading) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
   }
@@ -6748,7 +6985,7 @@ const AggregatedDataTabs = ({ data, views, fields }) => {
 const Toolbar = ({ data }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
     /* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
-    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for aggregate" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for aggregate" })
   ] });
 };
 var __defProp$4 = Object.defineProperty;
@@ -6769,9 +7006,19 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.views = ["table"];
     this.filter = {};
     this.size = void 0;
+    this.headline = "Aggregate";
   }
   render() {
-    return /* @__PURE__ */ u$1(Aggregate, { fields: this.fields, views: this.views, filter: this.filter, size: this.size });
+    return /* @__PURE__ */ u$1(
+      Aggregate,
+      {
+        fields: this.fields,
+        views: this.views,
+        filter: this.filter,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$4([
@@ -6786,6 +7033,9 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Object })
 ], AggregateComponent.prototype, "size", 2);
+__decorateClass$4([
+  n2({ type: String })
+], AggregateComponent.prototype, "headline", 2);
 AggregateComponent = __decorateClass$4([
   t$2("gs-aggregate-component")
 ], AggregateComponent);
@@ -6817,8 +7067,8 @@ const DateRangeSelector = ({
   earliestDate = "1900-01-01",
   initialValue
 }) => {
-  const datePickerRef = F(null);
-  const endDatePickerRef = F(null);
+  const fromDatePickerRef = F(null);
+  const toDatePickerRef = F(null);
   const divRef = F(null);
   const [dateFromPicker, setDateFromPicker] = p(null);
   const [dateToPicker, setDateToPicker] = p(null);
@@ -6835,17 +7085,17 @@ const DateRangeSelector = ({
       allowInput: true,
       dateFormat: "Y-m-d"
     };
-    if (datePickerRef.current) {
+    if (fromDatePickerRef.current) {
       setDateFromPicker(
-        flatpickr(datePickerRef.current, {
+        flatpickr(fromDatePickerRef.current, {
           ...commonConfig,
           defaultDate: selectedDates.dateFrom
         })
       );
     }
-    if (endDatePickerRef.current) {
+    if (toDatePickerRef.current) {
       setDateToPicker(
-        flatpickr(endDatePickerRef.current, {
+        flatpickr(toDatePickerRef.current, {
           ...commonConfig,
           defaultDate: selectedDates.dateTo
         })
@@ -6855,7 +7105,7 @@ const DateRangeSelector = ({
       dateFromPicker == null ? void 0 : dateFromPicker.destroy();
       dateToPicker == null ? void 0 : dateToPicker.destroy();
     };
-  }, [datePickerRef, endDatePickerRef]);
+  }, [fromDatePickerRef, toDatePickerRef]);
   const onSelectChange = (value) => {
     setSelectedDateRange(value);
     const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -6924,7 +7174,7 @@ const DateRangeSelector = ({
         class: "input input-bordered rounded-none join-item",
         type: "text",
         placeholder: "Date from",
-        ref: datePickerRef,
+        ref: fromDatePickerRef,
         onChange: onChangeDateFrom,
         onBlur: onChangeDateFrom
       }
@@ -6935,9 +7185,9 @@ const DateRangeSelector = ({
         class: "input input-bordered rounded-none join-item",
         type: "text",
         placeholder: "Date to",
-        ref: endDatePickerRef,
+        ref: toDatePickerRef,
         onChange: onChangeDateTo,
-        onBlur: onChangeDateFrom
+        onBlur: onChangeDateTo
       }
     )
   ] });
@@ -7006,7 +7256,7 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
-    this.initialValue = "";
+    this.initialValue = "last6Months";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7401,7 +7651,7 @@ const MutationFilter = ({ initialValue }) => {
           fireChangeEvent
         }
       ),
-      /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutation filter" })
+      /* @__PURE__ */ u$1(Info, { children: "Info for mutation filter" })
     ] }),
     /* @__PURE__ */ u$1("form", { className: "mt-2 w-full", onSubmit: handleSubmit, ref: formRef, children: /* @__PURE__ */ u$1("label", { className: `input flex items-center gap-2 ${isError ? "input-error" : "input-bordered"}`, children: [
       /* @__PURE__ */ u$1(