@servicetitan/anvil2 3.13.0 → 3.13.2

package/dist/src/beta/components/Page/Page.d.ts

@@ -0,0 +1,231 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the Page component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
+export type PageProps = ComponentPropsWithoutRef<"div">;
+/**
+ * Page component for creating full-page layouts with navigation and content areas.
+ *
+ * Features:
+ * - Container for complete page layouts
+ * - Supports sidebar navigation with collapsible state
+ * - Header with breadcrumbs, chips, and action buttons
+ * - Main content area with its own native scroll container
+ * - Optional slide-out panels with responsive dialog fallback
+ * - Footer with layout utilities
+ * - Responsive design with mobile adaptations
+ * - Accessibility support with proper landmarks
+ * - Automatic tracking ID generation for analytics
+ * - Local storage persistence for sidebar state
+ *
+ * @example
+ * <Page>
+ *   <Page.Sidebar currentPageTitle="Navigation">
+ *     <Page.SidebarHeader>
+ *       <Text variant="headline" el="h2">Navigation</Text>
+ *     </Page.SidebarHeader>
+ *     <SideNav>
+ *       <SideNavLink pathname="/">Home</SideNavLink>
+ *     </SideNav>
+ *   </Page.Sidebar>
+ *   <Page.Header
+ *     title="Page Title"
+ *     breadcrumbs={[{ href: "/", children: "Home" }]}
+ *     actions={{ primary: { label: "Save", onClick: handleSave } }}
+ *   />
+ *   <Page.Content>
+ *     <Text>Main content</Text>
+ *   </Page.Content>
+ *   <Page.Panel open={isPanelOpen} size="medium">
+ *     <Page.Panel.Content>
+ *       <Text>Panel content</Text>
+ *     </Page.Panel.Content>
+ *   </Page.Panel>
+ *   <Page.Footer>
+ *     <Text>Footer content</Text>
+ *   </Page.Footer>
+ * </Page>
+ */
+export declare const Page: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        localStorageKey?: string;
+        "data-tracking-id"?: string;
+        currentPageTitle?: string;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+        title: string | {
+            text: string;
+            onChange?: (title: string) => void | boolean;
+            editButtonLabel?: string;
+            editFieldLabel?: string;
+            confirmButtonLabel?: string;
+            cancelButtonLabel?: string;
+        };
+        breadcrumbs?: import('../../..').BreadcrumbsLinkProps[];
+        chips?: import('../../..').ChipProps[];
+        description?: import('react').ReactNode;
+        actions?: {
+            primary?: (Omit<import('../../..').ButtonProps, "appearance"> & {
+                label: string;
+            }) | (Omit<Omit<import('../../..').ButtonProps, "appearance"> & {
+                label: string;
+            }, "onClick"> & {
+                items: (Omit<import('../../..').ButtonProps, "appearance"> & {
+                    label: string;
+                })[];
+            });
+            secondary?: (Omit<import('../../..').ButtonProps, "appearance"> & {
+                label: string;
+            })[];
+        };
+        preferenceAction?: (Omit<import('../../..').ButtonProps, "className" | "aria-label" | "size" | "icon" | "appearance"> & {
+            "aria-label": string;
+        }) | (Omit<import('../../..').ButtonLinkProps, "className" | "aria-label" | "size" | "icon" | "appearance"> & {
+            "aria-label": string;
+        });
+        layout?: import('../../..').LayoutProps;
+    } & import('react').RefAttributes<HTMLHeadElement>>;
+    /**
+     * PageContent component for the main content area of a page.
+     *
+     * Features:
+     * - Renders as a section element inside Page's main landmark
+     * - 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
+     *
+     * @example
+     * <Page.Content>
+     *   <Text>Main page content goes here</Text>
+     *   <Button>Action Button</Button>
+     * </Page.Content>
+     */
+    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    /**
+     * 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
+     * - 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">
+     *   <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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        open?: boolean;
+        size?: "small" | "medium" | "large";
+        noPadding?: boolean;
+        defaultDrillDownIndex?: import('../../../components/DrillDown/internal/DrillDownContext').DrillDownContextProps["index"];
+        onDrillDownContextChange?: (context: import('../../../components/DrillDown/internal/DrillDownContext').DrillDownContextProps) => void;
+    } & import('react').RefAttributes<HTMLDivElement>> & {
+        Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+        Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            sticky?: boolean;
+        } & import('react').RefAttributes<HTMLDivElement>>;
+        Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+            sticky?: boolean;
+        } & import('react').RefAttributes<HTMLElement>>;
+    };
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../..').LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/src/beta/components/Page/Page.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/beta/components/Page/PageContent.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the PageContent component
+ * @extends ComponentPropsWithoutRef<"section">
+ */
+export type PageContentProps = ComponentPropsWithoutRef<"section">;
+/**
+ * PageContent component for the main content area of a page.
+ *
+ * Features:
+ * - Renders as a section element inside Page's main landmark
+ * - Portals into Page's content wrapper via context, which is the native scroll
+ *   container at desktop breakpoints — sibling sections scroll together as one
+ * - Responsive design
+ *
+ * @example
+ * <Page.Content>
+ *   <Text>Main page content goes here</Text>
+ *   <Button>Action Button</Button>
+ * </Page.Content>
+ */
+export declare const PageContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;

package/dist/src/beta/components/Page/PageContext.d.ts

@@ -0,0 +1,6 @@
+export declare const PageContext: import('react').Context<PageContextProps>;
+export type PageContextProps = {
+    pageWidth?: number;
+    contentWrapper?: HTMLElement | null;
+    footerSlot?: HTMLElement | null;
+};

package/dist/src/beta/components/Page/PageFooter.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { LayoutUtilProps } from '../../../types';
+/**
+ * Props for the PageFooter component
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
+export type PageFooterProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps;
+/**
+ * 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
+ * - Portals into Page's footer slot via context
+ *
+ * @example
+ * <Page.Footer>
+ *   <Text>Footer content with layout utilities</Text>
+ * </Page.Footer>
+ */
+export declare const PageFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/beta/components/Page/PageHeader.d.ts

@@ -0,0 +1,157 @@
+import { ButtonProps, ButtonLinkProps, BreadcrumbsLinkProps, ChipProps } from '../../../components';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { LayoutProps } from '../../../components/Layout';
+/**
+ * Props for page header action buttons
+ */
+type PageHeaderActionProps = Omit<ButtonProps, "appearance"> & {
+    /**
+     * Label text for the action button
+     */
+    label: string;
+};
+/**
+ * Props for a page header action that opens a menu instead of invoking a single
+ * handler. `onClick` is omitted because the whole button opens the menu -- an
+ * action carrying both a handler and items would be a split button, which
+ * Anvil does not support.
+ */
+type PageHeaderMenuActionProps = Omit<PageHeaderActionProps, "onClick"> & {
+    /**
+     * Actions listed in the menu this button opens
+     */
+    items: PageHeaderActionProps[];
+};
+/**
+ * Props for page header actions configuration
+ */
+type PageHeaderActionsProps = {
+    /**
+     * Primary action button. Pass `items` instead of `onClick` to render a
+     * primary button that opens a menu of actions.
+     */
+    primary?: PageHeaderActionProps | PageHeaderMenuActionProps;
+    /**
+     * Array of secondary action buttons
+     */
+    secondary?: PageHeaderActionProps[];
+};
+/**
+ * Base props for preference actions
+ */
+type BasePreferenceProps = {
+    /**
+     * Accessible label for the preference action
+     */
+    "aria-label": string;
+};
+/**
+ * Props for preference button actions
+ */
+type PreferenceButtonProps = Omit<ButtonProps, "aria-label" | "icon" | "appearance" | "size" | "className"> & BasePreferenceProps;
+/**
+ * Props for preference link actions
+ */
+type PreferenceLinkProps = Omit<ButtonLinkProps, "aria-label" | "icon" | "appearance" | "size" | "className"> & BasePreferenceProps;
+type PageHeaderTitleConfig = {
+    text: string;
+    onChange?: (title: string) => void | boolean;
+    editButtonLabel?: string;
+    editFieldLabel?: string;
+    confirmButtonLabel?: string;
+    cancelButtonLabel?: string;
+};
+type PageHeaderTitle = PageHeaderTitleConfig["text"] | PageHeaderTitleConfig;
+/**
+ * Props for the PageHeader component
+ * @extends ComponentPropsWithoutRef<"header">
+ */
+export type PageHeaderProps = Omit<ComponentPropsWithoutRef<"header">, "title"> & {
+    /**
+     * Main title of the page
+     */
+    title: PageHeaderTitle;
+    /**
+     * Breadcrumb navigation links
+     */
+    breadcrumbs?: BreadcrumbsLinkProps[];
+    /**
+     * Status chips to display
+     */
+    chips?: ChipProps[];
+    /**
+     * Description text or content below the title
+     */
+    description?: ReactNode;
+    /**
+     * Primary and secondary action buttons
+     */
+    actions?: PageHeaderActionsProps;
+    /**
+     * Preference action button or link
+     */
+    preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
+    /**
+     * Layout configuration for the header
+     */
+    layout?: LayoutProps;
+};
+/**
+ * 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 }]
+ *   }}
+ * />
+ */
+export declare const PageHeader: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    /**
+     * Main title of the page
+     */
+    title: PageHeaderTitle;
+    /**
+     * Breadcrumb navigation links
+     */
+    breadcrumbs?: BreadcrumbsLinkProps[];
+    /**
+     * Status chips to display
+     */
+    chips?: ChipProps[];
+    /**
+     * Description text or content below the title
+     */
+    description?: ReactNode;
+    /**
+     * Primary and secondary action buttons
+     */
+    actions?: PageHeaderActionsProps;
+    /**
+     * Preference action button or link
+     */
+    preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
+    /**
+     * Layout configuration for the header
+     */
+    layout?: LayoutProps;
+} & import('react').RefAttributes<HTMLHeadElement>>;
+export {};

package/dist/src/beta/components/Page/PagePanel.d.ts

@@ -0,0 +1,145 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { DrillDownContextProps } from '../../../components/DrillDown/internal/DrillDownContext';
+/**
+ * Props for the PagePanel component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
+export type PagePanelProps = ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Whether the panel is open
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Size of the panel
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Whether to remove default padding from the panel
+     * @default false
+     */
+    noPadding?: boolean;
+    /**
+     * Sets the default DrillDown index when used in an uncontrolled way
+     */
+    defaultDrillDownIndex?: DrillDownContextProps["index"];
+    /**
+     * Callback to pass context to useDrillDown hook
+     */
+    onDrillDownContextChange?: (context: DrillDownContextProps) => void;
+};
+/**
+ * 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
+ * - 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">
+ *   <Page.Panel.Header>
+ *     <Text variant="headline" el="h3">Panel Title</Text>
+ *   </Page.Panel.Header>
+ *   <Page.Panel.Content>
+ *     <Text>Panel content goes here</Text>
+ *   </Page.Panel.Content>
+ *   <Page.Panel.Footer sticky>
+ *     <Button appearance="primary" onClick={() => setIsOpen(false)}>Save</Button>
+ *   </Page.Panel.Footer>
+ * </Page.Panel>
+ */
+export declare const PagePanel: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Whether the panel is open
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Size of the panel
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Whether to remove default padding from the panel
+     * @default false
+     */
+    noPadding?: boolean;
+    /**
+     * Sets the default DrillDown index when used in an uncontrolled way
+     */
+    defaultDrillDownIndex?: DrillDownContextProps["index"];
+    /**
+     * Callback to pass context to useDrillDown hook
+     */
+    onDrillDownContextChange?: (context: DrillDownContextProps) => void;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        sticky?: boolean;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    /**
+     * 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: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+        sticky?: boolean;
+    } & import('react').RefAttributes<HTMLElement>>;
+};

package/dist/src/beta/components/Page/PagePanelContent.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the PagePanelContent component
+ * @extends ComponentPropsWithoutRef<"div">
+ */
+export type PagePanelContentProps = ComponentPropsWithoutRef<"div"> & {
+    /**
+     * When true, the content will stick below the header during scroll, acting as a second header.
+     * @default false
+     */
+    sticky?: boolean;
+};
+/**
+ * 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
+ * // Basic content
+ * <Page.Panel.Content>
+ *   <Text>Panel content goes here</Text>
+ * </Page.Panel.Content>
+ *
+ * @example
+ * // Sticky content (e.g., a search field that remains visible while scrolling)
+ * <Page.Panel.Header>Panel Title</Page.Panel.Header>
+ * <Page.Panel.Content sticky>
+ *   <TextField placeholder="Filter results..." />
+ * </Page.Panel.Content>
+ * <Page.Panel.Content>
+ *   <Text>Scrollable results</Text>
+ * </Page.Panel.Content>
+ */
+export declare const PagePanelContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * When true, the content will stick below the header during scroll, acting as a second header.
+     * @default false
+     */
+    sticky?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/beta/components/Page/PagePanelFooter.d.ts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithoutRef } from 'react';
+/**
+ * Props for the PagePanelFooter component
+ * @extends ComponentPropsWithoutRef<"footer">
+ */
+export type PagePanelFooterProps = ComponentPropsWithoutRef<"footer"> & {
+    /**
+     * When true, the footer will stick to the bottom of the panel's scrollable area.
+     * @default false
+     */
+    sticky?: boolean;
+};
+/**
+ * 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>
+ */
+export declare const PagePanelFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    /**
+     * When true, the footer will stick to the bottom of the panel's scrollable area.
+     * @default false
+     */
+    sticky?: boolean;
+} & import('react').RefAttributes<HTMLElement>>;