import styled , { css } from 'reshadow' ; import { composes , useStyles } from '@cloudbeaver/core-theming' ; export const topAppBarStyles = composes ( css `
    header {
      composes: theme-background-primary theme-text-on-primary from global;
    }
  ` , css `
    header {
      composes: theme-typography--body2 from global;
      display: flex;
      align-items: center;
      height: 48px;
      padding: 0 16px;
      z-index: 1;
    }
  ` ) ; export const TopAppBar = function TopAppBar ( { children } ) { return styled ( useStyles ( topAppBarStyles ) ) ( < header > { children } < /header>); } ;