Fixes for release 0.2.4 (#104)

* fix naming of `HeaderTitle` story

* use custom `min-h` values for `HeaderArea` styles

* allow to use `ReactNode` for `HeaderBackWithoutAction`'s `title`

* do not use `React.FC` for header components

src/components/header/HeaderBackWithoutAction.tsx

@@ -1,3 +1,4 @@
+import { ReactElement, ReactNode } from 'react'
 import { useRouter } from '../../framework'
 import { HeaderArea } from './areas/HeaderArea'
 import { HeaderBackAction } from './actions/HeaderBackAction'
@@ -7,15 +8,18 @@ type Props = {
   /**
    * Define a header title.
    **/
-  title: string
+  title: ReactNode
 
   /**
    * Override default onBack action.
    **/
   onBack?: () => void
 }
 
-const HeaderBackWithoutAction: React.FC<Props> = ({ title, onBack }) => {
+export function HeaderBackWithoutAction({
+  title,
+  onBack,
+}: Props): ReactElement {
   const router = useRouter()
 
   return (
@@ -25,5 +29,3 @@ const HeaderBackWithoutAction: React.FC<Props> = ({ title, onBack }) => {
     </HeaderArea>
   )
 }
-
-export { HeaderBackWithoutAction }

src/components/header/areas/HeaderLeftArea.tsx

@@ -1,15 +1,15 @@
+import { ReactElement, ReactNode } from 'react'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
 
-type Props = ClassNameProps
+type Props = ClassNameProps & { children?: ReactNode }
 
-const HeaderLeftArea: React.FC<Props> = ({ className, children }) => {
+export function HeaderLeftArea({ className, children }: Props): ReactElement {
   const { header } = useTheme()
+
   return (
     <div className={className}>
       <div className={header.leftArea.base}>{children}</div>
     </div>
   )
 }
-
-export { HeaderLeftArea }

src/components/header/areas/HeaderRightArea.tsx

@@ -1,15 +1,15 @@
+import { ReactElement, ReactNode } from 'react'
 import { useTheme } from '../../../framework'
 import { ClassNameProps } from '../../types'
 
-type Props = ClassNameProps
+type Props = ClassNameProps & { children?: ReactNode }
 
-const HeaderRightArea: React.FC<Props> = ({ className, children }) => {
+export function HeaderRightArea({ className, children }: Props): ReactElement {
   const { header } = useTheme()
+
   return (
     <div className={className}>
       <div className={header.rightArea.base}>{children}</div>
     </div>
   )
 }
-
-export { HeaderRightArea }

src/components/header/theme.ts

@@ -4,7 +4,7 @@ export default {
     desktop: 'hidden lg:inline-block',
   },
   area: {
-    base: 'mb-6 flex min-h-10 items-center lg:min-h-15',
+    base: 'mb-6 flex min-h-[2.5rem] items-center lg:min-h-[3.75rem]',
   },
   leftArea: {
     base: 'flex items-center mr-2 lg:mr-3 space-x-3 lg:space-x-4',