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-B1-M3ZgP.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-Bnt8XUI7.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { T as Tooltip } from './Tooltip-BlStOXN3.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { F as Flex } from './Flex-DOUtHiPi.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-j3h_wRNi.js';
import { M as Menu } from './Menu-wpTyUDac.js';
import { B as Breadcrumbs } from './Breadcrumbs-CYmciJ1D.js';
import { T as TextField } from './TextField-YlMkDHp-.js';
import { T as Text } from './Text-J5YtSSXY.js';
import { C as Chip } from './Chip-CR5i8mQW.js';
import { createPortal } from 'react-dom';
import { D as Dialog } from './Dialog-DGmF6qx3.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-Be1Blwme.js.map
