import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef } from 'react';
import Box from '../Box';

/**
 * The App Shell component is a layout component that can be used to create a common Header - Navbar - Footer - Aside - Content layout pattern.
 *
 * Demos:
 *
 * - [App Shell (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-app-shell)
 *
 * API:
 *
 * - inherits [Box API](https://mui.com/material-ui/api/box/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the AppShell component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered AppShell component.
 */
const AppShell = forwardRef((_a, ref) => {
    var { className, children, footer, header, navigation } = _a, rest = __rest(_a, ["className", "children", "footer", "header", "navigation"]);
    return (_jsxs(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-app-shell', 'OxygenAppShell-root', className) }, rest, { children: [header, _jsxs(Box, Object.assign({ className: clsx(
                /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                'oxygen-app-shell-content', 'OxygenAppShell-content') }, { children: [_jsx(Box, Object.assign({ className: clsx(
                        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                        'oxygen-app-shell-navigation-wrapper', 'OxygenAppShell-navigationWrapper') }, { children: navigation })), _jsxs(Box, Object.assign({ className: clsx(
                        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                        'oxygen-app-shell-main-wrapper', 'OxygenAppShell-mainWrapper') }, { children: [_jsx(Box, Object.assign({ component: "main", className: clsx(
                                /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                                'oxygen-app-shell-main', 'OxygenAppShell-main') }, { children: children })), footer] }))] }))] })));
});
export default AppShell;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-app-shell {\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  flex-grow: 1;\n  flex-direction: column;\n  min-height: 100vh;\n}\n.oxygen-app-shell .oxygen-header {\n  z-index: 1201;\n}\n.oxygen-app-shell .oxygen-app-shell-content {\n  display: flex;\n  overflow: auto;\n  flex-grow: 1;\n  transition: all 0.5s;\n}\n.oxygen-app-shell .oxygen-app-shell-content .oxygen-app-shell-navigation-wrapper {\n  background: var(--oxygen-palette-customComponents-Navbar-background);\n}\n.oxygen-app-shell .oxygen-app-shell-content .oxygen-app-shell-navigation-wrapper .MuiDrawer-paper {\n  top: var(--oxygen-customComponents-AppShell-properties-navBarTopPosition);\n  bottom: 0;\n  height: auto;\n}\n.oxygen-app-shell .oxygen-app-shell-content .oxygen-app-shell-main-wrapper {\n  display: flex;\n  overflow: auto;\n  flex-grow: 1;\n  flex-direction: column;\n  background: var(--oxygen-palette-customComponents-AppShell-MainWrapper-background);\n}\n.oxygen-app-shell .oxygen-app-shell-content .oxygen-app-shell-main-wrapper .oxygen-app-shell-main {\n  flex-grow: 1;\n  padding: var(--oxygen-customComponents-AppShell-properties-padding);\n  margin-top: var(--oxygen-customComponents-Header-properties-min-height);\n  background: var(--oxygen-palette-customComponents-AppShell-Main-background);\n  border-top-left-radius: var(--oxygen-customComponents-AppShell-properties-mainBorderTopLeftRadius);\n  position: relative;\n}");