@ozen-ui/kit/__inner__/esm/components/Header/Header.js

React component library

import { __assign, __rest } from "tslib";
import './Header.css';
import './modules/HeaderAccount/HeaderAccount.css';
import './modules/HeaderLogo/HeaderLogo.css';
import './modules/HeaderContent/HeaderContent.css';
import './modules/HeaderContentAdditional/HeaderContentAdditional.css';
import './modules/HeaderContentMain/HeaderContentMain.css';
import './modules/HeaderInput/HeaderInput.css';
import './modules/HeaderMenuButton/HeaderMenuButton.css';
import React from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn, generateCSSVariables, polymorphicComponentWithRef, } from '../../utils';
import { Paper } from '../Paper';
import { HEADER_CSS_VARIABLE, HEADER_DEFAULT_BACKGROUND, HEADER_DEFAULT_CONTENT_LOGO_RATIO, HEADER_DEFAULT_TAG, } from './constants';
export var cnHeader = cn('Header');
export var Header = polymorphicComponentWithRef(function (inProps, ref) {
    var _a;
    var props = useThemeProps({
        props: inProps,
        name: 'Header',
    });
    var _b = props.as, as = _b === void 0 ? HEADER_DEFAULT_TAG : _b, logo = props.logo, children = props.children, className = props.className, _c = props.contentLogoRatio, contentLogoRatio = _c === void 0 ? HEADER_DEFAULT_CONTENT_LOGO_RATIO : _c, _d = props.withBackground, withBackground = _d === void 0 ? HEADER_DEFAULT_BACKGROUND : _d, style = props.style, other = __rest(props, ["as", "logo", "children", "className", "contentLogoRatio", "withBackground", "style"]);
    var contentFlex = contentLogoRatio * 100;
    var logoFlex = 100 - contentFlex;
    return (React.createElement(Paper, __assign({}, other, { style: __assign(__assign({}, style), generateCSSVariables((_a = {},
            _a[HEADER_CSS_VARIABLE.CONTENT_FLEX] = contentFlex,
            _a[HEADER_CSS_VARIABLE.LOGO_FLEX] = logoFlex,
            _a))), as: as, ref: ref, className: cnHeader({ withBackground: withBackground }, [className]), background: withBackground ? 'main' : undefined, radius: "xl" }), logo !== null && logo !== void 0 ? logo : (React.createElement("div", { className: cnHeader('LogoPlaceholder'), style: { flex: logoFlex } })),
        children));
});