@servicetitan/anvil2 1.26.0 → 1.27.0

package/dist/{Overflow-DK9d2Jyj.css → Overflow-Cv9sOPm3.css}

@@ -1,20 +1,21 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400;1,6..12,600;1,6..12,700&display=swap");
-._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-top_2tjg0_2 {
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,400;1,6..12,600;1,6..12,700&display=swap");@layer starter, reset, base, state, application;
+
+@layer starter, reset, base, state, application;
+._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-top_1cv5o_2 {
   background-image: radial-gradient(50% 1.5rem at 50% top, var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137)), transparent);
 }
-._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-right_2tjg0_6 {
+._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-right_1cv5o_6 {
   background-image: radial-gradient(1.5rem 50% at right 50%, var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137)), transparent);
 }
-._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-bottom_2tjg0_10 {
+._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-bottom_1cv5o_10 {
   background-image: radial-gradient(50% 1.5rem at 50% bottom, var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137)), transparent);
 }
-._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-left_2tjg0_14 {
+._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-left_1cv5o_14 {
   background-image: radial-gradient(1.5rem 50% at left 50%, var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137)), transparent);
 }
-@layer starter, reset, base, state, application;
 @layer reset {
-  ._overflow_2tjg0_2,
-  ._overflow-text_2tjg0_21 {
+  ._overflow_1cv5o_2,
+  ._overflow-text_1cv5o_20 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
@@ -27,11 +28,11 @@
     box-sizing: border-box;
     display: flex;
   }
-  ._expand-button_2tjg0_34 {
+  ._expand-button_1cv5o_33 {
     all: unset;
     font-family: var(--font-family-base, "Nunito Sans", sans-serif);
     font-size: 100%;
-    color: var(--foreground-color-primary, #0265dc);
+    color: var(--foreground-color-primary, #0265DC);
     margin: 0;
     padding: 0;
     border-style: none;
@@ -42,7 +43,7 @@
   }
 }
 @layer base {
-  ._overflow_2tjg0_2 {
+  ._overflow_1cv5o_2 {
     height: inherit;
     padding: 0.25rem;
     margin-inline: -0.25rem;
@@ -52,27 +53,27 @@
     transition: all 200ms cubic-bezier(0, 0, 0.4, 1);
     overflow: clip;
   }
-  ._overflow_2tjg0_2 ._content_2tjg0_59 {
+  ._overflow_1cv5o_2 ._content_1cv5o_58 {
     padding: 0.25rem;
     margin: -0.25rem;
     overflow: auto;
     scrollbar-gutter: stable;
     outline-offset: 0.125rem;
-    outline: 0 solid var(--focus-ring-color, #0265dc);
+    outline: 0 solid var(--focus-ring-color, #0265DC);
     transition: outline 200ms cubic-bezier(0, 0, 0.4, 1);
     border-radius: 0.375rem;
     width: -webkit-fill-available;
     width: -moz-available;
     width: stretch;
   }
-  ._overflow_2tjg0_2 ._content_2tjg0_59:focus-visible {
+  ._overflow_1cv5o_2 ._content_1cv5o_58:focus-visible {
     outline-width: 0.125rem;
   }
-  ._overflow-text_2tjg0_21 {
+  ._overflow-text_1cv5o_20 {
     gap: 0.5rem;
     flex-direction: column;
   }
-  ._overflow-text_2tjg0_21 ._content_2tjg0_59 {
+  ._overflow-text_1cv5o_20 ._content_1cv5o_58 {
     padding: 0.25rem;
     margin: -0.25rem;
     display: -webkit-box;
@@ -83,7 +84,7 @@
     line-height: 1.5;
     text-overflow: ellipsis;
   }
-  ._expand-button_2tjg0_34 {
+  ._expand-button_1cv5o_33 {
     cursor: pointer;
     align-items: center;
     align-self: flex-start;
@@ -91,68 +92,68 @@
     width: fit-content;
     border-radius: 0.1875rem;
     text-decoration: underline;
-    outline: 0 solid var(--focus-ring-color, #0265dc);
+    outline: 0 solid var(--focus-ring-color, #0265DC);
     outline-offset: 0.125rem;
   }
 }
 @layer state {
-  ._overflow_2tjg0_2._expanded_2tjg0_2 {
+  ._overflow_1cv5o_2._expanded_1cv5o_2 {
     grid-template-rows: 1fr;
   }
-  ._overflow_2tjg0_2 ._content_2tjg0_59:focus-visible {
+  ._overflow_1cv5o_2 ._content_1cv5o_58:focus-visible {
     outline-width: 0.125rem;
   }
-  ._overflow_2tjg0_2._horizontal_2tjg0_106 {
+  ._overflow_1cv5o_2._horizontal_1cv5o_105 {
     grid-template-rows: 1fr;
   }
-  ._overflow_2tjg0_2._truncate_2tjg0_109 {
+  ._overflow_1cv5o_2._truncate_1cv5o_108 {
     display: grid;
   }
-  ._overflow_2tjg0_2._truncate_2tjg0_109 ._content_2tjg0_59 {
+  ._overflow_1cv5o_2._truncate_1cv5o_108 ._content_1cv5o_58 {
     overflow: hidden;
   }
-  ._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-left_2tjg0_14 {
+  ._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-left_1cv5o_14 {
     position: absolute;
     left: 0;
     height: 100%;
     width: 1.5rem;
     pointer-events: none;
   }
-  ._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-right_2tjg0_6 {
+  ._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-right_1cv5o_6 {
     position: absolute;
     right: 0;
     height: 100%;
     width: 1.5rem;
     pointer-events: none;
   }
-  ._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-top_2tjg0_2 {
+  ._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-top_1cv5o_2 {
     position: absolute;
     top: 0;
     width: 100%;
     height: 1.5rem;
     pointer-events: none;
   }
-  ._overflow_2tjg0_2:not(._expanded_2tjg0_2) ._shadow-bottom_2tjg0_10 {
+  ._overflow_1cv5o_2:not(._expanded_1cv5o_2) ._shadow-bottom_1cv5o_10 {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 1.5rem;
     pointer-events: none;
   }
-  ._overflow-text_2tjg0_21._expanded_2tjg0_2 ._content_2tjg0_59 {
+  ._overflow-text_1cv5o_20._expanded_1cv5o_2 ._content_1cv5o_58 {
     min-height: -moz-fit-content;
     min-height: fit-content;
   }
-  ._expand-button_2tjg0_34:focus-visible {
+  ._expand-button_1cv5o_33:focus-visible {
     outline-width: 0.125rem;
   }
-  ._expand-button_2tjg0_34:hover {
+  ._expand-button_1cv5o_33:hover {
     opacity: 0.8;
   }
 }
 @layer application {
   @media (prefers-reduced-motion: reduce) {
-    ._overflow_2tjg0_2 {
+    ._overflow_1cv5o_2 {
       transition-duration: 0.01ms !important;
     }
   }

package/dist/Overflow.js

@@ -1,2 +1,2 @@
-export { O as Overflow, a as OverflowText, O as default } from './Overflow-UXjevWtH.js';
+export { O as Overflow, a as OverflowText, O as default } from './Overflow-Codc9CEy.js';
 //# sourceMappingURL=Overflow.js.map

package/dist/Page-DUA2NqcR.js

@@ -0,0 +1,452 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createContext, forwardRef, useContext, useState, useRef, useEffect } from 'react';
+import { b as BreakpointLg } from './primitive-BoyEHaOo.js';
+import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
+import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
+import { B as Button } from './Button-B2ruRsLb.js';
+import { P as Popover } from './Popover-Cbmy9jrU.js';
+import { I as Icon } from './Icon-CrE5UgZV.js';
+import { F as Flex } from './Flex-D92F03lr.js';
+import { T as Tooltip } from './Tooltip-DeaFnid1.js';
+import { B as ButtonLink } from './ButtonLink-CjxVUldA.js';
+import { B as Breadcrumbs } from './Breadcrumbs-ByNGkX5w.js';
+import { C as Chip } from './Chip-C5ElPVsb.js';
+import { M as Menu } from './Menu-1N6kdaVX.js';
+import { T as Text } from './Text-BnRrIF-W.js';
+import { D as Dialog } from './Dialog-BVG0m6dn.js';
+import { L as Layout } from './Layout-CUUb2PVr.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { a as AnvilProviderContext } from './AnvilProvider-DNJk1Ait.js';
+import { useTrackingId } from './useTrackingId.js';
+
+import './Page.css';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 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 SvgKeyboardArrowUp = (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: "M8.12 14.71 12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0z" }));
+
+const SvgLocalSettings = (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", { fillRule: "evenodd", d: "M10.5 21h-.955a.49.49 0 0 1-.484-.399l-.366-2.517a7.5 7.5 0 0 1-1.65-.936l-2.431.954a.49.49 0 0 1-.596-.204l-1.953-3.291a.465.465 0 0 1 .117-.608l2.06-1.573a8 8 0 0 1-.067-.926c0-.313.03-.622.068-.926l-2.06-1.572a.467.467 0 0 1-.117-.609l1.953-3.291c.122-.205.376-.285.595-.205l2.431.955a7.3 7.3 0 0 1 1.65-.936L9.062 2.4a.49.49 0 0 1 .482-.4h3.906c.244 0 .444.176.488.399l.366 2.518a7.5 7.5 0 0 1 1.65.935l2.432-.955a.49.49 0 0 1 .595.205l1.953 3.291a.465.465 0 0 1-.117.608L18.85 10.5h-4.091c-.436-1.348-1.73-2.325-3.26-2.325-1.89 0-3.418 1.486-3.418 3.325 0 1.5 1.018 2.767 2.42 3.182z", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M12.437 21.563A1.45 1.45 0 0 0 13.5 22h7q.624 0 1.062-.437A1.45 1.45 0 0 0 22 20.5v-7q0-.625-.438-1.062A1.45 1.45 0 0 0 20.5 12h-7q-.625 0-1.063.438A1.45 1.45 0 0 0 12 13.5v7q0 .625.437 1.063m.991-.991v-.777c.43-.505.96-.914 1.556-1.202q.919-.45 2.015-.45 1.098 0 2.016.45t1.556 1.202v.777zM17 17.143a1.5 1.5 0 0 0 1.113-.459 1.5 1.5 0 0 0 .458-1.113q0-.654-.458-1.112A1.5 1.5 0 0 0 17 14a1.5 1.5 0 0 0-1.113.459 1.5 1.5 0 0 0-.459 1.113q0 .654.459 1.113a1.52 1.52 0 0 0 1.113.458", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M10.5 21h-.955a.49.49 0 0 1-.484-.399l-.366-2.517a7.5 7.5 0 0 1-1.65-.936l-2.431.954a.49.49 0 0 1-.596-.204l-1.953-3.291a.465.465 0 0 1 .117-.608l2.06-1.573a8 8 0 0 1-.067-.926c0-.313.03-.622.068-.926l-2.06-1.572a.467.467 0 0 1-.117-.609l1.953-3.291c.122-.205.376-.285.595-.205l2.431.955a7.3 7.3 0 0 1 1.65-.936L9.062 2.4a.49.49 0 0 1 .482-.4h3.906c.244 0 .444.176.488.399l.366 2.518a7.5 7.5 0 0 1 1.65.935l2.432-.955a.49.49 0 0 1 .595.205l1.953 3.291a.465.465 0 0 1-.117.608L18.85 10.5h-4.091c-.436-1.348-1.73-2.325-3.26-2.325-1.89 0-3.418 1.486-3.418 3.325 0 1.5 1.018 2.767 2.42 3.182z", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M12.437 21.563A1.45 1.45 0 0 0 13.5 22h7q.624 0 1.062-.437A1.45 1.45 0 0 0 22 20.5v-7q0-.625-.438-1.062A1.45 1.45 0 0 0 20.5 12h-7q-.625 0-1.063.438A1.45 1.45 0 0 0 12 13.5v7q0 .625.437 1.063m.991-.991v-.777c.43-.505.96-.914 1.556-1.202q.919-.45 2.015-.45 1.098 0 2.016.45t1.556 1.202v.777zM17 17.143a1.5 1.5 0 0 0 1.113-.459 1.5 1.5 0 0 0 .458-1.113q0-.654-.458-1.112A1.5 1.5 0 0 0 17 14a1.5 1.5 0 0 0-1.113.459 1.5 1.5 0 0 0-.459 1.113q0 .654.459 1.113a1.52 1.52 0 0 0 1.113.458", clipRule: "evenodd" }));
+
+const SvgMoreVert = (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: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));
+
+function useMergedRef(...refs) {
+  return React.useCallback(element => {
+    for (let i = 0; i < refs.length; i++) {
+      const ref = refs[i];
+      if (typeof ref === 'function') ref(element);else if (ref && typeof ref === 'object') ref.current = element;
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+}
+
+const page = "_page_1yc3p_1";
+const container = "_container_1yc3p_17";
+const content = "_content_1yc3p_34";
+const sidebar = "_sidebar_1yc3p_48";
+const panel = "_panel_1yc3p_133";
+const header = "_header_1yc3p_161";
+const title = "_title_1yc3p_165";
+const chips = "_chips_1yc3p_175";
+const actions = "_actions_1yc3p_179";
+const description = "_description_1yc3p_192";
+const open = "_open_1yc3p_206";
+const small = "_small_1yc3p_206";
+const medium = "_medium_1yc3p_209";
+const large = "_large_1yc3p_212";
+const collapsed = "_collapsed_1yc3p_215";
+const noPadding = "_noPadding_1yc3p_309";
+const layout = "_layout_1yc3p_362";
+const styles = {
+	page: page,
+	container: container,
+	content: content,
+	"content-inner": "_content-inner_1yc3p_39",
+	"content-header-inner": "_content-header-inner_1yc3p_44",
+	sidebar: sidebar,
+	"sidebar-inner": "_sidebar-inner_1yc3p_59",
+	"toggle-button-wrapper": "_toggle-button-wrapper_1yc3p_86",
+	"toggle-button-tooltip": "_toggle-button-tooltip_1yc3p_94",
+	"toggle-button": "_toggle-button_1yc3p_86",
+	"sidebar-header": "_sidebar-header_1yc3p_112",
+	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_1yc3p_118",
+	"sidebar-adaptive-container": "_sidebar-adaptive-container_1yc3p_127",
+	"sidebar-adaptive": "_sidebar-adaptive_1yc3p_118",
+	panel: panel,
+	"panel-inner": "_panel-inner_1yc3p_141",
+	"virtual-scroll-container": "_virtual-scroll-container_1yc3p_152",
+	header: header,
+	"title-wrapper": "_title-wrapper_1yc3p_165",
+	title: title,
+	"preference-action": "_preference-action_1yc3p_172",
+	chips: chips,
+	actions: actions,
+	description: description,
+	open: open,
+	small: small,
+	medium: medium,
+	large: large,
+	collapsed: collapsed,
+	noPadding: noPadding,
+	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_1yc3p_118",
+	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_1yc3p_335",
+	layout: layout
+};
+
+const PageSideBarContext = createContext(null);
+const PageSidebar = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      currentPageTitle,
+      localStorageKey = "sidebar-collapsed",
+      ...rest
+    } = props;
+    const data = {
+      localStorageKey
+    };
+    const { breakpoint } = useContext(AnvilProviderContext);
+    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;
+      });
+    };
+    const breakpointWidth = +(BreakpointLg?.value.replace("px", "") ?? 0);
+    const innerWidth = breakpoint?.innerWidth ?? 0;
+    if (innerWidth < breakpointWidth) {
+      return /* @__PURE__ */ jsxs(Popover, { fillAvailableHeight: true, matchReferenceWidth: true, noPadding: true, disableCaret: true, children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { children: (props2) => {
+          if (typeof document !== "undefined") {
+            props2["data-state"] === "open" ? document.body.style.overflow = "hidden" : 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["data-state"] === "open" ? SvgKeyboardArrowUp : SvgKeyboardArrowDown
+                  }
+                )
+              ]
+            }
+          ) });
+        } }),
+        /* @__PURE__ */ jsx(Popover.Content, { className: styles["sidebar-adaptive-container"], children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            direction: "column",
+            className: styles["sidebar-adaptive"],
+            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 PagePanel = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      open,
+      size = "medium",
+      noPadding,
+      style,
+      className,
+      ...rest
+    } = props;
+    const classNames = cx([styles["panel"]], [styles[size]], className, {
+      [styles["open"]]: typeof open === "undefined" ? true : open,
+      [styles["persistent"]]: typeof open === "undefined",
+      [styles["noPadding"]]: noPadding
+    });
+    const { breakpoint } = useContext(AnvilProviderContext);
+    const breakpointWidth = +(BreakpointLg?.value.replace("px", "") ?? 0);
+    const innerWidth = breakpoint?.innerWidth ?? 0;
+    if (typeof open !== "undefined" && innerWidth < breakpointWidth) {
+      return /* @__PURE__ */ jsx(Dialog, { open, children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames,
+          "aria-hidden": !open,
+          "aria-disabled": !open,
+          ref,
+          ...rest,
+          children
+        }
+      ) }) });
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames,
+        "aria-hidden": !open,
+        "aria-disabled": !open,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles["panel-inner"],
+            tabIndex: typeof open !== "undefined" && open ? 0 : -1,
+            style,
+            children: /* @__PURE__ */ jsx("div", { children })
+          }
+        )
+      }
+    );
+  }
+);
+PagePanel.displayName = "PagePanel";
+const PageHeader = forwardRef(
+  (props, ref) => {
+    const {
+      title,
+      breadcrumbs,
+      chips,
+      description,
+      actions,
+      preferenceAction,
+      layout,
+      className,
+      ...rest
+    } = props;
+    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: SvgLocalSettings,
+          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: SvgLocalSettings,
+          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.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 && actions.secondary?.length < 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        actions.secondary?.[0] && /* @__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 && (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,
+                  ...rest2,
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      appearance: "secondary",
+                      icon: SvgMoreVert,
+                      "aria-label": "More actions"
+                    }
+                  )
+                }
+              ),
+              /* @__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: [
+      /* @__PURE__ */ jsx(Layout.Item, { children: breadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs, { children: breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsx(Breadcrumbs.Link, { ...breadcrumb }, index)) }) }),
+      /* @__PURE__ */ jsxs(Layout.Item, { md: actionItems ? 6 : 12, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles["title-wrapper"], children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: "headline",
+              size: "large",
+              el: "h1",
+              className: styles.title,
+              children: title
+            }
+          ),
+          preferenceItem
+        ] }),
+        chips && /* @__PURE__ */ jsx(Flex, { className: styles.chips, children: chips.map((chip, index) => /* @__PURE__ */ jsx(Chip, { ...chip }, index)) })
+      ] }),
+      /* @__PURE__ */ jsx(Layout.Item, { 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 mainRef = useRef(null);
+    const virtualScrollRef = useRef(null);
+    const blocker = useRef(true);
+    const [leftOffset, setLeftOffset] = useState(
+      (mainRef.current?.offsetLeft ?? 0) + (mainRef.current?.offsetWidth ?? 0) - 9
+    );
+    const [contentHeight, setContentHeight] = useState(
+      mainRef.current?.offsetHeight
+    );
+    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 (mainRef.current) {
+        const observer = new ResizeObserver(() => {
+          if (!mainRef.current) return;
+          setLeftOffset(
+            mainRef.current.offsetLeft + mainRef.current.offsetWidth - 9
+          );
+          setContentHeight(mainRef.current.offsetHeight);
+        });
+        observer.observe(mainRef.current);
+        return () => {
+          observer.disconnect();
+        };
+      }
+    }, []);
+    function scrollBody(e) {
+      if (typeof window === "undefined") return;
+      if (blocker.current) return;
+      window.scrollTo(0, e.target.scrollTop);
+    }
+    return /* @__PURE__ */ jsxs("main", { className: classNames, ref: useMergedRef(mainRef, 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 } })
+        }
+      )
+    ] });
+  }
+);
+PageContent.displayName = "PageContent";
+const PageElement = forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const classNames = cx(styles["page"], className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, "data-anv": "Page", ref, ...rest, children: /* @__PURE__ */ jsx("div", { className: styles["container"], children }) });
+});
+PageElement.displayName = "Page";
+const Page = Object.assign(PageElement, {
+  Sidebar: PageSidebar,
+  SidebarHeader: PageSidebarHeader,
+  Header: PageHeader,
+  Content: PageContent,
+  Panel: PagePanel
+});
+
+export { Page as P, PageSidebar as a, PageSidebarHeader as b, PagePanel as c, PageHeader as d, PageContent as e };
+//# sourceMappingURL=Page-DUA2NqcR.js.map