@servicetitan/anvil2 3.0.6 → 3.0.8

package/dist/{syncFilterUtils-COxBIkt6.js → syncFilterUtils-DZqeVWTS.js}

@@ -4,27 +4,15 @@ import { B as Button } from './Button-C_V2xQAs.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useId, useImperativeHandle } from 'react';
 import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
-import { T as Text } from './Text-BTzgTpqu.js';
+import { T as Text } from './Text-w2gWn4K6.js';
 import { D as Divider } from './Divider-CxtTyw8_.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
-import { F as Flex } from './Flex-_orhvoxS.js';
 import { I as Icon } from './Icon-feeG7gXA.js';
-import { A as Avatar } from './Avatar-B_cRQqKR.js';
-import { C as Chip } from './Chip-D2k5X_wX.js';
-import { S as SvgCheckBox, a as SvgCheckBoxOutlineBlank } from './check_box-0U1tbEAd.js';
-import { S as SvgIndeterminateCheckBox } from './indeterminate_check_box-jjLG4UY6.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
+import { b as OptionRow, c as OptionRowSideContent, d as OptionCheckbox, e as OptionContentArea, u as useAdaptiveView } from './useAdaptiveView-CeYKH0Me.js';
 import { d as defaultRangeExtractor, u as useVirtualizer } from './index-DXeGMe23.js';
-import { a as useOnClickOutside } from './useOnClickOutside-Zw5vzxSq.js';
-import { c as computePosition, o as offset, v as autoPlacement, g as size, a as autoUpdate } from './floating-ui.react-dom-CHrYz13o.js';
-import { D as DialogCancelButton } from './DialogCancelButton-DcidFC38.js';
-import { S as SvgClose } from './close-DZj38AEh.js';
-import { D as DialogContext } from './DialogContext-DBgtApl9.js';
-import { t as tabbable } from './usePopoverTransitionStates-CDXCdyKa.js';
-import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
 import { S as SvgAdd } from './add-BcQkAUip.js';
-import { u as useBreakpoint } from './useBreakpoint-CeaUyHxh.js';
 import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
 
 import './syncFilterUtils.css';const DEFAULT_PAGE_SIZE = 20;
@@ -181,7 +169,7 @@ function useSelectFieldLoading(config) {
 const empty = "_empty_1stqb_7";
 const scroller = "_scroller_1stqb_23";
 const divider = "_divider_1stqb_59";
-const styles$3 = {
+const styles$1 = {
 	"select-field-list": "_select-field-list_1stqb_2",
 	empty: empty,
 	"load-more": "_load-more_1stqb_15",
@@ -193,29 +181,16 @@ const styles$3 = {
 	divider: divider
 };
 
-const floating = "_floating_1rq2x_30";
-const highlighted = "_highlighted_1rq2x_43";
-const disabled = "_disabled_1rq2x_59";
-const description = "_description_1rq2x_71";
-const checkbox = "_checkbox_1rq2x_79";
-const checked = "_checked_1rq2x_84";
-const indeterminate = "_indeterminate_1rq2x_85";
-const unchecked = "_unchecked_1rq2x_89";
-const styles$2 = {
-	"select-field-list-item": "_select-field-list-item_1rq2x_2",
+const floating = "_floating_1d3fe_2";
+const highlighted = "_highlighted_1d3fe_15";
+const checkmark = "_checkmark_1d3fe_36";
+const styles = {
 	floating: floating,
-	"bulk-action": "_bulk-action_1rq2x_37",
+	"bulk-action": "_bulk-action_1d3fe_9",
 	highlighted: highlighted,
-	"single-selected": "_single-selected_1rq2x_49",
-	"single-selected-highlighted": "_single-selected-highlighted_1rq2x_54",
-	disabled: disabled,
-	"side-content": "_side-content_1rq2x_64",
-	description: description,
-	"chips-row": "_chips-row_1rq2x_75",
-	checkbox: checkbox,
-	checked: checked,
-	indeterminate: indeterminate,
-	unchecked: unchecked
+	"single-selected": "_single-selected_1d3fe_22",
+	"single-selected-highlighted": "_single-selected-highlighted_1d3fe_29",
+	checkmark: checkmark
 };
 
 const SelectOption = ({
@@ -230,92 +205,39 @@ const SelectOption = ({
 }) => {
   const isBulkAction = item.type === "select-all" || item.type === "select-filtered";
   const isSingleSelected = selectionType === "single" && checked === "checked";
-  const checkbox = useMemo(() => {
-    if (checked === "checked")
-      return { icon: SvgCheckBox, class: styles$2["checked"] };
-    if (checked === "unchecked")
-      return { icon: SvgCheckBoxOutlineBlank, class: styles$2["unchecked"] };
-    if (checked === "indeterminate")
-      return { icon: SvgIndeterminateCheckBox, class: styles$2["indeterminate"] };
-    return { icon: SvgCheckBoxOutlineBlank, class: styles$2["unchecked"] };
-  }, [checked]);
-  const content = item.original.content;
-  const hasAvatar = !!content?.avatar;
-  const hasChips = !!content?.chips?.length;
-  const hasIcon = !!content?.icon;
   return /* @__PURE__ */ jsxs(
-    "div",
+    OptionRow,
     {
       "data-item-index": index,
+      disabled,
       ...getItemProps({
         item,
         index,
         "data-type": item.type,
-        className: cx(styles$2["select-field-list-item"], {
-          [styles$2.highlighted]: highlighted && !isSingleSelected,
-          [styles$2["single-selected"]]: isSingleSelected && !highlighted,
-          [styles$2["single-selected-highlighted"]]: isSingleSelected && highlighted,
-          [styles$2.disabled]: disabled,
-          [styles$2["bulk-action"]]: isBulkAction,
-          [styles$2.floating]: isBulkAction && isListScrolled
+        className: cx(styles["select-option"], {
+          [styles.highlighted]: highlighted && !isSingleSelected,
+          [styles["single-selected"]]: isSingleSelected && !highlighted,
+          [styles["single-selected-highlighted"]]: isSingleSelected && highlighted,
+          [styles["bulk-action"]]: isBulkAction,
+          [styles.floating]: isBulkAction && isListScrolled
         })
       }),
       children: [
-        selectionType === "multiple" && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: checked === "loading" ? /* @__PURE__ */ jsx(
-          Flex,
+        selectionType === "multiple" && /* @__PURE__ */ jsx(OptionRowSideContent, { children: /* @__PURE__ */ jsx(OptionCheckbox, { checkState: checked }) }),
+        /* @__PURE__ */ jsx(
+          OptionContentArea,
           {
-            alignItems: "center",
-            justifyContent: "center",
-            style: { height: "1.5rem", width: "1.5rem" },
-            children: /* @__PURE__ */ jsx(Spinner, { size: "small" })
+            label: item.original.label,
+            content: item.original.content
           }
-        ) : (
-          // Decorative: selection state is conveyed by aria-selected on the <li>
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              "aria-hidden": "true",
-              size: "large",
-              svg: checkbox.icon,
-              className: cx(styles$2["checkbox"], checkbox.class)
-            }
-          )
-        ) }),
-        hasAvatar && // aria-hidden: Avatar has internal <SrOnly> text that would duplicate the option label
-        /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Avatar, { size: "medium", ...content.avatar }) }),
-        /* @__PURE__ */ jsxs(Flex, { grow: 1, shrink: 1, direction: "column", children: [
-          /* @__PURE__ */ jsx(Text, { size: "medium", children: content?.title ?? item.original.label }),
-          content?.description && /* @__PURE__ */ jsx(Text, { size: "small", className: styles$2["description"], children: content.description }),
-          hasChips && // Group label gives screen readers context that these are tags
-          /* @__PURE__ */ jsx(
-            Flex,
-            {
-              wrap: "wrap",
-              gap: "1",
-              className: styles$2["chips-row"],
-              role: "group",
-              "aria-label": "Tags",
-              children: content.chips.map((chip, i) => /* @__PURE__ */ jsx(Chip, { size: "small", ...chip }, `${chip.label}-${i}`))
-            }
-          )
-        ] }),
-        hasIcon && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            size: "large",
-            svg: content.icon.svg,
-            color: content.icon.color,
-            "aria-hidden": content.icon.label ? void 0 : "true",
-            "aria-label": content.icon.label
-          }
-        ) }),
-        selectionType === "single" && checked === "checked" && /* @__PURE__ */ jsx("div", { className: styles$2["side-content"], children: /* @__PURE__ */ jsx(
+        ),
+        selectionType === "single" && checked === "checked" && /* @__PURE__ */ jsx(OptionRowSideContent, { children: /* @__PURE__ */ jsx(
           Icon,
           {
             "aria-hidden": "true",
             size: "medium",
             svg: SvgCheck,
-            className: cx(styles$2["checkbox"], styles$2["checked"])
+            className: styles["checkmark"]
           }
         ) })
       ]
@@ -531,10 +453,10 @@ const OptionsPanel = forwardRef(
               {
                 role: "group",
                 "aria-labelledby": labelId,
-                className: styles$3["pinned-section"],
+                className: styles$1["pinned-section"],
                 children: [
-                  /* @__PURE__ */ jsx("span", { id: labelId, className: styles$3["pinned-section-header"], children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: section.label }) }),
-                  /* @__PURE__ */ jsx("div", { className: styles$3["pinned-section-list"], children: section.items.map(
+                  /* @__PURE__ */ jsx("span", { id: labelId, className: styles$1["pinned-section-header"], children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: section.label }) }),
+                  /* @__PURE__ */ jsx("div", { className: styles$1["pinned-section-list"], children: section.items.map(
                     ({ item, index }) => renderItem(item, index)
                   ) })
                 ]
@@ -550,7 +472,7 @@ const OptionsPanel = forwardRef(
                 {
                   role: "presentation",
                   "aria-hidden": "true",
-                  className: styles$3["divider"],
+                  className: styles$1["divider"],
                   children: /* @__PURE__ */ jsx(Divider, {})
                 },
                 `divider-${sectionIndex}`
@@ -566,22 +488,22 @@ const OptionsPanel = forwardRef(
       return result;
     };
     const menuProps = getMenuProps({
-      className: cx(styles$3["scroller"], className),
+      className: cx(styles$1["scroller"], className),
       style
     });
     const menuRef = useMergeRefs([menuProps.ref, scrollerRef]);
-    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$3["select-field-list"], children: [
+    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$1["select-field-list"], children: [
       isOpen && /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollSentinelRef,
-          className: styles$3["scroll-sentinel"],
+          className: styles$1["scroll-sentinel"],
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? renderSections() : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }),
-      loadingMore ? /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$3["load-more"], children: [
+      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? renderSections() : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) }),
+      loadingMore ? /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$1["load-more"], children: [
         /* @__PURE__ */ jsx(Spinner, { size: "small" }),
         /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
       ] }) : hasMore && !loading ? /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx(
@@ -589,7 +511,7 @@ const OptionsPanel = forwardRef(
         {
           onVisibilityChange: handleLoaderVisibilityChange,
           rootMargin: "0px 0px -100px 0px",
-          children: /* @__PURE__ */ jsx("div", { className: styles$3["load-more"], children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx("div", { className: styles$1["load-more"], children: /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "secondary",
@@ -780,7 +702,7 @@ const VirtualizedOptionsPanel = forwardRef(
           {
             role: "presentation",
             "aria-hidden": "true",
-            className: styles$3["pinned-section-header"],
+            className: styles$1["pinned-section-header"],
             children: /* @__PURE__ */ jsx("span", { id: labelId, children: /* @__PURE__ */ jsx(Text, { variant: "eyebrow", children: row.label }) })
           }
         );
@@ -793,7 +715,7 @@ const VirtualizedOptionsPanel = forwardRef(
             {
               role: "presentation",
               "aria-hidden": "true",
-              className: styles$3["divider"],
+              className: styles$1["divider"],
               children: /* @__PURE__ */ jsx(Divider, {})
             }
           )
@@ -801,12 +723,12 @@ const VirtualizedOptionsPanel = forwardRef(
       }
       if (row.type === "load-more") {
         if (loadingMore) {
-          return /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$3["load-more"], children: [
+          return /* @__PURE__ */ jsxs("div", { role: "presentation", className: styles$1["load-more"], children: [
             /* @__PURE__ */ jsx(Spinner, { size: "small" }),
             /* @__PURE__ */ jsx(SrOnly, { children: "Loading more..." })
           ] });
         }
-        return /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx("div", { className: styles$3["load-more"], children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx("div", { role: "presentation", children: /* @__PURE__ */ jsx("div", { className: styles$1["load-more"], children: /* @__PURE__ */ jsx(
           Button,
           {
             appearance: "secondary",
@@ -819,21 +741,21 @@ const VirtualizedOptionsPanel = forwardRef(
       return null;
     };
     const menuProps = getMenuProps({
-      className: cx(styles$3["scroller"], className),
+      className: cx(styles$1["scroller"], className),
       style
     });
     const menuRef = useMergeRefs([menuProps.ref, scrollerRef]);
-    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$3["select-field-list"], children: [
+    return /* @__PURE__ */ jsx("div", { ...menuProps, ref: menuRef, children: /* @__PURE__ */ jsxs("div", { className: styles$1["select-field-list"], children: [
       isOpen && /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollSentinelRef,
-          className: styles$3["scroll-sentinel"],
+          className: styles$1["scroll-sentinel"],
           role: "presentation",
           "aria-hidden": "true"
         }
       ),
-      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? /* @__PURE__ */ jsx(
+      isOpen && /* @__PURE__ */ jsx(Fragment, { children: loading || anyPinnedLoading ? /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["empty"], children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) }) : items.length > 0 ? /* @__PURE__ */ jsx(
         "div",
         {
           role: "presentation",
@@ -868,7 +790,7 @@ const VirtualizedOptionsPanel = forwardRef(
             );
           })
         }
-      ) : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$3["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) })
+      ) : /* @__PURE__ */ jsx("div", { role: "presentation", className: styles$1["empty"], children: /* @__PURE__ */ jsx(Text, { subdued: true, size: "small", children: "No match found" }) }) })
     ] }) });
   }
 );
@@ -1175,238 +1097,6 @@ function buildSelectItems({
   return { items, sectionsMeta: meta };
 }
 
-const styles$1 = {
-	"options-popover": "_options-popover_1a8y0_2",
-	"options-popover-body": "_options-popover-body_1a8y0_39",
-	"options-popover-footer": "_options-popover-footer_1a8y0_48"
-};
-
-function resolveWidth(width, referenceWidth) {
-  if (width === "reference") return `${referenceWidth}px`;
-  if (typeof width === "number") return `${width}px`;
-  if (typeof width === "string") return width;
-  return void 0;
-}
-const OptionsPopover = (props) => {
-  const ref = useRef(null);
-  const { id, children, referenceElement, open, onClose, width, footer } = props;
-  const lastCloseRef = useRef(0);
-  const safeClose = useCallback(() => {
-    const now = Date.now();
-    if (now - lastCloseRef.current < 50) return;
-    lastCloseRef.current = now;
-    onClose();
-  }, [onClose]);
-  useOnClickOutside({
-    targets: [ref.current ?? void 0, referenceElement.current ?? void 0],
-    onClickOutside: safeClose,
-    disable: !open
-  });
-  useEffect(() => {
-    if (open) {
-      ref.current?.showPopover();
-    } else {
-      ref.current?.hidePopover();
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const popoverEl = ref.current;
-    if (!popoverEl) return;
-    const handleFocusOut = (e) => {
-      const next = e.relatedTarget;
-      if (!next) {
-        safeClose();
-        return;
-      }
-      if (popoverEl.contains(next)) return;
-      const trigger = referenceElement.current;
-      if (trigger && trigger.contains(next)) return;
-      safeClose();
-    };
-    popoverEl.addEventListener("focusout", handleFocusOut);
-    return () => popoverEl.removeEventListener("focusout", handleFocusOut);
-  }, [open, safeClose, referenceElement]);
-  useEffect(() => {
-    if (!open) return;
-    const popoverEl = ref.current;
-    if (!popoverEl) return;
-    const handleKeyDown = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented) return;
-      e.preventDefault();
-      safeClose();
-    };
-    popoverEl.addEventListener("keydown", handleKeyDown);
-    return () => popoverEl.removeEventListener("keydown", handleKeyDown);
-  }, [open, safeClose]);
-  const updatePosition = useCallback(async () => {
-    if (!ref.current || !referenceElement.current) return;
-    const position = await computePosition(
-      referenceElement.current,
-      ref.current,
-      {
-        placement: "bottom-start",
-        middleware: [
-          offset(8),
-          autoPlacement({
-            allowedPlacements: [
-              "bottom-start",
-              "bottom-end",
-              "top-start",
-              "top-end"
-            ],
-            padding: 8
-          }),
-          size({
-            padding: 8,
-            apply({ rects, elements, availableHeight, availableWidth }) {
-              const resolved = resolveWidth(width, rects.reference.width);
-              Object.assign(elements.floating.style, {
-                ...resolved != null && { width: resolved },
-                maxWidth: `${Math.max(0, availableWidth)}px`,
-                maxHeight: `${Math.max(0, availableHeight)}px`
-              });
-            }
-          })
-        ]
-      }
-    );
-    ref.current.style.left = `${position.x}px`;
-    ref.current.style.top = `${position.y}px`;
-  }, [ref, referenceElement, width]);
-  useEffect(() => {
-    if (!ref.current || !referenceElement.current || !open) return;
-    const cleanup = autoUpdate(
-      referenceElement.current,
-      ref.current,
-      updatePosition
-    );
-    return () => {
-      cleanup();
-    };
-  }, [referenceElement, ref, updatePosition, open]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      id,
-      className: styles$1["options-popover"],
-      popover: "manual",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: styles$1["options-popover-body"], children }),
-        footer ? /* @__PURE__ */ jsx("div", { className: styles$1["options-popover-footer"], children: footer }) : null
-      ]
-    }
-  );
-};
-
-const header = "_header_1v2a3_41";
-const field = "_field_1v2a3_2";
-const content = "_content_1v2a3_54";
-const footer = "_footer_1v2a3_60";
-const styles = {
-	"field-dialog": "_field-dialog_1v2a3_2",
-	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_1v2a3_21",
-	header: header,
-	field: field,
-	content: content,
-	footer: footer
-};
-
-const OptionsDialog = ({
-  id,
-  isOpen,
-  onClose,
-  field,
-  children,
-  title,
-  initialFocusResolver,
-  footer
-}) => {
-  const elRef = useRef(null);
-  const visualViewportHeightRef = useRef(null);
-  useDialogScrollLock({
-    open: isOpen,
-    id,
-    enableScrollChaining: false,
-    elementRef: elRef
-  });
-  const computeFocus = useCallback(
-    (focusables) => {
-      if (initialFocusResolver) {
-        return initialFocusResolver(focusables);
-      }
-      return focusables.find(
-        (focusable) => focusable.dataset.anv !== "dialog-cancel-button"
-      ) || focusables[0];
-    },
-    [initialFocusResolver]
-  );
-  useEffect(() => {
-    if (isOpen) {
-      elRef.current?.showModal();
-      if (elRef.current) {
-        computeFocus(tabbable(elRef.current)).focus();
-      }
-    } else {
-      elRef.current?.close();
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen) {
-      const handleResize = () => {
-        if (!visualViewportHeightRef.current) return;
-        visualViewportHeightRef.current.style.height = `${window.visualViewport?.height ?? 0}px`;
-        visualViewportHeightRef.current.style.maxHeight = `${window.visualViewport?.height ?? 0}px`;
-      };
-      window.visualViewport?.addEventListener("resize", handleResize);
-      return () => {
-        window.visualViewport?.removeEventListener("resize", handleResize);
-      };
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ref: elRef,
-      id,
-      "data-anv": "field-dialog",
-      className: styles["field-dialog"],
-      onKeyDown: (e) => {
-        if (e.code === "Escape") {
-          e.preventDefault();
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles["field-dialog-visual-viewport-height"],
-          ref: visualViewportHeightRef,
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { direction: "row", className: styles["header"], children: [
-              /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children: title }),
-              /* @__PURE__ */ jsx("span", { className: styles["close-container"], children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { close: onClose }, children: /* @__PURE__ */ jsx(
-                DialogCancelButton,
-                {
-                  className: styles["close-button"],
-                  size: "small",
-                  appearance: "ghost",
-                  "aria-label": "Close dialog",
-                  icon: SvgClose
-                }
-              ) }) })
-            ] }),
-            field ? /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["field"], children: field }) : null,
-            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["content"], children }),
-            footer ? /* @__PURE__ */ jsx("div", { className: styles["footer"], children: footer }) : null
-          ]
-        }
-      )
-    }
-  );
-};
-
 const AddNewItemButton = ({
   searchText,
   addItemLabel,
@@ -1421,6 +1111,7 @@ const AddNewItemButton = ({
       appearance: "secondary",
       size: "small",
       icon: { before: SvgAdd },
+      onMouseDown: (e) => e.preventDefault(),
       onClick: () => {
         onCloseMenu?.();
         onAddNewItem(searchText);
@@ -1432,33 +1123,6 @@ const AddNewItemButton = ({
 };
 AddNewItemButton.displayName = "AddNewItemButton";
 
-function detectCoarsePointer() {
-  if (typeof window === "undefined" || !window.matchMedia) {
-    return false;
-  }
-  return window.matchMedia("(pointer: coarse)").matches;
-}
-function useAdaptiveView() {
-  const breakpoint = useBreakpoint();
-  const [hasCoarsePointer, setHasCoarsePointer] = useState(detectCoarsePointer);
-  useEffect(() => {
-    setHasCoarsePointer(detectCoarsePointer());
-    const mediaQuery = window.matchMedia("(pointer: coarse)");
-    const handleChange = (e) => {
-      setHasCoarsePointer(e.matches);
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  const isSmallScreen = !breakpoint?.md;
-  const isMobile = isSmallScreen && hasCoarsePointer;
-  return {
-    view: isMobile ? "mobile" : "desktop",
-    isMobile,
-    isDesktop: !isMobile
-  };
-}
-
 function useSelectOrchestration(config) {
   const {
     lazy,
@@ -1573,5 +1237,5 @@ const sortByGroup = (options, groupSorter) => {
   });
 };
 
-export { AddNewItemButton as A, OptionsPanel as O, VirtualizedOptionsPanel as V, useSelectOrchestration as a, useProcessedOptions as b, buildSelectItems as c, useDebouncedCallback as d, OptionsDialog as e, OptionsPopover as f, defaultSyncFilter as g, toSelectItem as h, sortByGroup as s, toSyncFilterFn as t, useAdaptiveView as u };
-//# sourceMappingURL=syncFilterUtils-COxBIkt6.js.map
+export { AddNewItemButton as A, OptionsPanel as O, VirtualizedOptionsPanel as V, useProcessedOptions as a, buildSelectItems as b, useDebouncedCallback as c, defaultSyncFilter as d, toSelectItem as e, sortByGroup as s, toSyncFilterFn as t, useSelectOrchestration as u };
+//# sourceMappingURL=syncFilterUtils-DZqeVWTS.js.map