@servicetitan/anvil2 2.7.1 → 2.9.0

package/dist/{floating-ui.react-aKYfs-aw.js → AiMark-DR-w6Nbm.js}

@@ -1,8 +1,40 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useLayoutEffect, useEffect, useRef } from 'react';
-import { i as isShadowRoot, a as isHTMLElement, u as useFloating$1, b as isElement, g as getWindow, c as getOverflowAncestors, d as isWebKit, e as isLastTraversableNode, f as getParentNode, h as getComputedStyle, j as getNodeName } from './floating-ui.react-dom-imrk9N49.js';
-import { t as tabbable, i as isTabbable } from './index.esm-K9kxJhLx.js';
+import { forwardRef, useLayoutEffect, useEffect, useRef, createContext, useContext, useCallback, useId as useId$1, useImperativeHandle, useMemo, useState } from 'react';
+import { I as Icon } from './Icon-DuIlne4x.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { L as Link } from './Link-jTvzyXca.js';
+import { T as Tooltip } from './Tooltip-C1PBRnJv.js';
+import { B as Button, A as AiMarkIconAnimated } from './Button-BdrrhBTI.js';
+import { i as isShadowRoot, h as isHTMLElement, u as useFloating$1, j as isElement, k as getWindow, m as getOverflowAncestors, n as isWebKit, p as isLastTraversableNode, q as getParentNode, r as getComputedStyle, t as getNodeName, s as safeShowPopover, b as safeHidePopover, a as autoUpdate, o as offset, g as size, v as autoPlacement, f as flip, d as shift, e as arrow$1, l as limitShift } from './floating-ui.react-dom-CHrYz13o.js';
+import { t as tabbable, i as isTabbable, a as usePopoverTransitionStates } from './usePopoverTransitionStates-CDXCdyKa.js';
 import 'react-dom';
+import { useTrackingId } from './useTrackingId.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { u as useMergeRefs$1 } from './useMergeRefs-Dfmtq9cI.js';
+import { D as DialogContext } from './DialogContext-DBgtApl9.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
+
+import './AiMark.css';const SvgAiMark = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "m10.5 4.5 2.387 6.614 6.613 2.385-6.613 2.387-2.388 6.614-2.386-6.613L1.5 13.499l6.613-2.386zm7.5-3 1.193 3.307L22.5 6l-3.307 1.193L18 10.5l-1.193-3.307L13.5 6l3.307-1.193z" }));
+
+const SvgAiMarkGradient = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fill: "url(#a)", d: "m10.5 4.5 2.387 6.614 6.613 2.385-6.613 2.387-2.388 6.614-2.386-6.613L1.5 13.499l6.613-2.386z" }), /* @__PURE__ */ React.createElement("path", { fill: "url(#b)", d: "m18 1.5 1.193 3.307L22.5 6l-3.307 1.193L18 10.5l-1.193-3.307L13.5 6l3.307-1.193z" }), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "a", x1: 19.5, x2: 3.604, y1: 14.583, y2: 20.367, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "light-dark(#026EE4, #77C5EA)" }), /* @__PURE__ */ React.createElement("stop", { offset: 1, stopColor: "light-dark(#27AEEE, #D0D8E1)" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "b", x1: 22.5, x2: 14.552, y1: 6.542, y2: 9.433, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "light-dark(#026EE4, #77C5EA)" }), /* @__PURE__ */ React.createElement("stop", { offset: 1, stopColor: "light-dark(#27AEEE, #D0D8E1)" }))));
+
+const fieldLabelButtonStyles = {
+	"field-label-button": "_field-label-button_l6rj1_2",
+	"field-label-button__inner": "_field-label-button__inner_l6rj1_36",
+	"field-label-button-scaled": "_field-label-button-scaled_l6rj1_51"};
+
+const FieldLabelButton = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cx(fieldLabelButtonStyles["field-label-button"], className),
+    ...props,
+    children: /* @__PURE__ */ jsx("span", { className: fieldLabelButtonStyles["field-label-button__inner"], children })
+  }
+));
+FieldLabelButton.displayName = "FieldLabelButton";
 
 function activeElement(doc) {
   let activeElement = doc.activeElement;
@@ -2370,5 +2402,735 @@ function safePolygon(options) {
   return fn;
 }
 
-export { FloatingFocusManager as F, useFloating as a, useRole as b, useHover as c, useFocus as d, useClick as e, useDismiss as f, useInteractions as g, safePolygon as s, useMergeRefs as u };
-//# sourceMappingURL=floating-ui.react-aKYfs-aw.js.map
+const PopoverContext = createContext(null);
+
+function usePopoverContext() {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error(
+      "Popover compound components must be used within a <Popover> component."
+    );
+  }
+  return context;
+}
+
+const PopoverClose = forwardRef(
+  function PopoverClose2(props, ref) {
+    const { onClick, ...rest } = props;
+    const { closePopover } = usePopoverContext();
+    const trackingId = useTrackingId({
+      name: "PopoverClose",
+      data: { children: childrenToString(props.children) },
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const handleClick = useCallback(
+      (event) => {
+        closePopover();
+        onClick?.(event);
+      },
+      [closePopover, onClick]
+    );
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        "data-tracking-id": trackingId,
+        "data-anv": "popover-close",
+        ...rest,
+        onClick: handleClick
+      }
+    );
+  }
+);
+PopoverClose.displayName = "PopoverClose";
+
+const PopoverButton = forwardRef(
+  function PopoverButton2(props, ref) {
+    const { children, ...rest } = props;
+    const { refs, getReferenceProps, openState, triggerId } = usePopoverContext();
+    const trackingId = useTrackingId({
+      name: "PopoverButton",
+      data: {
+        children: childrenToString(props.children),
+        appearance: props.appearance,
+        icon: props.icon,
+        size: props.size,
+        type: props.type
+      },
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const buttonRef = useMergeRefs$1([refs.setReference, ref]);
+    const buttonProps = {
+      id: triggerId,
+      "data-anv": "popover-button",
+      "data-tracking-id": trackingId,
+      "data-state": openState ? "open" : "closed",
+      ...getReferenceProps(rest),
+      children
+    };
+    return /* @__PURE__ */ jsx(Button, { ref: buttonRef, ...buttonProps });
+  }
+);
+PopoverButton.displayName = "PopoverButton";
+
+const content = "_content_yo27y_2";
+const scroller = "_scroller_yo27y_29";
+const arrow = "_arrow_yo27y_37";
+const styles$1 = {
+	content: content,
+	scroller: scroller,
+	arrow: arrow,
+	"no-padding": "_no-padding_yo27y_62"
+};
+
+const PopoverContent = forwardRef(
+  function PopoverContent2(props, ref) {
+    const {
+      children,
+      className,
+      style,
+      onScroll,
+      onScrollCapture,
+      scrollerRef,
+      hideWhileClosed = false,
+      ...rest
+    } = props;
+    const {
+      floatingContext,
+      refs,
+      floatingStyles,
+      middlewareData,
+      getFloatingProps,
+      openState,
+      actualPlacement,
+      arrowRef,
+      modal,
+      openOnHover,
+      noPadding,
+      enableCaret,
+      triggerId,
+      role
+    } = usePopoverContext();
+    const scrollContainerRef = useRef(null);
+    const mergedFloatingRef = useMergeRefs$1([refs.setFloating, ref]);
+    const mergedScrollerRef = useMergeRefs$1([scrollContainerRef, scrollerRef]);
+    const hasBeenOpenRef = useRef(false);
+    useEffect(() => {
+      if (openState) {
+        hasBeenOpenRef.current = true;
+      } else if (hasBeenOpenRef.current && !openOnHover) {
+        const activeEl = document.activeElement;
+        const floating = floatingContext.elements.floating;
+        const shouldReturnFocus = role === "dialog" ? !activeEl || activeEl === document.body || floating?.contains(activeEl) : floating?.contains(activeEl);
+        if (shouldReturnFocus) {
+          floatingContext.elements.reference?.focus();
+        }
+      }
+    }, [
+      openState,
+      openOnHover,
+      floatingContext.elements.reference,
+      floatingContext.elements.floating,
+      role
+    ]);
+    useLayoutEffect(() => {
+      if (openState && scrollContainerRef.current) {
+        scrollContainerRef.current.scrollTop = 0;
+        scrollContainerRef.current.scrollLeft = 0;
+      }
+    }, [openState]);
+    const arrowX = middlewareData.arrow?.x ?? null;
+    const arrowY = middlewareData.arrow?.y ?? null;
+    const baseSide = actualPlacement.split("-")[0];
+    const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[baseSide];
+    const arrowDeg = staticSide === "top" ? 180 : staticSide === "bottom" ? 0 : staticSide === "left" ? 90 : 270;
+    const arrowWidth = arrowRef.current?.offsetWidth ?? 14;
+    const arrowStyle = {};
+    if (arrowX != null) arrowStyle.left = `${arrowX}px`;
+    if (arrowY != null) arrowStyle.top = `${arrowY}px`;
+    arrowStyle[staticSide] = `${-arrowWidth + 2}px`;
+    arrowStyle.transform = `rotate(${arrowDeg}deg)`;
+    const referenceId = floatingContext.elements.reference?.id ?? triggerId;
+    const defaultLabelProps = role === "dialog" && !("aria-label" in rest) && !("aria-labelledby" in rest) ? { "aria-labelledby": referenceId } : {};
+    const tabIndexOverride = openOnHover ? { tabIndex: -1 } : {};
+    const rawFloatingProps = getFloatingProps({
+      ...defaultLabelProps,
+      ...tabIndexOverride,
+      ...rest
+    });
+    const { role: _suppressedRole, ...floatingPropsWithoutRole } = rawFloatingProps;
+    const floatingProps = role === "dialog" ? rawFloatingProps : floatingPropsWithoutRole;
+    const contentDiv = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        popover: "manual",
+        "data-anv": "popover-content",
+        className: cx(className, styles$1["content"], {
+          [styles$1["no-padding"]]: noPadding
+        }),
+        ref: mergedFloatingRef,
+        style: { ...floatingStyles, ...style },
+        ...floatingProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles$1.scroller,
+              role: "presentation",
+              tabIndex: -1,
+              ref: mergedScrollerRef,
+              onScroll,
+              onScrollCapture,
+              children: hideWhileClosed ? openState ? children : null : children
+            }
+          ),
+          enableCaret && /* @__PURE__ */ jsx("span", { className: styles$1["arrow"], ref: arrowRef, style: arrowStyle, children: /* @__PURE__ */ jsx("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" }) }) })
+        ]
+      }
+    );
+    if (role !== "dialog") {
+      return contentDiv;
+    }
+    return /* @__PURE__ */ jsx(
+      FloatingFocusManager,
+      {
+        context: floatingContext,
+        modal: modal ?? false,
+        disabled: !openState || openOnHover,
+        children: contentDiv
+      }
+    );
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+
+function PopoverTrigger(props) {
+  const { children } = props;
+  const { refs, getReferenceProps, openState, triggerId } = usePopoverContext();
+  return children({
+    ...getReferenceProps({
+      ref: refs.setReference
+    }),
+    id: triggerId,
+    "data-state": openState ? "open" : "closed"
+  });
+}
+PopoverTrigger.displayName = "PopoverTrigger";
+
+const Popover = Object.assign(
+  forwardRef(function PopoverInner(props, ref) {
+    const {
+      children,
+      role: roleProp = "dialog",
+      modal,
+      open,
+      defaultOpen = false,
+      onClose,
+      onClickOutside,
+      openOnHover = false,
+      delay = 100,
+      enableCaret,
+      noPadding,
+      matchReferenceWidth,
+      fixedWidth,
+      fillAvailableHeight,
+      maxHeight,
+      fitScreen,
+      minHeight = "2.875rem",
+      disableCloseOnClickOutside,
+      disableCloseOnEscape,
+      onOpenAnimationStart,
+      onOpenAnimationComplete,
+      onCloseAnimationStart,
+      onCloseAnimationComplete
+    } = props;
+    const isAuto = props.placement === "auto";
+    const floatingPlacement = isAuto ? "bottom" : props.placement ?? "bottom";
+    const allowedPlacements = isAuto ? props.placementConfig?.allowedPlacements : void 0;
+    const fallbackPlacements = !isAuto ? props.placementConfig?.fallbackPlacements : void 0;
+    const uid = useId$1();
+    const cleanUid = uid.replace(/:/g, "");
+    const triggerId = `popover-trigger-${cleanUid}`;
+    const isControlled = typeof open !== "undefined";
+    const arrowRef = useRef(null);
+    const isPointerEventRef = useRef(false);
+    const processMinHeight = typeof minHeight === "string" ? minHeight : `${minHeight}px`;
+    const dialogContext = useContext(DialogContext);
+    const [openState, setOpenState] = useOptionallyControlledState({
+      controlledValue: open,
+      defaultValue: defaultOpen
+    });
+    const openStateRef = useRef(openState);
+    openStateRef.current = openState;
+    useEffect(() => {
+      if (!disableCloseOnClickOutside) return;
+      if (roleProp !== "dialog") return;
+      const setTrue = () => {
+        isPointerEventRef.current = true;
+      };
+      const setFalse = () => {
+        setTimeout(() => {
+          isPointerEventRef.current = false;
+        }, 0);
+      };
+      document.addEventListener("pointerdown", setTrue);
+      document.addEventListener("pointerup", setFalse);
+      return () => {
+        document.removeEventListener("pointerdown", setTrue);
+        document.removeEventListener("pointerup", setFalse);
+      };
+    }, [disableCloseOnClickOutside, roleProp]);
+    const handleOpenChange = useCallback(
+      (nextOpen) => {
+        if (!nextOpen && disableCloseOnClickOutside && isPointerEventRef.current)
+          return;
+        if (!nextOpen && !openOnHover) onClose?.();
+        setOpenState(nextOpen);
+      },
+      [openOnHover, onClose, setOpenState, disableCloseOnClickOutside]
+    );
+    const openPopover = useCallback(() => {
+      setOpenState(true);
+    }, [setOpenState]);
+    const closePopover = useCallback(() => {
+      if (!openStateRef.current) return;
+      if (!openOnHover) onClose?.();
+      setOpenState(false);
+    }, [openOnHover, onClose, setOpenState]);
+    const {
+      refs,
+      floatingStyles,
+      context: floatingContext,
+      placement: actualPlacement,
+      middlewareData
+    } = useFloating({
+      open: openState,
+      onOpenChange: handleOpenChange,
+      placement: floatingPlacement,
+      strategy: "absolute",
+      middleware: [
+        offset(8),
+        size({
+          padding: 5,
+          apply({ rects, availableHeight, elements }) {
+            Object.assign(elements.floating.style, {
+              ...matchReferenceWidth ? { width: `${rects.reference.width}px` } : fixedWidth ? { width: "40dvw" } : {},
+              ...fillAvailableHeight ? {
+                height: `${availableHeight - 20}px`,
+                minHeight: processMinHeight
+              } : {},
+              ...maxHeight ? {
+                minHeight: processMinHeight,
+                height: fitScreen ? typeof maxHeight === "string" ? maxHeight : `${maxHeight}px` : void 0,
+                maxHeight: fitScreen ? `${availableHeight - 20}px` : typeof maxHeight === "string" ? maxHeight : `${maxHeight}px`
+              } : {},
+              ...fitScreen && !maxHeight ? {
+                minHeight: processMinHeight,
+                maxHeight: `${availableHeight - 20}px`
+              } : {}
+            });
+          }
+        }),
+        isAuto ? autoPlacement({ allowedPlacements, padding: 5 }) : flip({
+          crossAxis: false,
+          fallbackAxisSideDirection: "none",
+          fallbackPlacements,
+          padding: 5
+        }),
+        shift({
+          padding: 5,
+          crossAxis: false,
+          limiter: limitShift()
+        }),
+        arrow$1({ element: arrowRef, padding: 5 })
+      ],
+      whileElementsMounted: autoUpdate
+    });
+    const role = useRole(floatingContext, { role: roleProp });
+    const hover = useHover(floatingContext, {
+      enabled: openOnHover,
+      delay: { open: delay, close: 100 },
+      handleClose: safePolygon()
+    });
+    const focus = useFocus(floatingContext, { enabled: openOnHover });
+    const click = useClick(floatingContext, {
+      enabled: !openOnHover
+    });
+    const dismiss = useDismiss(floatingContext, {
+      escapeKey: !disableCloseOnEscape,
+      outsidePress: !disableCloseOnClickOutside ? (event) => {
+        onClickOutside?.(event);
+        return true;
+      } : false
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+      role,
+      hover,
+      focus,
+      click,
+      dismiss
+    ]);
+    useEffect(() => {
+      const floatingEl = refs.floating.current;
+      if (!floatingEl) return;
+      if (openState) {
+        if (dialogContext) {
+          if (dialogContext.ref?.current?.open) {
+            safeShowPopover(floatingEl);
+            dialogContext.setHasOpenPopover?.(true);
+          }
+          return;
+        }
+        safeShowPopover(floatingEl);
+      } else {
+        safeHidePopover(floatingEl);
+        dialogContext?.setHasOpenPopover?.(false);
+      }
+    }, [openState, refs.floating, dialogContext]);
+    usePopoverTransitionStates(refs.floating.current ?? void 0, openState, {
+      onOpenAnimationStart,
+      onOpenAnimationComplete,
+      onCloseAnimationStart,
+      onCloseAnimationComplete
+    });
+    useImperativeHandle(ref, () => ({ openPopover, closePopover }), [
+      openPopover,
+      closePopover
+    ]);
+    const value = useMemo(
+      () => ({
+        floatingContext,
+        refs: {
+          setReference: refs.setReference,
+          setFloating: refs.setFloating
+        },
+        floatingStyles,
+        middlewareData,
+        getReferenceProps,
+        getFloatingProps,
+        triggerId,
+        openState,
+        openPopover,
+        closePopover,
+        controlled: isControlled,
+        actualPlacement,
+        arrowRef,
+        modal,
+        openOnHover,
+        noPadding,
+        enableCaret,
+        role: roleProp
+      }),
+      [
+        floatingContext,
+        refs.setReference,
+        refs.setFloating,
+        floatingStyles,
+        middlewareData,
+        getReferenceProps,
+        getFloatingProps,
+        triggerId,
+        openState,
+        openPopover,
+        closePopover,
+        // stable — does not depend on openState (uses openStateRef)
+        isControlled,
+        actualPlacement,
+        arrowRef,
+        modal,
+        openOnHover,
+        noPadding,
+        enableCaret,
+        roleProp
+      ]
+    );
+    return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
+  }),
+  {
+    /**
+     * PopoverTrigger component for creating custom trigger elements.
+     *
+     * Features:
+     * - Render prop pattern for full control over the trigger element
+     * - ARIA attributes and event handlers injected via getReferenceProps
+     *
+     * @example
+     * <Popover.Trigger>
+     *   {(props) => (
+     *     <Button {...props}>
+     *       Click to open popover
+     *     </Button>
+     *   )}
+     * </Popover.Trigger>
+     */
+    Trigger: PopoverTrigger,
+    /**
+     * PopoverContent component for the main popover content area.
+     *
+     * Features:
+     * - HTML Popover API top-layer rendering (popover="manual")
+     * - Floating UI positioning via refs.setFloating and floatingStyles
+     * - FloatingFocusManager for focus trapping (modal) or Tab-out closing (non-modal)
+     * - Arrow/caret indicator with position computed from middlewareData.arrow
+     * - Scroll position reset when the popover opens
+     * - Optional scrollerRef for external scroll access
+     *
+     * @example
+     * <Popover.Content>
+     *   <p>Popover content</p>
+     *   <Popover.Close>Close</Popover.Close>
+     * </Popover.Content>
+     */
+    Content: PopoverContent,
+    /**
+     * PopoverClose component for closing the popover.
+     *
+     * Features:
+     * - Supports all Button component props and styling
+     * - Closes the popover on click via closePopover
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Popover.Close>Close</Popover.Close>
+     *
+     * @example
+     * <Popover.Close appearance="secondary" size="small">
+     *   Cancel
+     * </Popover.Close>
+     */
+    Close: PopoverClose,
+    /**
+     * PopoverButton component for creating button-style triggers.
+     *
+     * Features:
+     * - Button styling and behavior with all Button props
+     * - ARIA attributes and event handlers injected via getReferenceProps
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Popover.Button>Click to open</Popover.Button>
+     *
+     * @example
+     * <Popover.Button appearance="primary" size="large" icon={InfoIcon}>
+     *   Information
+     * </Popover.Button>
+     */
+    Button: PopoverButton
+  }
+);
+Popover.displayName = "Popover";
+
+const container = "_container_1h61l_2";
+const small = "_small_1h61l_53";
+const medium = "_medium_1h61l_60";
+const large = "_large_1h61l_67";
+const xlarge = "_xlarge_1h61l_74";
+const styles = {
+	container: container,
+	"tooltip-trigger": "_tooltip-trigger_1h61l_17",
+	"button-wrapper": "_button-wrapper_1h61l_27",
+	"collapse-block": "_collapse-block_1h61l_34",
+	"with-padding": "_with-padding_1h61l_34",
+	"collapse-inline": "_collapse-inline_1h61l_37",
+	small: small,
+	medium: medium,
+	large: large,
+	xlarge: xlarge
+};
+
+const DEFAULT_TOOLTIP_CONTENT = "AI can make mistakes.";
+const DEFAULT_PRIVACY_HREF = "https://www.servicetitan.com/legal/privacy-policy";
+function DefaultPopoverContent() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    DEFAULT_TOOLTIP_CONTENT,
+    " ",
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: DEFAULT_PRIVACY_HREF,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        appearance: "secondary",
+        children: "Learn more"
+      }
+    )
+  ] });
+}
+const ICON_PIXEL_SIZES$1 = {
+  small: 12,
+  medium: 16,
+  large: 24,
+  xlarge: 32
+};
+const FIELD_LABEL_BUTTON_MIN_OUTER_PX = 28;
+function fieldLabelButtonDimensionsForIcon(iconPx) {
+  const outerPx = Math.max(FIELD_LABEL_BUTTON_MIN_OUTER_PX, iconPx + 4);
+  const innerPx = outerPx - 4;
+  return { outerPx, innerPx };
+}
+function fieldLabelButtonScaleStyle(outerPx, innerPx) {
+  return {
+    "--field-label-button-outer": `${outerPx}px`,
+    "--field-label-button-inner": `${innerPx}px`
+  };
+}
+const AiMarkInteractive = ({
+  config,
+  size,
+  inheritColor,
+  containerClassName,
+  forceAnimate = false
+}) => {
+  const [isActive, setIsActive] = useState(false);
+  const iconPixelSize = ICON_PIXEL_SIZES$1[size];
+  const { outerPx, innerPx } = fieldLabelButtonDimensionsForIcon(iconPixelSize);
+  const fieldLabelButtonScale = fieldLabelButtonScaleStyle(outerPx, innerPx);
+  const animatedIcon = /* @__PURE__ */ jsx(
+    AiMarkIconAnimated,
+    {
+      animate: forceAnimate || isActive,
+      size: iconPixelSize,
+      inheritColor
+    }
+  );
+  const interactionHandlers = {
+    onMouseEnter: () => setIsActive(true),
+    onMouseLeave: () => setIsActive(false),
+    onFocus: () => setIsActive(true),
+    onBlur: () => setIsActive(false)
+  };
+  if (config.type === "popover") {
+    const { content: content2, triggerLabel: triggerLabel2, props: props2, contentProps } = config;
+    const popoverContent = content2 ?? /* @__PURE__ */ jsx(DefaultPopoverContent, {});
+    return /* @__PURE__ */ jsx("div", { className: containerClassName, "data-anv": "ai-mark-interactive", children: /* @__PURE__ */ jsxs(Popover, { role: "dialog", ...props2, children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { children: (triggerProps) => /* @__PURE__ */ jsx("span", { className: styles["button-wrapper"], tabIndex: -1, children: /* @__PURE__ */ jsx(
+        FieldLabelButton,
+        {
+          ...triggerProps,
+          "aria-label": triggerLabel2,
+          className: fieldLabelButtonStyles["field-label-button-scaled"],
+          style: fieldLabelButtonScale,
+          onMouseEnter: (e) => {
+            interactionHandlers.onMouseEnter();
+            triggerProps.onMouseEnter?.(e);
+          },
+          onMouseLeave: (e) => {
+            interactionHandlers.onMouseLeave();
+            triggerProps.onMouseLeave?.(e);
+          },
+          onFocus: (e) => {
+            interactionHandlers.onFocus();
+            triggerProps.onFocus?.(e);
+          },
+          onBlur: (e) => {
+            interactionHandlers.onBlur();
+            triggerProps.onBlur?.(e);
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            triggerProps.onClick?.(e);
+          },
+          children: animatedIcon
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Popover.Content, { ...contentProps, children: popoverContent })
+    ] }) });
+  }
+  const { content, triggerLabel, props } = config;
+  const tooltipContent = content ?? DEFAULT_TOOLTIP_CONTENT;
+  return /* @__PURE__ */ jsx("div", { className: containerClassName, "data-anv": "ai-mark-interactive", children: /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles["tooltip-trigger"], children: /* @__PURE__ */ jsx("span", { className: styles["button-wrapper"], tabIndex: -1, children: /* @__PURE__ */ jsx(
+      FieldLabelButton,
+      {
+        "aria-label": triggerLabel,
+        ...interactionHandlers,
+        className: fieldLabelButtonStyles["field-label-button-scaled"],
+        style: fieldLabelButtonScale,
+        children: animatedIcon
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Tooltip.Content, { children: tooltipContent })
+  ] }) });
+};
+
+const ICON_PIXEL_SIZES = {
+  small: 12,
+  medium: 16,
+  large: 24,
+  xlarge: 32
+};
+const AiMark = (props) => {
+  const {
+    type = "default",
+    popoverOrTooltipConfig,
+    forceAnimate = false,
+    collapsePadding,
+    className,
+    size = "medium",
+    ...rest
+  } = props;
+  const inheritColor = type === "default";
+  const collapseBlock = collapsePadding === "block" || collapsePadding === "all";
+  const collapseInline = collapsePadding === "inline" || collapsePadding === "all";
+  const baseContainerClassName = cx(
+    styles["container"],
+    styles[size],
+    {
+      [styles["collapse-block"]]: collapseBlock,
+      [styles["collapse-inline"]]: collapseInline
+    },
+    className
+  );
+  if (popoverOrTooltipConfig) {
+    return /* @__PURE__ */ jsx(
+      AiMarkInteractive,
+      {
+        config: popoverOrTooltipConfig,
+        size,
+        inheritColor,
+        containerClassName: baseContainerClassName,
+        forceAnimate
+      }
+    );
+  }
+  const nonInteractiveContainerClassName = cx(
+    baseContainerClassName,
+    styles["with-padding"]
+  );
+  if (forceAnimate) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: nonInteractiveContainerClassName,
+        style: { color: rest.color },
+        children: /* @__PURE__ */ jsx(
+          AiMarkIconAnimated,
+          {
+            animate: true,
+            size: ICON_PIXEL_SIZES[size],
+            inheritColor
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: nonInteractiveContainerClassName,
+      style: { color: rest.color },
+      "data-anv": "ai-mark-icon",
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          ...rest,
+          svg: type === "gradient" ? SvgAiMarkGradient : SvgAiMark,
+          size
+        }
+      )
+    }
+  );
+};
+
+export { AiMark as A, FieldLabelButton as F, Popover as P, usePopoverContext as a, useMergeRefs as u };
+//# sourceMappingURL=AiMark-DR-w6Nbm.js.map