{"version":3,"file":"js/chunk.5423.606b11fc.js","mappings":"yMAiBO,IAAMA,EAAS,CAAC,CAAEC,KAAAA,CAAI,CAAEC,OAAAA,CAAM,CAAEC,MAAAA,CAAK,CAAc,IACxD,IAAMC,EAAOC,CAAAA,EAAAA,EAAAA,EAAAA,EAAaC,EAAAA,EAAkBA,EACtCC,EAAqBF,CAAAA,EAAAA,EAAAA,EAAAA,EAAaG,EAAAA,EAAsBA,EAC9D,MACE,WAACC,MAAAA,CACCC,UAAWC,CAAAA,EAAAA,EAAAA,CAAAA,EAAKC,EAAAA,EAAY,EAC5BC,YAAWT,EACXU,wBAAuBP,EACvBQ,cAAY,S,UAEZ,UAACN,MAAAA,CAAIC,UAAWC,CAAAA,EAAAA,EAAAA,CAAAA,EAAKC,EAAAA,EAAyB,E,SAC5C,UAACH,MAAAA,CAAIC,UAAWC,CAAAA,EAAAA,EAAAA,CAAAA,EAAKC,EAAAA,EAAgB,CAAE,Q,SACrC,UAACH,MAAAA,C,SAAKR,C,OAGV,UAACQ,MAAAA,CACCC,UAAWC,CAAAA,EAAAA,EAAAA,CAAAA,EAAK,CACd,CAACC,EAAAA,EAAkB,CAAC,CAAEV,CACxB,G,SAECA,C,GAEH,UAACO,MAAAA,CAAIC,UAAWC,CAAAA,EAAAA,EAAAA,CAAAA,EAAKC,EAAAA,EAAyB,CAAE,S,SAC9C,UAACH,MAAAA,CAAIC,UAAWC,CAAAA,EAAAA,EAAAA,CAAAA,EAAKC,EAAAA,EAAgB,CAAE,S,SAAWT,C,OAI1D,CAEAH,CAAAA,EAAOgB,WAAW,CAAG,SAEd,IAAMC,EAAgB,IACpB,UAACR,MAAAA,CAAIC,UAAWE,EAAAA,EAAmB,E","sources":["webpack://@affine/web/../core/src/components/pure/header/index.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useAtomValue } from 'jotai';\nimport type { ReactNode } from 'react';\n\nimport { appSidebarFloatingAtom, appSidebarOpenAtom } from '../../app-sidebar';\nimport * as style from './style.css';\n\ninterface HeaderPros {\n  left?: ReactNode;\n  right?: ReactNode;\n  center?: ReactNode;\n  bottomBorder?: boolean;\n}\n\n// The Header component is used to solve the following problems\n// 1. Manage layout issues independently of page or business logic\n// 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed\nexport const Header = ({ left, center, right }: HeaderPros) => {\n  const open = useAtomValue(appSidebarOpenAtom);\n  const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);\n  return (\n    <div\n      className={clsx(style.header)}\n      data-open={open}\n      data-sidebar-floating={appSidebarFloating}\n      data-testid=\"header\"\n    >\n      <div className={clsx(style.headerSideContainer)}>\n        <div className={clsx(style.headerItem, 'left')}>\n          <div>{left}</div>\n        </div>\n      </div>\n      <div\n        className={clsx({\n          [style.headerCenter]: center,\n        })}\n      >\n        {center}\n      </div>\n      <div className={clsx(style.headerSideContainer, 'right')}>\n        <div className={clsx(style.headerItem, 'right')}>{right}</div>\n      </div>\n    </div>\n  );\n};\n\nHeader.displayName = 'Header';\n\nexport const HeaderDivider = () => {\n  return <div className={style.headerDivider} />;\n};\n"],"names":["Header","left","center","right","open","useAtomValue","appSidebarOpenAtom","appSidebarFloating","appSidebarFloatingAtom","div","className","clsx","style","data-open","data-sidebar-floating","data-testid","displayName","HeaderDivider"],"sourceRoot":""}