@mieweb/ui 0.6.1-dev.174 → 0.6.1-dev.175

package/dist/index.js

@@ -26,10 +26,10 @@ import { Spinner, SpinnerWithLabel } from './chunk-VCO2IZOG.js';
 export { FullPageSpinner, Spinner, SpinnerWithLabel, spinnerVariants } from './chunk-VCO2IZOG.js';
 import { SparklesIcon, RefreshIcon, CloseIcon, AIMessageDisplay } from './chunk-NQME7MCK.js';
 export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon } from './chunk-NQME7MCK.js';
-import { EmptyState } from './chunk-ETGZ5DSA.js';
-export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator } from './chunk-ETGZ5DSA.js';
-import { MessageComposer } from './chunk-7QZSJFYT.js';
-export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile } from './chunk-7QZSJFYT.js';
+import { EmptyState } from './chunk-JHYFHEHS.js';
+export { AttachmentPreview, ConversationHeader, ConversationListItem, ConversationListSkeleton, DateSeparator, EmptyState, LightboxModal, LoadMoreButton, MessageBubble, MessageList, MessageStatusIcon, MessageThread, MessagingSplitView, ReadReceiptIndicator, SkeletonMessage, TypingIndicator, bubbleVariants, formatDateLabel, formatFileSize, formatLastSeen, getConversationSubtitle, getConversationTitle, groupMessagesByDate, headerVariants, isSameSenderGroup, useMessageScroll, useMessages, useReadReceipts, useTypingIndicator } from './chunk-JHYFHEHS.js';
+import { MessageComposer } from './chunk-UM6NA7HL.js';
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile } from './chunk-UM6NA7HL.js';
 import { Switch, switchThumbVariants, switchTrackVariants } from './chunk-43GBCUSQ.js';
 export { Switch, switchThumbVariants, switchTrackVariants } from './chunk-43GBCUSQ.js';
 import { Progress } from './chunk-IYIYL2SQ.js';
@@ -37,7 +37,7 @@ export { CircularProgress, Progress, circularProgressVariants, progressBarFillVa
 export { QuickAction, QuickActionGroup, QuickActionIcons, quickActionIconVariants, quickActionVariants } from './chunk-3CJBUAJ4.js';
 import { RecordButton } from './chunk-STPK44AU.js';
 export { RecordButton, formatDuration, recordButtonVariants } from './chunk-STPK44AU.js';
-export { RichTextEditor, convertAngleBracketsToMustache, processDictation } from './chunk-FJG7KUDJ.js';
+export { RichTextEditor, convertAngleBracketsToMustache, processDictation } from './chunk-FJH7P5WG.js';
 export { Separator, separatorVariants } from './chunk-BX6BTDTR.js';
 export { DateButton, DatePicker, RadioOption, SchedulePicker, TimeButton, TimePicker, dateButtonVariants, radioOptionVariants, timeButtonVariants } from './chunk-4DMZAVB2.js';
 export { ScrollArea, scrollAreaVariants } from './chunk-BIT27PPD.js';
@@ -47,7 +47,7 @@ export { HtmlPreviewBlock } from './chunk-NCRYCG5G.js';
 export { MermaidBlock } from './chunk-WGC3KOP7.js';
 export { SurveyBlock } from './chunk-CPJIOOBM.js';
 export { FenceBlock } from './chunk-MHJMUKLA.js';
-export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal } from './chunk-O6MBLWAI.js';
+export { FillerWordsModal, MediaEditor, SilenceSettingsModal, SpeedMarkerMenu, WordEditorModal } from './chunk-35VBGVMB.js';
 export { PLAYBACK_SPEEDS } from './chunk-J7KWQJOB.js';
 export { Slider, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants } from './chunk-JBB25LFB.js';
 import './chunk-RISZWWEQ.js';
@@ -58,9 +58,9 @@ import './chunk-OF7NTZ2I.js';
 import { Checkbox } from './chunk-XCLQZ4FV.js';
 export { Checkbox, CheckboxGroup, checkboxVariants } from './chunk-XCLQZ4FV.js';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './chunk-T3C4RNJ4.js';
-export { CountryCodeDropdown, formatE164, validatePhoneNumber } from './chunk-WFS6R2F5.js';
-import { Dropdown, DropdownItem, DropdownSeparator, DropdownHeader } from './chunk-GSOOPTGM.js';
-export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator } from './chunk-GSOOPTGM.js';
+export { CountryCodeDropdown, formatE164, validatePhoneNumber } from './chunk-MKWGKASO.js';
+import { Dropdown, DropdownItem, DropdownSeparator, DropdownHeader } from './chunk-YZT62IMX.js';
+export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator } from './chunk-YZT62IMX.js';
 export { FloatingWindow, MinimizedWindow } from './chunk-C2544GKZ.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-MV3MTHWQ.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './chunk-MV3MTHWQ.js';
@@ -68,15 +68,15 @@ import { AlertDialog } from './chunk-6AHYYWVB.js';
 export { AlertDialog } from './chunk-6AHYYWVB.js';
 export { AudioPlayer, ProgressBar, audioPlayerVariants, formatTime as formatAudioTime, playButtonVariants } from './chunk-KAKH2UZA.js';
 export { AudioRecorder, audioRecorderVariants, controlButtonVariants, formatTime, waveformContainerVariants } from './chunk-TRZXK57D.js';
-export { Autocomplete } from './chunk-PI3KOYAT.js';
+export { Autocomplete } from './chunk-ZAIEQWRA.js';
 import { Avatar } from './chunk-WO5CAOAN.js';
 export { Avatar, AvatarGroup, avatarVariants, getInitials } from './chunk-WO5CAOAN.js';
 import './chunk-IQ4KQJAO.js';
 export { Breadcrumb, BreadcrumbSlash } from './chunk-HEH3QXOQ.js';
 import { evaluateDue, completedKeys, normalizeOrders } from './chunk-Y5KEFV5O.js';
 export { buildChartOrderRows, buildEncounterOrderRows, dueForOrder, evaluateDue, evaluateProgram, isApplicable } from './chunk-Y5KEFV5O.js';
-import { useCodeLookupConfig, RowActionToolbar, RowIconButton, toolbarKeyNav, parseSig, labelToMedicationFields, MedicationEditor } from './chunk-DZIUSGUF.js';
-export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig } from './chunk-DZIUSGUF.js';
+import { useCodeLookupConfig, RowActionToolbar, RowIconButton, toolbarKeyNav, parseSig, labelToMedicationFields, MedicationEditor } from './chunk-HRS6W74P.js';
+export { ALLERGY_TYPE_LABELS, AllergyList, AllergyManager, CodeLookupProvider, MEDICATION_STATUS_LABELS, MedicationEditor, MedicationList, MedicationReconciliation, RowActionToolbar, RowIconButton, labelToMedicationFields, lookupToMedicationFields, parseMedicationLabel, parseSig, toolbarKeyNav, useCodeLookupConfig } from './chunk-HRS6W74P.js';
 import { Textarea } from './chunk-6LFG4JFF.js';
 export { Textarea, textareaVariants } from './chunk-6LFG4JFF.js';
 import { Tooltip } from './chunk-FZJBFJJR.js';
@@ -85,8 +85,8 @@ import { RadioGroup, Radio } from './chunk-EZKRAW2X.js';
 export { Radio, RadioGroup, radioVariants } from './chunk-EZKRAW2X.js';
 import { Label } from './chunk-DUPR6FEL.js';
 export { Label, labelVariants } from './chunk-DUPR6FEL.js';
-import { Select } from './chunk-6Y727LPG.js';
-export { Select, selectTriggerVariants } from './chunk-6Y727LPG.js';
+import { Select } from './chunk-J7Z7467B.js';
+export { Select, selectTriggerVariants } from './chunk-J7Z7467B.js';
 import { Card, CardHeader, CardContent, CardTitle } from './chunk-5BQE6BEL.js';
 export { Card, CardActions, CardBadge, CardCollapsible, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardMedia, CardStat, CardTitle, cardAccentVariants, cardVariants } from './chunk-5BQE6BEL.js';
 import { DateInput } from './chunk-LIH3IZYK.js';
@@ -100,13 +100,11 @@ import { Button, buttonVariants } from './chunk-ZVSW2KS6.js';
 export { Button, buttonVariants } from './chunk-ZVSW2KS6.js';
 import { Badge } from './chunk-T42BCIUA.js';
 export { Badge, badgeVariants } from './chunk-T42BCIUA.js';
-import { useCommandK, useIsMobile, useMediaQuery, useScrollSpy } from './chunk-6VGXX6L6.js';
-export { useCommandK, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery, useScrollSpy } from './chunk-6VGXX6L6.js';
+import { useCommandK, useIsMobile, useMediaQuery, useScrollSpy } from './chunk-ZGSC2CB2.js';
+export { useCommandK, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery, useScrollSpy } from './chunk-ZGSC2CB2.js';
 export { useTheme } from './chunk-KJZNEVYM.js';
 export { DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, buildPlaybackSegments, getSpeedAtIndex, initEditableWords, insertSilences, useTranscriptEdits } from './chunk-NTYGCBCL.js';
 export { useMediaTransport } from './chunk-SQHMGT4W.js';
-import { useClickOutside } from './chunk-OKBR6PX4.js';
-export { useClickOutside } from './chunk-OKBR6PX4.js';
 import { useLiveAnnouncement, useDragReorder, dragIndicatorClasses, reorderIds } from './chunk-7ZVTLTJF.js';
 export { dragIndicatorClasses, reorderIds, useDragReorder, useLiveAnnouncement } from './chunk-7ZVTLTJF.js';
 export { usePrefersReducedMotion } from './chunk-HB7C7NB5.js';
@@ -114,6 +112,10 @@ import { useFocusTrap } from './chunk-4SMSH4OY.js';
 export { useFocusTrap } from './chunk-4SMSH4OY.js';
 import { useEscapeKey } from './chunk-T4ME7QCT.js';
 export { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { useClickOutside } from './chunk-62ZOA6PX.js';
+export { useClickOutside } from './chunk-62ZOA6PX.js';
+import { useAnchoredPosition } from './chunk-QA6ZDHFP.js';
+export { useAnchoredPosition } from './chunk-QA6ZDHFP.js';
 import './chunk-7XUN3OQT.js';
 export { isHtmlEmpty, stripHtmlTags } from './chunk-ERLPVXOV.js';
 export { formatPhoneNumber, isPhoneNumberEmpty, isValidPhoneNumber, unformatPhoneNumber } from './chunk-ZVPJ2MH6.js';
@@ -8902,15 +8904,12 @@ function ServiceSelect({
 }) {
   const [isOpen, setIsOpen] = React10.useState(false);
   const dropdownRef = React10.useRef(null);
-  React10.useEffect(() => {
-    function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({ open: isOpen, matchWidth: true, maxHeight: 240 });
+  const outsideRefs = React10.useMemo(
+    () => [dropdownRef, floatingRef],
+    [floatingRef]
+  );
+  useClickOutside(outsideRefs, () => setIsOpen(false), isOpen);
   const toggleService = (serviceSlug) => {
     if (selectedServices.includes(serviceSlug)) {
       onChange(selectedServices.filter((s) => s !== serviceSlug));
@@ -8922,7 +8921,10 @@ function ServiceSelect({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: dropdownRef,
+      ref: (node) => {
+        dropdownRef.current = node;
+        anchorRef.current = node;
+      },
       className: cn("relative", className),
       "data-slot": "service-select",
       children: [
@@ -8960,35 +8962,40 @@ function ServiceSelect({
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "border-border bg-card absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg",
-            "data-slot": "service-select-dropdown",
-            children: [
-              services.map((service) => /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  "data-slot": "service-select-option",
-                  className: "hover:bg-muted flex cursor-pointer items-center gap-3 px-4 py-3",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        type: "checkbox",
-                        checked: selectedServices.includes(service.slug),
-                        onChange: () => toggleService(service.slug),
-                        className: "text-primary-800 focus:ring-primary-500 border-input h-4 w-4 rounded"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "text-foreground", children: service.name })
-                  ]
-                },
-                service.slug
-              )),
-              services.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-4 py-3 text-center", children: "No services available" })
-            ]
-          }
+        isOpen && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              className: "border-border bg-card overflow-auto rounded-lg border shadow-lg",
+              "data-slot": "service-select-dropdown",
+              children: [
+                services.map((service) => /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    "data-slot": "service-select-option",
+                    className: "hover:bg-muted flex cursor-pointer items-center gap-3 px-4 py-3",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: selectedServices.includes(service.slug),
+                          onChange: () => toggleService(service.slug),
+                          className: "text-primary-800 focus:ring-primary-500 border-input h-4 w-4 rounded"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: service.name })
+                    ]
+                  },
+                  service.slug
+                )),
+                services.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-4 py-3 text-center", children: "No services available" })
+              ]
+            }
+          ),
+          document.body
         ),
         error && /* @__PURE__ */ jsx(
           "p",
@@ -10361,44 +10368,44 @@ function BusinessHoursEditor({
                       }
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      hours.length > 0 && /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
-                        /* @__PURE__ */ jsxs(
-                          Button,
-                          {
-                            type: "button",
-                            variant: "ghost",
-                            size: "sm",
-                            disabled,
-                            className: "text-xs",
-                            children: [
-                              /* @__PURE__ */ jsx(CopyIcon, { className: "mr-1 h-3 w-3" }),
-                              "Copy"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs("div", { className: "invisible absolute top-full right-0 z-10 mt-1 rounded-md border border-gray-200 bg-white opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100 dark:border-gray-700 dark:bg-gray-800", children: [
-                          /* @__PURE__ */ jsx(
-                            "button",
+                      hours.length > 0 && /* @__PURE__ */ jsxs(
+                        Dropdown,
+                        {
+                          placement: "bottom-end",
+                          trigger: /* @__PURE__ */ jsxs(
+                            Button,
                             {
                               type: "button",
-                              className: "block w-full px-3 py-2 text-left text-xs whitespace-nowrap hover:bg-gray-100 dark:hover:bg-gray-700",
-                              onClick: () => handleCopyToAll(dayIndex),
+                              variant: "ghost",
+                              size: "sm",
                               disabled,
-                              children: "Copy to all days"
+                              className: "text-xs",
+                              children: [
+                                /* @__PURE__ */ jsx(CopyIcon, { className: "mr-1 h-3 w-3" }),
+                                "Copy"
+                              ]
                             }
                           ),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: "block w-full px-3 py-2 text-left text-xs whitespace-nowrap hover:bg-gray-100 dark:hover:bg-gray-700",
-                              onClick: () => handleCopyToWeekdays(dayIndex),
-                              disabled,
-                              children: "Copy to weekdays"
-                            }
-                          )
-                        ] })
-                      ] }),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              DropdownItem,
+                              {
+                                onClick: () => handleCopyToAll(dayIndex),
+                                disabled,
+                                children: "Copy to all days"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              DropdownItem,
+                              {
+                                onClick: () => handleCopyToWeekdays(dayIndex),
+                                disabled,
+                                children: "Copy to weekdays"
+                              }
+                            )
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsxs(
                         Button,
                         {
@@ -12809,16 +12816,8 @@ function RowActionMenu({
   const [open, setOpen] = React10.useState(false);
   const menuRef = React10.useRef(null);
   const buttonRef = React10.useRef(null);
-  React10.useEffect(() => {
-    if (!open) return;
-    function handleClick(e) {
-      if (menuRef.current && !menuRef.current.contains(e.target) && buttonRef.current && !buttonRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
+  const outsideRefs = React10.useMemo(() => [menuRef, buttonRef], []);
+  useClickOutside(outsideRefs, () => setOpen(false), open);
   React10.useEffect(() => {
     if (!open) return;
     function handleKey(e) {
@@ -12908,7 +12907,9 @@ function RowActionMenu({
 function HoverMenu({
   items,
   actions,
-  variant
+  variant,
+  floatingRef,
+  style
 }) {
   const headerBg = {
     default: "bg-neutral-50 dark:bg-neutral-800",
@@ -12923,11 +12924,13 @@ function HoverMenu({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: floatingRef,
+        style,
         "data-slot": "count-badge-menu",
         className: cn(
-          "absolute top-full right-0 z-50 mt-2",
           "w-[320px] rounded-lg border border-neutral-200 bg-white shadow-xl",
           "dark:border-neutral-700 dark:bg-neutral-800",
+          "flex flex-col overflow-hidden",
           "animate-in fade-in slide-in-from-top-1 duration-150"
         ),
         onMouseDown: (e) => e.stopPropagation(),
@@ -12936,7 +12939,7 @@ function HoverMenu({
             "div",
             {
               className: cn(
-                "rounded-t-lg border-b border-neutral-200 px-3 py-2 dark:border-neutral-700",
+                "shrink-0 rounded-t-lg border-b border-neutral-200 px-3 py-2 dark:border-neutral-700",
                 headerBg[variant ?? "default"]
               ),
               children: /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-neutral-600 dark:text-neutral-300", children: [
@@ -12950,7 +12953,7 @@ function HoverMenu({
             "div",
             {
               "data-slot": "count-badge-menu-scroll",
-              className: "max-h-[240px] overflow-y-auto",
+              className: "max-h-[240px] min-h-0 overflow-y-auto",
               children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left text-xs", children: [
                 /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-neutral-100 dark:border-neutral-700", children: [
                   /* @__PURE__ */ jsx("th", { className: "text-muted-foreground px-3 py-1.5 font-medium", children: "#" }),
@@ -13013,117 +13016,133 @@ function ViewModalActions({
 }) {
   const [shareOpen, setShareOpen] = React10.useState(false);
   const shareRef = React10.useRef(null);
-  React10.useEffect(() => {
-    if (!shareOpen) return;
-    const handleClick = (e) => {
-      if (shareRef.current && !shareRef.current.contains(e.target)) {
-        setShareOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [shareOpen]);
+  const {
+    anchorRef: shareAnchorRef,
+    floatingRef: shareFloatingRef,
+    style: shareStyle
+  } = useAnchoredPosition({
+    open: shareOpen
+  });
+  const shareOutsideRefs = React10.useMemo(
+    () => [shareRef, shareFloatingRef],
+    [shareFloatingRef]
+  );
+  useClickOutside(shareOutsideRefs, () => setShareOpen(false), shareOpen);
   return /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-1 border-b border-neutral-200 pb-3 dark:border-neutral-700", children: [
-    /* @__PURE__ */ jsxs("div", { ref: shareRef, className: "relative", children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => setShareOpen((v) => !v),
-          "aria-expanded": shareOpen,
-          "aria-haspopup": "menu",
-          children: [
-            /* @__PURE__ */ jsx(Share, { size: 14, className: "mr-1.5" }),
-            "Share",
-            /* @__PURE__ */ jsx(
-              ChevronDown,
-              {
-                size: 12,
-                className: cn(
-                  "ml-1 transition-transform duration-150",
-                  shareOpen && "rotate-180"
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          shareRef.current = node;
+          shareAnchorRef.current = node;
+        },
+        className: "relative",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setShareOpen((v) => !v),
+              "aria-expanded": shareOpen,
+              "aria-haspopup": "menu",
+              children: [
+                /* @__PURE__ */ jsx(Share, { size: 14, className: "mr-1.5" }),
+                "Share",
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    size: 12,
+                    className: cn(
+                      "ml-1 transition-transform duration-150",
+                      shareOpen && "rotate-180"
+                    )
+                  }
                 )
-              }
-            )
-          ]
-        }
-      ),
-      shareOpen && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "menu",
-          className: cn(
-            "absolute top-full left-0 z-50 mt-1",
-            "min-w-[10rem] rounded-lg border border-neutral-200 bg-white py-1 shadow-lg",
-            "dark:border-neutral-700 dark:bg-neutral-800",
-            "animate-in fade-in zoom-in-95 duration-100"
+              ]
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                role: "menuitem",
-                type: "button",
-                className: cn(
-                  "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-                  "text-neutral-700 hover:bg-neutral-100",
-                  "dark:text-neutral-300 dark:hover:bg-neutral-700"
-                ),
-                onClick: () => {
-                  console.warn("Share with physician", viewTarget);
-                  setShareOpen(false);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Stethoscope, { size: 14 }),
-                  "Physician"
-                ]
-              }
-            ),
+          shareOpen && ReactDOM.createPortal(
             /* @__PURE__ */ jsxs(
-              "button",
+              "div",
               {
-                role: "menuitem",
-                type: "button",
+                ref: shareFloatingRef,
+                style: shareStyle,
+                role: "menu",
                 className: cn(
-                  "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-                  "text-neutral-700 hover:bg-neutral-100",
-                  "dark:text-neutral-300 dark:hover:bg-neutral-700"
+                  "min-w-[10rem] overflow-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg",
+                  "dark:border-neutral-700 dark:bg-neutral-800",
+                  "animate-in fade-in zoom-in-95 duration-100"
                 ),
-                onClick: () => {
-                  console.warn("Share with patient", viewTarget);
-                  setShareOpen(false);
-                },
                 children: [
-                  /* @__PURE__ */ jsx(User, { size: 14 }),
-                  "Patient"
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      role: "menuitem",
+                      type: "button",
+                      className: cn(
+                        "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
+                        "text-neutral-700 hover:bg-neutral-100",
+                        "dark:text-neutral-300 dark:hover:bg-neutral-700"
+                      ),
+                      onClick: () => {
+                        console.warn("Share with physician", viewTarget);
+                        setShareOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Stethoscope, { size: 14 }),
+                        "Physician"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      role: "menuitem",
+                      type: "button",
+                      className: cn(
+                        "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
+                        "text-neutral-700 hover:bg-neutral-100",
+                        "dark:text-neutral-300 dark:hover:bg-neutral-700"
+                      ),
+                      onClick: () => {
+                        console.warn("Share with patient", viewTarget);
+                        setShareOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(User, { size: 14 }),
+                        "Patient"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      role: "menuitem",
+                      type: "button",
+                      className: cn(
+                        "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
+                        "text-neutral-700 hover:bg-neutral-100",
+                        "dark:text-neutral-300 dark:hover:bg-neutral-700"
+                      ),
+                      onClick: () => {
+                        console.warn("Share via email", viewTarget);
+                        setShareOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Mail, { size: 14 }),
+                        "Email"
+                      ]
+                    }
+                  )
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                role: "menuitem",
-                type: "button",
-                className: cn(
-                  "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-                  "text-neutral-700 hover:bg-neutral-100",
-                  "dark:text-neutral-300 dark:hover:bg-neutral-700"
-                ),
-                onClick: () => {
-                  console.warn("Share via email", viewTarget);
-                  setShareOpen(false);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Mail, { size: 14 }),
-                  "Email"
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] }),
+            document.body
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Button,
       {
@@ -13177,16 +13196,20 @@ var CountBadge = React10.forwardRef(
       null
     );
     const showMenu = items && items.length > 0;
-    React10.useEffect(() => {
-      if (!open) return;
-      const handleClickOutside = (e) => {
-        if (containerRef.current && !containerRef.current.contains(e.target)) {
-          setOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [open]);
+    const {
+      anchorRef,
+      floatingRef,
+      style: menuStyle
+    } = useAnchoredPosition({
+      open: Boolean(showMenu && open),
+      placement: "bottom-end",
+      offset: 8
+    });
+    const outsideRefs = React10.useMemo(
+      () => [containerRef, floatingRef],
+      [floatingRef]
+    );
+    useClickOutside(outsideRefs, () => setOpen(false), open);
     React10.useEffect(() => {
       if (!open) return;
       const handleEscape = (e) => {
@@ -13219,62 +13242,77 @@ var CountBadge = React10.forwardRef(
     );
     const entityLabel = deleteLabel ?? "item";
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref,
-            type: "button",
-            "data-slot": "count-badge",
-            "data-count-badge": "",
-            className: cn(countBadgeVariants({ variant }), className),
-            onClick: (e) => {
-              if (showMenu) {
-                setOpen((prev) => !prev);
-              }
-              props.onClick?.(e);
-            },
-            "aria-expanded": showMenu ? open : void 0,
-            ...props,
-            children: [
-              icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
-              /* @__PURE__ */ jsx("span", { children: label }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-slot": "count-chip",
-                  className: cn(
-                    countChipVariants({ variant: countVariant ?? variant })
-                  ),
-                  children: count
-                }
-              )
-            ]
-          }
-        ),
-        showMenu && open && /* @__PURE__ */ jsx(
-          HoverMenu,
-          {
-            items,
-            actions: resolvedActions,
-            variant
-          }
-        )
-      ] }),
       /* @__PURE__ */ jsxs(
-        Modal,
+        "div",
         {
-          open: !!deleteTarget,
-          onOpenChange: (isOpen) => {
-            if (!isOpen) setDeleteTarget(null);
+          ref: (node) => {
+            containerRef.current = node;
+            anchorRef.current = node;
           },
-          size: "sm",
+          className: "relative inline-flex",
           children: [
-            /* @__PURE__ */ jsxs(ModalHeader, { children: [
-              /* @__PURE__ */ jsxs(ModalTitle, { children: [
-                "Delete ",
-                entityLabel
-              ] }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref,
+                type: "button",
+                "data-slot": "count-badge",
+                "data-count-badge": "",
+                className: cn(countBadgeVariants({ variant }), className),
+                onClick: (e) => {
+                  if (showMenu) {
+                    setOpen((prev) => !prev);
+                  }
+                  props.onClick?.(e);
+                },
+                "aria-expanded": showMenu ? open : void 0,
+                ...props,
+                children: [
+                  icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+                  /* @__PURE__ */ jsx("span", { children: label }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "data-slot": "count-chip",
+                      className: cn(
+                        countChipVariants({ variant: countVariant ?? variant })
+                      ),
+                      children: count
+                    }
+                  )
+                ]
+              }
+            ),
+            showMenu && open && ReactDOM.createPortal(
+              /* @__PURE__ */ jsx(
+                HoverMenu,
+                {
+                  items,
+                  actions: resolvedActions,
+                  variant,
+                  floatingRef,
+                  style: menuStyle
+                }
+              ),
+              document.body
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Modal,
+        {
+          open: !!deleteTarget,
+          onOpenChange: (isOpen) => {
+            if (!isOpen) setDeleteTarget(null);
+          },
+          size: "sm",
+          children: [
+            /* @__PURE__ */ jsxs(ModalHeader, { children: [
+              /* @__PURE__ */ jsxs(ModalTitle, { children: [
+                "Delete ",
+                entityLabel
+              ] }),
               /* @__PURE__ */ jsx(ModalClose, {})
             ] }),
             /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground", children: [
@@ -14927,11 +14965,21 @@ function DateRangePicker({
     setRangeEnd(value.end ?? null);
   }, [value]);
   const wrapperRef = React10.useRef(null);
-  useClickOutside(wrapperRef, () => {
-    if (isCalendarOpen) {
+  const outsideRefs = React10.useMemo(
+    () => [wrapperRef, calendarRef],
+    [calendarRef]
+  );
+  useClickOutside(
+    outsideRefs,
+    () => {
       setIsCalendarOpen(false);
       setSelectingEnd(false);
-    }
+    },
+    isCalendarOpen
+  );
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({
+    open: !isMobileVariant && isCalendarOpen,
+    placement: resolvedAlign === "end" ? "bottom-end" : "bottom-start"
   });
   useEscapeKey(() => {
     setIsCalendarOpen(false);
@@ -15156,7 +15204,10 @@ function DateRangePicker({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: wrapperRef,
+      ref: (node) => {
+        wrapperRef.current = node;
+        anchorRef.current = node;
+      },
       className: cn("relative inline-block", className),
       "data-slot": "date-range-picker",
       children: [
@@ -15298,147 +15349,153 @@ function DateRangePicker({
             )
           }
         ),
-        !isMobileVariant && isCalendarOpen && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: calendarRef,
-            className: cn(
-              "absolute top-full z-50 mt-1",
-              resolvedAlign === "end" ? "right-0" : "left-0",
-              "bg-background border-border rounded-lg border shadow-lg"
-            ),
-            role: "dialog",
-            "aria-label": "Choose date range",
-            "data-slot": "date-range-popup",
-            children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-              showPresets && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "border-border flex w-[200px] shrink-0 flex-col gap-0.5 border-r p-3",
-                    isResponsive && "hidden md:flex"
-                  ),
-                  "data-slot": "date-range-presets",
-                  children: finalPresets.map((preset) => /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handlePresetSelect(preset.key),
-                      "data-slot": "date-range-preset",
-                      className: cn(
-                        "rounded-md px-3 py-1.5 text-left text-sm transition-colors",
-                        "hover:bg-muted",
-                        activePreset === preset.key && "bg-primary-800 text-white"
-                      ),
-                      children: preset.label
-                    },
-                    preset.key
-                  ))
-                }
+        !isMobileVariant && isCalendarOpen && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: (node) => {
+                calendarRef.current = node;
+                floatingRef.current = node;
+              },
+              style,
+              className: cn(
+                "overflow-auto",
+                "bg-background border-border rounded-lg border shadow-lg"
               ),
-              /* @__PURE__ */ jsxs("div", { className: "p-4", "data-slot": "date-range-calendar", children: [
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: "text-muted-foreground mb-4 text-sm",
-                    "data-slot": "date-range-subtitle",
-                    children: "Select a start and end date from the calendar."
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
+              role: "dialog",
+              "aria-label": "Choose date range",
+              "data-slot": "date-range-popup",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+                showPresets && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "flex gap-8",
-                    onMouseLeave: () => setHoverDate(null),
-                    "data-slot": "date-range-calendars",
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { children: [
-                        /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: "mb-3 flex items-center",
-                            "data-slot": "date-range-month-header",
-                            children: [
-                              /* @__PURE__ */ jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: goToPrevMonth,
-                                  className: "hover:bg-muted rounded-md p-1 transition-colors",
-                                  "aria-label": "Previous month",
-                                  "data-slot": "date-range-nav",
-                                  children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-                                }
-                              ),
-                              /* @__PURE__ */ jsxs(
-                                "div",
-                                {
-                                  className: "flex-1 text-center text-sm font-medium",
-                                  "data-slot": "date-range-month-label",
-                                  children: [
-                                    monthNames[leftMonth],
-                                    " ",
-                                    leftYear
-                                  ]
-                                }
-                              ),
-                              isResponsive && /* @__PURE__ */ jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: goToNextMonth,
-                                  className: "hover:bg-muted rounded-md p-1 transition-colors md:hidden",
-                                  "aria-label": "Next month",
-                                  "data-slot": "date-range-nav",
-                                  children: /* @__PURE__ */ jsx(ChevronRight$1, { className: "h-4 w-4" })
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        renderMonthGrid(leftMonth, leftYear)
-                      ] }),
-                      /* @__PURE__ */ jsxs("div", { className: cn(isResponsive && "hidden md:block"), children: [
-                        /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: "mb-3 flex items-center",
-                            "data-slot": "date-range-month-header",
-                            children: [
-                              /* @__PURE__ */ jsxs(
-                                "div",
-                                {
-                                  className: "flex-1 text-center text-sm font-medium",
-                                  "data-slot": "date-range-month-label",
-                                  children: [
-                                    monthNames[rightMonth],
-                                    " ",
-                                    rightYear
-                                  ]
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: goToNextMonth,
-                                  className: "hover:bg-muted rounded-md p-1 transition-colors",
-                                  "aria-label": "Next month",
-                                  "data-slot": "date-range-nav",
-                                  children: /* @__PURE__ */ jsx(ChevronRight$1, { className: "h-4 w-4" })
-                                }
-                              )
-                            ]
-                          }
+                    className: cn(
+                      "border-border flex w-[200px] shrink-0 flex-col gap-0.5 border-r p-3",
+                      isResponsive && "hidden md:flex"
+                    ),
+                    "data-slot": "date-range-presets",
+                    children: finalPresets.map((preset) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handlePresetSelect(preset.key),
+                        "data-slot": "date-range-preset",
+                        className: cn(
+                          "rounded-md px-3 py-1.5 text-left text-sm transition-colors",
+                          "hover:bg-muted",
+                          activePreset === preset.key && "bg-primary-800 text-white"
                         ),
-                        renderMonthGrid(rightMonth, rightYear)
-                      ] })
-                    ]
+                        children: preset.label
+                      },
+                      preset.key
+                    ))
                   }
-                )
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "p-4", "data-slot": "date-range-calendar", children: [
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-muted-foreground mb-4 text-sm",
+                      "data-slot": "date-range-subtitle",
+                      children: "Select a start and end date from the calendar."
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex gap-8",
+                      onMouseLeave: () => setHoverDate(null),
+                      "data-slot": "date-range-calendars",
+                      children: [
+                        /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "mb-3 flex items-center",
+                              "data-slot": "date-range-month-header",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: goToPrevMonth,
+                                    className: "hover:bg-muted rounded-md p-1 transition-colors",
+                                    "aria-label": "Previous month",
+                                    "data-slot": "date-range-nav",
+                                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    className: "flex-1 text-center text-sm font-medium",
+                                    "data-slot": "date-range-month-label",
+                                    children: [
+                                      monthNames[leftMonth],
+                                      " ",
+                                      leftYear
+                                    ]
+                                  }
+                                ),
+                                isResponsive && /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: goToNextMonth,
+                                    className: "hover:bg-muted rounded-md p-1 transition-colors md:hidden",
+                                    "aria-label": "Next month",
+                                    "data-slot": "date-range-nav",
+                                    children: /* @__PURE__ */ jsx(ChevronRight$1, { className: "h-4 w-4" })
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          renderMonthGrid(leftMonth, leftYear)
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: cn(isResponsive && "hidden md:block"), children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "mb-3 flex items-center",
+                              "data-slot": "date-range-month-header",
+                              children: [
+                                /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    className: "flex-1 text-center text-sm font-medium",
+                                    "data-slot": "date-range-month-label",
+                                    children: [
+                                      monthNames[rightMonth],
+                                      " ",
+                                      rightYear
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: goToNextMonth,
+                                    className: "hover:bg-muted rounded-md p-1 transition-colors",
+                                    "aria-label": "Next month",
+                                    "data-slot": "date-range-nav",
+                                    children: /* @__PURE__ */ jsx(ChevronRight$1, { className: "h-4 w-4" })
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          renderMonthGrid(rightMonth, rightYear)
+                        ] })
+                      ]
+                    }
+                  )
+                ] })
               ] })
-            ] })
-          }
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -23955,16 +24012,13 @@ function LanguageSelector({
 }) {
   const [isOpen, setIsOpen] = React10.useState(false);
   const containerRef = React10.useRef(null);
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({ open: isOpen, matchMinWidth: true, maxHeight: 240 });
   const selectedLanguage = languages.find((l) => l.code === value);
-  React10.useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  const outsideRefs = React10.useMemo(
+    () => [containerRef, floatingRef],
+    [floatingRef]
+  );
+  useClickOutside(outsideRefs, () => setIsOpen(false), isOpen);
   React10.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") setIsOpen(false);
@@ -23979,7 +24033,10 @@ function LanguageSelector({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: containerRef,
+      ref: (node) => {
+        containerRef.current = node;
+        anchorRef.current = node;
+      },
       "data-slot": "language-selector",
       className: cn(selectorVariants({ size }), className),
       children: [
@@ -24015,44 +24072,41 @@ function LanguageSelector({
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "language-selector-dropdown",
-            className: cn(
-              "absolute z-50 mt-1 w-full min-w-[180px] rounded-lg border border-gray-200 bg-white shadow-lg",
-              "dark:border-gray-700 dark:bg-gray-800",
-              "animate-in fade-in slide-in-from-top-1 duration-150"
-            ),
-            children: /* @__PURE__ */ jsx(
-              "ul",
-              {
-                role: "listbox",
-                "aria-label": label,
-                className: "max-h-60 overflow-auto py-1",
-                children: languages.map((language) => /* @__PURE__ */ jsxs(
-                  "li",
-                  {
-                    role: "option",
-                    "aria-selected": language.code === value,
-                    onClick: () => handleSelect(language),
-                    onKeyDown: (e) => e.key === "Enter" && handleSelect(language),
-                    "data-slot": "language-selector-option",
-                    className: cn(
-                      "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors",
-                      language.code === value ? "bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400" : "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
-                    ),
-                    children: [
-                      showFlags && language.flag && /* @__PURE__ */ jsx("span", { className: "text-base", children: language.flag }),
-                      /* @__PURE__ */ jsx("span", { className: "flex-1", children: language.name }),
-                      language.code === value && /* @__PURE__ */ jsx(CheckIcon2, { className: "text-primary-800 dark:text-primary-400 h-4 w-4" })
-                    ]
-                  },
-                  language.code
-                ))
-              }
-            )
-          }
+        isOpen && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              "data-slot": "language-selector-dropdown",
+              className: cn(
+                "min-w-[180px] overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg",
+                "dark:border-gray-700 dark:bg-gray-800",
+                "animate-in fade-in slide-in-from-top-1 duration-150"
+              ),
+              children: /* @__PURE__ */ jsx("ul", { role: "listbox", "aria-label": label, className: "py-1", children: languages.map((language) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": language.code === value,
+                  onClick: () => handleSelect(language),
+                  onKeyDown: (e) => e.key === "Enter" && handleSelect(language),
+                  "data-slot": "language-selector-option",
+                  className: cn(
+                    "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors",
+                    language.code === value ? "bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400" : "text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                  ),
+                  children: [
+                    showFlags && language.flag && /* @__PURE__ */ jsx("span", { className: "text-base", children: language.flag }),
+                    /* @__PURE__ */ jsx("span", { className: "flex-1", children: language.name }),
+                    language.code === value && /* @__PURE__ */ jsx(CheckIcon2, { className: "text-primary-800 dark:text-primary-400 h-4 w-4" })
+                  ]
+                },
+                language.code
+              )) })
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -27077,9 +27131,15 @@ function PatientOverflowMenu({
 }) {
   const [open, setOpen] = React10.useState(false);
   const menuRef = React10.useRef(null);
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({ open, placement: "bottom-end" });
+  const outsideRefs = React10.useMemo(
+    () => [menuRef, floatingRef],
+    [floatingRef]
+  );
   useClickOutside(
-    menuRef,
-    React10.useCallback(() => setOpen(false), [])
+    outsideRefs,
+    React10.useCallback(() => setOpen(false), []),
+    open
   );
   useEscapeKey(
     React10.useCallback(() => setOpen(false), []),
@@ -27089,174 +27149,188 @@ function PatientOverflowMenu({
     onAction?.(action);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "relative", ref: menuRef, children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        onClick: () => setOpen(!open),
-        "aria-label": "Patient actions menu",
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        className: "h-8 w-8",
-        children: /* @__PURE__ */ jsx(MoreVertical, { size: 18 })
-      }
-    ),
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "menu",
-        "aria-label": "Patient actions",
-        className: cn(
-          "absolute top-full right-0 z-50 mt-1",
-          "w-[calc(100vw_-_2rem)] md:w-auto",
-          "border-border bg-card rounded-xl border py-1 shadow-lg",
-          "max-h-[calc(100vh_-_3rem)] overflow-y-auto md:max-h-[calc(100vh_-_4rem)]",
-          "motion-safe:animate-fade-in"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      ref: (node) => {
+        menuRef.current = node;
+        anchorRef.current = node;
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: () => setOpen(!open),
+            "aria-label": "Patient actions menu",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            className: "h-8 w-8",
+            children: /* @__PURE__ */ jsx(MoreVertical, { size: 18 })
+          }
         ),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-[13rem]", children: [
-            /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: "Quick Actions" }) }),
-            /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                icon: /* @__PURE__ */ jsx(Pencil, { size: 15 }),
-                label: "Edit Patient",
-                onClick: () => handleAction("edit-patient")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                icon: /* @__PURE__ */ jsx(Phone, { size: 15 }),
-                label: "Contact",
-                onClick: () => handleAction("contact")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                icon: /* @__PURE__ */ jsx(Send, { size: 15 }),
-                label: "Send Message",
-                onClick: () => handleAction("send-message")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                icon: /* @__PURE__ */ jsx(Calendar, { size: 15 }),
-                label: "Schedule Appointment",
-                onClick: () => handleAction("schedule-appointment")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                icon: /* @__PURE__ */ jsx(Printer, { size: 15 }),
-                label: "Print Summary",
-                onClick: () => handleAction("print-summary")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              OverflowMenuItem,
-              {
-                icon: /* @__PURE__ */ jsx(Download, { size: 15 }),
-                label: "Export Record",
-                onClick: () => handleAction("export-record")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "border-border my-1 border-t md:my-0 md:border-t-0 md:border-l" }),
-          /* @__PURE__ */ jsxs("div", { className: "md:min-w-[26rem]", children: [
-            /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: "Add" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-2", children: [
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(ClipboardPlus, { size: 15 }),
-                  label: "Task",
-                  onClick: () => handleAction("add-task")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(Stethoscope, { size: 15 }),
-                  label: "Encounter",
-                  onClick: () => handleAction("add-encounter")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(ClipboardCheck, { size: 15 }),
-                  label: "Due List Item",
-                  onClick: () => handleAction("add-due-list")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(FilePlus, { size: 15 }),
-                  label: "Order Request",
-                  onClick: () => handleAction("add-order")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(FileCheck, { size: 15 }),
-                  label: "eSign Request",
-                  onClick: () => handleAction("add-esign")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(Wheat, { size: 15 }),
-                  label: "Allergy",
-                  onClick: () => handleAction("add-allergy")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(Pill, { size: 15 }),
-                  label: "Medication",
-                  onClick: () => handleAction("add-medication")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(Bell, { size: 15 }),
-                  label: "Alert",
-                  onClick: () => handleAction("add-alert")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(FileHeart, { size: 15 }),
-                  label: "Condition",
-                  onClick: () => handleAction("add-condition")
-                }
+        open && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              role: "menu",
+              "aria-label": "Patient actions",
+              className: cn(
+                "w-[calc(100vw_-_2rem)] md:w-auto",
+                "border-border bg-card rounded-xl border py-1 shadow-lg",
+                "overflow-y-auto",
+                "motion-safe:animate-fade-in"
               ),
-              /* @__PURE__ */ jsx(
-                OverflowMenuItem,
-                {
-                  icon: /* @__PURE__ */ jsx(HeartPulse, { size: 15 }),
-                  label: "Vitals",
-                  onClick: () => handleAction("add-vitals")
-                }
-              )
-            ] })
-          ] })
-        ] })
-      }
-    )
-  ] });
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row", children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-[13rem]", children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: "Quick Actions" }) }),
+                  /* @__PURE__ */ jsx(
+                    OverflowMenuItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Pencil, { size: 15 }),
+                      label: "Edit Patient",
+                      onClick: () => handleAction("edit-patient")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    OverflowMenuItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Phone, { size: 15 }),
+                      label: "Contact",
+                      onClick: () => handleAction("contact")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    OverflowMenuItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Send, { size: 15 }),
+                      label: "Send Message",
+                      onClick: () => handleAction("send-message")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    OverflowMenuItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Calendar, { size: 15 }),
+                      label: "Schedule Appointment",
+                      onClick: () => handleAction("schedule-appointment")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    OverflowMenuItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Printer, { size: 15 }),
+                      label: "Print Summary",
+                      onClick: () => handleAction("print-summary")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    OverflowMenuItem,
+                    {
+                      icon: /* @__PURE__ */ jsx(Download, { size: 15 }),
+                      label: "Export Record",
+                      onClick: () => handleAction("export-record")
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "border-border my-1 border-t md:my-0 md:border-t-0 md:border-l" }),
+                /* @__PURE__ */ jsxs("div", { className: "md:min-w-[26rem]", children: [
+                  /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: "Add" }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(ClipboardPlus, { size: 15 }),
+                        label: "Task",
+                        onClick: () => handleAction("add-task")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(Stethoscope, { size: 15 }),
+                        label: "Encounter",
+                        onClick: () => handleAction("add-encounter")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(ClipboardCheck, { size: 15 }),
+                        label: "Due List Item",
+                        onClick: () => handleAction("add-due-list")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(FilePlus, { size: 15 }),
+                        label: "Order Request",
+                        onClick: () => handleAction("add-order")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(FileCheck, { size: 15 }),
+                        label: "eSign Request",
+                        onClick: () => handleAction("add-esign")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(Wheat, { size: 15 }),
+                        label: "Allergy",
+                        onClick: () => handleAction("add-allergy")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(Pill, { size: 15 }),
+                        label: "Medication",
+                        onClick: () => handleAction("add-medication")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(Bell, { size: 15 }),
+                        label: "Alert",
+                        onClick: () => handleAction("add-alert")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(FileHeart, { size: 15 }),
+                        label: "Condition",
+                        onClick: () => handleAction("add-condition")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      OverflowMenuItem,
+                      {
+                        icon: /* @__PURE__ */ jsx(HeartPulse, { size: 15 }),
+                        label: "Vitals",
+                        onClick: () => handleAction("add-vitals")
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
 }
 function AlertRow({ comments }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -31992,15 +32066,12 @@ function ServiceMultiSelect({
   const containerRef = React10.useRef(null);
   const inputRef = React10.useRef(null);
   const listboxId = React10.useId();
-  React10.useEffect(() => {
-    function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({ open: isOpen, matchWidth: true, maxHeight: 240 });
+  const outsideRefs = React10.useMemo(
+    () => [containerRef, floatingRef],
+    [floatingRef]
+  );
+  useClickOutside(outsideRefs, () => setIsOpen(false), isOpen);
   const filteredServices = React10.useMemo(() => {
     if (!searchTerm) return services;
     const lowerSearch = searchTerm.toLowerCase();
@@ -32041,7 +32112,10 @@ function ServiceMultiSelect({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: containerRef,
+      ref: (node) => {
+        containerRef.current = node;
+        anchorRef.current = node;
+      },
       className: "relative",
       "data-slot": "provider-service-select",
       children: [
@@ -32073,99 +32147,106 @@ function ServiceMultiSelect({
             children: selectedServices.length > 0 ? `${selectedServices.length} service${selectedServices.length > 1 ? "s" : ""} selected` : placeholder
           }
         ) }),
-        isOpen && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute z-50 mt-1 w-full rounded-md border border-neutral-200 bg-white shadow-lg",
-              "dark:border-neutral-700 dark:bg-neutral-800",
-              "max-h-60 overflow-auto"
-            ),
-            role: "listbox",
-            id: listboxId,
-            "aria-multiselectable": "true",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "sticky top-0 border-b border-neutral-200 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-800", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
+        isOpen && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              className: cn(
+                "rounded-md border border-neutral-200 bg-white shadow-lg",
+                "dark:border-neutral-700 dark:bg-neutral-800",
+                "overflow-auto"
+              ),
+              role: "listbox",
+              id: listboxId,
+              "aria-multiselectable": "true",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "sticky top-0 border-b border-neutral-200 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-800", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      value: searchTerm,
+                      onChange: (e) => setSearchTerm(e.target.value),
+                      placeholder: "Search services...",
+                      className: cn(inputVariants3({ hasIcon: true }), "pl-8"),
+                      autoFocus: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SearchIcon4, { className: "absolute top-1/2 left-4 -translate-y-1/2 text-neutral-400" })
+                ] }),
+                Object.entries(groupedServices).length > 0 ? Object.entries(groupedServices).map(
+                  ([category, categoryServices]) => /* @__PURE__ */ jsxs("div", { children: [
+                    services.some((s) => s.category) && /* @__PURE__ */ jsx("div", { className: "bg-neutral-50 px-3 py-2 text-xs font-semibold tracking-wider text-neutral-500 uppercase dark:bg-neutral-900 dark:text-neutral-400", children: category }),
+                    categoryServices.map((service) => {
+                      const isSelected = selectedServices.includes(
+                        service.value
+                      );
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => handleToggleService(service.value),
+                          className: cn(
+                            "flex w-full items-center justify-between px-3 py-2 text-left text-sm",
+                            "hover:bg-neutral-100 dark:hover:bg-neutral-700",
+                            isSelected && "bg-primary-50 dark:bg-primary-900/20"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "flex h-4 w-4 items-center justify-center rounded border",
+                                    isSelected ? "bg-primary-800 border-primary-500 text-white" : "border-neutral-300 dark:border-neutral-600"
+                                  ),
+                                  children: isSelected && /* @__PURE__ */ jsx(
+                                    "svg",
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "h-3 w-3",
+                                      viewBox: "0 0 12 12",
+                                      fill: "currentColor",
+                                      children: /* @__PURE__ */ jsx("path", { d: "M10.28 2.28L4.75 7.81 1.72 4.78a.75.75 0 00-1.06 1.06l3.75 3.75a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06z" })
+                                    }
+                                  )
+                                }
+                              ),
+                              service.label
+                            ] }),
+                            showCounts && service.count !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-neutral-400", children: [
+                              "(",
+                              service.count,
+                              ")"
+                            ] })
+                          ]
+                        },
+                        service.value
+                      );
+                    })
+                  ] }, category)
+                ) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: "No services found" }),
+                selectedServices.length > 0 && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 border-t border-neutral-200 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-800", children: /* @__PURE__ */ jsx(
+                  "button",
                   {
-                    ref: inputRef,
-                    type: "text",
-                    value: searchTerm,
-                    onChange: (e) => setSearchTerm(e.target.value),
-                    placeholder: "Search services...",
-                    className: cn(inputVariants3({ hasIcon: true }), "pl-8"),
-                    autoFocus: true
+                    type: "button",
+                    onClick: () => onSelectionChange([]),
+                    className: cn(
+                      "w-full rounded-md px-3 py-2 text-center text-sm",
+                      "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+                    ),
+                    children: "Clear selection"
                   }
-                ),
-                /* @__PURE__ */ jsx(SearchIcon4, { className: "absolute top-1/2 left-4 -translate-y-1/2 text-neutral-400" })
-              ] }),
-              Object.entries(groupedServices).length > 0 ? Object.entries(groupedServices).map(
-                ([category, categoryServices]) => /* @__PURE__ */ jsxs("div", { children: [
-                  services.some((s) => s.category) && /* @__PURE__ */ jsx("div", { className: "bg-neutral-50 px-3 py-2 text-xs font-semibold tracking-wider text-neutral-500 uppercase dark:bg-neutral-900 dark:text-neutral-400", children: category }),
-                  categoryServices.map((service) => {
-                    const isSelected = selectedServices.includes(service.value);
-                    return /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        role: "option",
-                        "aria-selected": isSelected,
-                        onClick: () => handleToggleService(service.value),
-                        className: cn(
-                          "flex w-full items-center justify-between px-3 py-2 text-left text-sm",
-                          "hover:bg-neutral-100 dark:hover:bg-neutral-700",
-                          isSelected && "bg-primary-50 dark:bg-primary-900/20"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                            /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: cn(
-                                  "flex h-4 w-4 items-center justify-center rounded border",
-                                  isSelected ? "bg-primary-800 border-primary-500 text-white" : "border-neutral-300 dark:border-neutral-600"
-                                ),
-                                children: isSelected && /* @__PURE__ */ jsx(
-                                  "svg",
-                                  {
-                                    "aria-hidden": "true",
-                                    className: "h-3 w-3",
-                                    viewBox: "0 0 12 12",
-                                    fill: "currentColor",
-                                    children: /* @__PURE__ */ jsx("path", { d: "M10.28 2.28L4.75 7.81 1.72 4.78a.75.75 0 00-1.06 1.06l3.75 3.75a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06z" })
-                                  }
-                                )
-                              }
-                            ),
-                            service.label
-                          ] }),
-                          showCounts && service.count !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-neutral-400", children: [
-                            "(",
-                            service.count,
-                            ")"
-                          ] })
-                        ]
-                      },
-                      service.value
-                    );
-                  })
-                ] }, category)
-              ) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: "No services found" }),
-              selectedServices.length > 0 && /* @__PURE__ */ jsx("div", { className: "sticky bottom-0 border-t border-neutral-200 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-800", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onSelectionChange([]),
-                  className: cn(
-                    "w-full rounded-md px-3 py-2 text-center text-sm",
-                    "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-                  ),
-                  children: "Clear selection"
-                }
-              ) })
-            ]
-          }
+                ) })
+              ]
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -32526,15 +32607,12 @@ function ProviderSelector({
   const [isOpen, setIsOpen] = React10.useState(false);
   const [searchQuery, setSearchQuery] = React10.useState("");
   const containerRef = React10.useRef(null);
-  React10.useEffect(() => {
-    function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({ open: isOpen, matchWidth: true });
+  const outsideRefs = React10.useMemo(
+    () => [containerRef, floatingRef],
+    [floatingRef]
+  );
+  useClickOutside(outsideRefs, () => setIsOpen(false), isOpen);
   React10.useEffect(() => {
     function handleEscape(event) {
       if (event.key === "Escape") {
@@ -32573,7 +32651,10 @@ function ProviderSelector({
     {
       "data-slot": "provider-selector",
       className: cn("relative", className),
-      ref: containerRef,
+      ref: (node) => {
+        containerRef.current = node;
+        anchorRef.current = node;
+      },
       children: [
         label && /* @__PURE__ */ jsx(
           "label",
@@ -32694,138 +32775,143 @@ function ProviderSelector({
             ]
           }
         ),
-        isOpen && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-slot": "provider-selector-dropdown",
-            className: "border-border bg-card absolute z-50 mt-1 w-full overflow-hidden rounded-lg border shadow-lg",
-            children: [
-              searchable && /* @__PURE__ */ jsx("div", { className: "border-border border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    "aria-hidden": "true",
-                    className: "text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2",
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: 2,
-                        d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    "data-slot": "provider-selector-search",
-                    placeholder: searchPlaceholder,
-                    value: searchQuery,
-                    onChange: (e) => setSearchQuery(e.target.value),
-                    className: "border-input bg-background text-foreground placeholder:text-muted-foreground focus:ring-ring w-full rounded-md border py-2 pr-4 pl-9 text-sm focus:ring-1 focus:outline-none",
-                    autoFocus: true
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredProviders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-4 py-6 text-center", children: "No providers found" }) : filteredProviders.map((provider) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  "data-slot": "provider-selector-option",
-                  onClick: () => handleSelect(provider),
-                  className: cn(
-                    "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors",
-                    "hover:bg-muted",
-                    selectedProvider?.id === provider.id && "bg-primary/10"
+        isOpen && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              "data-slot": "provider-selector-dropdown",
+              className: "border-border bg-card flex flex-col overflow-hidden rounded-lg border shadow-lg",
+              children: [
+                searchable && /* @__PURE__ */ jsx("div", { className: "border-border shrink-0 border-b p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      className: "text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                        }
+                      )
+                    }
                   ),
-                  children: [
-                    provider.logoUrl ? /* @__PURE__ */ jsx(
-                      "img",
-                      {
-                        "data-slot": "provider-selector-option-avatar",
-                        src: provider.logoUrl,
-                        alt: provider.name,
-                        className: "h-8 w-8 rounded object-cover"
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        "data-slot": "provider-selector-option-avatar",
-                        className: "bg-muted text-muted-foreground flex h-8 w-8 items-center justify-center rounded text-sm font-medium",
-                        children: getInitials2(provider.name)
-                      }
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      "data-slot": "provider-selector-search",
+                      placeholder: searchPlaceholder,
+                      value: searchQuery,
+                      onChange: (e) => setSearchQuery(e.target.value),
+                      className: "border-input bg-background text-foreground placeholder:text-muted-foreground focus:ring-ring w-full rounded-md border py-2 pr-4 pl-9 text-sm focus:ring-1 focus:outline-none",
+                      autoFocus: true
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "max-h-64 min-h-0 overflow-y-auto", children: filteredProviders.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-4 py-6 text-center", children: "No providers found" }) : filteredProviders.map((provider) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "provider-selector-option",
+                    onClick: () => handleSelect(provider),
+                    className: cn(
+                      "flex w-full items-center gap-3 px-4 py-3 text-left transition-colors",
+                      "hover:bg-muted",
+                      selectedProvider?.id === provider.id && "bg-primary/10"
                     ),
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            "data-slot": "provider-selector-option-name",
-                            className: "text-foreground font-medium",
-                            children: provider.name
-                          }
-                        ),
-                        provider.code && /* @__PURE__ */ jsxs(
-                          "span",
-                          {
-                            "data-slot": "provider-selector-option-code",
-                            className: "text-xs text-neutral-600 dark:text-neutral-400",
-                            children: [
-                              "(",
-                              provider.code,
-                              ")"
-                            ]
-                          }
-                        ),
-                        provider.isActive === false && /* @__PURE__ */ jsx(
-                          "span",
+                    children: [
+                      provider.logoUrl ? /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          "data-slot": "provider-selector-option-avatar",
+                          src: provider.logoUrl,
+                          alt: provider.name,
+                          className: "h-8 w-8 rounded object-cover"
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "data-slot": "provider-selector-option-avatar",
+                          className: "bg-muted text-muted-foreground flex h-8 w-8 items-center justify-center rounded text-sm font-medium",
+                          children: getInitials2(provider.name)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-slot": "provider-selector-option-name",
+                              className: "text-foreground font-medium",
+                              children: provider.name
+                            }
+                          ),
+                          provider.code && /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              "data-slot": "provider-selector-option-code",
+                              className: "text-xs text-neutral-600 dark:text-neutral-400",
+                              children: [
+                                "(",
+                                provider.code,
+                                ")"
+                              ]
+                            }
+                          ),
+                          provider.isActive === false && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-slot": "provider-selector-option-badge",
+                              className: "bg-muted rounded px-1.5 py-0.5 text-xs font-medium text-neutral-600 dark:text-neutral-400",
+                              children: "Inactive"
+                            }
+                          )
+                        ] }),
+                        (provider.location || provider.type) && /* @__PURE__ */ jsx(
+                          "div",
                           {
-                            "data-slot": "provider-selector-option-badge",
-                            className: "bg-muted rounded px-1.5 py-0.5 text-xs font-medium text-neutral-600 dark:text-neutral-400",
-                            children: "Inactive"
+                            "data-slot": "provider-selector-option-detail",
+                            className: "text-muted-foreground truncate text-sm",
+                            children: [provider.type, provider.location].filter(Boolean).join(" \u2022 ")
                           }
                         )
                       ] }),
-                      (provider.location || provider.type) && /* @__PURE__ */ jsx(
-                        "div",
+                      selectedProvider?.id === provider.id && /* @__PURE__ */ jsx(
+                        "svg",
                         {
-                          "data-slot": "provider-selector-option-detail",
-                          className: "text-muted-foreground truncate text-sm",
-                          children: [provider.type, provider.location].filter(Boolean).join(" \u2022 ")
+                          "aria-hidden": "true",
+                          className: "text-primary-800 dark:text-primary-400 h-5 w-5 flex-shrink-0",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          stroke: "currentColor",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M5 13l4 4L19 7"
+                            }
+                          )
                         }
                       )
-                    ] }),
-                    selectedProvider?.id === provider.id && /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        "aria-hidden": "true",
-                        className: "text-primary-800 dark:text-primary-400 h-5 w-5 flex-shrink-0",
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        stroke: "currentColor",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M5 13l4 4L19 7"
-                          }
-                        )
-                      }
-                    )
-                  ]
-                },
-                provider.id
-              )) })
-            ]
-          }
+                    ]
+                  },
+                  provider.id
+                )) })
+              ]
+            }
+          ),
+          document.body
         )
       ]
     }