@servicetitan/anvil2 3.16.1 → 3.18.0

package/dist/index.js

@@ -1,92 +1,93 @@
 import './index2.css';export { DndSort, DndSortCard, DndSortZone } from './DndSort.js';
-export { A as Alert } from './Alert-lLo1N7Tj.js';
-import { P as Popover, a as usePopoverContext } from './AiMark-BfmK30vL.js';
-export { A as AiMark } from './AiMark-BfmK30vL.js';
-export { A as Announcement } from './Announcement-PfnsVVz1.js';
+export { A as Alert } from './Alert-BOqBFMUV.js';
+import { P as Popover, a as usePopoverContext } from './AiMark-Ca7WmL-9.js';
+export { A as AiMark } from './AiMark-Ca7WmL-9.js';
+export { A as Announcement } from './Announcement-AN9HnhZ-.js';
 export { A as Avatar } from './Avatar-Ba662b3z.js';
 export { A as AvatarGroup } from './Avatar-CwnLhw9m.js';
 export { B as Badge } from './Badge-BNrYBFiU.js';
-import { B as Breadcrumbs } from './Breadcrumbs-RdL4Fvmu.js';
-import { B as Button } from './Button-Dn6-01xl.js';
+import { B as Breadcrumbs } from './Breadcrumbs-1MCqy-gU.js';
+import { B as Button } from './Button-B_E6ybA-.js';
 export { B as ButtonCompound } from './ButtonCompound-D7kA0qXr.js';
 import { B as ButtonLink } from './ButtonLink-DOFAxNvC.js';
-export { B as ButtonToggle } from './ButtonToggle-BSU8GBxr.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-IzXG1aJw.js';
+export { B as ButtonToggle } from './ButtonToggle-D0eXySEM.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-BcsuV4Xv.js';
 export { C as Card } from './Card-Bt0F6RTq.js';
-export { C as Checkbox } from './Checkbox-U-kuWhgc.js';
-import { C as Chip } from './Chip-2OydLs66.js';
-export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, u as useInfiniteCombobox } from './useInfiniteCombobox-ynkeFngn.js';
-export { D as DateFieldRange } from './DateFieldRange-X2jdOTYY.js';
-export { D as DateFieldSingle } from './DateFieldSingle-BJ16tpOz.js';
-export { D as DateFieldYearless } from './DateFieldYearless-CMm8vtz_.js';
-export { D as DateFieldYearlessRange } from './DateFieldYearlessRange-BHHs-Z1Q.js';
-export { D as DaysOfTheWeek } from './DaysOfTheWeek-BHXxs0Bo.js';
-export { D as Details } from './Details-BxqP-5vp.js';
-import { D as Dialog } from './Dialog-_tHqOsbr.js';
+export { C as Checkbox } from './Checkbox-BCaUzwF_.js';
+import { C as Chip } from './Chip-BWqgUX71.js';
+export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, u as useInfiniteCombobox } from './useInfiniteCombobox-ZZalag0-.js';
+export { D as DateFieldRange } from './DateFieldRange-BPcsS6TW.js';
+export { D as DateFieldSingle } from './DateFieldSingle-BRMhe0OM.js';
+export { D as DateFieldYearless } from './DateFieldYearless-NOgDKzrJ.js';
+export { D as DateFieldYearlessRange } from './DateFieldYearlessRange-ChvypgXC.js';
+export { D as DaysOfTheWeek } from './DaysOfTheWeek-nYitIKnQ.js';
+export { a as Details } from './Details-DQ-_Mg4o.js';
+import { D as Dialog } from './Dialog-BgWoV2on.js';
 export { D as Divider } from './Divider-C7fp5Xb6.js';
-export { D as Dnd } from './index-Bldaza5t.js';
-export { D as Drawer } from './Drawer-D-ThWNp0.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-BOeeNUsy.js';
-export { E as EditCard } from './EditCard-B6l2vhBS.js';
-export { F as FieldLabel } from './FieldLabel-ThEmUiAq.js';
-export { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
+export { D as Dnd } from './index-CyN5oapA.js';
+export { D as Drawer } from './Drawer-BVBLtGn_.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-B8pIhfWa.js';
+export { E as EditCard } from './EditCard-hivZDPZh.js';
+export { F as FieldLabel } from './FieldLabel-Cn559Brf.js';
+export { w as warnDeprecatedErrorUsage } from './utils-DwLrXpmt.js';
 export { F as FieldMessage } from './FieldMessage-8c9yA_kw.js';
 import { F as Flex } from './Flex-CRF7gj0_.js';
 export { G as Grid } from './Grid-BPCDtqoT.js';
 import { I as Icon } from './Icon-B5zwN7GD.js';
-export { I as InputMask } from './InputMask-BQigi5oW.js';
+export { I as InputMask } from './InputMask-DICWdeiF.js';
 import { L as Layout } from './Layout-C8fKY7Eh.js';
 export { b as LayoutElement, a as LayoutItem } from './Layout-C8fKY7Eh.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-CTr2fk7l.js';
-export { L as Listbox } from './Listbox-CD9ZptSZ.js';
-export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-YJscfG4x.js';
-import { M as Menu } from './Menu-Da2OEN0o.js';
-export { N as NumberField } from './NumberField-CxmJx4gs.js';
+export { L as Listbox } from './Listbox-n1CmJ2gh.js';
+export { L as ListView, a as ListViewOption, b as ListViewOptionCell } from './ListView-BeGBn5Vk.js';
+import { M as Menu } from './Menu-DqP7YQgE.js';
+export { N as NumberField } from './NumberField-DjOvcCa1.js';
 export { Overflow, OverflowText } from './Overflow.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-Bsl99RRI.js';
-export { P as Popover } from './Popover-CIh1CsoJ.js';
-export { P as ProgressBar } from './ProgressBar-zPKYv4Il.js';
-export { R as Radio } from './Radio-C1VnatcL.js';
-export { S as SearchField } from './SearchField-ChoNtw8w.js';
-export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-BHVJmmTH.js';
-export { S as SelectCard } from './SelectCard-DrmMU_GD.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-CeazN-gI.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-Cq5sena6.js';
-export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-CPpE6vUG.js';
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-BhNXsgAN.js';
-export { S as SelectTrigger } from './SelectTrigger-B4OUTO9S.js';
+export { P as Pagination } from './Pagination-CsSpaTCs.js';
+export { P as Popover } from './Popover-CEKl0WY3.js';
+export { P as ProgressBar } from './ProgressBar-ubCKKewC.js';
+export { R as Radio } from './Radio-DkB6zFsS.js';
+export { S as SearchField } from './SearchField-Bk-Ltu4v.js';
+export { S as SegmentedControl, a as SegmentedControlSegment } from './SegmentedControl-BCqWq65N.js';
+export { S as SelectCard } from './SelectCard-DeAUW1bL.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DpZL4wDo.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-CWsOdu-o.js';
+export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-Klna2oqs.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-AVcf8ZUZ.js';
+export { S as SelectTrigger } from './SelectTrigger-DKY7rpZn.js';
 export { S as SideNav } from './SideNav-CHG7i8Dy.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-l_P6VPOv.js';
-export { S as Switch } from './Switch-1iNdXTik.js';
-export { T as Tab } from './Tab-DR5YYXkq.js';
-import { T as Text } from './Text-rihxXHSe.js';
-export { T as Textarea } from './Textarea-ppapJUwh.js';
-import { T as TextField } from './TextField-Bxd-Qzoi.js';
-export { T as TimeField } from './TimeField-Hwt_oRbg.js';
-export { T as Toaster } from './Toaster-dVGVVcat.js';
-export { t as toast } from './Toaster-SqkX0Kes.js';
-export { T as Toolbar } from './Toolbar-CMulzswf.js';
-import { T as Tooltip } from './Tooltip-C_VcYS9P.js';
+export { S as Stepper, a as StepperBase } from './Stepper-D3SHXfX1.js';
+export { S as Switch } from './Switch-C9yQgF4w.js';
+export { T as Tab } from './Tab-CXwVQ5-G.js';
+import { T as Text } from './Text-D4SWT4u-.js';
+export { T as Textarea } from './Textarea-Dv__veBJ.js';
+import { T as TextField } from './TextField-DmdT2k0w.js';
+export { T as TimeField } from './TimeField-De9qBimk.js';
+export { T as Toaster } from './Toaster-BlwTxTLf.js';
+export { t as toast } from './Toaster-sO16N9b5.js';
+export { T as Toolbar } from './Toolbar-Buq2zze0.js';
+import { T as Tooltip } from './Tooltip-CsTkZqMg.js';
 export { u as useAccessibleColor } from './useAccessibleColor-BYKjkGRg.js';
 export { u as useBreakpoint } from './useBreakpoint-BBNRlMGZ.js';
 export { u as usePrefersColorScheme } from './usePrefersColorScheme-CwOF0TjZ.js';
-export { u as usePrefersReducedMotion } from './usePrefersReducedMotion-DR9B_D6w.js';
+export { p as prefersReducedMotion, u as usePrefersReducedMotion } from './usePrefersReducedMotion-BLoVFiJL.js';
+export { u as useReducedMotion } from './use-reduced-motion-CUshwaEW.js';
 export { u as useSwipe } from './useSwipe-Cp-CJxLU.js';
 import { useTrackingId } from './useTrackingId.js';
-export { A as AnvilProvider, a as AnvilProviderContext } from './AnvilProvider-DagOuc9c.js';
+export { A as AnvilProvider, a as AnvilProviderContext } from './AnvilProvider-BVTxXzoS.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-DW-Mflv6.js';
+export { T as ThemeProvider } from './ThemeProvider-DS2aL89d.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';
@@ -100,9 +101,9 @@ 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-CGybEc6x.js';
-import { u as useDrillDownContext } from './useDrillDownContext-D5_NjqY4.js';
+import { d as drillDownStyles, D as DrillDownContext } from './DrillDown.module-BFE5BcJB.js';
+import { a as useDrillDownContextState, S as SuppressPanelSwapWarningContext, D as DisableConditionalUnmountWarningContext } from './useInitialFocus-KdirjHEb.js';
+import { u as useDrillDownContext } from './useDrillDownContext-BLDjyNEt.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 
 const IANA_TIMEZONES = [
@@ -533,23 +534,23 @@ const IANA_TIMEZONES = [
   "Pacific/Pago_Pago"
 ];
 
-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 page = "_page_1q2rx_1";
+const container = "_container_1q2rx_29";
+const panel = "_panel_1q2rx_58";
+const open = "_open_1q2rx_58";
+const small = "_small_1q2rx_58";
+const medium = "_medium_1q2rx_61";
+const large = "_large_1q2rx_64";
+const sidebar = "_sidebar_1q2rx_67";
+const collapsed = "_collapsed_1q2rx_67";
+const content = "_content_1q2rx_77";
+const noPadding = "_noPadding_1q2rx_365";
+const header = "_header_1q2rx_442";
+const layout = "_layout_1q2rx_446";
+const title = "_title_1q2rx_454";
+const chips = "_chips_1q2rx_464";
+const actions = "_actions_1q2rx_468";
+const description = "_description_1q2rx_487";
 const styles = {
 	page: page,
 	container: container,
@@ -561,30 +562,30 @@ const styles = {
 	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",
+	"content-footer": "_content-footer_1q2rx_77",
+	"virtual-scroll-container": "_virtual-scroll-container_1q2rx_84",
+	"content-wrapper": "_content-wrapper_1q2rx_92",
+	"footer-slot": "_footer-slot_1q2rx_99",
+	"content-inner": "_content-inner_1q2rx_109",
+	"content-header-inner": "_content-header-inner_1q2rx_131",
+	"sidebar-inner": "_sidebar-inner_1q2rx_195",
+	"sidebar-header": "_sidebar-header_1q2rx_234",
+	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_1q2rx_256",
+	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_1q2rx_256",
+	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_1q2rx_277",
+	"sidebar-adaptive-container": "_sidebar-adaptive-container_1q2rx_281",
+	"sidebar-adaptive": "_sidebar-adaptive_1q2rx_256",
+	"toggle-button-wrapper": "_toggle-button-wrapper_1q2rx_295",
+	"toggle-button-tooltip": "_toggle-button-tooltip_1q2rx_304",
+	"toggle-button": "_toggle-button_1q2rx_295",
 	noPadding: noPadding,
-	"panel-inner": "_panel-inner_1a6ta_365",
-	"drilldown-open": "_drilldown-open_1a6ta_403",
+	"panel-inner": "_panel-inner_1q2rx_365",
+	"drilldown-open": "_drilldown-open_1q2rx_403",
 	header: header,
 	layout: layout,
-	"title-wrapper": "_title-wrapper_1a6ta_454",
+	"title-wrapper": "_title-wrapper_1q2rx_454",
 	title: title,
-	"preference-action": "_preference-action_1a6ta_461",
+	"preference-action": "_preference-action_1q2rx_461",
 	chips: chips,
 	actions: actions,
 	description: description
@@ -635,6 +636,7 @@ const PageSidebar = forwardRef(
       className,
       currentPageTitle,
       localStorageKey = "sidebar-collapsed",
+      onOpenChange,
       ...rest
     } = props;
     const data = {
@@ -661,10 +663,10 @@ const PageSidebar = forwardRef(
       [styles["collapsed"]]: collapsed
     });
     const onToggleButtonClick = () => {
-      setCollapsed((prev) => {
-        localStorage.setItem(localStorageKey, JSON.stringify(!prev));
-        return !prev;
-      });
+      const next = !collapsed;
+      localStorage.setItem(localStorageKey, JSON.stringify(next));
+      setCollapsed(next);
+      onOpenChange?.(!next);
     };
     if (isMobile) {
       return /* @__PURE__ */ jsxs(Popover, { fillAvailableHeight: true, matchReferenceWidth: true, noPadding: true, children: [
@@ -862,7 +864,7 @@ const PageHeader = forwardRef(
     );
     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(Layout.Item, { md: actionItems || editing ? 6 : 12, children: [
         /* @__PURE__ */ jsxs("div", { className: styles["title-wrapper"], children: [
           title.onChange && editing ? /* @__PURE__ */ jsx(
             "form",
@@ -960,7 +962,7 @@ const PageHeader = forwardRef(
         ] }),
         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 }),
+      actions && /* @__PURE__ */ jsx(Layout.Item, { md: 6, children: actionItems }),
       description && /* @__PURE__ */ jsx(Layout.Item, { md: 12, className: styles.description, children: description })
     ] }) }) });
   }
@@ -1094,7 +1096,10 @@ const PagePanel = forwardRef(
       onDrillDownContextChange,
       ...rest
     } = props;
-    const [isMobile, setIsMobile] = useState(false);
+    const { pageWidth } = useContext(PageContext);
+    const [isMobile, setIsMobile] = useState(
+      () => pageWidth !== void 0 ? isPageMobileWidth(pageWidth) : false
+    );
     const classNames = cx(
       [styles.panel, drillDownStyles.panel],
       [styles[size]],
@@ -1106,7 +1111,8 @@ const PagePanel = forwardRef(
       }
     );
     const drillDownContextValue = useDrillDownContextState({
-      defaultDrillDownIndex
+      defaultDrillDownIndex,
+      host: "panel"
     });
     const drillDownContextProviderValue = useMemo(
       () => ({
@@ -1118,8 +1124,9 @@ const PagePanel = forwardRef(
     useLayoutEffect(() => {
       onDrillDownContextChange?.(drillDownContextProviderValue);
     }, [drillDownContextProviderValue]);
-    const { pageWidth } = useContext(PageContext);
     const previousOpenRef = useRef(open);
+    const suppressPanelSwapWarningRef = useRef(false);
+    const previousIsMobileRef = useRef(isMobile);
     useEffect(() => {
       if (isMobile) {
         previousOpenRef.current = open;
@@ -1140,16 +1147,58 @@ const PagePanel = forwardRef(
       );
     }, [open, isMobile, drillDownContextValue]);
     useLayoutEffect(() => {
-      setIsMobile(isPageMobileWidth(pageWidth));
-    }, [pageWidth]);
+      const nextIsMobile = pageWidth !== void 0 ? isPageMobileWidth(pageWidth) : false;
+      if (typeof open !== "undefined" && previousIsMobileRef.current !== nextIsMobile) {
+        suppressPanelSwapWarningRef.current = true;
+      }
+      previousIsMobileRef.current = nextIsMobile;
+      setIsMobile(nextIsMobile);
+    }, [pageWidth, open]);
+    useEffect(() => {
+      queueMicrotask(() => {
+        suppressPanelSwapWarningRef.current = false;
+      });
+    }, [isMobile]);
     if (typeof open !== "undefined" && isMobile) {
-      return /* @__PURE__ */ jsx(
-        Dialog,
+      return (
+        // TODO(ANV-5711): Remove once Page.Panel stops swapping div/Dialog at the mobile breakpoint.
+        // Suppression context prevents warnings when the subtree remounts during
+        // a panel swap across the mobile breakpoint.
+        /* @__PURE__ */ jsx(
+          SuppressPanelSwapWarningContext.Provider,
+          {
+            value: suppressPanelSwapWarningRef,
+            children: /* @__PURE__ */ jsx(DisableConditionalUnmountWarningContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                open,
+                defaultDrillDownIndex,
+                onDrillDownContextChange,
+                children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(DisableConditionalUnmountWarningContext.Provider, { value: false, children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classNames,
+                    "aria-hidden": !open,
+                    "aria-disabled": !open,
+                    ref,
+                    ...rest,
+                    children
+                  }
+                ) }) })
+              }
+            ) })
+          }
+        )
+      );
+    }
+    return (
+      // Suppression context prevents warnings when the subtree remounts during
+      // a panel swap across the mobile breakpoint.
+      /* @__PURE__ */ jsx(
+        SuppressPanelSwapWarningContext.Provider,
         {
-          open,
-          defaultDrillDownIndex,
-          onDrillDownContextChange,
-          children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(
+          value: suppressPanelSwapWarningRef,
+          children: /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(
             "div",
             {
               className: classNames,
@@ -1157,23 +1206,12 @@ const PagePanel = forwardRef(
               "aria-disabled": !open,
               ref,
               ...rest,
-              children
+              children: /* @__PURE__ */ jsx(PagePanelInner, { style, open, 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";
@@ -1206,7 +1244,7 @@ const Page = Object.assign(
     const classNames = cx(styles["page"], className);
     const elRef = useRef(null);
     const combinedRef = useMergeRefs([elRef, ref]);
-    const [pageWidth, setPageWidth] = useState(0);
+    const [pageWidth, setPageWidth] = useState(void 0);
     const [contentWrapper, setContentWrapper] = useState(
       null
     );
@@ -1219,6 +1257,12 @@ const Page = Object.assign(
     }, []);
     useLayoutEffect(() => {
       const element = elRef.current;
+      if (element) {
+        const w = element.clientWidth;
+        if (w > 0) {
+          setPageWidth(w);
+        }
+      }
       const resizeObserver = new ResizeObserver((entries) => {
         const entry = entries[0];
         if (entry) {