import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { appBar } from "./styles.js";
/**
 * @example Simple Example
 * ```tsx
 * import { AppBar } from "@react-md/core/app-bar/AppBar";
 * import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
 * import { Button } from "@react-md/core/button/Button";
 * import MenuIcon from "@react-md/material-icons/MenuIcon";
 * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <AppBar>
 *       <Button aria-label="Navigation"><MenuIcon /></Button>
 *       <AppBarTitle>My Main Title</AppBarTitle>
 *       <Button aria-label="Options"><MoreVertIcon /></Button>
 *     </AppBar>
 *   );
 * }
 * ```
 *
 * @since 6.0.0 The `AppBar` was updated to use `gap` for spacing
 * instead of requiring the `AppBarNav` and `AppBarAction` components.
 */ export const AppBar = /*#__PURE__*/ forwardRef(function AppBar(props, ref) {
    const { className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
    return /*#__PURE__*/ _jsx(Component, {
        ...remaining,
        className: appBar({
            className,
            theme,
            position,
            pagePosition,
            disableElevation,
            scrollbarOffset,
            height,
            grid,
            gridName,
            gridColumns,
            align,
            stacked,
            justify,
            reversed,
            surfaceColor,
            disableWrap,
            disablePadding
        }),
        ref: ref,
        children: children
    });
});

//# sourceMappingURL=AppBar.js.map