@servicetitan/anvil2 3.13.0 → 3.13.2

package/dist/index.js

@@ -1,91 +1,109 @@
-export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
-export { A as Alert } from './Alert-S4D2DGx7.js';
-export { A as AiMark } from './AiMark-Bf0x9FF3.js';
-export { A as Announcement } from './Announcement-CGglhMfd.js';
-export { A as Avatar } from './Avatar-ioIwH1KT.js';
-export { A as AvatarGroup } from './Avatar-lLiNUrxq.js';
+import './index2.css';export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
+export { A as Alert } from './Alert-jMcoYnn3.js';
+import { P as Popover, a as usePopoverContext } from './AiMark-DvxF40mc.js';
+export { A as AiMark } from './AiMark-DvxF40mc.js';
+export { A as Announcement } from './Announcement-CGTv6M31.js';
+export { A as Avatar } from './Avatar-DXI-w1Vi.js';
+export { A as AvatarGroup } from './Avatar-D31JDNrs.js';
 export { B as Badge } from './Badge-BNrYBFiU.js';
-export { B as Breadcrumbs } from './Breadcrumbs-CR1od1rZ.js';
-export { B as Button } from './Button-Dwh_Nd4l.js';
+import { B as Breadcrumbs } from './Breadcrumbs-lrFI8Kq5.js';
+import { B as Button } from './Button-Dwh_Nd4l.js';
 export { B as ButtonCompound } from './ButtonCompound-D7kA0qXr.js';
-export { B as ButtonLink } from './ButtonLink-DOFAxNvC.js';
+import { B as ButtonLink } from './ButtonLink-DOFAxNvC.js';
 export { B as ButtonToggle } from './ButtonToggle-DKDBD1g3.js';
-export { a as Calendar, g as CalendarMonth, f as CalendarMonthButton, e as CalendarNext, b as CalendarNow, d as CalendarPrev, c as CalendarYearButton } from './Calendar-B-K7eGua.js';
+export { a as Calendar, g as CalendarMonth, f as CalendarMonthButton, e as CalendarNext, b as CalendarNow, d as CalendarPrev, c as CalendarYearButton } from './Calendar-BDIucj98.js';
 export { C as Card } from './Card-Bt0F6RTq.js';
-export { C as Checkbox } from './Checkbox-D5-HJC6_.js';
-export { C as Chip } from './Chip-DLK31FkK.js';
-export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, u as useInfiniteCombobox } from './useInfiniteCombobox-DRd_Fp1w.js';
-export { D as DateFieldRange } from './DateFieldRange-8JO-rJm-.js';
-export { D as DateFieldSingle } from './DateFieldSingle-CrTMTL9v.js';
-export { D as DateFieldYearless } from './DateFieldYearless-Bo1V-4K2.js';
-export { D as DateFieldYearlessRange } from './DateFieldYearlessRange-rj36AQhR.js';
-export { D as DaysOfTheWeek } from './DaysOfTheWeek-B39FZ-TR.js';
+export { C as Checkbox } from './Checkbox-D6F6szD5.js';
+import { C as Chip } from './Chip-DbmQFaSy.js';
+export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, u as useInfiniteCombobox } from './useInfiniteCombobox-DNXkXJN5.js';
+export { D as DateFieldRange } from './DateFieldRange-Babt-rTV.js';
+export { D as DateFieldSingle } from './DateFieldSingle-DMcfJwxk.js';
+export { D as DateFieldYearless } from './DateFieldYearless-cX9tklg3.js';
+export { D as DateFieldYearlessRange } from './DateFieldYearlessRange-B5q1JJ4o.js';
+export { D as DaysOfTheWeek } from './DaysOfTheWeek-BGeOcpvH.js';
 export { D as Details } from './Details-CVA5zbrR.js';
-export { D as Dialog } from './Dialog-PcuDCqK7.js';
+import { D as Dialog } from './Dialog-DHheusQG.js';
 export { D as Divider } from './Divider-C7fp5Xb6.js';
 export { D as Dnd } from './index-BwV_Pz7v.js';
-export { D as Drawer } from './Drawer-CEsvth0Z.js';
-export { D as DrillDown, b as DrillDownContent, c as DrillDownFooter, a as DrillDownHeader, d as DrillDownNextButton, e as DrillDownPrevButton, u as useDrillDown } from './useDrilldown-D5iDWSx7.js';
-export { E as EditCard } from './EditCard-CtWVEAsA.js';
-export { F as FieldLabel } from './FieldLabel-BFJdJP_W.js';
+export { D as Drawer } from './Drawer-ZpS1rSAo.js';
+export { D as DrillDown, b as DrillDownContent, c as DrillDownFooter, a as DrillDownHeader, d as DrillDownNextButton, e as DrillDownPrevButton, u as useDrillDown } from './useDrilldown-CHukLz7z.js';
+export { E as EditCard } from './EditCard-Cfi2Vz2n.js';
+export { F as FieldLabel } from './FieldLabel-8AZcbhoO.js';
 export { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
-export { F as FieldMessage } from './FieldMessage-mTGdycSA.js';
-export { F as Flex } from './Flex-CRF7gj0_.js';
+export { F as FieldMessage } from './FieldMessage-8c9yA_kw.js';
+import { F as Flex } from './Flex-CRF7gj0_.js';
 export { G as Grid } from './Grid-CvGQrIhE.js';
-export { I as Icon } from './Icon-B5zwN7GD.js';
-export { I as InputMask } from './InputMask-DJTXKPmK.js';
-export { L as Layout, b as LayoutElement, a as LayoutItem } from './Layout-C2Q2hyLG.js';
+import { I as Icon } from './Icon-B5zwN7GD.js';
+export { I as InputMask } from './InputMask-l91oggrN.js';
+import { L as Layout } from './Layout-C2Q2hyLG.js';
+export { b as LayoutElement, a as LayoutItem } from './Layout-C2Q2hyLG.js';
 export { L as Link, u as useLinkStyles } from './Link-D7ycmfQ_.js';
 export { L as LinkButton } from './LinkButton-C0wps8r1.js';
 export { L as List } from './List-BvzfZ9TW.js';
-export { L as Listbox } from './Listbox-Of-WaRWI.js';
-export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-CPDHEpD-.js';
-export { M as Menu } from './Menu-CM0EndhK.js';
-export { N as NumberField } from './NumberField-ASyiQu5l.js';
+export { L as Listbox } from './Listbox-XzguYMmw.js';
+export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-CZhtsHeq.js';
+import { M as Menu } from './Menu-BjPE_ODh.js';
+export { N as NumberField } from './NumberField-KO51fZ_O.js';
 export { Overflow, OverflowText } from './Overflow.js';
-export { P as Page } from './Page-D5NbV2Y8.js';
-export { P as Pagination } from './Pagination-B4HCZNYw.js';
-export { P as Popover } from './Popover-CjsE5FG0.js';
-export { P as ProgressBar } from './ProgressBar-C_HXy_Hx.js';
-export { R as Radio } from './Radio-CBQpuxLP.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext, useState, useLayoutEffect, useRef, useEffect, useMemo, useCallback } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+export { P as Pagination } from './Pagination-C0x5v_yk.js';
+export { P as Popover } from './Popover-BPg2nwm3.js';
+export { P as ProgressBar } from './ProgressBar-Dc8PTakM.js';
+export { R as Radio } from './Radio-kONDu2uD.js';
 export { S as SearchField } from './SearchField-ChoNtw8w.js';
 export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-CQ6DrbDc.js';
-export { S as SelectCard } from './SelectCard-DbWOdnuI.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BdYCHwPd.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-CFw607cm.js';
-export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-DlqmXr04.js';
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-C6afc80f.js';
-export { S as SelectTrigger } from './SelectTrigger-QkI2I04A.js';
+export { S as SelectCard } from './SelectCard-BhVmrXxS.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DDL_XnSP.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-LbZxIXJ1.js';
+export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-BdrLS1Jg.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-jlTj0prP.js';
+export { S as SelectTrigger } from './SelectTrigger-CKiKG_Z_.js';
 export { S as SideNav } from './SideNav-BLXgM918.js';
 export { Skeleton, SkeletonCircle, SkeletonPill, SkeletonRectangle, SkeletonText } from './Skeleton.js';
 export { S as Spinner } from './Spinner-B7tTWcP6.js';
 export { S as SrOnly } from './SrOnly-pnf8ajnh.js';
 export { S as Stepper, a as StepperBase } from './Stepper-CCKHWlUr.js';
-export { S as Switch } from './Switch-MfbL3JVk.js';
+export { S as Switch } from './Switch-BuIZ8Peh.js';
 export { T as Tab } from './Tab-Bqfvg8Ce.js';
-export { T as Text } from './Text-CEJHoh0p.js';
-export { T as Textarea } from './Textarea-CSXwaDf6.js';
-export { T as TextField } from './TextField-DWbDQfHY.js';
-export { T as TimeField } from './TimeField-BZQP8KSf.js';
-export { T as Toaster } from './Toaster-B1xZq1bs.js';
-export { t as toast } from './Toaster-C2z5rCrc.js';
-export { T as Toolbar } from './Toolbar-neulke7h.js';
-export { T as Tooltip } from './Tooltip-CzrJgl98.js';
+import { T as Text } from './Text-Ci-L0y2z.js';
+export { T as Textarea } from './Textarea-90BDBw_L.js';
+import { T as TextField } from './TextField-CIF-Ibkg.js';
+export { T as TimeField } from './TimeField-C_K-uPrE.js';
+export { T as Toaster } from './Toaster-CRoqsuBq.js';
+export { t as toast } from './Toaster-CC34KRD9.js';
+export { T as Toolbar } from './Toolbar-CKgEX5iE.js';
+import { T as Tooltip } from './Tooltip-DM63W1Np.js';
 export { u as useAccessibleColor } from './useAccessibleColor-BYKjkGRg.js';
 export { u as useBreakpoint } from './useBreakpoint-BBNRlMGZ.js';
-export { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-export { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
+export { u as usePrefersColorScheme } from './usePrefersColorScheme-CwOF0TjZ.js';
 export { u as usePrefersReducedMotion } from './usePrefersReducedMotion-DR9B_D6w.js';
 export { u as useSwipe } from './useSwipe-Cp-CJxLU.js';
-export { useTrackingId } from './useTrackingId.js';
-export { A as AnvilProvider, a as AnvilProviderContext } from './AnvilProvider-Deh-Vgep.js';
+import { useTrackingId } from './useTrackingId.js';
+export { A as AnvilProvider, a as AnvilProviderContext } from './AnvilProvider-CgYBk3YP.js';
 export { L as LocalizationProvider } from './LocalizationProvider-BPcOU7YX.js';
 export { L as LocalizationContext, u as useLocalizationContext } from './LocalizationContext-UsmB5mnR.js';
 export { P as PortalProvider, a as PortalProviderContext } from './PortalProvider-Cj_y3gbC.js';
-export { T as ThemeProvider } from './ThemeProvider-BlEOL-sk.js';
+export { T as ThemeProvider } from './ThemeProvider-D4dbBfHd.js';
 export { u as useTheme } from './useTheme-B4i6a3bM.js';
 export { T as TrackingProvider } from './TrackingProvider-Co4lyoI9.js';
 export { u as useTrackingContext } from './useTrackingContext-C522P4sv.js';
+import { S as SvgSegment, a as SvgChevronLeft, b as SvgSettings } from './settings-Bsahaln8.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 { b as BreakpointLg } from './primitive-BXgYQTTw.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 { createPortal } from 'react-dom';
+import { d as drillDownStyles, D as DrillDownContext } from './DrillDown.module-1VBKDZRA.js';
+import { u as useDrillDownContextState } from './useInitialFocus-BUxEDMEG.js';
+import { u as useDrillDownContext } from './useDrillDownContext-D5_NjqY4.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 
 const IANA_TIMEZONES = [
   "Pacific/Kiritimati",
@@ -516,5 +534,845 @@ const IANA_TIMEZONES = [
   "Pacific/Pago_Pago"
 ];
 
-export { IANA_TIMEZONES };
+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 PageSideBarContext = createContext(
+  null
+);
+
+const PageContext = createContext({});
+
+const PAGE_LG_BREAKPOINT = +(BreakpointLg?.value?.replace("px", "") ?? 0);
+const isPageMobileWidth = (pageWidth) => (pageWidth ?? 0) < PAGE_LG_BREAKPOINT;
+const showsPageVirtualScroll = (pageWidth) => PAGE_LG_BREAKPOINT > 0 && (pageWidth ?? 0) >= PAGE_LG_BREAKPOINT;
+
+function AdaptiveSidebarContent({
+  children,
+  className,
+  innerRef
+}) {
+  const { closePopover, openState } = usePopoverContext();
+  const containerRef = useRef(null);
+  const mergedRef = useMergeRefs([containerRef, innerRef]);
+  useEffect(() => {
+    if (!openState) return;
+    const overflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = overflow;
+    };
+  }, [openState]);
+  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(
+      () => typeof window !== "undefined" ? isPageMobileWidth(window.innerWidth) : false
+    );
+    useLayoutEffect(() => {
+      if (!pageWidth) return;
+      setIsMobile(isPageMobileWidth(pageWidth));
+    }, [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) => {
+          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["data-state"] === "open" ? 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 renderMenuItems = (actions) => actions.map((action, index) => {
+  const icon = typeof action.icon === "function" ? action.icon : action.icon && "after" in action.icon ? action.icon.after : void 0;
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      label: action.label,
+      onClick: action.onClick,
+      disabled: action.disabled,
+      icon,
+      className: action.className
+    },
+    index
+  );
+});
+const renderPrimaryMenuTrigger = (primary) => ({ ref, ...triggerProps }) => {
+  const { items: _items, label, ...buttonProps } = primary;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "primary",
+      ...buttonProps,
+      icon: { after: SvgKeyboardArrowDown },
+      ...triggerProps,
+      ref,
+      children: label
+    }
+  );
+};
+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 secondaryActions = actions?.secondary ?? [];
+    const primaryAction = actions?.primary;
+    const collapseSecondary = secondaryActions.length >= 3 || secondaryActions.length >= 2 && !!primaryAction;
+    const actionItems = actions && /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", className: styles.actions, children: [
+      collapseSecondary ? /* @__PURE__ */ jsx(
+        Menu,
+        {
+          trigger: ({ ref: ref2, ...rest2 }) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                icon: SvgMoreVert,
+                "aria-label": "More actions",
+                ...rest2,
+                ref: ref2
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tooltip.Content, { children: "More actions" })
+          ] }),
+          children: renderMenuItems(secondaryActions)
+        }
+      ) : secondaryActions.map((action, index) => /* @__PURE__ */ jsx(Button, { appearance: "secondary", ...action, children: action.label }, index)),
+      primaryAction && ("items" in primaryAction ? /* @__PURE__ */ jsx(
+        Menu,
+        {
+          label: primaryAction.label,
+          trigger: renderPrimaryMenuTrigger(primaryAction),
+          children: renderMenuItems(primaryAction.items)
+        }
+      ) : /* @__PURE__ */ jsx(Button, { appearance: "primary", ...primaryAction, children: primaryAction.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 mergedRef = useMergeRefs([sectionRef, ref]);
+    const blocker = useRef(true);
+    const rafIdRef = useRef(0);
+    const [leftOffset, setLeftOffset] = useState(-9);
+    const [contentHeight, setContentHeight] = useState(0);
+    const { contentWrapper, pageWidth } = useContext(PageContext);
+    const showVirtualScroll = showsPageVirtualScroll(pageWidth);
+    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(() => {
+      const section2 = sectionRef.current;
+      if (!section2) return;
+      const wrapperParent = section2.parentElement;
+      const isWrapped = wrapperParent?.classList.contains(styles["content-wrapper"]) ?? false;
+      const heightTarget = isWrapped ? wrapperParent : section2;
+      const observer = new ResizeObserver(() => {
+        if (rafIdRef.current) return;
+        rafIdRef.current = requestAnimationFrame(() => {
+          rafIdRef.current = 0;
+          if (!sectionRef.current) return;
+          setLeftOffset(
+            sectionRef.current.offsetLeft + sectionRef.current.offsetWidth - 9
+          );
+          const offset = parseFloat(
+            getComputedStyle(sectionRef.current).getPropertyValue("--offset")
+          ) || 0;
+          const rawHeight = document.documentElement.scrollHeight - offset;
+          setContentHeight(
+            Number.isFinite(rawHeight) ? Math.max(0, rawHeight) : 0
+          );
+        });
+      });
+      observer.observe(section2);
+      if (isWrapped) observer.observe(heightTarget);
+      return () => {
+        observer.disconnect();
+        if (rafIdRef.current) {
+          cancelAnimationFrame(rafIdRef.current);
+          rafIdRef.current = 0;
+        }
+      };
+    }, [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: mergedRef, ...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: showVirtualScroll && /* @__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(
+    "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(() => {
+      setIsMobile(isPageMobileWidth(pageWidth));
+    }, [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);
+    const contentWrapperRef = useCallback((node) => {
+      setContentWrapper((prev) => node && node !== prev ? node : prev);
+    }, []);
+    const footerSlotRef = useCallback((node) => {
+      setFooterSlot((prev) => node && node !== prev ? node : prev);
+    }, []);
+    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 () => 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: contentWrapperRef
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: styles["footer-slot"], ref: footerSlotRef })
+    ] }) }) });
+  }),
+  {
+    /**
+     * 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:
+     * - Renders as a section element inside Page's main landmark
+     * - Virtual scrolling support for long content
+     * - Automatic scroll synchronization
+     * - Responsive design
+     * - Portals into Page's content wrapper via context
+     * - 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 { Breadcrumbs, Button, ButtonLink, Chip, Dialog, Flex, IANA_TIMEZONES, Icon, Layout, Menu, Page, Text, TextField, Tooltip, useMergeRefs, useTrackingId };
 //# sourceMappingURL=index.js.map