@genspectrum/dashboard-components 0.4.0 → 0.4.1

package/dist/dashboard-components.js

@@ -6,7 +6,7 @@ import { options, createContext as createContext$1, Fragment, render } from "pre
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { autoUpdate, computePosition, offset, shift, size } from "@floating-ui/dom";
+import { autoUpdate, computePosition, offset, shift, flip, size } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
 import flatpickr from "flatpickr";
@@ -1172,32 +1172,98 @@ function filterMutationData(data, displayedSegments, displayedMutationTypes) {
   }));
 }
 const LapisUrlContext = createContext$1("");
+function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
+  const cleanupRef = F(null);
+  _(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
+    }
+    const { current: reference } = referenceRef;
+    const { current: floating } = floatingRef;
+    const update = () => {
+      computePosition(reference, floating, {
+        placement,
+        middleware
+      }).then(({ x, y: y2 }) => {
+        floating.style.left = `${x}px`;
+        floating.style.top = `${y2}px`;
+      });
+    };
+    update();
+    cleanupRef.current = autoUpdate(reference, floating, update);
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+    };
+  }, [placement, middleware, referenceRef, floatingRef]);
+}
+function useCloseOnClickOutside(floatingRef, referenceRef, setShowContent) {
+  _(() => {
+    const handleClickOutside = (event) => {
+      const path = event.composedPath();
+      if (floatingRef.current && !path.includes(floatingRef.current) && referenceRef.current && !path.includes(referenceRef.current)) {
+        setShowContent(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [floatingRef, referenceRef, setShowContent]);
+}
+function useCloseOnEsc(setShowHelp) {
+  _(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setShowHelp(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [setShowHelp]);
+}
+const dropdownClass = "z-10 absolute w-max top-0 left-0 bg-white p-4 border border-gray-200 shadow-lg rounded-md";
+const Dropdown = ({ children, buttonTitle, placement }) => {
+  const [showContent, setShowContent] = p(false);
+  const referenceRef = F(null);
+  const floatingRef = F(null);
+  useFloatingUi(referenceRef, floatingRef, [offset(4), shift(), flip()], placement);
+  useCloseOnClickOutside(floatingRef, referenceRef, setShowContent);
+  useCloseOnEsc(setShowContent);
+  const toggle = () => {
+    setShowContent(!showContent);
+  };
+  return /* @__PURE__ */ u$1("div", { children: [
+    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs whitespace-nowrap", onClick: toggle, ref: referenceRef, children: buttonTitle }),
+    /* @__PURE__ */ u$1("div", { ref: floatingRef, className: `${dropdownClass} ${showContent ? "" : "hidden"}`, children })
+  ] });
+};
 const CheckboxSelector = ({
-  className,
   items,
   label,
   setItems
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: `dropdown ${className}`, children: [
-    /* @__PURE__ */ u$1("div", { tabIndex: 0, role: "button", class: "btn btn-xs text-nowrap", children: label }),
-    /* @__PURE__ */ u$1("ul", { tabIndex: 0, class: "p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box", children: items.map((item, index) => /* @__PURE__ */ u$1("li", { class: "flex flex-row items-center", children: /* @__PURE__ */ u$1("label", { children: [
-      /* @__PURE__ */ u$1(
-        "input",
-        {
-          type: "checkbox",
-          id: `item-${index}`,
-          checked: item.checked,
-          onChange: () => {
-            const newItems = items.map(
-              (item2, i2) => i2 === index ? { ...item2, checked: !item2.checked } : item2
-            );
-            setItems(newItems);
-          }
+  return /* @__PURE__ */ u$1(Dropdown, { buttonTitle: label, placement: "bottom-start", children: /* @__PURE__ */ u$1("ul", { children: items.map((item, index) => /* @__PURE__ */ u$1("li", { className: "flex flex-row items-center", children: /* @__PURE__ */ u$1("label", { children: [
+    /* @__PURE__ */ u$1(
+      "input",
+      {
+        className: "mr-2",
+        type: "checkbox",
+        id: `item-${index}`,
+        checked: item.checked,
+        onChange: () => {
+          const newItems = items.map(
+            (item2, i2) => i2 === index ? { ...item2, checked: !item2.checked } : item2
+          );
+          setItems(newItems);
         }
-      ),
-      item.label
-    ] }) }, item.label)) })
-  ] });
+      }
+    ),
+    item.label
+  ] }) }, item.label)) }) });
 };
 const ReferenceGenomeContext = createContext$1({ nucleotideSequences: [], genes: [] });
 const getSegmentSelectorLabel = (displayedSegments, prefix) => {
@@ -1221,7 +1287,6 @@ const SegmentSelector = ({
   return /* @__PURE__ */ u$1(
     CheckboxSelector,
     {
-      className: "mx-1",
       items: displayedSegments,
       label: getSegmentSelectorLabel(displayedSegments, prefix || "Segments: "),
       setItems: (items) => setDisplayedSegments(items)
@@ -1343,20 +1408,31 @@ const Info = ({ children, height }) => {
   const [showHelp, setShowHelp] = p(false);
   const referenceRef = F(null);
   const floatingRef = F(null);
-  useFloatingUi(referenceRef, floatingRef, height, showHelp);
+  useFloatingUi(referenceRef, floatingRef, [
+    offset(10),
+    shift(),
+    size({
+      apply() {
+        if (!floatingRef.current) {
+          return;
+        }
+        floatingRef.current.style.width = "100vw";
+        floatingRef.current.style.height = height ? height : "50vh";
+      }
+    })
+  ]);
   const toggleHelp = () => {
     setShowHelp(!showHelp);
   };
   useCloseOnEsc(setShowHelp);
   useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
-  return /* @__PURE__ */ u$1("div", { className: "relative z-10", children: [
+  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
     /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, ref: referenceRef, children: "?" }),
     /* @__PURE__ */ u$1(
       "div",
       {
         ref: floatingRef,
-        className: "bg-white p-2 border border-gray-100 shadow-lg rounded overflow-y-auto opacity-90",
-        style: { position: "absolute", zIndex: 10, display: showHelp ? "" : "none" },
+        className: `${dropdownClass} overflow-y-auto opacity-90 ${showHelp ? "" : "hidden"}`,
         children: [
           /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
           /* @__PURE__ */ u$1(
@@ -1372,67 +1448,6 @@ const Info = ({ children, height }) => {
     )
   ] });
 };
-function useFloatingUi(referenceRef, floatingRef, height, showHelp) {
-  const cleanupRef = F(null);
-  _(() => {
-    if (!referenceRef.current || !floatingRef.current) {
-      return;
-    }
-    const { current: reference } = referenceRef;
-    const { current: floating } = floatingRef;
-    const update = () => {
-      computePosition(reference, floating, {
-        middleware: [
-          offset(10),
-          shift(),
-          size({
-            apply({}) {
-              floating.style.width = "100vw";
-              floating.style.height = height ? height : "50vh";
-            }
-          })
-        ]
-      }).then(({ x, y: y2 }) => {
-        floating.style.left = `${x}px`;
-        floating.style.top = `${y2}px`;
-      });
-    };
-    update();
-    cleanupRef.current = autoUpdate(reference, floating, update);
-    return () => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-      }
-    };
-  }, [showHelp, height, referenceRef, floatingRef]);
-}
-function useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp) {
-  _(() => {
-    const handleClickOutside = (event) => {
-      const path = event.composedPath();
-      if (floatingRef.current && !path.includes(floatingRef.current) && referenceRef.current && !path.includes(referenceRef.current)) {
-        setShowHelp(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [floatingRef, referenceRef, setShowHelp]);
-}
-function useCloseOnEsc(setShowHelp) {
-  _(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        setShowHelp(false);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [setShowHelp]);
-}
 const InfoHeadline1 = ({ children }) => {
   return /* @__PURE__ */ u$1("h1", { className: "text-lg font-bold", children });
 };
@@ -1457,7 +1472,6 @@ const MutationTypeSelector = ({
   return /* @__PURE__ */ u$1(
     CheckboxSelector,
     {
-      className: "mx-1",
       items: displayedMutationTypes,
       label: mutationTypesSelectorLabel,
       setItems: (items) => setDisplayedMutationTypes(items)
@@ -1616,34 +1630,34 @@ const ProportionSelector = ({
 const ProportionSelectorDropdown = ({
   proportionInterval,
   setMinProportion,
-  setMaxProportion,
-  openDirection = "right"
+  setMaxProportion
 }) => {
   const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
-  return /* @__PURE__ */ u$1("div", { class: `dropdown ${openDirection === "left" ? "dropdown-end" : ""}`, children: [
-    /* @__PURE__ */ u$1("div", { tabIndex: 0, role: "button", class: "btn btn-xs whitespace-nowrap", children: [
-      "Proportion ",
-      label
-    ] }),
-    /* @__PURE__ */ u$1("ul", { tabIndex: 0, class: "p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-72", children: /* @__PURE__ */ u$1("div", { class: "mb-2 ml-2", children: /* @__PURE__ */ u$1(
-      ProportionSelector,
-      {
-        proportionInterval,
-        setMinProportion,
-        setMaxProportion
-      }
-    ) }) })
-  ] });
+  return /* @__PURE__ */ u$1(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$1(
+    ProportionSelector,
+    {
+      proportionInterval,
+      setMinProportion,
+      setMaxProportion
+    }
+  ) });
 };
 const Tabs = ({ tabs, toolbar }) => {
   const [activeTab, setActiveTab] = p(tabs[0].title);
   const [heightOfTabs, setHeightOfTabs] = p("3rem");
   const tabRef = F(null);
-  _(() => {
+  const updateHeightOfTabs = () => {
     if (tabRef.current) {
       const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
       setHeightOfTabs(`${heightOfTabs2}px`);
     }
+  };
+  _(() => {
+    updateHeightOfTabs();
+    window.addEventListener("resize", updateHeightOfTabs);
+    return () => {
+      window.removeEventListener("resize", updateHeightOfTabs);
+    };
   }, []);
   const tabElements = /* @__PURE__ */ u$1("div", { className: "flex flex-row", children: tabs.map((tab) => {
     return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1(
@@ -1659,9 +1673,9 @@ const Tabs = ({ tabs, toolbar }) => {
   }) });
   const toolbarElement = typeof toolbar === "function" ? toolbar(activeTab) : toolbar;
   return /* @__PURE__ */ u$1("div", { className: "h-full w-full", children: [
-    /* @__PURE__ */ u$1("div", { ref: tabRef, className: "flex flex-row justify-between", children: [
+    /* @__PURE__ */ u$1("div", { ref: tabRef, className: "flex flex-row justify-between flex-wrap", children: [
       tabElements,
-      toolbar && /* @__PURE__ */ u$1("div", { className: "py-2", children: toolbarElement })
+      toolbar && /* @__PURE__ */ u$1("div", { className: "py-2 flex flex-wrap gap-y-1", children: toolbarElement })
     ] }),
     /* @__PURE__ */ u$1(
       "div",
@@ -1791,7 +1805,7 @@ const Toolbar$3 = ({
   proportionInterval,
   setProportionInterval
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(
       ProportionSelectorDropdown,
       {
@@ -2462,15 +2476,6 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
-  .menu li > *:not(ul, .menu-title, details, .btn):active,
-.menu li > *:not(ul, .menu-title, details, .btn).active,
-.menu li > details > summary:active {
-    --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)));
-  }
-
   .tab:hover {
     --tw-text-opacity: 1;
   }
@@ -2589,39 +2594,6 @@ html {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   transition-duration: 200ms;
 }
-.dropdown-end .dropdown-content {
-  inset-inline-end: 0px;
-}
-.dropdown-left .dropdown-content {
-  bottom: auto;
-  inset-inline-end: 100%;
-  top: 0px;
-  transform-origin: right;
-}
-.dropdown-right .dropdown-content {
-  bottom: auto;
-  inset-inline-start: 100%;
-  top: 0px;
-  transform-origin: left;
-}
-.dropdown-bottom .dropdown-content {
-  bottom: auto;
-  top: 100%;
-  transform-origin: top;
-}
-.dropdown-top .dropdown-content {
-  bottom: 100%;
-  top: auto;
-  transform-origin: bottom;
-}
-.dropdown-end.dropdown-right .dropdown-content {
-  bottom: 0px;
-  top: auto;
-}
-.dropdown-end.dropdown-left .dropdown-content {
-  bottom: 0px;
-  top: auto;
-}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:not(.dropdown-hover):focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -2716,19 +2688,6 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
-    cursor: pointer;
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  @supports (color: oklch(0% 0 0)) {
-
-    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
-      background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
-    }
-  }
-
   .tab[disabled],
     .tab[disabled]:hover {
     cursor: not-allowed;
@@ -2855,31 +2814,6 @@ html {
     border-radius: inherit;
   }
 }
-.menu {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding: 0.5rem;
-}
-.menu :where(li ul) {
-  position: relative;
-  white-space: nowrap;
-  margin-inline-start: 1rem;
-  padding-inline-start: 0.5rem;
-}
-.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
-  display: grid;
-  grid-auto-flow: column;
-  align-content: flex-start;
-  align-items: center;
-  gap: 0.5rem;
-  grid-auto-columns: minmax(auto, max-content) auto max-content;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -2887,20 +2821,6 @@ html {
           user-select: none;
   color: var(--fallback-bc,oklch(var(--bc)/0.3));
 }
-.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
-  display: none;
-}
-:where(.menu li) {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: stretch;
-}
-:where(.menu li) .badge {
-  justify-self: end;
-}
 .modal {
   pointer-events: none;
   position: fixed;
@@ -3124,6 +3044,29 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.toggle {
+  flex-shrink: 0;
+  --tglbg: var(--fallback-b1,oklch(var(--b1)/1));
+  --handleoffset: 1.5rem;
+  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
+  --togglehandleborder: 0 0;
+  height: 1.5rem;
+  width: 3rem;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--rounded-badge, 1.9rem);
+  border-width: 1px;
+  border-color: currentColor;
+  background-color: currentColor;
+  color: var(--fallback-bc,oklch(var(--bc)/0.5));
+  transition: background,
+    box-shadow var(--animation-input, 0.2s) ease-out;
+  box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
+    0 0 0 2px var(--tglbg) inset,
+    var(--togglehandleborder);
+}
 .alert-error {
   border-color: var(--fallback-er,oklch(var(--er)/0.2));
   --tw-text-opacity: 1;
@@ -3357,9 +3300,6 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
-.join-item:focus {
-  isolation: isolate;
-}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -3382,40 +3322,6 @@ input.tab:checked + .tab-content,
 .loading-md {
   width: 1.5rem;
 }
-:where(.menu li:empty) {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.1;
-  margin: 0.5rem 1rem;
-  height: 1px;
-}
-.menu :where(li ul):before {
-  position: absolute;
-  bottom: 0.75rem;
-  inset-inline-start: 0px;
-  top: 0.75rem;
-  width: 1px;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.1;
-  content: "";
-}
-.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
-.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
-  border-radius: var(--rounded-btn, 0.5rem);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  text-align: start;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-duration: 200ms;
-  text-wrap: balance;
-}
 :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
   cursor: pointer;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
@@ -3424,38 +3330,6 @@ input.tab:checked + .tab-content,
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.menu li > *:not(ul, .menu-title, details, .btn):active,
-.menu li > *:not(ul, .menu-title, details, .btn).active,
-.menu li > details > summary:active {
-  --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)));
-}
-.menu :where(li > details > summary)::-webkit-details-marker {
-  display: none;
-}
-.menu :where(li > details > summary):after,
-.menu :where(li > .menu-dropdown-toggle):after {
-  justify-self: end;
-  display: block;
-  margin-top: -0.5rem;
-  height: 0.5rem;
-  width: 0.5rem;
-  transform: rotate(45deg);
-  transition-property: transform, margin-top;
-  transition-duration: 0.3s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  content: "";
-  transform-origin: 75% 75%;
-  box-shadow: 2px 2px;
-  pointer-events: none;
-}
-.menu :where(li > details[open] > summary):after,
-.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
-  transform: rotate(225deg);
-  margin-top: 0;
-}
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -3976,6 +3850,49 @@ input.tab:checked + .tab-content,
     opacity: 1;
   }
 }
+[dir="rtl"] .toggle {
+  --handleoffsetcalculator: calc(var(--handleoffset) * 1);
+}
+.toggle:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+.toggle:hover {
+  background-color: currentColor;
+}
+.toggle:checked,
+  .toggle[aria-checked="true"] {
+  background-image: none;
+  --handleoffsetcalculator: var(--handleoffset);
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+}
+[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[aria-checked="true"] {
+  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
+}
+.toggle:indeterminate {
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+      0 0 0 2px var(--tglbg) inset;
+}
+[dir="rtl"] .toggle:indeterminate {
+  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+        0 0 0 2px var(--tglbg) inset;
+}
+.toggle:disabled {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  background-color: transparent;
+  opacity: 0.3;
+  --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
+      var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
+}
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -4305,18 +4222,21 @@ input.tab:checked + .tab-content,
 .-top-3 {
   top: -0.75rem;
 }
+.left-0 {
+  left: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
+.top-0 {
+  top: 0px;
+}
 .top-2 {
   top: 0.5rem;
 }
 .z-10 {
   z-index: 10;
 }
-.z-\\[1\\] {
-  z-index: 1;
-}
 .float-right {
   float: right;
 }
@@ -4341,9 +4261,6 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -4377,24 +4294,37 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
+.w-40 {
+  width: 10rem;
+}
 .w-64 {
   width: 16rem;
 }
-.w-72 {
-  width: 18rem;
-}
 .w-full {
   width: 100%;
 }
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+.min-w-40 {
+  min-width: 10rem;
+}
 .max-w-screen-lg {
   max-width: 1024px;
 }
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-grow {
+  flex-grow: 1;
+}
 .grow {
   flex-grow: 1;
 }
+.resize {
+  resize: both;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -4416,6 +4346,9 @@ input.tab:checked + .tab-content,
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -4425,18 +4358,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
-.text-nowrap {
-  text-wrap: nowrap;
-}
 .break-words {
   overflow-wrap: break-word;
 }
-.rounded {
-  border-radius: 0.25rem;
-}
-.rounded-box {
-  border-radius: var(--rounded-box, 1rem);
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -4479,6 +4403,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -4491,10 +4419,6 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
-.bg-base-100 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
-}
 .bg-base-200 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
@@ -4509,6 +4433,9 @@ input.tab:checked + .tab-content,
 .p-2 {
   padding: 0.5rem;
 }
+.p-4 {
+  padding: 1rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -5083,7 +5010,7 @@ const Toolbar$2 = ({
   proportionInterval,
   setProportionInterval
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
     activeTab === "Table" && /* @__PURE__ */ u$1(
       MutationTypeSelector,
@@ -5098,8 +5025,7 @@ const Toolbar$2 = ({
         {
           proportionInterval,
           setMinProportion: (min) => setProportionInterval((prev) => ({ ...prev, min })),
-          setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max })),
-          openDirection: "left"
+          setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max }))
         }
       ),
       /* @__PURE__ */ u$1(
@@ -6856,7 +6782,7 @@ const Toolbar$1 = ({
   data,
   granularity
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     activeTab !== "Table" && /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
     (activeTab === "Bar" || activeTab === "Line") && /* @__PURE__ */ u$1(
       ConfidenceIntervalSelector,
@@ -6877,7 +6803,7 @@ const Toolbar$1 = ({
     /* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
   ] });
 };
-const PrevalenceOverTimeInfo = ({}) => {
+const PrevalenceOverTimeInfo = () => {
   return /* @__PURE__ */ u$1(Info, { height: "100px", children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
@@ -7243,7 +7169,7 @@ const RelativeGrowthAdvantageToolbar = ({
   setYAxisScaleType,
   generationTime
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
     /* @__PURE__ */ u$1(RelativeGrowthAdvantageInfo, { generationTime })
   ] });
@@ -7702,13 +7628,13 @@ const DateRangeSelectorInner = ({
       })
     );
   };
-  return /* @__PURE__ */ u$1("div", { class: "join w-full", ref: divRef, children: [
+  return /* @__PURE__ */ u$1("div", { class: "flex flex-wrap", ref: divRef, children: [
     /* @__PURE__ */ u$1(
       Select,
       {
         items: getSelectableOptions(customSelectOptions),
         selected: selectedDateRange,
-        selectStyle: "select-bordered rounded-none join-item grow",
+        selectStyle: "select-bordered rounded-none flex-grow w-40",
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
@@ -7717,28 +7643,32 @@ const DateRangeSelectorInner = ({
         }
       }
     ),
-    /* @__PURE__ */ u$1(
-      "input",
-      {
-        class: "input input-bordered rounded-none join-item grow",
-        type: "text",
-        placeholder: "Date from",
-        ref: fromDatePickerRef,
-        onChange: onChangeDateFrom,
-        onBlur: onChangeDateFrom
-      }
-    ),
-    /* @__PURE__ */ u$1(
-      "input",
-      {
-        class: "input input-bordered rounded-none join-item grow",
-        type: "text",
-        placeholder: "Date to",
-        ref: toDatePickerRef,
-        onChange: onChangeDateTo,
-        onBlur: onChangeDateTo
-      }
-    )
+    /* @__PURE__ */ u$1("div", { className: "flex flex-wrap flex-grow", children: [
+      /* @__PURE__ */ u$1(
+        "input",
+        {
+          class: "input input-bordered rounded-none flex-grow min-w-40",
+          type: "text",
+          size: 10,
+          placeholder: "Date from",
+          ref: fromDatePickerRef,
+          onChange: onChangeDateFrom,
+          onBlur: onChangeDateFrom
+        }
+      ),
+      /* @__PURE__ */ u$1(
+        "input",
+        {
+          class: "input input-bordered rounded-none flex-grow min-w-40",
+          type: "text",
+          size: 10,
+          placeholder: "Date to",
+          ref: toDatePickerRef,
+          onChange: onChangeDateTo,
+          onBlur: onChangeDateTo
+        }
+      )
+    ] })
   ] });
 };
 var __defProp$3 = Object.defineProperty;