@servicetitan/anvil2 1.32.1 → 1.33.0

package/dist/{ProgressBar-CgpalFK8-DxfzF8hg.js → ProgressBar-DojG9LHF-nlymvlXw.js}

@@ -1,26 +1,24 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, forwardRef, useId, createContext, useContext, useCallback, useMemo, cloneElement, isValidElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
 import { I as Icon } from './Icon-DuwR7O2z-C_rTZRSc.js';
-import { a as SvgCheckCircle, S as SvgError, b as SvgInfo } from './check_circle-BGfigqq-.js';
+import { b as SvgCheckCircle, S as SvgError, a as SvgWarning, c as SvgInfo } from './check_circle-DJhuiYqa.js';
 import { t as tabbable, q as useDelayGroup, F as FloatingPortal, b as FloatingArrow, p as computePosition, n as autoUpdate, o as offset, f as flip, d as shift, e as arrow$1, l as limitShift, r as useDelayGroupContext, c as useFloating, h as useHover, i as safePolygon, v as useFocus, j as useDismiss, k as useRole, m as useInteractions } from './floating-ui.react-Domgunz0.js';
 import { a as PortalProviderContext } from './PortalProvider-9lXkQ0xY-BKoGegS1.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { T as Text } from './Text-BCRKWTMM-B3ftA79H.js';
 import { B as Button } from './Button-CEDmdZ-2-DJVJnigb.js';
-import { A as Alert } from './Alert-BcjnX40X-DdR5a1fS.js';
-import { F as Flex } from './Flex-DlNiHX1G-CBMDzqYU.js';
+import { A as Alert } from './Alert-BcjnX40X-DK8meb2Z.js';
+import { F as Flex } from './Flex-CLu2TnzF-aW2OhBYv.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-3B2XYWSr-5ZanZ8Ew.js';
-import { H as Helper } from './Helper-DBmwQvEP-BB75un4q.js';
-import { u as useSwipe } from './useSwipe-DIUHs7T5-DIUHs7T5.js';
 import { S as SrOnly } from './SrOnly-BXm1DGl3-BJVodjQp.js';
-import { g as getActiveElement } from './getActiveElements-CqR6e_P--CqR6e_P-.js';
+import { u as useSwipe } from './useSwipe-DIUHs7T5-DIUHs7T5.js';
 import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
 import { T as ThemeProvider, a as ThemeProviderContext } from './ThemeProvider-DrK12Ru--CcKMzgE3.js';
 import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
 import { u as useTooltipLegacyGroup } from './HammerProvider-C9QySDSZ-3uQ0NgD4.js';
 
-import './ProgressBar-CgpalFK8.css';/**
+import './ProgressBar-DojG9LHF.css';/**
  * Convert array of 16 byte values to UUID string format of the form:
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
@@ -129,114 +127,176 @@ const useKeyboardFocusables = (element, options = {
   return { focusables, updateFocusables };
 };
 
-const dialog = "_dialog_1uzo4_3";
-const container$1 = "_container_1uzo4_23";
-const content$2 = "_content_1uzo4_36";
-const header$1 = "_header_1uzo4_43";
-const footer$1 = "_footer_1uzo4_63";
-const large$1 = "_large_1uzo4_100";
-const fullscreen = "_fullscreen_1uzo4_100";
-const sticky$1 = "_sticky_1uzo4_119";
+const getActiveElement = (activeDocument) => {
+  const activeElement = activeDocument.activeElement;
+  if (!activeElement) {
+    return activeElement;
+  }
+  if (!activeElement.shadowRoot) {
+    return activeElement;
+  }
+  if (activeElement.shadowRoot) {
+    return getActiveElement(activeElement.shadowRoot);
+  }
+  return activeElement;
+};
+
+const label = "_label_iolth_3";
+const required = "_required_iolth_47";
 const styles$6 = {
-	dialog: dialog,
-	container: container$1,
-	content: content$2,
-	header: header$1,
-	"close-container": "_close-container_1uzo4_56",
-	footer: footer$1,
-	large: large$1,
-	fullscreen: fullscreen,
-	sticky: sticky$1,
-	"close-button": "_close-button_1uzo4_125"
+	label: label,
+	"top-container": "_top-container_iolth_38",
+	"label-text": "_label-text_iolth_43",
+	required: required,
+	"info-trigger": "_info-trigger_iolth_52",
+	"info-content": "_info-content_iolth_57"
 };
 
-const DialogCancelButton = forwardRef((props, ref) => {
-  const { onClick, ...rest } = props;
-  const { close } = useDialogContext();
-  const onClickHandler = (e) => {
-    onClick?.(e);
-    close();
+const content$1 = "_content_tjoaw_3";
+const scroller = "_scroller_tjoaw_30";
+const arrow = "_arrow_tjoaw_33";
+const trigger = "_trigger_tjoaw_39";
+const styles$5 = {
+	content: content$1,
+	scroller: scroller,
+	arrow: arrow,
+	trigger: trigger
+};
+
+function useTooltipContext() {
+  const context = useContext(TooltipContext);
+  const invokerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const arrowRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!invokerRef.current) return;
+    context?.setInvoker?.(invokerRef.current);
+    if (!context?.openState) return;
+    context.openTooltip();
+  }, [context, invokerRef]);
+  useLayoutEffect(() => {
+    if (!popoverRef.current) return;
+    context?.setTooltip?.(popoverRef.current);
+    context?.setRootNode?.(popoverRef.current.getRootNode());
+    if (!arrowRef.current) return;
+    context?.setArrowElement?.(arrowRef.current);
+  }, [context, popoverRef]);
+  const onMouseEnterHandler = () => {
+    context?.openTooltip();
   };
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      "aria-label": "Close dialog",
-      "data-anv": "dialog-cancel-button",
-      onClick: onClickHandler,
-      ref,
-      ...rest
+  const onMouseLeaveHandler = () => {
+    context?.closeTooltip();
+  };
+  const onFocusHandler = () => {
+    if (context?.controlled) return;
+    context?.openTooltip();
+  };
+  const onBlurHandler = () => {
+    if (context?.controlled) return;
+    context?.closeTooltip();
+  };
+  const onKeyDownHandler = (e) => {
+    if (!context?.openState) return;
+    if (e.code === "Escape" && !context.controlled) {
+      context?.closeTooltip();
+      return;
     }
-  );
-});
-DialogCancelButton.displayName = "DialogCancelButton";
+  };
+  if (!context || !invokerRef || !popoverRef) return;
+  return {
+    invoker: {
+      ref: invokerRef,
+      element: context.invoker,
+      onMouseEnter: onMouseEnterHandler,
+      onMouseLeave: onMouseLeaveHandler,
+      onKeyDown: onKeyDownHandler,
+      onFocus: onFocusHandler,
+      onBlur: onBlurHandler,
+      "aria-haspopup": true,
+      "aria-expanded": context.openState,
+      "aria-details": context.tooltipId,
+      "data-state": context.openState ? "open" : "closed",
+      "aria-describedby": context.tooltipId
+    },
+    tooltip: {
+      ref: popoverRef,
+      element: context.popover,
+      id: context.tooltipId,
+      show: context.openTooltip,
+      close: context.closeTooltip,
+      style: context.tooltipStyle,
+      arrowRef,
+      key: context.resetKey
+    },
+    setOpen: context.setOpenState,
+    open: context.openState,
+    controlled: context.controlled,
+    placement: context.placement,
+    disableFlipFallback: context.disableFlipFallback
+  };
+}
 
-const DialogHeader = forwardRef(
-  (props, ref) => {
-    const { children, className, ...rest } = props;
-    const headerClassNames = cx(className, styles$6["header"]);
-    return /* @__PURE__ */ jsxs(
-      "header",
-      {
-        className: headerClassNames,
-        "data-anv": "dialog-header",
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children }),
-          /* @__PURE__ */ jsx("span", { className: styles$6["close-container"], children: /* @__PURE__ */ jsx(
-            DialogCancelButton,
-            {
-              className: styles$6["close-button"],
-              size: "small",
-              appearance: "ghost",
-              "aria-label": "Close dialog",
-              icon: SvgClose
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-DialogHeader.displayName = "DialogHeader";
+function supportsPopover() {
+  return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, "popover");
+}
 
-const DialogFooter = forwardRef(
-  (props, ref) => {
-    const { children, className, sticky = false, ...rest } = props;
-    const footerClassNames = cx(styles$6["footer"], className, {
-      [styles$6["sticky"]]: sticky
-    });
-    return /* @__PURE__ */ jsx(
-      "footer",
-      {
-        className: footerClassNames,
-        "data-anv": "dialog-footer",
-        ref,
-        ...rest,
-        children
-      }
+const TooltipLegacyContext = createContext(null);
+const useTooltipLegacyContext = () => {
+  const context = useContext(TooltipLegacyContext);
+  if (context == null) {
+    throw new Error(
+      "TooltipLegacy components must be wrapped in <TooltipLegacy />"
     );
   }
-);
-DialogFooter.displayName = "DialogFooter";
+  return context;
+};
 
-const DialogContent = forwardRef(
-  (props, ref) => {
-    const { children, className, ...rest } = props;
-    const contentClassNames = cx(styles$6["content"], className);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: contentClassNames,
-        "data-anv": "dialog-content",
-        ref,
-        ...rest,
-        children
+const styles$4 = {
+	"content-legacy": "_content-legacy_19gkz_4",
+	"arrow-legacy": "_arrow-legacy_19gkz_30",
+	"trigger-legacy": "_trigger-legacy_19gkz_33"
+};
+
+const ATTRIBUTE_NAME_LIST = "data-anv-dialogs";
+const ATTRIBUTE_NAME_BOOL = "data-anv-dialogs-open";
+const useDialogScrollLock = ({
+  open,
+  id,
+  enableScrollChaining,
+  elementRef
+}) => {
+  useEffect(() => {
+    if (enableScrollChaining) return () => {
+    };
+    const root = elementRef.current?.getRootNode();
+    if (!(root instanceof ShadowRoot)) return () => {
+    };
+    const updateDialogAttributes = (shouldAdd) => {
+      const currentDialogs = root.host.getAttribute(ATTRIBUTE_NAME_LIST)?.split(" ").filter(Boolean) ?? [];
+      const newDialogs = new Set(currentDialogs);
+      if (shouldAdd) {
+        newDialogs.add(id);
+      } else {
+        newDialogs.delete(id);
       }
-    );
-  }
-);
-DialogContent.displayName = "DialogContent";
+      const dialogList = Array.from(newDialogs);
+      root.host.setAttribute(ATTRIBUTE_NAME_LIST, dialogList.join(" "));
+      if (dialogList.length > 0) {
+        root.host.setAttribute(ATTRIBUTE_NAME_BOOL, "true");
+      } else {
+        root.host.removeAttribute(ATTRIBUTE_NAME_BOOL);
+      }
+    };
+    updateDialogAttributes(open);
+    return () => {
+      if (elementRef.current?.getRootNode() === root) {
+        updateDialogAttributes(false);
+      }
+    };
+  }, [open, id, enableScrollChaining, elementRef]);
+};
+
+const DialogContext = createContext(null);
 
 const ToastProviderContext = createContext({
   toasts: [],
@@ -340,7 +400,7 @@ const hidden = "_hidden_lombm_25";
 const stacked = "_stacked_lombm_89";
 const open = "_open_lombm_184";
 const close = "_close_lombm_185";
-const styles$5 = {
+const styles$3 = {
 	popover: popover,
 	toaster: toaster,
 	hidden: hidden,
@@ -607,7 +667,7 @@ const Toast = forwardRef(
     ...alertProps
   }, ref) => {
     const { setToastHeights, extraToastsVisible, isDialogToaster } = useToasts();
-    const closeToast = useCloseToast(styles$5.close);
+    const closeToast = useCloseToast(styles$3.close);
     const toastPositionStyles = useToastPositionStyles(index);
     const toastWrapperRef = useRef(null);
     const timerRef = useRef();
@@ -615,18 +675,18 @@ const Toast = forwardRef(
     const createdAtRef = useRef(createdAt ?? 0);
     const hasBeenStackedRef = useRef(false);
     const [transitionClass, setTransitionClass] = useState(
-      styles$5.hidden
+      styles$3.hidden
     );
     const [toastOpened, setToastOpened] = useState(false);
     const duration = actions ? false : durationProp;
     const alertClasses = cx(
-      styles$5["toast-alert"],
+      styles$3["toast-alert"],
       toastClassName,
       transitionClass
     );
     useEffect(() => {
       if (!toastOpened) {
-        setTransitionClass(styles$5.open);
+        setTransitionClass(styles$3.open);
         setTimeout(() => {
           setTransitionClass(void 0);
         }, ANIMATION_DURATION);
@@ -735,7 +795,7 @@ const Toast = forwardRef(
               hasMessage ? /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: styles$5["message-container"],
+                  className: styles$3["message-container"],
                   id: `toast-message-${alertProps.id}`,
                   children: message
                 }
@@ -753,7 +813,7 @@ const Toast = forwardRef(
                   value: progress
                 }
               ) }) : null,
-              actions ? /* @__PURE__ */ jsxs("div", { className: styles$5["alert-action"], children: [
+              actions ? /* @__PURE__ */ jsxs("div", { className: styles$3["alert-action"], children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -782,6 +842,53 @@ const Toast = forwardRef(
 );
 Toast.displayName = "Toast";
 
+const helper = "_helper_1mtj6_2";
+const messages = "_messages_1mtj6_9";
+const styles$2 = {
+	helper: helper,
+	messages: messages,
+	"error-container": "_error-container_1mtj6_15",
+	"error-icon": "_error-icon_1mtj6_21"
+};
+
+const Helper = forwardRef((props, ref) => {
+  const {
+    id,
+    hint,
+    description,
+    errorAriaLive = "assertive",
+    errorMessage,
+    maxLength,
+    isTyping,
+    inputLength = 0,
+    showCounter
+  } = props;
+  return /* @__PURE__ */ jsxs("div", { className: styles$2["helper"], ref, id, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$2["messages"], children: [
+      errorMessage ? /* @__PURE__ */ jsxs("div", { className: styles$2["error-container"], children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            inherit: true,
+            className: styles$2["error-icon"],
+            "aria-hidden": true,
+            svg: SvgWarning
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styles$2["error-message"], "aria-live": errorAriaLive, children: errorMessage })
+      ] }) : hint ?? null,
+      description ? /* @__PURE__ */ jsx("div", { className: styles$2["description-container"], children: description ? /* @__PURE__ */ jsx("span", { children: description }) : null }) : null
+    ] }),
+    showCounter ? /* @__PURE__ */ jsx("div", { className: styles$2["counter"], children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      inputLength,
+      "/",
+      maxLength
+    ] }) }) : null,
+    isTyping && !!maxLength ? maxLength - inputLength >= 1 ? /* @__PURE__ */ jsx(SrOnly, { children: /* @__PURE__ */ jsx("span", { "aria-live": "polite", "aria-atomic": "true", children: `${maxLength - inputLength} character${maxLength - inputLength !== 1 ? "s" : ""} left` }) }) : /* @__PURE__ */ jsx(SrOnly, { children: /* @__PURE__ */ jsx("span", { role: "alert", children: "Maximum characters count reached" }) }) : null
+  ] });
+});
+Helper.displayName = "Helper";
+
 function useHotkeyFocus({
   disabled,
   hotkey,
@@ -940,10 +1047,10 @@ const ToastStack = forwardRef(
     const showMoreButton = !extraToastsVisible && toastCount > toastsBeforeStack;
     const extraToastsLength = toastCount - toastsBeforeStack;
     const showMoreButtonText = `${extraToastsLength} more message${extraToastsLength > 1 ? "s" : ""}`;
-    const toastStackClasses = cx(styles$5["toast-stack"], className, {
-      [styles$5["show-more-button"]]: showMoreButton,
-      [styles$5["show-extra-toast"]]: extraToastsVisible,
-      [styles$5["disable-animations"]]: disableAnimations
+    const toastStackClasses = cx(styles$3["toast-stack"], className, {
+      [styles$3["show-more-button"]]: showMoreButton,
+      [styles$3["show-extra-toast"]]: extraToastsVisible,
+      [styles$3["disable-animations"]]: disableAnimations
     });
     const handleToastStackFocusHover = () => {
       if (toastPausedStatus === "resumed" || toastPausedStatus === void 0) {
@@ -979,13 +1086,13 @@ const ToastStack = forwardRef(
               const isStacked = !extraToastsVisible && index < toastCount - toastsBeforeStack;
               const isLastToastDisplayed = index === toastCount - toastsBeforeStack;
               const isHidden = index < toastCount - toastsBeforeStack - 2;
-              const toastClasses = cx(styles$5.toast, toastClassName);
-              const toastContainerClasses = cx(styles$5["toast-wrapper"], {
-                [styles$5.stacked]: isStacked || isLastToastDisplayed,
-                [styles$5["stack-one"]]: isStacked && index === toastCount - toastsBeforeStack - 1,
-                [styles$5["stack-two"]]: isStacked && index === toastCount - toastsBeforeStack - 2,
-                [styles$5["stacked-extra"]]: isHidden,
-                [styles$5["stacked-show-extra"]]: extraToastsVisible
+              const toastClasses = cx(styles$3.toast, toastClassName);
+              const toastContainerClasses = cx(styles$3["toast-wrapper"], {
+                [styles$3.stacked]: isStacked || isLastToastDisplayed,
+                [styles$3["stack-one"]]: isStacked && index === toastCount - toastsBeforeStack - 1,
+                [styles$3["stack-two"]]: isStacked && index === toastCount - toastsBeforeStack - 2,
+                [styles$3["stacked-extra"]]: isHidden,
+                [styles$3["stacked-show-extra"]]: extraToastsVisible
               });
               const handleOnClose = (e) => {
                 onClose?.(e);
@@ -1012,12 +1119,12 @@ const ToastStack = forwardRef(
             showMoreButton && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$5["show-more-button-container"],
+                className: styles$3["show-more-button-container"],
                 style: showMoreButtonPositionStyles,
                 children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    className: styles$5["show-collapse-button"],
+                    className: styles$3["show-collapse-button"],
                     onClick: handleShowMoreButtonClick,
                     appearance: "secondary",
                     tabIndex: 0,
@@ -1034,10 +1141,10 @@ const ToastStack = forwardRef(
           ]
         }
       ),
-      extraToastsVisible && /* @__PURE__ */ jsx("div", { className: styles$5["show-collapse-button-container"], children: /* @__PURE__ */ jsx(
+      extraToastsVisible && /* @__PURE__ */ jsx("div", { className: styles$3["show-collapse-button-container"], children: /* @__PURE__ */ jsx(
         Button,
         {
-          className: styles$5["show-collapse-button"],
+          className: styles$3["show-collapse-button"],
           onClick: handleToastStackBlur,
           appearance: "secondary",
           children: "Collapse Messages"
@@ -1078,7 +1185,7 @@ const ToasterPopover = forwardRef(
         }
       };
     }, [toastCount, isDialogToaster]);
-    return /* @__PURE__ */ jsx("div", { ref: combinedRef, className: styles$5.popover, popover: "manual", children: props.children });
+    return /* @__PURE__ */ jsx("div", { ref: combinedRef, className: styles$3.popover, popover: "manual", children: props.children });
   }
 );
 ToasterPopover.displayName = "ToasterPopover";
@@ -1146,7 +1253,7 @@ const ToasterContent = forwardRef(
       });
       dispatchEvent(DialogToasterEvent);
     }, [isDialogToaster]);
-    const closeToast = useCloseToast(styles$5.close);
+    const closeToast = useCloseToast(styles$3.close);
     useEffect(() => {
       let timeout;
       updateDialogToasterStorage(isDialogToaster);
@@ -1245,8 +1352,8 @@ const ToasterContent = forwardRef(
         updateDialogToasterStorage(false);
       };
     }, []);
-    const toasterClasses = cx(styles$5.toaster, {
-      [styles$5["hidden"]]: shouldHideToaster,
+    const toasterClasses = cx(styles$3.toaster, {
+      [styles$3["hidden"]]: shouldHideToaster,
       [`${className}`]: className != null
     });
     return /* @__PURE__ */ jsx(
@@ -1279,219 +1386,25 @@ const Toaster = forwardRef(
 Toaster.displayName = "Toaster";
 ToasterContent.displayName = "ToasterContent";
 
-const DialogContext = createContext(null);
-const DialogElement = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      open = false,
-      children,
-      onOpen,
-      onOpenChange,
-      onClose,
-      onCancel,
-      onKeyDown,
-      fullScreen = false,
-      disableCloseOnEscape = false,
-      disableCloseOnClickOutside = false,
-      size,
-      enableScrollChaining,
-      ...rest
-    } = props;
-    const elRef = useRef(null);
-    const contentRef = useRef(null);
-    const [hasOpenPopover, setHasOpenPopover] = useState(false);
-    const id = useId();
-    const DialogClassNames = cx([styles$6["dialog"]], className, {
-      [styles$6["fullscreen"]]: fullScreen,
-      [styles$6["large"]]: size === "large"
-    });
-    const { focusables } = useKeyboardFocusables(contentRef, {
-      observeChange: true
-    });
-    useEffect(() => {
-      if (!open || enableScrollChaining) return;
-      let blockDocumentScroll = false;
-      const content = contentRef.current;
-      const scrollHandler = (e) => {
-        const target = e.target;
-        const isShadow2 = contentRef.current?.getRootNode() instanceof ShadowRoot;
-        const isOverflowing = elRef.current && elRef.current.scrollHeight > elRef.current.clientHeight;
-        if (isShadow2) {
-          if (blockDocumentScroll) {
-            e.preventDefault();
-            return;
-          }
-          return;
-        }
-        if (!isOverflowing || !content?.contains(target)) {
-          e.preventDefault();
-          return;
-        }
-        return;
-      };
-      const shadowScrollHandler = (e) => {
-        const target = e.target;
-        const isTargetInsideContent = content?.contains(target);
-        const isOverflowing = elRef.current && elRef.current.scrollHeight > elRef.current.clientHeight;
-        blockDocumentScroll = !isTargetInsideContent;
-        if (!isOverflowing || !content?.contains(target)) {
-          e.preventDefault();
-        }
-        return;
-      };
-      const isShadow = content?.getRootNode() instanceof ShadowRoot;
-      document.addEventListener("wheel", scrollHandler, {
-        passive: false
-      });
-      if (isShadow) {
-        content?.getRootNode().addEventListener("wheel", shadowScrollHandler, {
-          passive: false
-        });
-      }
-      return () => {
-        document.getRootNode().removeEventListener("wheel", scrollHandler);
-        if (isShadow) {
-          content?.getRootNode().removeEventListener("wheel", shadowScrollHandler);
-        }
-      };
-    }, [enableScrollChaining, open]);
-    useEffect(() => {
-      if (typeof document === "undefined" || disableCloseOnClickOutside) return;
-      const onClickOutsideHandler = (e) => {
-        if (hasOpenPopover) return;
-        if (e.composedPath()[0] === elRef.current) {
-          onClose?.();
-        }
-      };
-      document.addEventListener("mousedown", onClickOutsideHandler);
-      return () => document.removeEventListener("mousedown", onClickOutsideHandler);
-    }, [disableCloseOnClickOutside, onClose, onOpenChange, hasOpenPopover]);
-    const initial = useRef(true);
-    useEffect(() => {
-      if (initial.current) {
-        initial.current = false;
-      } else {
-        onOpenChange?.(open);
-      }
-      if (open) {
-        onOpen?.();
-        elRef.current?.showModal();
-        return;
-      }
-      setTimeout(() => {
-        elRef.current?.close();
-      }, 1);
-    }, [id, onOpen, onOpenChange, open]);
-    useEffect(() => {
-      if (!open) return;
-      if (!focusables) return;
-      const activeElement = getActiveElement(document);
-      if (!activeElement) return;
-      if (activeElement.dataset.anv !== "dialog-header-close-button" && focusables.includes(activeElement)) {
-        return;
-      }
-      if (focusables[0]?.dataset.anv === "dialog-header-close-button" && focusables[1]) {
-        focusables[1].focus();
-      } else {
-        focusables[0]?.focus();
-      }
-    }, [open, focusables]);
-    const onKeyDownHandler = (e) => {
-      onKeyDown?.(e);
-      if (e.code === "Escape") {
-        e.preventDefault();
-        if (disableCloseOnEscape) return;
-        if (hasOpenPopover) return;
-        onClose?.();
-        return;
-      }
-      if (e.code === "Tab") {
-        if (e.shiftKey && e.target === focusables?.[0]) {
-          e.preventDefault();
-          focusables[focusables.length - 1]?.focus();
-          return;
-        }
-        if (e.target === focusables?.[focusables.length - 1] && !e.shiftKey) {
-          e.preventDefault();
-          focusables[0].focus();
-          return;
-        }
-      }
-    };
-    const close = useCallback(() => {
-      onClose?.();
-    }, [onClose]);
-    return (
-      // dialog element does seem to be interactive on MDN guideline
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      /* @__PURE__ */ jsxs(
-        "dialog",
-        {
-          className: DialogClassNames,
-          "data-anv": "dialog",
-          ref: useMergeRefs([ref, elRef]),
-          onKeyDown: onKeyDownHandler,
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsx(ToastProvider, { isDialogToaster: open, children: /* @__PURE__ */ jsx(ToasterPopover, { children: /* @__PURE__ */ jsx(ToasterContent, { id: "dialog-toaster" }) }) }),
-            /* @__PURE__ */ jsx(
-              DialogContext.Provider,
-              {
-                value: { close, ref: elRef, hasOpenPopover, setHasOpenPopover },
-                children: /* @__PURE__ */ jsx(
-                  "section",
-                  {
-                    ref: contentRef,
-                    className: styles$6["container"],
-                    "data-open": open,
-                    children
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    );
-  }
-);
-function useDialogContext() {
-  const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error(
-      "useDialogContext must be used within a DialogContextProvider"
-    );
-  }
-  return context;
-}
-DialogElement.displayName = "Dialog";
-const Dialog = Object.assign(DialogElement, {
-  Header: DialogHeader,
-  Footer: DialogFooter,
-  Content: DialogContent,
-  CancelButton: DialogCancelButton
-});
-
-const drawer = "_drawer_pysn1_3";
-const container = "_container_pysn1_29";
-const content$1 = "_content_pysn1_42";
-const header = "_header_pysn1_49";
-const footer = "_footer_pysn1_73";
-const remove = "_remove_pysn1_91";
-const large = "_large_pysn1_100";
-const sticky = "_sticky_pysn1_103";
-const styles$4 = {
+const drawer = "_drawer_vyd6b_3";
+const container = "_container_vyd6b_29";
+const content = "_content_vyd6b_42";
+const header = "_header_vyd6b_49";
+const footer = "_footer_vyd6b_73";
+const remove = "_remove_vyd6b_91";
+const large = "_large_vyd6b_100";
+const sticky = "_sticky_vyd6b_103";
+const styles$1 = {
 	drawer: drawer,
 	container: container,
-	content: content$1,
+	content: content,
 	header: header,
-	"close-container": "_close-container_pysn1_66",
+	"close-container": "_close-container_vyd6b_66",
 	footer: footer,
 	remove: remove,
 	large: large,
 	sticky: sticky,
-	"close-button": "_close-button_pysn1_109"
+	"close-button": "_close-button_vyd6b_109"
 };
 
 const DrawerCancelButton = forwardRef((props, ref) => {
@@ -1517,12 +1430,12 @@ DrawerCancelButton.displayName = "DrawerCancelButton";
 const DrawerHeader = forwardRef(
   (props, ref) => {
     const { children } = props;
-    return /* @__PURE__ */ jsxs("header", { className: styles$4.header, "data-anv": "drawer-header", ref, children: [
+    return /* @__PURE__ */ jsxs("header", { className: styles$1.header, "data-anv": "drawer-header", ref, children: [
       /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h1", children }),
-      /* @__PURE__ */ jsx("span", { className: styles$4["close-container"], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("span", { className: styles$1["close-container"], children: /* @__PURE__ */ jsx(
         DrawerCancelButton,
         {
-          className: styles$4["close-button"],
+          className: styles$1["close-button"],
           size: "small",
           appearance: "ghost",
           "aria-label": "Close drawer",
@@ -1538,8 +1451,8 @@ DrawerHeader.displayName = "DrawerHeader";
 const DrawerFooter = forwardRef(
   (props, ref) => {
     const { children, sticky = false, ...rest } = props;
-    const DrawerFooterCX = cx(styles$4.footer, {
-      [styles$4["sticky"]]: sticky
+    const DrawerFooterCX = cx(styles$1.footer, {
+      [styles$1["sticky"]]: sticky
     });
     return /* @__PURE__ */ jsx(
       "footer",
@@ -1558,7 +1471,7 @@ DrawerFooter.displayName = "DrawerFooter";
 const DrawerContent = forwardRef(
   (props, ref) => {
     const { children, ...rest } = props;
-    const DrawerContentCX = cx(styles$4.content, {});
+    const DrawerContentCX = cx(styles$1.content, {});
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -1596,15 +1509,22 @@ const DrawerElement = forwardRef(
     const toasterRef = useRef(null);
     const combinedRef = useMergeRefs([elRef, ref]);
     const [remove, setRemove] = useState(false);
-    const DrawerClassNames = cx([styles$4.drawer], className, {
-      [styles$4.remove]: remove,
-      [styles$4.large]: size === "large"
+    const id = useId();
+    const DrawerClassNames = cx([styles$1.drawer], className, {
+      [styles$1.remove]: remove,
+      [styles$1.large]: size === "large"
     });
     const { focusables } = useKeyboardFocusables(contentRef, {
       observeChange: false
     });
     const firstFocusable = focusables?.[0];
     const lastFocusable = focusables?.[focusables.length - 1];
+    useDialogScrollLock({
+      open,
+      id,
+      enableScrollChaining,
+      elementRef: elRef
+    });
     useEffect(() => {
       if (open) {
         onOpen?.();
@@ -1631,53 +1551,6 @@ const DrawerElement = forwardRef(
         focusables[0]?.focus();
       }
     }, [open, focusables]);
-    useEffect(() => {
-      if (!open || enableScrollChaining) return;
-      let blockDocumentScroll = false;
-      const content = contentRef.current;
-      const scrollHandler = (e) => {
-        const target = e.target;
-        const isShadow2 = contentRef.current?.getRootNode() instanceof ShadowRoot;
-        const isOverflowing = elRef.current && elRef.current.scrollHeight > elRef.current.clientHeight;
-        if (isShadow2) {
-          if (blockDocumentScroll) {
-            e.preventDefault();
-            return;
-          }
-          return;
-        }
-        if (!isOverflowing || !content?.contains(target)) {
-          e.preventDefault();
-          return;
-        }
-        return;
-      };
-      const shadowScrollHandler = (e) => {
-        const target = e.target;
-        const isTargetInsideContent = content?.contains(target);
-        const isOverflowing = elRef.current && elRef.current.scrollHeight > elRef.current.clientHeight;
-        blockDocumentScroll = !isTargetInsideContent;
-        if (!isOverflowing || !content?.contains(target)) {
-          e.preventDefault();
-        }
-        return;
-      };
-      const isShadow = content?.getRootNode() instanceof ShadowRoot;
-      document.addEventListener("wheel", scrollHandler, {
-        passive: false
-      });
-      if (isShadow) {
-        content?.getRootNode().addEventListener("wheel", shadowScrollHandler, {
-          passive: false
-        });
-      }
-      return () => {
-        document.getRootNode().removeEventListener("wheel", scrollHandler);
-        if (isShadow) {
-          content?.getRootNode().removeEventListener("wheel", shadowScrollHandler);
-        }
-      };
-    }, [enableScrollChaining, open]);
     const onCancelHandler = (e) => {
       e.preventDefault();
       if (disableCloseOnEscape) return;
@@ -1725,6 +1598,7 @@ const DrawerElement = forwardRef(
         {
           className: DrawerClassNames,
           "data-anv": "drawer",
+          "data-anv-scroll-chaining": enableScrollChaining,
           ref: combinedRef,
           onCancel: onCancelHandler,
           onClick: onClickHandler,
@@ -1736,7 +1610,7 @@ const DrawerElement = forwardRef(
               "section",
               {
                 ref: contentRef,
-                className: styles$4.container,
+                className: styles$1.container,
                 "data-open": open,
                 children
               }
@@ -1764,122 +1638,6 @@ const Drawer = Object.assign(DrawerElement, {
   CancelButton: DrawerCancelButton
 });
 
-function supportsPopover() {
-  return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, "popover");
-}
-
-const label = "_label_iolth_3";
-const required = "_required_iolth_47";
-const styles$3 = {
-	label: label,
-	"top-container": "_top-container_iolth_38",
-	"label-text": "_label-text_iolth_43",
-	required: required,
-	"info-trigger": "_info-trigger_iolth_52",
-	"info-content": "_info-content_iolth_57"
-};
-
-const content = "_content_tjoaw_3";
-const scroller = "_scroller_tjoaw_30";
-const arrow = "_arrow_tjoaw_33";
-const trigger = "_trigger_tjoaw_39";
-const styles$2 = {
-	content: content,
-	scroller: scroller,
-	arrow: arrow,
-	trigger: trigger
-};
-
-function useTooltipContext() {
-  const context = useContext(TooltipContext);
-  const invokerRef = useRef(null);
-  const popoverRef = useRef(null);
-  const arrowRef = useRef(null);
-  useLayoutEffect(() => {
-    if (!invokerRef.current) return;
-    context?.setInvoker?.(invokerRef.current);
-    if (!context?.openState) return;
-    context.openTooltip();
-  }, [context, invokerRef]);
-  useLayoutEffect(() => {
-    if (!popoverRef.current) return;
-    context?.setTooltip?.(popoverRef.current);
-    context?.setRootNode?.(popoverRef.current.getRootNode());
-    if (!arrowRef.current) return;
-    context?.setArrowElement?.(arrowRef.current);
-  }, [context, popoverRef]);
-  const onMouseEnterHandler = () => {
-    context?.openTooltip();
-  };
-  const onMouseLeaveHandler = () => {
-    context?.closeTooltip();
-  };
-  const onFocusHandler = () => {
-    if (context?.controlled) return;
-    context?.openTooltip();
-  };
-  const onBlurHandler = () => {
-    if (context?.controlled) return;
-    context?.closeTooltip();
-  };
-  const onKeyDownHandler = (e) => {
-    if (!context?.openState) return;
-    if (e.code === "Escape" && !context.controlled) {
-      context?.closeTooltip();
-      return;
-    }
-  };
-  if (!context || !invokerRef || !popoverRef) return;
-  return {
-    invoker: {
-      ref: invokerRef,
-      element: context.invoker,
-      onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler,
-      onKeyDown: onKeyDownHandler,
-      onFocus: onFocusHandler,
-      onBlur: onBlurHandler,
-      "aria-haspopup": true,
-      "aria-expanded": context.openState,
-      "aria-details": context.tooltipId,
-      "data-state": context.openState ? "open" : "closed",
-      "aria-describedby": context.tooltipId
-    },
-    tooltip: {
-      ref: popoverRef,
-      element: context.popover,
-      id: context.tooltipId,
-      show: context.openTooltip,
-      close: context.closeTooltip,
-      style: context.tooltipStyle,
-      arrowRef,
-      key: context.resetKey
-    },
-    setOpen: context.setOpenState,
-    open: context.openState,
-    controlled: context.controlled,
-    placement: context.placement,
-    disableFlipFallback: context.disableFlipFallback
-  };
-}
-
-const TooltipLegacyContext = createContext(null);
-const useTooltipLegacyContext = () => {
-  const context = useContext(TooltipLegacyContext);
-  if (context == null) {
-    throw new Error(
-      "TooltipLegacy components must be wrapped in <TooltipLegacy />"
-    );
-  }
-  return context;
-};
-
-const styles$1 = {
-	"content-legacy": "_content-legacy_19gkz_4",
-	"arrow-legacy": "_arrow-legacy_19gkz_30",
-	"trigger-legacy": "_trigger-legacy_19gkz_33"
-};
-
 const TooltipLegacyContent = forwardRef(function TooltipLegacyContent2({ style, className, ...props }, propRef) {
   const {
     context: floatingContext,
@@ -1895,7 +1653,7 @@ const TooltipLegacyContent = forwardRef(function TooltipLegacyContent2({ style,
   useDelayGroup(floatingContext, { id });
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  const contentCx = cx(styles$1["content-legacy"], className);
+  const contentCx = cx(styles$4["content-legacy"], className);
   return /* @__PURE__ */ jsx(
     FloatingPortal,
     {
@@ -1918,7 +1676,7 @@ const TooltipLegacyContent = forwardRef(function TooltipLegacyContent2({ style,
               {
                 ref: context.arrowRef,
                 context: floatingContext,
-                className: styles$1["arrow-legacy"]
+                className: styles$4["arrow-legacy"]
               }
             ),
             props.children
@@ -1943,7 +1701,7 @@ const TooltipContentElement = forwardRef(
       ...rest
     } = props;
     const context = useTooltipContext();
-    const tooltipClassNames = cx(className, styles$2["content"]);
+    const tooltipClassNames = cx(className, styles$5["content"]);
     const childrenRef = useRef(null);
     const focusItems = useRef();
     const combinedStyles = {
@@ -1999,7 +1757,7 @@ const TooltipContentElement = forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles$2.scroller,
+              className: styles$5.scroller,
               role: "presentation",
               tabIndex: -1,
               ref: childrenRef,
@@ -2008,7 +1766,7 @@ const TooltipContentElement = forwardRef(
             },
             context?.tooltip.key
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$2["arrow"], ref: context?.tooltip.arrowRef, children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 14 14", children: [
+          /* @__PURE__ */ jsx("span", { className: styles$5["arrow"], ref: context?.tooltip.arrowRef, children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 14 14", children: [
             /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0,0 H14 L7,7 Q7,7 7,7 Z" }),
             /* @__PURE__ */ jsx("clipPath", { id: ":r9:", children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "14", height: "14" }) })
           ] }) })
@@ -2037,7 +1795,7 @@ const TooltipLegacyTrigger = forwardRef(function TooltipLegacyTrigger2({ childre
     "span",
     {
       ref,
-      className: cx([styles$1["trigger-legacy"]], className),
+      className: cx([styles$4["trigger-legacy"]], className),
       "data-anv": "tooltip-trigger",
       "data-state": context.open ? "open" : "closed",
       ...restOfContextProps,
@@ -2100,7 +1858,7 @@ const TooltipTriggerElement = forwardRef(
     return /* @__PURE__ */ jsx(
       "span",
       {
-        className: cx([styles$2["trigger"]], className),
+        className: cx([styles$5["trigger"]], className),
         "data-anv": "tooltip-trigger",
         ref: propRef,
         onMouseEnter: onMouseEnterHandler,
@@ -2404,30 +2162,48 @@ const Tooltip = Object.assign(TooltipElement, {
   Context: TooltipContext
 });
 
+const LabelMoreInfoIcon = ({
+  moreInfo,
+  openMoreInfo
+}) => {
+  const [open, setOpen] = useState(openMoreInfo);
+  useEffect(() => {
+    if (openMoreInfo) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+      setTimeout(() => {
+        setOpen(void 0);
+      });
+    }
+  }, [openMoreInfo]);
+  return /* @__PURE__ */ jsxs(
+    Tooltip,
+    {
+      open,
+      placement: "top",
+      offset: 5,
+      fallbackPlacements: ["right", "bottom", "left"],
+      children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles$6["info-trigger"], children: /* @__PURE__ */ jsx(Icon, { svg: SvgInfo }) }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { className: styles$6["info-content"], children: moreInfo })
+      ]
+    }
+  );
+};
 const Label = forwardRef((props, ref) => {
   const { children, className, moreInfo, required, openMoreInfo, ...rest } = props;
-  const LabelClassNames = cx([styles$3["label"]], className);
+  const LabelClassNames = cx([styles$6["label"]], className);
   return /* @__PURE__ */ jsxs("label", { className: LabelClassNames, "data-anv": "label", ref, ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$3["top-container"], "aria-atomic": "true", children: [
-      /* @__PURE__ */ jsxs("span", { className: styles$3["label-text"], children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$6["top-container"], "aria-atomic": "true", children: [
+      /* @__PURE__ */ jsxs("span", { className: styles$6["label-text"], children: [
         children,
         required ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles$3["required"], children: "*" }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles$6["required"], children: "*" }),
           /* @__PURE__ */ jsx(SrOnly, { children: "Required" })
         ] }) : null
       ] }),
-      moreInfo ? /* @__PURE__ */ jsxs(
-        Tooltip,
-        {
-          open: openMoreInfo ? openMoreInfo : void 0,
-          placement: "top",
-          fallbackPlacements: ["right", "bottom", "left"],
-          children: [
-            /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles$3["info-trigger"], children: /* @__PURE__ */ jsx(Icon, { svg: SvgInfo }) }),
-            /* @__PURE__ */ jsx(Tooltip.Content, { className: styles$3["info-content"], children: moreInfo })
-          ]
-        }
-      ) : null
+      moreInfo ? /* @__PURE__ */ jsx(LabelMoreInfoIcon, { moreInfo, openMoreInfo }) : null
     ] }),
     moreInfo ? /* @__PURE__ */ jsx(SrOnly, { children: moreInfo }) : null
   ] });
@@ -2552,5 +2328,5 @@ const ProgressBar = forwardRef(
 );
 ProgressBar.displayName = "ProgressBar";
 
-export { DialogHeader as D, Label as L, ProgressBar as P, TooltipTrigger as T, DialogFooter as a, DialogContent as b, DialogCancelButton as c, Dialog as d, DrawerCancelButton as e, DrawerFooter as f, DrawerHeader as g, DrawerContent as h, Drawer as i, TooltipContent as j, Tooltip as k, Toaster as l, DialogContext as m, DrawerContext as n, supportsPopover as s, toast as t, useKeyboardFocusables as u };
-//# sourceMappingURL=ProgressBar-CgpalFK8-DxfzF8hg.js.map
+export { DrawerCancelButton as D, Helper as H, Label as L, ProgressBar as P, TooltipTrigger as T, DrawerFooter as a, DrawerHeader as b, DrawerContent as c, Drawer as d, TooltipContent as e, Tooltip as f, getActiveElement as g, Toaster as h, DialogContext as i, useDialogScrollLock as j, ToastProvider as k, ToasterPopover as l, ToasterContent as m, DrawerContext as n, supportsPopover as s, toast as t, useKeyboardFocusables as u };
+//# sourceMappingURL=ProgressBar-DojG9LHF-nlymvlXw.js.map