@simoncomputing/mui-bueno-v2 0.14.7

package/dist/components/Form/Inputs/Switch/Switch.d.ts

@@ -0,0 +1,61 @@
+import { SwitchProps as MuiSwitchProps, TypographyProps, Theme, SwitchPropsColorOverrides } from '@mui/material';
+import { OverridableStringUnion } from '@mui/types';
+import { SystemProps } from '@mui/system';
+export type BaseSwitchProps<T = boolean> = {
+    /**
+     * Name and ID of the component. Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * Label that goes next to the switch.
+     * @recommended
+     */
+    label?: string;
+    /**
+     * Disabled
+     */
+    disabled?: boolean;
+    /**
+     * The position of the label.
+     * @default 'end'
+     */
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * If set, the component becomes readonly.
+     * By default, displays as "True" or "False". To use "On" or "Off", set to 'ON_OFF. To use "Yes" or "No", use 'YES_NO'
+     */
+    readOnly?: true | 'ON_OFF' | 'YES_NO';
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+    /**
+     * Override the value used in formik when the switch is ON
+     * @default True
+     */
+    activeValue?: T extends boolean ? true : string;
+    /**
+     * Override the value used in formik when the switch is OFF
+     * @default False
+     */
+    inactiveValue?: T extends boolean ? false : string;
+    /**
+     * Handle changes to the formik value when interacted with by the user
+     */
+    onChange?: (checked: T) => void;
+    /**
+     * If defined, shows the switch on top of a chip of the provided color
+     */
+    chipColor?: SystemProps<Theme>['color'];
+    /**
+     * Color of the switch & text
+     */
+    color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'default', SwitchPropsColorOverrides>;
+};
+export type SwitchProps<T> = BaseSwitchProps<T> & Omit<MuiSwitchProps, 'checked' | 'onChange' | 'name' | 'value' | 'readOnly'>;
+/**
+ * `Switch` provides a Material-UI Switch.
+ */
+export declare const Switch: <T = boolean>(props: SwitchProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Inputs/TextField/TextField.d.ts

@@ -0,0 +1,60 @@
+import { TypographyProps, TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import * as React from 'react';
+type BaseTextFieldProps = {
+    /**
+     * Name and ID of the component. Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * If true, ensures that user enters only input that matches the format.
+     * Defaults to true if a format is specified.
+     * @default format ? true : false
+     */
+    autoFormat?: boolean;
+    /**
+     * A format string that will be used for formatting the user input.
+     * 9 = numbers, X = characters
+     * @example
+     * format='999-XXX-9999'
+     */
+    format?: string;
+    /**
+     * If true, the prepackaged dynamic input label that comes with Material UI's input components
+     * will be replaced with a static typography label above the input.
+     * @default false
+     */
+    staticLabel?: boolean;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If provided, will show the icon at the start of the input field.
+     */
+    startIcon?: React.JSX.Element;
+    /**
+     * If provided, will show the icon at the end of the input field.
+     */
+    endIcon?: React.JSX.Element;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: 'dense' | 'none' | 'normal';
+    /**
+     * By default, TextField will trim leading and trailing whitespace on blur. To disable this, set `noTrimOnBlur` to true.
+     */
+    noTrimOnBlur?: boolean;
+};
+export type TextFieldProps = BaseTextFieldProps & Omit<MuiTextFieldProps, 'defaultValue' | 'error' | 'fullWidth' | 'select' | 'SelectProps' | 'value'>;
+/**
+ * The `TextField` is a MUI input. For use with validation, view the examples at the bottom of this page.
+ */
+export declare const TextField: React.FC<TextFieldProps>;
+export {};

package/dist/components/Form/RepeatableFormGroup/RepeatableFormGroup.d.ts

@@ -0,0 +1,89 @@
+import { SxProps, Theme, TypographyProps } from '@mui/material';
+import { default as React, ReactNode } from 'react';
+type RepeatableGroupWrapperType = 'card' | 'elevatedCard' | 'none';
+type RepeatableRemovePosition = 'bottom' | 'right';
+export type RepeatableFormGroupProps<T> = {
+    /**
+     * Name of field. Must match the name of the array in Formik.
+     */
+    name: string;
+    /**
+     * An "empty" object of type T.
+     * This is what you would normally pass to initialState for Formik for a single object of type T
+     */
+    initialState: T;
+    /**
+     * Component that makes up the fields in your form group.
+     *
+     * IMPORTANT: Make sure to pass the name to your fields such that name={`${name}.fieldName`}.
+     * For example: `<Text`Field name={`${name}.phoneNumber`} label="Phone Number" />`
+     *
+     * @param name
+     * @returns
+     */
+    renderFormGroup: (name: string, index: number) => React.ReactNode;
+    /**
+     * Content for the Add button. @default "Add Another"
+     */
+    addButtonContent?: ReactNode;
+    /**
+     * Content for the Remove button. @default "Remove"
+     */
+    removeButtonContent?: ReactNode;
+    /**
+     * Variant for the wrapper for each group. @default card
+     */
+    variant?: RepeatableGroupWrapperType;
+    /**
+     * Style overrides for the Add button
+     */
+    addButtonSx?: SxProps<Theme>;
+    /**
+     * Style overrides for the Remove button
+     */
+    removeButtonSx?: SxProps<Theme>;
+    /**
+     * If true, will always display 'Remove' button on all field groups.
+     * If false, will only display 'Remove' button as long as there are 2 or more field groups displayed.
+     * @default false
+     */
+    allowRemoveAll?: boolean;
+    /**
+     * If `true`, the component becomes readonly. The `add` and `remove` buttons are hidden.
+     * This does not change the individual formGroups, which must be made readOnly separately.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * (Optional) Label for entire group.
+     */
+    label?: string;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    labelProps?: TypographyProps;
+    /**
+     * This will display as the "value" when the field is readonly
+     * @default "None"
+     */
+    emptyListMsg?: string;
+    /**
+     * If true, adds a horizontal divider line in between each field grouping
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Defines the position of the remove buttons relative to each grouping of fields.
+     * - "bottom" (default) - remove button will appear BELOW each grouping of fields
+     * - "right" - remove button will appear to the RIGHT (centered vertically) of each grouping of fields -- best for inline field groups
+     * - sx - pass in your own MUI style to fine-tune the flexbox container settings
+     */
+    removePosition?: RepeatableRemovePosition | SxProps<Theme>;
+};
+/**
+ * Repeatable Form Group is used for handling arrays in forms. It automatically handles adding & removing
+ * field groups (components containing one or multiple fields) using Formik.
+ */
+export declare const RepeatableFormGroup: <T>(props: RepeatableFormGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default RepeatableFormGroup;

package/dist/components/Form/Stepper/Stepper.d.ts

@@ -0,0 +1,27 @@
+import { StepperProps as MuiStepperProps } from '@mui/material';
+import * as React from 'react';
+type BaseStepperProps = {
+    /**
+     * Array of labels for each step
+     */
+    steps: string[];
+    /**
+     * If true, displays labels inline. Ignored when orientation is set to vertical. Works best with a small number of steps, otherwise it can look cluttered.
+     * @default false
+     * @requires stepperOrientation='horizontal'
+     */
+    inlineLabel?: boolean;
+    /**
+     * If true, the orientation will automatically change to vertical when screen size is small, and horizontal when screen size is large. Orientation prop is ignored.
+     * @default false
+     */
+    isResponsive?: boolean;
+};
+export type StepperProps = BaseStepperProps & Omit<MuiStepperProps, 'alternativeLabel'>;
+/**
+ * The `Stepper` component displays progress through a sequence of steps. It is intended to be used with multiple page forms, as the stepper will automatically mark previous steps as complete.
+ *
+ * It is built on the [MUI React Stepper](https://mui.com/material-ui/react-stepper/)
+ */
+export declare const Stepper: React.FC<StepperProps>;
+export {};

package/dist/components/LoadingIndicator/LoadingIndicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type LoadingIndicatorProps = {
+    /**
+     * Custom title
+     * @default 'Loading...'
+     */
+    title?: string;
+    /**
+     * Custom message
+     * @optional
+     * @default undefined
+     */
+    message?: string;
+};
+/**
+ * Consistently styled LoadingIndicator
+ *
+ * @param props
+ * @returns
+ */
+export declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
+export default LoadingIndicator;

package/dist/components/Modals/AlertModal/AlertModal.d.ts

@@ -0,0 +1,11 @@
+import { ModalProps } from '../Modal';
+export type AlertModalProps = Omit<ModalProps, 'actions'> & {};
+/**
+ * Informational modal that does not require user feedback.
+ * Recommend using these sparringly, as they block the user until they close the modal.
+ *
+ * For a modal that requires a user response (ex. Yes/No), use `ConfirmationModal` instead (2-buttons)
+ * For a modal that requires the user to make a choice, use `DecisionModal` instead (3-buttons)
+ */
+export declare const AlertModal: (props: AlertModalProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertModal;

package/dist/components/Modals/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { ModalProps } from '../Modal';
+import { ButtonProps } from '../../Buttons/Button/Button';
+export type ConfirmationModalProps = Omit<ModalProps, 'actions'> & {
+    /**
+     * Label for the confirm/action button.
+     */
+    confirmBtnLabel: string;
+    /**
+     * Postive/negative action. Should close modal and perform the action requested by the user.
+     */
+    onConfirm: () => void;
+    /**
+     * Override the default styling of the confirm button. Defaults are:
+     * `{ color: 'primary', variant: 'contained' }`
+     */
+    confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
+};
+/**
+ * Modal that requires user to cancel or proceed.
+ *
+ * For a modal that is strictly informational and does not require the user to make a choice, use `AlertModal` instead (1-button)
+ * For a modal that requires the user to make a choice, use `DecisionModal` instead (3-buttons)
+ */
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export default ConfirmationModal;

package/dist/components/Modals/DecisionModal/DecisionModal.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { ModalProps } from '../Modal';
+import { ButtonProps } from '../../Buttons/Button/Button';
+export type DecisionModalProps = Omit<ModalProps, 'actions'> & {
+    /**
+     * Label for primary action (button)
+     */
+    primaryBtnLabel: string;
+    /**
+     * Callback when user clicks on primary action (button)
+     */
+    onPrimaryAction: () => void;
+    /**
+     * Override styling for primary action (button)
+     */
+    primaryActionProps?: Omit<ButtonProps, 'onClick'>;
+    /**
+     * Label for secondary action (button)
+     */
+    secondaryBtnLabel: string;
+    /**
+     * Callback when user clicks on secondary action (button)
+     */
+    onSecondaryAction: () => void;
+    /**
+     * Override styling for secondary action (button)
+     */
+    secondaryActionProps?: Omit<ButtonProps, 'onClick'>;
+};
+/**
+ * Modal that requires user to cancel, or choose between two choices.
+ *
+ * For a modal that is strictly informational and does not require the user to make a choice, use `AlertModal` instead (1-button)
+ * For a modal that requires the user to decide whether or not they want to proceed (cancel or confirm), use `ConfirmationModal` instead (2-buttons)
+ */
+export declare const DecisionModal: React.FC<DecisionModalProps>;
+export default DecisionModal;

package/dist/components/Modals/Modal.d.ts

@@ -0,0 +1,45 @@
+import { default as React, ReactNode } from 'react';
+import { DialogProps } from '@mui/material';
+import { ButtonProps } from '../Buttons/Button/Button';
+export type ModalProps = Omit<DialogProps, 'onClose' | 'title' | 'content'> & {
+    /**
+     * Title of the modal. Pass a string to have the modal auto-format the title, or pass a
+     * component if you want more control over the style/appearance.
+     */
+    title?: ReactNode;
+    /**
+     * Called when the user closes the modal. Make sure to close your modal using this callback.
+     */
+    onClose?: () => void;
+    /**
+     * Position of the close button.
+     *   - bottom (default): displays close button, with label `closeBtnLabel` (Cancel, by default), on the bottom-left corner.
+     *   - top: display close button as an X (only when `title` is type string), in the top-right corner.
+     *   - top-and-bottom: displays close button in both top and bottom
+     */
+    closeButtonPosition?: 'top' | 'bottom' | 'top-and-bottom';
+    /**
+     * Array of buttons that perform a MODIFYING action (not simply just closing the modal).
+     */
+    actions?: React.ReactNode[];
+    /**
+     * Label for the close/cancel button. Use when `closeButtonPosition` is `'bottom'` or `'top-and-bottom'`
+     */
+    closeBtnLabel?: string;
+    /**
+     * Override the default styling of the close/cancel button. Defaults are:
+     * `{ color: 'primary', variant: 'text' }`
+     */
+    closeButtonProps?: Omit<ButtonProps, 'onClick'>;
+    /**
+     * Set to true to disable the modal from dismissing when the user clicks outside the modal (backdrop) or clicks the escape key.
+     *
+     * Recommended for modals with forms, to prevent users from accidentally dismissing the modal and losing the data they entered.
+     */
+    disableDismiss?: boolean;
+};
+/**
+ * Modal (internal for now, might expose later)
+ */
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Navigation/Footer/Footer.d.ts

@@ -0,0 +1,31 @@
+import { Theme, SxProps, LinkPropsColorOverrides } from '@mui/material';
+import { MenuOption } from '../../../@types';
+import { OverridableStringUnion } from '@mui/types';
+import * as React from 'react';
+export type FooterProps = {
+    /**
+     * Links that will appear under the logo, on the left side.
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * Informational text, renders on the right side. Can be used for copyright, build info, etc.
+     */
+    copyright?: string;
+    /**
+     * Logo for the footer. Pass in a path (string) to have the styling be handled automatically, or pass in a component for more control.
+     */
+    logo: string | React.ReactNode;
+    /**
+     * override styles for Footer
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * quick override font color for links & copyright
+     */
+    fontColor?: OverridableStringUnion<'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error', LinkPropsColorOverrides>;
+};
+export declare const Footer: React.FC<FooterProps>;
+export default Footer;

package/dist/components/Navigation/Header/DarkModeToggle/DarkModeToggle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Dark Mode toggle button. Uses MUI's palette to determine which icon (light or dark) to display.
+ *
+ * NOTE: You will need to update the theme via onToggle. This allows you to persist the user's selection via Redux.
+ */
+export type DarkModeToggleProps = {
+    /**
+     * Callback when dark mode toggle button is clicked (IMPORTANT: you will have to implement changing the theme)
+     */
+    onToggle: () => void;
+};
+export declare const DarkModeToggle: (props: DarkModeToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default DarkModeToggle;

package/dist/components/Navigation/Header/Drawer.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { DrawerProps as MuiDrawerProps } from '@mui/material';
+import { MenuOption } from '../../../@types';
+type DrawerBaseProps = {
+    /**
+     * Array of navigation items to show
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button._
+     */
+    menuOptionLists?: MenuOption[][];
+};
+export type DrawerProps = DrawerBaseProps & MuiDrawerProps;
+/**
+ * Mobile drawer. Renders as hamburger icon that, when clicked, toggles a side menu on the left (default) side of the screen.
+ */
+export declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/components/Navigation/Header/EnvironmentBanner.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { EnvironmentInfo } from '../../../@types';
+export declare const EnvironmentBanner: React.FC<EnvironmentInfo>;
+export default EnvironmentBanner;

package/dist/components/Navigation/Header/Header.d.ts

@@ -0,0 +1,63 @@
+import { SxProps, Theme } from '@mui/material';
+import { EnvironmentInfo, MenuOption } from '../../../@types';
+import * as React from 'react';
+export type HeaderProps = {
+    /**
+     * Provides environment info for lower environments. Automatically hidden when `isProd` is true.
+     */
+    envInfo?: EnvironmentInfo;
+    headerRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * App logo image. Can be a path to an image (string) or a ReactNode for more fine-tuned control.
+     */
+    logo: string | React.ReactNode;
+    /**
+     * Features that appear below the primary header.
+     * Intended for general navigation within the application.
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * User Actions that will appear on the user profile dropdown button.
+     * These are for logged in users so they only display when `displayName` is not undefined
+     */
+    userMenuOptions?: MenuOption[];
+    onToggleDarkMode?: () => void;
+    /**
+     * Appear directly in header on the right side. Useful for quick-access general links such as FAQ
+     * Recommend no more than 3.
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button.
+     */
+    quickLinks?: MenuOption[];
+    /**
+     * Display Name for the user that is currently logged in. Set as undefined if no user is logged in.
+     * Ex: `displayName={isAuthenticated ? userName : undefined}
+     */
+    displayName?: string;
+    /**
+     * Appears above the app header. Useful for simple announcements/etc.
+     */
+    banner?: React.ReactNode;
+    position?: 'absolute' | 'sticky' | 'relative' | 'static' | 'fixed';
+    /**
+     * Children will be rendered in between quickLinks & user dropdown.
+     *
+     * IMPORTANT: Children will NOT display on mobile, so if you render any navigation links here, you will need to
+     * add logic to pass those links to `userActions` when screen size is less than or equal to `sm` (default is <=600 px).
+     */
+    children?: React.ReactNode;
+    /**
+     * Style overrides for Mui's AppBar
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Style overrides for the NavBar
+     */
+    navBarSx?: SxProps<Theme>;
+};
+export declare const Header: React.FC<HeaderProps>;
+export default Header;

package/dist/components/Navigation/Header/ProfileMenu.d.ts

@@ -0,0 +1,8 @@
+import { MenuOption, ObjectWithId } from '../../../@types';
+import * as React from 'react';
+export interface ProfileMenuProps extends ObjectWithId {
+    displayName: string;
+    userMenuOptions: MenuOption[];
+}
+export declare const ProfileMenu: React.FC<ProfileMenuProps>;
+export default ProfileMenu;

package/dist/components/Navigation/MenuButton/MenuButton.d.ts

@@ -0,0 +1,9 @@
+import { MenuOption, ObjectWithId } from '../../../@types';
+import * as React from 'react';
+export interface MenuButtonProps extends ObjectWithId {
+    label: string;
+    menuOptions?: MenuOption[];
+    icon?: React.ReactElement;
+}
+export declare const MenuButton: React.FC<MenuButtonProps>;
+export default MenuButton;

package/dist/components/Navigation/NavBar/FloatingNavBar/FloatingNavBar.d.ts

@@ -0,0 +1,24 @@
+import { SxProps, Theme } from '@mui/material';
+import { MenuOption } from '../../../../@types';
+export type FloatingNavBarProps = {
+    /**
+     * Features that appear below the primary header.
+     * Intended for general navigation within the application.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * Index of the active tab, starts at 0. Default is undefined (no active tab marked)
+     */
+    activeTabIdx?: number;
+    /**
+     * Style overrides
+     */
+    sx?: SxProps<Theme>;
+};
+/**
+ * Primary navigation. For an alternative style, see `NavBar`.
+ *
+ * @deprecated Will remove soon, switch to NavBar
+ */
+export declare const FloatingNavBar: (props: FloatingNavBarProps) => false | import("react/jsx-runtime").JSX.Element;
+export default FloatingNavBar;

package/dist/components/Navigation/NavBar/NavBar.d.ts

@@ -0,0 +1,24 @@
+import { SxProps, Theme } from '@mui/material';
+import { MenuOption } from '../../../@types';
+export type NavBarProps = {
+    /**
+     * Features that appear below the primary header.
+     * Intended for general navigation within the application.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * Index of the active tab, starts at 0. Default is undefined (no active tab marked)
+     */
+    activeTabIdx?: number;
+    /**
+     * Style overrides
+     */
+    sx?: SxProps<Theme>;
+};
+/**
+ * Primary navigation. For an alternative style, see `FloatingNavBar`.
+ *
+ * We recommend using the `Header` component, which already has a `NavBar` built in.
+ */
+export declare const NavBar: (props: NavBarProps) => false | import("react/jsx-runtime").JSX.Element;
+export default NavBar;

package/dist/components/Navigation/Sidebar/Sidebar.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { MenuOption } from '../../../@types';
+export type SidebarProps = {
+    menuOptions?: MenuOption[];
+    sx?: SxProps<Theme>;
+};
+/**
+ * Intended for secondary navigation.
+ *
+ * This component does NOT render on mobile.
+ */
+export declare const Sidebar: React.FC<SidebarProps>;
+export default Sidebar;

package/dist/components/Navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,19 @@
+import { TabsProps as MuiTabsProps } from '@mui/material';
+import { MenuOption } from '../../../@types';
+import * as React from 'react';
+type TabsBaseProps = {
+    /**
+     * Array of navigation items to show
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button._
+     */
+    menuOptions: MenuOption[];
+    /**
+     * Index of the active tab in `menuOptions`
+     */
+    activeTabIdx?: number;
+};
+export type TabsProps = TabsBaseProps & Omit<MuiTabsProps, 'value' | 'onChange'>;
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,27 @@
+import { BreadcrumbInfo } from '../Breadcrumbs/Breadcrumbs';
+import { SxProps, Theme } from '@mui/material';
+import { ReactNode } from 'react';
+/**
+ * Interface for PageHeader props.
+ * @property {string} tableKey - The key of the table.
+ * @property {string} title - Title for the table
+ * @property {string} createButtonLabel - Label for the Create/Add button (to add new objects to the table)
+ * @property {string} createPermission - Permission required to give the user permission to edit this table
+ * @property {(id?: number | string) => void} onAdd - callback when the create/add button is clicked
+ * @property {BreadcrumbInfo[]} breadcrumbs - breadcrumbs to be displayed above the title (optional)
+ * @property {React.ReactNode} children - additional components to display on the right side of the component (or below, on mobile screens)
+ */
+export type PageHeaderProps = {
+    title: string | ReactNode;
+    createButtonLabel: string;
+    showAddButton?: boolean;
+    onAdd?: (id?: number | string) => void;
+    breadcrumbs?: BreadcrumbInfo[];
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Header for PagingTable. Includes Title, Add Button, breadcrumbs (optional). Additional components can be added via children (ex. SearchField) if desired.
+ */
+export declare const PageHeader: (props: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;