@servicetitan/anvil2 3.0.3 → 3.0.5

package/dist/Page-cELP59Hm.js

@@ -0,0 +1,863 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createContext, forwardRef, useContext, useState, useLayoutEffect, useRef, useEffect, useMemo } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { P as Popover, a as usePopoverContext } from './AiMark-DjOf60tj.js';
+import { b as BreakpointLg } from './primitive-DXlHdTFb.js';
+import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
+import { S as SvgKeyboardArrowUp } from './keyboard_arrow_up-CxzK6LAl.js';
+import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
+import { useTrackingId } from './useTrackingId.js';
+import { B as Button } from './Button-C_V2xQAs.js';
+import { I as Icon } from './Icon-feeG7gXA.js';
+import { T as Tooltip } from './Tooltip-DGo3OWqL.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+import { F as Flex } from './Flex-_orhvoxS.js';
+import { L as Layout } from './Layout-C2Q2hyLG.js';
+import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
+import { S as SvgEdit } from './edit-DQOiktcu.js';
+import { S as SvgCheck } from './check-Cf67OWrZ.js';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { B as ButtonLink } from './ButtonLink-UhLks0vM.js';
+import { B as Breadcrumbs } from './Breadcrumbs-DTi5RqT-.js';
+import { M as Menu } from './Menu-W0c-xKdX.js';
+import { T as TextField } from './TextField-DzuM8vvd.js';
+import { T as Text } from './Text-BgPuOXJM.js';
+import { C as Chip } from './Chip-0-Yx9SGX.js';
+import { createPortal } from 'react-dom';
+import { D as Dialog } from './Dialog-BZTo4hbX.js';
+import { d as drillDownStyles, D as DrillDownContext } from './DrillDown.module-D1Bf9_yP.js';
+import { u as useDrillDownContextState } from './useInitialFocus-BUxEDMEG.js';
+import { u as useDrillDownContext } from './useDrillDownContext-iUvoTget.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+
+import './Page.css';const page = "_page_1a6ta_1";
+const container = "_container_1a6ta_29";
+const panel = "_panel_1a6ta_58";
+const open = "_open_1a6ta_58";
+const small = "_small_1a6ta_58";
+const medium = "_medium_1a6ta_61";
+const large = "_large_1a6ta_64";
+const sidebar = "_sidebar_1a6ta_67";
+const collapsed = "_collapsed_1a6ta_67";
+const content = "_content_1a6ta_77";
+const noPadding = "_noPadding_1a6ta_365";
+const header = "_header_1a6ta_442";
+const layout = "_layout_1a6ta_446";
+const title = "_title_1a6ta_454";
+const chips = "_chips_1a6ta_464";
+const actions = "_actions_1a6ta_468";
+const description = "_description_1a6ta_481";
+const styles = {
+	page: page,
+	container: container,
+	panel: panel,
+	open: open,
+	small: small,
+	medium: medium,
+	large: large,
+	sidebar: sidebar,
+	collapsed: collapsed,
+	content: content,
+	"content-footer": "_content-footer_1a6ta_77",
+	"virtual-scroll-container": "_virtual-scroll-container_1a6ta_84",
+	"content-wrapper": "_content-wrapper_1a6ta_92",
+	"footer-slot": "_footer-slot_1a6ta_99",
+	"content-inner": "_content-inner_1a6ta_109",
+	"content-header-inner": "_content-header-inner_1a6ta_131",
+	"sidebar-inner": "_sidebar-inner_1a6ta_195",
+	"sidebar-header": "_sidebar-header_1a6ta_234",
+	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_1a6ta_256",
+	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_1a6ta_256",
+	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_1a6ta_277",
+	"sidebar-adaptive-container": "_sidebar-adaptive-container_1a6ta_281",
+	"sidebar-adaptive": "_sidebar-adaptive_1a6ta_256",
+	"toggle-button-wrapper": "_toggle-button-wrapper_1a6ta_295",
+	"toggle-button-tooltip": "_toggle-button-tooltip_1a6ta_304",
+	"toggle-button": "_toggle-button_1a6ta_295",
+	noPadding: noPadding,
+	"panel-inner": "_panel-inner_1a6ta_365",
+	"drilldown-open": "_drilldown-open_1a6ta_403",
+	header: header,
+	layout: layout,
+	"title-wrapper": "_title-wrapper_1a6ta_454",
+	title: title,
+	"preference-action": "_preference-action_1a6ta_461",
+	chips: chips,
+	actions: actions,
+	description: description
+};
+
+const SvgSegment = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10 18h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm7 6h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1z" }));
+
+const SvgChevronLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z" }));
+
+const PageSideBarContext = createContext(
+  null
+);
+
+const PageContext = createContext({});
+
+function AdaptiveSidebarContent({
+  children,
+  className,
+  innerRef
+}) {
+  const { closePopover } = usePopoverContext();
+  const containerRef = useRef(null);
+  const mergedRef = useMergeRefs([containerRef, innerRef]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const handleClick = (e) => {
+      if (!(e.target instanceof Element)) return;
+      if (e.target.closest("a")) closePopover();
+    };
+    el.addEventListener("click", handleClick);
+    return () => el.removeEventListener("click", handleClick);
+  }, [closePopover]);
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", className, ref: mergedRef, children });
+}
+const PageSidebar = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      currentPageTitle,
+      localStorageKey = "sidebar-collapsed",
+      ...rest
+    } = props;
+    const data = {
+      localStorageKey
+    };
+    const { pageWidth } = useContext(PageContext);
+    const [isMobile, setIsMobile] = useState(() => {
+      const breakpointWidth = +(BreakpointLg?.value?.replace("px", "") ?? 0);
+      return typeof window !== "undefined" ? window.innerWidth < breakpointWidth : false;
+    });
+    useLayoutEffect(() => {
+      if (!pageWidth) return;
+      const breakpointWidth = +(BreakpointLg?.value?.replace("px", "") ?? 0);
+      setIsMobile(pageWidth < breakpointWidth);
+    }, [pageWidth]);
+    const trackingId = useTrackingId({
+      name: "PageSidebarButton",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const [collapsed, setCollapsed] = useState(() => {
+      const sidebarState = localStorage.getItem(localStorageKey);
+      return sidebarState ? JSON.parse(sidebarState) : false;
+    });
+    const classNames = cx([styles["sidebar"]], className, {
+      [styles["collapsed"]]: collapsed
+    });
+    const onToggleButtonClick = () => {
+      setCollapsed((prev) => {
+        localStorage.setItem(localStorageKey, JSON.stringify(!prev));
+        return !prev;
+      });
+    };
+    if (isMobile) {
+      return /* @__PURE__ */ jsxs(Popover, { fillAvailableHeight: true, matchReferenceWidth: true, noPadding: true, children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { children: (props2) => {
+          if (typeof document !== "undefined") {
+            if (props2["aria-expanded"]) {
+              document.body.style.overflow = "hidden";
+            } else {
+              document.body.style.overflow = "auto";
+            }
+          }
+          return /* @__PURE__ */ jsx("div", { className: styles["sidebar-adaptive-trigger-container"], children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: styles["sidebar-adaptive-trigger"],
+              icon: SvgSegment,
+              appearance: "ghost",
+              ...props2,
+              children: [
+                !currentPageTitle ? "Menu" : currentPageTitle,
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: styles["sidebar-adaptive-trigger-icon"],
+                    justifyContent: "end",
+                    svg: props2["aria-expanded"] ? SvgKeyboardArrowUp : SvgKeyboardArrowDown
+                  }
+                )
+              ]
+            }
+          ) });
+        } }),
+        /* @__PURE__ */ jsx(Popover.Content, { className: styles["sidebar-adaptive-container"], children: /* @__PURE__ */ jsx(
+          AdaptiveSidebarContent,
+          {
+            className: styles["sidebar-adaptive"],
+            innerRef: ref,
+            children
+          }
+        ) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(PageSideBarContext.Provider, { value: { collapsed }, children: /* @__PURE__ */ jsxs("div", { className: classNames, ref, ...rest, children: [
+      /* @__PURE__ */ jsx("div", { className: styles["sidebar-inner"], "aria-hidden": collapsed, children: /* @__PURE__ */ jsx("div", { children }) }),
+      /* @__PURE__ */ jsx("div", { className: styles["toggle-button-wrapper"], children: /* @__PURE__ */ jsxs(Tooltip, { placement: "right", children: [
+        /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles["toggle-button-tooltip"], children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            onClick: onToggleButtonClick,
+            className: styles["toggle-button"],
+            "aria-label": collapsed ? "Open Sidebar" : "Close Sidebar",
+            "data-tracking-id": trackingId,
+            icon: collapsed ? SvgChevronRight : SvgChevronLeft
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip.Content, { children: collapsed ? "Open Sidebar" : "Close Sidebar" })
+      ] }) })
+    ] }) });
+  }
+);
+PageSidebar.displayName = "Page.Sidebar";
+
+const PageSidebarHeader = forwardRef(
+  (props, ref) => {
+    const { children, className, ...rest } = props;
+    const context = useContext(PageSideBarContext);
+    const classNames = cx([styles["sidebar-header"]], className);
+    return /* @__PURE__ */ jsx("div", { className: classNames, ref, ...rest, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles["header-content"],
+        "aria-hidden": context?.collapsed,
+        children
+      }
+    ) });
+  }
+);
+PageSidebarHeader.displayName = "Page.SidebarHeader";
+
+const SvgSettings = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.343 7.343 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68zm-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }));
+
+const PageHeader = forwardRef(
+  (props, ref) => {
+    const {
+      title: titleProp,
+      breadcrumbs,
+      chips,
+      description,
+      actions,
+      preferenceAction,
+      layout,
+      className,
+      ...rest
+    } = props;
+    const title = typeof titleProp === "string" ? { text: titleProp } : titleProp;
+    const [editing, setEditing] = useState(false);
+    const [editingTitle, setEditingTitle] = useState(title.text);
+    const editFieldRef = useRef(null);
+    const editButtonRef = useRef(null);
+    const firstRenderRef = useRef(true);
+    useEffect(() => {
+      if (firstRenderRef.current) {
+        firstRenderRef.current = false;
+        return;
+      }
+      if (editing === true && editFieldRef.current) {
+        editFieldRef.current.focus();
+      }
+      if (editing === false && editButtonRef.current) {
+        editButtonRef.current.focus();
+      }
+    }, [editing]);
+    const { fluid, variant } = layout || {};
+    const preferenceItem = preferenceAction && ("href" in preferenceAction ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+        ButtonLink,
+        {
+          appearance: "ghost",
+          icon: SvgSettings,
+          size: "small",
+          className: styles["preference-action"],
+          ...preferenceAction
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Tooltip.Content, { children: preferenceAction["aria-label"] })
+    ] }) : /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "ghost",
+          icon: SvgSettings,
+          size: "small",
+          className: styles["preference-action"],
+          ...preferenceAction
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Tooltip.Content, { children: preferenceAction["aria-label"] })
+    ] }));
+    const actionItems = actions && /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", className: styles.actions, children: [
+      actions.primary && (!actions.secondary || actions.secondary.length === 0) && /* @__PURE__ */ jsx(Button, { appearance: "primary", ...actions.primary, children: actions.primary.label }),
+      !!actions.secondary?.length && actions.secondary.length < 3 && !actions.primary && actions.secondary.map((action, index) => /* @__PURE__ */ jsx(Button, { appearance: "secondary", ...action, children: action.label }, index)),
+      actions.primary && !!actions.secondary?.length && actions.secondary.length === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { appearance: "secondary", ...actions.secondary[0], children: actions.secondary[0].label }),
+        /* @__PURE__ */ jsx(Button, { appearance: "primary", ...actions.primary, children: actions.primary.label })
+      ] }),
+      !!actions.secondary?.length && (actions.secondary.length >= 3 || actions.secondary.length >= 2 && actions.primary) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            trigger: ({ ref: ref2, ...rest2 }) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                Tooltip.Trigger,
+                {
+                  ref: ref2,
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      appearance: "secondary",
+                      icon: SvgMoreVert,
+                      "aria-label": "More actions",
+                      ...rest2
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip.Content, { children: "More actions" })
+            ] }),
+            children: actions.secondary.map((action, index) => /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                label: action.label,
+                onClick: action.onClick,
+                disabled: action.disabled
+              },
+              index
+            ))
+          }
+        ),
+        actions.primary && /* @__PURE__ */ jsx(Button, { appearance: "primary", ...actions.primary, children: actions.primary.label })
+      ] })
+    ] });
+    const headerClassName = cx(styles.content, styles.header, className);
+    const headerContentClassName = cx(
+      styles["content-inner"],
+      styles["content-header-inner"]
+    );
+    return /* @__PURE__ */ jsx("header", { ref, className: headerClassName, ...rest, children: /* @__PURE__ */ jsx("div", { className: headerContentClassName, children: /* @__PURE__ */ jsxs(Layout, { fluid, variant, className: styles["layout"], children: [
+      breadcrumbs && /* @__PURE__ */ jsx(Layout.Item, { children: /* @__PURE__ */ jsx(Breadcrumbs, { children: breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsx(Breadcrumbs.Link, { ...breadcrumb }, index)) }) }),
+      /* @__PURE__ */ jsxs(Layout.Item, { sm: 2, md: actionItems || editing ? 6 : 12, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles["title-wrapper"], children: [
+          title.onChange && editing ? /* @__PURE__ */ jsx(
+            "form",
+            {
+              onSubmit: (e) => {
+                e.preventDefault();
+                if (title.onChange?.(editingTitle) !== false) {
+                  setEditing(false);
+                }
+              },
+              style: { display: "flex" },
+              children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", grow: 1, gap: 2, children: [
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    "aria-label": title.editFieldLabel ?? "Page title",
+                    defaultValue: title.text,
+                    flexGrow: 1,
+                    ref: editFieldRef,
+                    onChange: (event) => setEditingTitle(event.target.value),
+                    onKeyDown: (e) => {
+                      if (e.code === "Escape") {
+                        setEditing(false);
+                        setEditingTitle(title.text);
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, children: [
+                  /* @__PURE__ */ jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: SvgCheck,
+                        "aria-label": title.confirmButtonLabel ?? "Update title",
+                        size: "small",
+                        appearance: "primary",
+                        onClick: () => {
+                          if (title.onChange?.(editingTitle) !== false) {
+                            setEditing(false);
+                          }
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip.Content, { children: title.confirmButtonLabel ?? "Update title" })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: SvgClose,
+                        "aria-label": title.cancelButtonLabel ?? "Cancel",
+                        size: "small",
+                        onClick: () => {
+                          setEditing(false);
+                          setEditingTitle(title.text);
+                        }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Tooltip.Content, { children: title.cancelButtonLabel ?? "Cancel" })
+                  ] })
+                ] })
+              ] })
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                variant: "headline",
+                size: "large",
+                el: "h1",
+                className: styles.title,
+                children: title.text
+              }
+            ),
+            title.onChange != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: SvgEdit,
+                    "aria-label": title.editButtonLabel ?? "Edit title",
+                    size: "small",
+                    appearance: "ghost",
+                    ref: editButtonRef,
+                    onClick: () => setEditing(true)
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Tooltip.Content, { children: title.editButtonLabel ?? "Edit title" })
+              ] })
+            ] }) : null
+          ] }),
+          preferenceItem
+        ] }),
+        chips && /* @__PURE__ */ jsx(Flex, { className: styles.chips, children: chips.map((chip, index) => /* @__PURE__ */ jsx(Chip, { ...chip }, index)) })
+      ] }),
+      actions && /* @__PURE__ */ jsx(Layout.Item, { sm: 2, md: 6, children: actionItems }),
+      description && /* @__PURE__ */ jsx(Layout.Item, { md: 12, className: styles.description, children: description })
+    ] }) }) });
+  }
+);
+PageHeader.displayName = "Page.Header";
+
+const PageContent = forwardRef(
+  (props, ref) => {
+    const { children, className, ...rest } = props;
+    const classNames = cx([styles["content"]], className);
+    const sectionRef = useRef(null);
+    const virtualScrollRef = useRef(null);
+    const blocker = useRef(true);
+    const [leftOffset, setLeftOffset] = useState(
+      (sectionRef.current?.offsetLeft ?? 0) + (sectionRef.current?.offsetWidth ?? 0) - 9
+    );
+    const [contentHeight, setContentHeight] = useState(
+      sectionRef.current?.offsetHeight
+    );
+    const { contentWrapper } = useContext(PageContext);
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      if (!blocker.current) return;
+      function updatePosition() {
+        const newValue = window.scrollY;
+        virtualScrollRef.current?.scrollTo(0, newValue ?? 0);
+      }
+      window?.addEventListener("scroll", updatePosition, { passive: true });
+      return () => {
+        window?.removeEventListener("scroll", updatePosition);
+      };
+    }, []);
+    useEffect(() => {
+      if (sectionRef.current) {
+        const wrapperParent = sectionRef.current.parentElement;
+        const isWrapped = wrapperParent?.classList.contains(styles["content-wrapper"]) ?? false;
+        const heightTarget = isWrapped ? wrapperParent : sectionRef.current;
+        const observer = new ResizeObserver(() => {
+          if (!sectionRef.current) return;
+          setLeftOffset(
+            sectionRef.current.offsetLeft + sectionRef.current.offsetWidth - 9
+          );
+          const offsetStr = getComputedStyle(sectionRef.current).getPropertyValue("--offset").trim();
+          const offset = parseFloat(offsetStr) || 0;
+          const rawHeight = document.documentElement.scrollHeight - offset;
+          const safeHeight = Number.isFinite(rawHeight) ? Math.max(0, rawHeight) : 0;
+          setContentHeight(safeHeight);
+        });
+        observer.observe(sectionRef.current);
+        if (isWrapped) {
+          observer.observe(heightTarget);
+        }
+        return () => {
+          observer.disconnect();
+        };
+      }
+    }, [contentWrapper]);
+    function scrollBody(e) {
+      if (typeof window === "undefined") return;
+      if (blocker.current) return;
+      window.scrollTo(0, e.target.scrollTop);
+    }
+    const section = /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: classNames,
+        ref: useMergeRefs([sectionRef, ref]),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles["content-inner"], children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles["virtual-scroll-container"],
+              ref: virtualScrollRef,
+              style: {
+                left: leftOffset
+              },
+              onScrollCapture: scrollBody,
+              onMouseEnter: () => {
+                blocker.current = false;
+              },
+              onMouseLeave: () => {
+                blocker.current = true;
+              },
+              children: /* @__PURE__ */ jsx("div", { style: { width: 1, height: contentHeight } })
+            }
+          )
+        ]
+      }
+    );
+    if (contentWrapper) {
+      return createPortal(section, contentWrapper);
+    }
+    if (contentWrapper === void 0) {
+      return section;
+    }
+    return null;
+  }
+);
+PageContent.displayName = "PageContent";
+
+const PagePanelInner = ({
+  style,
+  open,
+  children
+}) => {
+  const { index } = useDrillDownContext();
+  const classNames = cx([styles["panel-inner"]], {
+    [styles["drilldown-open"]]: index !== void 0
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames,
+      tabIndex: typeof open !== "undefined" && open ? 0 : -1,
+      style: { ...style, overflowY: index === void 0 ? "auto" : "hidden" },
+      children: /* @__PURE__ */ jsx("div", { children })
+    }
+  ) });
+};
+const PagePanel = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      open,
+      size = "medium",
+      noPadding,
+      style,
+      className,
+      defaultDrillDownIndex,
+      onDrillDownContextChange,
+      ...rest
+    } = props;
+    const [isMobile, setIsMobile] = useState(false);
+    const classNames = cx(
+      [styles.panel, drillDownStyles.panel],
+      [styles[size]],
+      className,
+      {
+        [styles["open"]]: typeof open === "undefined" ? true : open,
+        [styles["persistent"]]: typeof open === "undefined",
+        [styles["noPadding"]]: noPadding
+      }
+    );
+    const drillDownContextValue = useDrillDownContextState({
+      defaultDrillDownIndex
+    });
+    const drillDownContextProviderValue = useMemo(
+      () => ({
+        ...drillDownContextValue,
+        hostIsInteractive: open !== false
+      }),
+      [drillDownContextValue, open]
+    );
+    useLayoutEffect(() => {
+      onDrillDownContextChange?.(drillDownContextProviderValue);
+    }, [drillDownContextProviderValue]);
+    const { pageWidth } = useContext(PageContext);
+    const previousOpenRef = useRef(open);
+    useEffect(() => {
+      if (isMobile) {
+        previousOpenRef.current = open;
+        return;
+      }
+      if (previousOpenRef.current && open === false) {
+        drillDownContextValue.onHostClose?.();
+        drillDownContextValue.onHostClosed?.();
+      }
+      previousOpenRef.current = open;
+    }, [open, isMobile, drillDownContextValue]);
+    useLayoutEffect(() => {
+      if (isMobile || !open || previousOpenRef.current) {
+        return;
+      }
+      drillDownContextValue.setHostTrigger?.(
+        document.activeElement instanceof HTMLElement ? document.activeElement : null
+      );
+    }, [open, isMobile, drillDownContextValue]);
+    useLayoutEffect(() => {
+      const breakpointWidth = +(BreakpointLg?.value.replace("px", "") ?? 0);
+      const innerWidth = pageWidth ?? 0;
+      setIsMobile(innerWidth < breakpointWidth);
+    }, [pageWidth]);
+    if (typeof open !== "undefined" && isMobile) {
+      return /* @__PURE__ */ jsx(
+        Dialog,
+        {
+          open,
+          defaultDrillDownIndex,
+          onDrillDownContextChange,
+          children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames,
+              "aria-hidden": !open,
+              "aria-disabled": !open,
+              ref,
+              ...rest,
+              children
+            }
+          ) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames,
+        "aria-hidden": !open,
+        "aria-disabled": !open,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(PagePanelInner, { style, open, children })
+      }
+    ) });
+  }
+);
+PagePanel.displayName = "PagePanel";
+
+const PageFooter = forwardRef(
+  (props, ref) => {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const { children, className, style, ...rest } = componentProps;
+    const { footerSlot } = useContext(PageContext);
+    const classNames = cx([styles["content-footer"]], className);
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    const footer = /* @__PURE__ */ jsx("footer", { className: classNames, ref, style: styleCombined, ...rest, children });
+    if (footerSlot) {
+      return createPortal(footer, footerSlot);
+    }
+    if (footerSlot === void 0) {
+      return footer;
+    }
+    return null;
+  }
+);
+PageFooter.displayName = "PageFooter";
+
+const Page = Object.assign(
+  forwardRef(function PageInner(props, ref) {
+    const { children, className, ...rest } = props;
+    const classNames = cx(styles["page"], className);
+    const elRef = useRef(null);
+    const combinedRef = useMergeRefs([elRef, ref]);
+    const [pageWidth, setPageWidth] = useState(0);
+    const [contentWrapper, setContentWrapper] = useState(
+      null
+    );
+    const [footerSlot, setFooterSlot] = useState(null);
+    useLayoutEffect(() => {
+      const element = elRef.current;
+      const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+          setPageWidth(entry.contentRect.width);
+        }
+      });
+      if (element) {
+        resizeObserver.observe(element);
+      }
+      return () => {
+        if (element) {
+          resizeObserver.unobserve(element);
+          resizeObserver.disconnect();
+        }
+      };
+    }, [elRef]);
+    const contextValue = useMemo(
+      () => ({ pageWidth, contentWrapper, footerSlot }),
+      [pageWidth, contentWrapper, footerSlot]
+    );
+    return /* @__PURE__ */ jsx(PageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: classNames, "data-anv": "Page", ref: combinedRef, ...rest, children: /* @__PURE__ */ jsxs("div", { className: styles["container"], children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "main",
+        {
+          className: styles["content-wrapper"],
+          ref: setContentWrapper
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles["footer-slot"], ref: setFooterSlot })
+    ] }) }) });
+  }),
+  {
+    /**
+     * PageSidebar component for creating collapsible navigation sidebars.
+     *
+     * Features:
+     * - Collapsible sidebar with localStorage persistence
+     * - Responsive design with adaptive popover on mobile
+     * - Automatic tracking ID generation for analytics
+     * - Keyboard navigation and accessibility support
+     * - Toggle button with tooltip
+     * - Context provider for sidebar state
+     * - Mobile-friendly popover navigation
+     *
+     * @example
+     * <Page.Sidebar currentPageTitle="Navigation">
+     *   <Page.SidebarHeader>
+     *     <Text variant="headline" el="h2">Sidebar Title</Text>
+     *   </Page.SidebarHeader>
+     *   <SideNav>
+     *     <SideNavLink pathname="/">Home</SideNavLink>
+     *   </SideNav>
+     * </Page.Sidebar>
+     */
+    Sidebar: PageSidebar,
+    /**
+     * PageSidebarHeader component for creating header sections within sidebars.
+     *
+     * Features:
+     * - Container for sidebar header content
+     * - Automatic visibility handling based on sidebar collapsed state
+     * - Supports all standard div props
+     * - Context-aware styling
+     *
+     * @example
+     * <Page.SidebarHeader>
+     *   <Text variant="headline" el="h2" size="medium">
+     *     Sidebar Title
+     *   </Text>
+     * </Page.SidebarHeader>
+     */
+    SidebarHeader: PageSidebarHeader,
+    /**
+     * PageHeader component for creating page headers with navigation and actions.
+     *
+     * Features:
+     * - Page title with semantic heading
+     * - Breadcrumb navigation support
+     * - Status chips display
+     * - Primary and secondary action buttons
+     * - Preference action button/link
+     * - Responsive layout with fluid grid
+     * - Accessibility support with proper ARIA labels
+     * - Flexible layout configuration
+     * - Description content support
+     *
+     * @example
+     * <Page.Header
+     *   title="Page Title"
+     *   breadcrumbs={[
+     *     { href: "/", children: "Home" },
+     *     { children: "Current Page" }
+     *   ]}
+     *   chips={[{ label: "Status" }]}
+     *   actions={{
+     *     primary: { label: "Save", onClick: handleSave },
+     *     secondary: [{ label: "Cancel", onClick: handleCancel }]
+     *   }}
+     * />
+     */
+    Header: PageHeader,
+    /**
+     * PageContent component for the main content area of a page.
+     *
+     * Features:
+     * - Semantic main element for page content
+     * - Virtual scrolling support for long content
+     * - Automatic scroll synchronization
+     * - Responsive design
+     * - Accessibility support with proper main landmark
+     * - Scroll position management
+     *
+     * @example
+     * <Page.Content>
+     *   <Text>Main page content goes here</Text>
+     *   <Button>Action Button</Button>
+     * </Page.Content>
+     */
+    Content: PageContent,
+    /**
+     * PagePanel component for creating slide-out panels or dialogs.
+     *
+     * Features:
+     * - Responsive design with dialog fallback on mobile
+     * - Multiple size variants (small, medium, large)
+     * - Optional padding control
+     * - Persistent or controlled open state
+     * - Automatic mobile dialog conversion
+     * - Keyboard navigation and accessibility support
+     * - Smooth animations and transitions
+     *
+     * @example
+     * <Page.Panel open={isOpen} size="medium">
+     *   <Text variant="headline" el="h3">Panel Content</Text>
+     *   <Button onClick={() => setIsOpen(false)}>Close</Button>
+     * </Page.Panel>
+     */
+    Panel: PagePanel,
+    /**
+     * PageFooter component for creating page footers with layout utilities.
+     *
+     * Features:
+     * - Semantic footer element
+     * - Layout utility props support
+     * - Responsive design
+     * - Accessibility support with proper footer landmark
+     * - Flexible content positioning
+     *
+     * @example
+     * <Page.Footer>
+     *   <Text>Footer content with layout utilities</Text>
+     * </Page.Footer>
+     */
+    Footer: PageFooter
+  }
+);
+Page.displayName = "Page";
+
+export { Page as P };
+//# sourceMappingURL=Page-cELP59Hm.js.map