@genspectrum/dashboard-components 0.16.4 → 0.17.0

package/dist/components.js

@@ -7,7 +7,7 @@ import DOMPurify from "dompurify";
 import { useRef, Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeValueSchema, c as dateRangeOptionSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextFilterChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-COWV-Y0k.js";
+import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeValueSchema, c as dateRangeOptionSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextFilterChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-DkvWdq_G.js";
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
@@ -3105,12 +3105,6 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
-
-  .table-zebra tr.hover:hover,
-  .table-zebra tr.hover:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  }
 }
 .btn {
   display: inline-flex;
@@ -5130,6 +5124,9 @@ input.tab:checked + .tab-content,
 .right-0 {
   right: 0px;
 }
+.right-10 {
+  right: 2.5rem;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -5279,9 +5276,6 @@ input.tab:checked + .tab-content,
 .w-\\[6rem\\] {
   width: 6rem;
 }
-.w-\\[7\\.5rem\\] {
-  width: 7.5rem;
-}
 .w-full {
   width: 100%;
 }
@@ -5289,6 +5283,9 @@ input.tab:checked + .tab-content,
   width: -moz-max-content;
   width: max-content;
 }
+.min-w-24 {
+  min-width: 6rem;
+}
 .min-w-32 {
   min-width: 8rem;
 }
@@ -5310,6 +5307,10 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.-translate-y-1\\/2 {
+  --tw-translate-y: -50%;
+  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));
+}
 .translate-x-\\[-50\\%\\] {
   --tw-translate-x: -50%;
   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));
@@ -5408,12 +5409,27 @@ input.tab:checked + .tab-content,
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-t-md {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
 .rounded-tr-md {
   border-top-right-radius: 0.375rem;
 }
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -5455,6 +5471,9 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -5502,6 +5521,9 @@ input.tab:checked + .tab-content,
 .pl-2 {
   padding-left: 0.5rem;
 }
+.pr-14 {
+  padding-right: 3.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -5700,6 +5722,51 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 14rem) {
+
+  .\\@4xs\\:flex-row {
+    flex-direction: row;
+  }
+
+  .\\@4xs\\:rounded-l-none {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .\\@4xs\\:rounded-bl-md {
+    border-bottom-left-radius: 0.375rem;
+  }
+
+  .\\@4xs\\:rounded-tr-none {
+    border-top-right-radius: 0px;
+  }
+}
+@container (min-width: 28rem) {
+
+  .\\@md\\:flex-row {
+    flex-direction: row;
+  }
+
+  .\\@md\\:rounded-l-md {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+
+  .\\@md\\:rounded-l-none {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .\\@md\\:rounded-r-md {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+
+  .\\@md\\:rounded-r-none {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\\:max-w-5xl {
@@ -11774,12 +11841,7 @@ const getDatesForSelectorValue = (initialSelectedDateRange, dateRangeOptions, ea
 function computeInitialValues(value, earliestDate, dateRangeOptions) {
   var _a;
   if (value === void 0) {
-    const { dateFrom: dateFrom2, dateTo: dateTo2 } = getDatesForSelectorValue(void 0, dateRangeOptions, earliestDate);
-    return {
-      initialSelectedDateRange: void 0,
-      initialSelectedDateFrom: dateFrom2,
-      initialSelectedDateTo: dateTo2
-    };
+    return void 0;
   }
   if (typeof value === "string") {
     const selectableOptions = getSelectableOptions(dateRangeOptions);
@@ -11827,12 +11889,115 @@ function computeInitialValues(value, earliestDate, dateRangeOptions) {
 function isUndefinedOrEmpty(value) {
   return value === void 0 || value === "";
 }
+function DatePicker({
+  onChange,
+  value,
+  minDate,
+  maxDate,
+  placeholderText,
+  className
+}) {
+  const inputRef = A$1(null);
+  const [datePicker, setDatePicker] = d(null);
+  y(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    const instance = flatpickr(inputRef.current, {
+      allowInput: true,
+      dateFormat: "Y-m-d",
+      defaultDate: value,
+      minDate,
+      maxDate
+    });
+    setDatePicker(instance);
+    return () => {
+      instance.destroy();
+    };
+  }, [maxDate, minDate, onChange, value]);
+  if (value === void 0 && inputRef.current) {
+    inputRef.current.value = "";
+  }
+  const handleChange = () => {
+    const newValue = datePicker == null ? void 0 : datePicker.selectedDates[0];
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ u$1(
+    "input",
+    {
+      className: `input input-bordered w-full ${className}`,
+      type: "text",
+      placeholder: placeholderText,
+      ref: inputRef,
+      onChange: handleChange,
+      onBlur: handleChange
+    }
+  );
+}
+function DeleteIcon() {
+  return /* @__PURE__ */ u$1(Fragment, { children: "×" });
+}
+const undefinedValue = "__undefined__";
+function ClearableSelect({
+  items,
+  initiallySelectedItem,
+  onChange,
+  placeholderText,
+  className,
+  value,
+  selectClassName
+}) {
+  const [selectedOption, setSelectedOption] = d(initiallySelectedItem ?? null);
+  y(() => {
+    if (value !== void 0) {
+      setSelectedOption(value);
+    }
+  }, [value]);
+  const handleClear = () => {
+    setSelectedOption(null);
+    if (onChange) {
+      onChange(null);
+    }
+  };
+  const handleChange = (event) => {
+    const newValue = event.currentTarget.value;
+    setSelectedOption(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ u$1("div", { className: `relative inline min-w-24 ${className}`, children: [
+    /* @__PURE__ */ u$1(
+      "select",
+      {
+        className: `w-full select select-bordered pr-14 ${selectClassName}`,
+        value: selectedOption ?? undefinedValue,
+        onChange: handleChange,
+        children: [
+          /* @__PURE__ */ u$1("option", { value: undefinedValue, disabled: true, children: placeholderText ?? "Select an option" }),
+          items.map((item) => /* @__PURE__ */ u$1("option", { value: item, children: item }, item))
+        ]
+      }
+    ),
+    selectedOption && /* @__PURE__ */ u$1(
+      "button",
+      {
+        onClick: handleClear,
+        className: "absolute right-10 top-1/2 -translate-y-1/2 bg-transparent border-0 cursor-pointer",
+        children: /* @__PURE__ */ u$1(DeleteIcon, {})
+      }
+    )
+  ] });
+}
 const customOption = "Custom";
 const dateRangeFilterInnerPropsSchema = z$2.object({
   dateRangeOptions: z$2.array(dateRangeOptionSchema),
   earliestDate: z$2.string().date(),
-  value: dateRangeValueSchema.optional(),
-  lapisDateField: z$2.string().min(1)
+  value: dateRangeValueSchema,
+  lapisDateField: z$2.string().min(1),
+  placeholder: z$2.string().optional()
 });
 const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
   width: z$2.string()
@@ -11846,118 +12011,104 @@ const DateRangeFilterInner = ({
   dateRangeOptions,
   earliestDate = "1900-01-01",
   value,
-  lapisDateField
+  lapisDateField,
+  placeholder
 }) => {
+  var _a;
   const initialValues = T$1(
     () => computeInitialValues(value, earliestDate, dateRangeOptions),
     [value, earliestDate, dateRangeOptions]
   );
-  const fromDatePickerRef = A$1(null);
-  const toDatePickerRef = A$1(null);
   const divRef = A$1(null);
-  const [dateFromPicker, setDateFromPicker] = d(null);
-  const [dateToPicker, setDateToPicker] = d(null);
-  const [selectedDateRange, setSelectedDateRange] = d(
-    initialValues.initialSelectedDateRange
-  );
-  const [selectedDates, setSelectedDates] = d({
-    dateFrom: initialValues.initialSelectedDateFrom,
-    dateTo: initialValues.initialSelectedDateTo
-  });
-  y(() => {
-    setSelectedDateRange(initialValues.initialSelectedDateRange);
-    setSelectedDates({
+  const getInitialState2 = q$1(() => {
+    if (!initialValues) {
+      return null;
+    }
+    return initialValues.initialSelectedDateRange ? {
+      label: initialValues.initialSelectedDateRange,
+      dateFrom: initialValues.initialSelectedDateFrom,
+      dateTo: initialValues.initialSelectedDateTo
+    } : {
+      label: customOption,
       dateFrom: initialValues.initialSelectedDateFrom,
       dateTo: initialValues.initialSelectedDateTo
-    });
-    const commonConfig = {
-      allowInput: true,
-      dateFormat: "Y-m-d"
     };
-    if (fromDatePickerRef.current) {
-      setDateFromPicker(
-        flatpickr(fromDatePickerRef.current, {
-          ...commonConfig,
-          defaultDate: initialValues.initialSelectedDateFrom
-        })
-      );
-    }
-    if (toDatePickerRef.current) {
-      setDateToPicker(
-        flatpickr(toDatePickerRef.current, {
-          ...commonConfig,
-          defaultDate: initialValues.initialSelectedDateTo
-        })
-      );
+  }, [initialValues]);
+  const customComboboxValue = { label: customOption };
+  const [options2, setOptions] = d(
+    ((_a = getInitialState2()) == null ? void 0 : _a.label) === customOption ? [...dateRangeOptions, customComboboxValue] : [...dateRangeOptions]
+  );
+  const [state, setState] = d(getInitialState2());
+  function updateState(newState) {
+    setState(newState);
+    fireFilterChangedEvent({ dateFrom: newState == null ? void 0 : newState.dateFrom, dateTo: newState == null ? void 0 : newState.dateTo, lapisDateField });
+    fireOptionChangedEvent(newState);
+  }
+  y(() => {
+    setState(getInitialState2());
+  }, [getInitialState2]);
+  const onSelectChange = (option) => {
+    updateState(
+      option !== null ? {
+        label: option == null ? void 0 : option.label,
+        dateFrom: getFromDate(option, earliestDate),
+        dateTo: getToDate(option)
+      } : null
+    );
+    if ((option == null ? void 0 : option.label) !== customOption) {
+      setOptions([...dateRangeOptions]);
     }
-    return () => {
-      setDateFromPicker((prev) => {
-        prev == null ? void 0 : prev.destroy();
-        return null;
-      });
-      setDateToPicker((prev) => {
-        prev == null ? void 0 : prev.destroy();
-        return null;
-      });
-    };
-  }, [fromDatePickerRef, toDatePickerRef, initialValues]);
-  const onSelectChange = (value2) => {
-    setSelectedDateRange(value2);
-    const dateRange = getDatesForSelectorValue(value2, dateRangeOptions, earliestDate);
-    dateToPicker == null ? void 0 : dateToPicker.set("minDate", dateRange.dateFrom);
-    dateFromPicker == null ? void 0 : dateFromPicker.set("maxDate", dateRange.dateTo);
-    dateFromPicker == null ? void 0 : dateFromPicker.setDate(dateRange.dateFrom);
-    dateToPicker == null ? void 0 : dateToPicker.setDate(dateRange.dateTo);
-    setSelectedDates({
-      dateFrom: dateRange.dateFrom,
-      dateTo: dateRange.dateTo
-    });
-    fireFilterChangedEvent();
-    fireOptionChangedEvent(value2);
   };
-  const onChangeDateFrom = () => {
-    if (selectedDates.dateFrom.toDateString() === (dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0].toDateString())) {
+  function getFromDate(option, earliestDate2) {
+    if (!option || option.label === customOption) {
+      return void 0;
+    }
+    return new Date((option == null ? void 0 : option.dateFrom) ?? earliestDate2);
+  }
+  function getToDate(option) {
+    if (!option || option.label === customOption) {
+      return void 0;
+    }
+    if (!option.dateTo) {
+      return /* @__PURE__ */ new Date();
+    }
+    return new Date(option.dateTo);
+  }
+  const onChangeDateFrom = (date) => {
+    var _a2;
+    if ((date == null ? void 0 : date.toDateString()) === ((_a2 = state == null ? void 0 : state.dateFrom) == null ? void 0 : _a2.toDateString())) {
       return;
     }
-    const dateTo = dateToPicker == null ? void 0 : dateToPicker.selectedDates[0];
-    const dateFrom = dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0];
-    selectedDates.dateFrom = dateFrom || /* @__PURE__ */ new Date();
-    dateToPicker == null ? void 0 : dateToPicker.set("minDate", dateFrom);
-    setSelectedDateRange(customOption);
-    fireFilterChangedEvent();
-    fireOptionChangedEvent({
-      dateFrom: dateFrom !== void 0 ? toYYYYMMDD(dateFrom) : earliestDate,
-      dateTo: toYYYYMMDD(dateTo || /* @__PURE__ */ new Date())
+    updateState({
+      label: customOption,
+      dateFrom: date,
+      dateTo: state == null ? void 0 : state.dateTo
     });
+    setOptions([...dateRangeOptions, customComboboxValue]);
   };
-  const onChangeDateTo = () => {
-    if (selectedDates.dateTo.toDateString() === (dateToPicker == null ? void 0 : dateToPicker.selectedDates[0].toDateString())) {
+  const onChangeDateTo = (date) => {
+    var _a2;
+    if ((date == null ? void 0 : date.toDateString()) === ((_a2 = state == null ? void 0 : state.dateTo) == null ? void 0 : _a2.toDateString())) {
       return;
     }
-    const dateTo = dateToPicker == null ? void 0 : dateToPicker.selectedDates[0];
-    const dateFrom = dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0];
-    selectedDates.dateTo = dateTo || /* @__PURE__ */ new Date();
-    dateFromPicker == null ? void 0 : dateFromPicker.set("maxDate", dateTo);
-    setSelectedDateRange(customOption);
-    fireFilterChangedEvent();
-    fireOptionChangedEvent({
-      dateFrom: dateFrom !== void 0 ? toYYYYMMDD(dateFrom) : earliestDate,
-      dateTo: toYYYYMMDD(dateTo || /* @__PURE__ */ new Date())
+    updateState({
+      label: customOption,
+      dateFrom: state == null ? void 0 : state.dateFrom,
+      dateTo: date
     });
+    setOptions([...dateRangeOptions, customComboboxValue]);
   };
-  const fireOptionChangedEvent = (option) => {
-    var _a;
-    (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(new DateRangeOptionChangedEvent(option));
-  };
-  const fireFilterChangedEvent = () => {
-    var _a;
-    const dateFrom = dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0];
-    const dateTo = dateToPicker == null ? void 0 : dateToPicker.selectedDates[0];
+  const fireFilterChangedEvent = ({
+    dateFrom,
+    dateTo,
+    lapisDateField: lapisDateField2
+  }) => {
+    var _a2;
     const detail = {
-      ...dateFrom !== void 0 && { [`${lapisDateField}From`]: toYYYYMMDD(dateFrom) },
-      ...dateTo !== void 0 && { [`${lapisDateField}To`]: toYYYYMMDD(dateTo) }
+      ...dateFrom !== void 0 && { [`${lapisDateField2}From`]: toYYYYMMDD(dateFrom) },
+      ...dateTo !== void 0 && { [`${lapisDateField2}To`]: toYYYYMMDD(dateTo) }
     };
-    (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(
+    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(
       new CustomEvent("gs-date-range-filter-changed", {
         detail,
         bubbles: true,
@@ -11965,49 +12116,51 @@ const DateRangeFilterInner = ({
       })
     );
   };
-  return /* @__PURE__ */ u$1("div", { class: "flex flex-wrap", ref: divRef, children: [
-    /* @__PURE__ */ u$1(
-      Select,
+  const fireOptionChangedEvent = (state2) => {
+    var _a2;
+    const eventDetail = (state2 == null ? void 0 : state2.label) === customOption ? {
+      dateFrom: state2.dateFrom !== void 0 ? toYYYYMMDD(state2.dateFrom) : void 0,
+      dateTo: state2.dateTo !== void 0 ? toYYYYMMDD(state2.dateTo) : void 0
+    } : state2 == null ? void 0 : state2.label;
+    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
+  };
+  return /* @__PURE__ */ u$1("div", { className: "@container", ref: divRef, children: /* @__PURE__ */ u$1("div", { className: "flex min-w-[7.5rem] flex-col @md:flex-row", children: [
+    /* @__PURE__ */ u$1("div", { className: "flex-grow", children: /* @__PURE__ */ u$1(
+      ClearableSelect,
       {
-        items: [
-          ...getSelectableOptions(dateRangeOptions),
-          { label: customOption, value: customOption, disabled: true }
-        ],
-        selected: selectedDateRange ?? customOption,
-        selectStyle: "select-bordered rounded-none flex-grow min-w-[7.5rem]",
-        onChange: (event) => {
-          event.preventDefault();
-          const select = event.target;
-          const value2 = select.value;
-          onSelectChange(value2);
-        }
+        items: options2.map((item) => item.label),
+        placeholderText: placeholder,
+        onChange: (value2) => {
+          const dateRangeOption = options2.find((item) => item.label === value2);
+          onSelectChange(dateRangeOption ?? null);
+        },
+        value: (state == null ? void 0 : state.label) ?? null,
+        selectClassName: "rounded-t-md rounded-b-none @md:rounded-l-md @md:rounded-r-none"
       }
-    ),
-    /* @__PURE__ */ u$1("div", { className: "flex flex-wrap flex-grow", children: [
+    ) }),
+    /* @__PURE__ */ u$1("div", { className: "flex flex-grow flex-col @4xs:flex-row", children: [
       /* @__PURE__ */ u$1(
-        "input",
+        DatePicker,
         {
-          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
-          type: "text",
-          placeholder: "Date from",
-          ref: fromDatePickerRef,
+          className: "flex-grow min-w-[7.5rem] @4xs:rounded-bl-md @md:rounded-l-none rounded-none",
+          value: state == null ? void 0 : state.dateFrom,
           onChange: onChangeDateFrom,
-          onBlur: onChangeDateFrom
+          maxDate: state == null ? void 0 : state.dateTo,
+          placeholderText: "Date from"
         }
       ),
       /* @__PURE__ */ u$1(
-        "input",
+        DatePicker,
         {
-          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
-          type: "text",
-          placeholder: "Date to",
-          ref: toDatePickerRef,
+          className: "flex-grow min-w-[7.5rem] rounded-b-md rounded-t-none @4xs:rounded-tr-none @4xs:rounded-l-none @md:rounded-r-md ",
+          value: state == null ? void 0 : state.dateTo,
           onChange: onChangeDateTo,
-          onBlur: onChangeDateTo
+          minDate: state == null ? void 0 : state.dateFrom,
+          placeholderText: "Date to"
         }
       )
     ] })
-  ] });
+  ] }) });
 };
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
@@ -12026,6 +12179,7 @@ let DateRangeFilterComponent = class extends PreactLitAdapter {
     this.earliestDate = "1900-01-01";
     this.value = void 0;
     this.width = "100%";
+    this.placeholder = void 0;
     this.lapisDateField = "";
   }
   render() {
@@ -12036,7 +12190,8 @@ let DateRangeFilterComponent = class extends PreactLitAdapter {
         earliestDate: this.earliestDate,
         value: this.value,
         lapisDateField: this.lapisDateField,
-        width: this.width
+        width: this.width,
+        placeholder: this.placeholder
       }
     );
   }
@@ -12068,6 +12223,9 @@ __decorateClass$4([
 __decorateClass$4([
   n$1({ type: String })
 ], DateRangeFilterComponent.prototype, "width", 2);
+__decorateClass$4([
+  n$1({ type: String })
+], DateRangeFilterComponent.prototype, "placeholder", 2);
 __decorateClass$4([
   n$1({ type: String })
 ], DateRangeFilterComponent.prototype, "lapisDateField", 2);
@@ -15059,11 +15217,11 @@ function DownshiftCombobox({
   createEvent,
   itemToString: itemToString2,
   placeholderText,
-  formatItemInList
+  formatItemInList,
+  inputClassName = ""
 }) {
   var _a;
-  const initialSelectedItem = value ?? null;
-  const [itemsFilter, setItemsFilter] = d(itemToString2(initialSelectedItem));
+  const [itemsFilter, setItemsFilter] = d(itemToString2(value));
   const items = T$1(
     () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
     [allItems, filterItemsByInputValue, itemsFilter]
@@ -15102,7 +15260,7 @@ function DownshiftCombobox({
     itemToString(item) {
       return itemToString2(item);
     },
-    initialSelectedItem,
+    selectedItem: value,
     environment
   });
   const onInputBlur = () => {
@@ -15124,7 +15282,7 @@ function DownshiftCombobox({
     /* @__PURE__ */ u$1("div", { className: "w-full flex flex-col gap-1", children: /* @__PURE__ */ u$1(
       "div",
       {
-        className: "flex gap-0.5 input input-bordered min-w-32",
+        className: `flex gap-0.5 input input-bordered min-w-32 ${inputClassName}`,
         onBlur: (event) => {
           if (event.relatedTarget != buttonRef.current) {
             closeMenu();
@@ -15148,7 +15306,7 @@ function DownshiftCombobox({
               type: "button",
               onClick: clearInput,
               tabIndex: -1,
-              children: "×"
+              children: /* @__PURE__ */ u$1(DeleteIcon, {})
             }
           ),
           /* @__PURE__ */ u$1(