@servicetitan/anvil2 3.13.0 → 3.13.2

package/dist/{Page-D5NbV2Y8.js → Page-Z_ttFQJZ.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
 import { createContext, forwardRef, useContext, useState, useLayoutEffect, useRef, useEffect, useMemo, useCallback } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
-import { P as Popover, a as usePopoverContext } from './AiMark-Bf0x9FF3.js';
+import { P as Popover, a as usePopoverContext } from './AiMark-DvxF40mc.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';
@@ -10,7 +10,7 @@ import { b as BreakpointLg } from './primitive-BXgYQTTw.js';
 import { useTrackingId } from './useTrackingId.js';
 import { B as Button } from './Button-Dwh_Nd4l.js';
 import { I as Icon } from './Icon-B5zwN7GD.js';
-import { T as Tooltip } from './Tooltip-CzrJgl98.js';
+import { T as Tooltip } from './Tooltip-DM63W1Np.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { F as Flex } from './Flex-CRF7gj0_.js';
 import { L as Layout } from './Layout-C2Q2hyLG.js';
@@ -19,35 +19,36 @@ 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-DOFAxNvC.js';
-import { B as Breadcrumbs } from './Breadcrumbs-CR1od1rZ.js';
-import { M as Menu } from './Menu-CM0EndhK.js';
-import { T as TextField } from './TextField-DWbDQfHY.js';
-import { T as Text } from './Text-CEJHoh0p.js';
-import { C as Chip } from './Chip-DLK31FkK.js';
+import { B as Breadcrumbs } from './Breadcrumbs-lrFI8Kq5.js';
+import { M as Menu } from './Menu-BjPE_ODh.js';
+import { T as TextField } from './TextField-CIF-Ibkg.js';
+import { T as Text } from './Text-Ci-L0y2z.js';
+import { C as Chip } from './Chip-DbmQFaSy.js';
 import { createPortal } from 'react-dom';
-import { D as Dialog } from './Dialog-PcuDCqK7.js';
+import { D as Dialog } from './Dialog-DHheusQG.js';
 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';
 
-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";
+import './Page.css';const page = "_page_18ejq_4";
+const container = "_container_18ejq_22";
+const panel = "_panel_18ejq_52";
+const open = "_open_18ejq_52";
+const small = "_small_18ejq_52";
+const medium = "_medium_18ejq_55";
+const large = "_large_18ejq_58";
+const sidebar = "_sidebar_18ejq_61";
+const collapsed = "_collapsed_18ejq_61";
+const content = "_content_18ejq_71";
+const noPadding = "_noPadding_18ejq_366";
+const sticky = "_sticky_18ejq_432";
+const header = "_header_18ejq_485";
+const layout = "_layout_18ejq_489";
+const title = "_title_18ejq_497";
+const chips = "_chips_18ejq_507";
+const actions = "_actions_18ejq_511";
+const description = "_description_18ejq_524";
 const styles = {
 	page: page,
 	container: container,
@@ -59,39 +60,38 @@ 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_18ejq_71",
+	"content-wrapper": "_content-wrapper_18ejq_83",
+	"footer-slot": "_footer-slot_18ejq_97",
+	"content-inner": "_content-inner_18ejq_108",
+	"content-header-inner": "_content-header-inner_18ejq_131",
+	"sidebar-inner": "_sidebar-inner_18ejq_195",
+	"sidebar-header": "_sidebar-header_18ejq_234",
+	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_18ejq_256",
+	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_18ejq_256",
+	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_18ejq_277",
+	"sidebar-adaptive-container": "_sidebar-adaptive-container_18ejq_281",
+	"sidebar-adaptive": "_sidebar-adaptive_18ejq_256",
+	"toggle-button-wrapper": "_toggle-button-wrapper_18ejq_295",
+	"toggle-button-tooltip": "_toggle-button-tooltip_18ejq_304",
+	"toggle-button": "_toggle-button_18ejq_295",
 	noPadding: noPadding,
-	"panel-inner": "_panel-inner_1a6ta_365",
-	"drilldown-open": "_drilldown-open_1a6ta_403",
+	"panel-header": "_panel-header_18ejq_370",
+	"panel-content": "_panel-content_18ejq_371",
+	"panel-footer": "_panel-footer_18ejq_372",
+	"panel-inner": "_panel-inner_18ejq_376",
+	"drilldown-open": "_drilldown-open_18ejq_410",
+	sticky: sticky,
 	header: header,
 	layout: layout,
-	"title-wrapper": "_title-wrapper_1a6ta_454",
+	"title-wrapper": "_title-wrapper_18ejq_497",
 	title: title,
-	"preference-action": "_preference-action_1a6ta_461",
+	"preference-action": "_preference-action_18ejq_504",
 	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
 );
@@ -100,7 +100,7 @@ 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;
+const isPageContentScrollContainerActive = (pageWidth) => PAGE_LG_BREAKPOINT > 0 && (pageWidth ?? 0) >= PAGE_LG_BREAKPOINT;
 
 function AdaptiveSidebarContent({
   children,
@@ -240,8 +240,6 @@ const PageSidebarHeader = forwardRef(
 );
 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 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(
@@ -476,85 +474,9 @@ const PageContent = forwardRef(
     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 } })
-        }
-      )
-    ] });
+    const { contentWrapper } = useContext(PageContext);
+    const section = /* @__PURE__ */ jsx("section", { className: classNames, ref: mergedRef, ...rest, children: /* @__PURE__ */ jsx("div", { className: styles["content-inner"], children }) });
     if (contentWrapper) {
       return createPortal(section, contentWrapper);
     }
@@ -566,9 +488,86 @@ const PageContent = forwardRef(
 );
 PageContent.displayName = "PageContent";
 
+const PagePanelContext = createContext({});
+
+const PagePanelHeader = forwardRef(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+    const { headerRef } = useContext(PagePanelContext);
+    const classNames = cx(styles["panel-header"], className);
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: classNames,
+        "data-anv": "page-panel-header",
+        ref: useMergeRefs([ref, headerRef]),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+PagePanelHeader.displayName = "PagePanelHeader";
+
+const PagePanelContent = forwardRef(
+  (props, ref) => {
+    const { className, children, sticky = false, style, ...rest } = props;
+    const { headerRef } = useContext(PagePanelContext);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useEffect(() => {
+      const headerElement = headerRef?.current;
+      if (!sticky || !headerElement) return;
+      const updateHeight = () => {
+        setHeaderHeight(headerElement.offsetHeight || 0);
+      };
+      updateHeight();
+      const resizeObserver = new ResizeObserver(updateHeight);
+      resizeObserver.observe(headerElement);
+      return () => resizeObserver.disconnect();
+    }, [sticky, headerRef]);
+    const contentClassNames = cx(styles["panel-content"], className, {
+      [styles["sticky"]]: sticky
+    });
+    const stickyStyle = sticky ? { top: `${headerHeight}px` } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: contentClassNames,
+        "data-anv": "page-panel-content",
+        ref,
+        style: { ...stickyStyle, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+PagePanelContent.displayName = "PagePanelContent";
+
+const PagePanelFooter = forwardRef(
+  (props, ref) => {
+    const { className, children, sticky = false, ...rest } = props;
+    const classNames = cx(styles["panel-footer"], className, {
+      [styles["sticky"]]: sticky
+    });
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        className: classNames,
+        "data-anv": "page-panel-footer",
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+PagePanelFooter.displayName = "PagePanelFooter";
+
 const PagePanelInner = ({
   style,
   open,
+  hostedInDialog,
   children
 }) => {
   const { index } = useDrillDownContext();
@@ -579,14 +578,17 @@ const PagePanelInner = ({
     "div",
     {
       className: classNames,
-      tabIndex: typeof open !== "undefined" && open ? 0 : -1,
-      style: { ...style, overflowY: index === void 0 ? "auto" : "hidden" },
-      children: /* @__PURE__ */ jsx("div", { children })
+      tabIndex: hostedInDialog ? void 0 : typeof open !== "undefined" && open ? 0 : -1,
+      style: {
+        ...style,
+        ...hostedInDialog ? {} : { overflowY: index === void 0 ? "auto" : "hidden" }
+      },
+      children
     }
   );
 };
-const PagePanel = forwardRef(
-  (props, ref) => {
+const PagePanel = Object.assign(
+  forwardRef((props, ref) => {
     const {
       children,
       open,
@@ -599,6 +601,7 @@ const PagePanel = forwardRef(
       ...rest
     } = props;
     const [isMobile, setIsMobile] = useState(false);
+    const headerRef = useRef(null);
     const classNames = cx(
       [styles.panel, drillDownStyles.panel],
       [styles[size]],
@@ -653,7 +656,7 @@ const PagePanel = forwardRef(
           open,
           defaultDrillDownIndex,
           onDrillDownContextChange,
-          children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(PagePanelContext.Provider, { value: { headerRef }, children: /* @__PURE__ */ jsx(
             "div",
             {
               className: classNames,
@@ -661,13 +664,13 @@ const PagePanel = forwardRef(
               "aria-disabled": !open,
               ref,
               ...rest,
-              children
+              children: /* @__PURE__ */ jsx(PagePanelInner, { style, open, hostedInDialog: true, children })
             }
-          ) })
+          ) }) })
         }
       );
     }
-    return /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(PagePanelContext.Provider, { value: { headerRef }, children: /* @__PURE__ */ jsx(
       "div",
       {
         className: classNames,
@@ -677,7 +680,66 @@ const PagePanel = forwardRef(
         ...rest,
         children: /* @__PURE__ */ jsx(PagePanelInner, { style, open, children })
       }
-    ) });
+    ) }) });
+  }),
+  {
+    /**
+     * Header component for the panel that stays pinned to the top of the panel's scrollable area.
+     *
+     * Features:
+     * - Sticky positioning at the top of the panel's scrollable content
+     * - Proper semantic HTML structure
+     * - Consistent padding and styling with the design system
+     * - Supports all standard header element props
+     *
+     * @example
+     * <Page.Panel.Header>
+     *   <Text variant="headline" el="h3">Panel Title</Text>
+     * </Page.Panel.Header>
+     */
+    Header: PagePanelHeader,
+    /**
+     * Content container for the panel that holds the main scrollable content area.
+     *
+     * Features:
+     * - Grows to fill the space between the panel's header and footer
+     * - Scrolls independently of the header and footer once content overflows
+     * - Optional sticky positioning below the header, for a second sticky region (e.g. a filter bar)
+     * - Proper semantic HTML structure
+     * - Consistent padding and styling with the design system
+     * - Supports all standard div element props
+     *
+     * @example
+     * <Page.Panel.Content>
+     *   <Text>Panel content goes here</Text>
+     * </Page.Panel.Content>
+     *
+     * @example
+     * // A second, sticky Content region acting as a sub-header below Page.Panel.Header
+     * <Page.Panel.Content sticky>
+     *   <TextField placeholder="Filter results..." />
+     * </Page.Panel.Content>
+     * <Page.Panel.Content>
+     *   <Text>Scrollable results</Text>
+     * </Page.Panel.Content>
+     */
+    Content: PagePanelContent,
+    /**
+     * Footer component for the panel that displays action buttons and controls.
+     *
+     * Features:
+     * - Flex layout that right-aligns action buttons and wraps on overflow
+     * - Optional sticky positioning at the bottom of the panel
+     * - Proper semantic HTML structure
+     * - Consistent padding and styling with the design system
+     * - Supports all standard footer element props
+     *
+     * @example
+     * <Page.Panel.Footer sticky>
+     *   <Button appearance="primary" onClick={handleSave}>Save</Button>
+     * </Page.Panel.Footer>
+     */
+    Footer: PagePanelFooter
   }
 );
 PagePanel.displayName = "PagePanel";
@@ -744,7 +806,8 @@ const Page = Object.assign(
         "main",
         {
           className: styles["content-wrapper"],
-          ref: contentWrapperRef
+          ref: contentWrapperRef,
+          tabIndex: isPageContentScrollContainerActive(pageWidth) ? 0 : void 0
         }
       ),
       /* @__PURE__ */ jsx("div", { className: styles["footer-slot"], ref: footerSlotRef })
@@ -825,11 +888,10 @@ const Page = Object.assign(
      *
      * Features:
      * - Renders as a section element inside Page's main landmark
-     * - Virtual scrolling support for long content
-     * - Automatic scroll synchronization
+     * - Native scroll container for long content at desktop breakpoints
+     * - Keyboard operable (Page Up / Page Down) when focus is within Page.Content
      * - Responsive design
      * - Portals into Page's content wrapper via context
-     * - Scroll position management
      *
      * @example
      * <Page.Content>
@@ -849,11 +911,20 @@ const Page = Object.assign(
      * - Automatic mobile dialog conversion
      * - Keyboard navigation and accessibility support
      * - Smooth animations and transitions
+     * - Compound component structure with Header, Content, and Footer
+     * - Sticky header and optional sticky footer around a scrollable content area
      *
      * @example
      * <Page.Panel open={isOpen} size="medium">
-     *   <Text variant="headline" el="h3">Panel Content</Text>
-     *   <Button onClick={() => setIsOpen(false)}>Close</Button>
+     *   <Page.Panel.Header>
+     *     <Text variant="headline" el="h3">Panel Title</Text>
+     *   </Page.Panel.Header>
+     *   <Page.Panel.Content>
+     *     <Text>Panel content</Text>
+     *   </Page.Panel.Content>
+     *   <Page.Panel.Footer>
+     *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+     *   </Page.Panel.Footer>
      * </Page.Panel>
      */
     Panel: PagePanel,
@@ -878,4 +949,4 @@ const Page = Object.assign(
 Page.displayName = "Page";
 
 export { Page as P };
-//# sourceMappingURL=Page-D5NbV2Y8.js.map
+//# sourceMappingURL=Page-Z_ttFQJZ.js.map