[CP-3275] Merge headers and paragraphs into a typography component (#2261)

2025-12-23 14:20:40 -05:00 · 2025-01-10 10:41:41 +01:00
parent 66977831bc
commit 58572e551e
58 changed files with 774 additions and 730 deletions
--- a/mocks/e2e-test-ids.ts
+++ b/mocks/e2e-test-ids.ts
@@ -0,0 +1,90 @@
+
+export enum ModalCloseButtonTestIds {
+  IconButton = "modal-close-button-icon-button",
+}
+
+export enum InteractiveTextInputTestIds {
+  Text = "interactive-text-input-text",
+  Input = "interactive-text-input-input",
+  IconButton = "interactive-text-input-icon-button",
+  ErrorText = "interactive-text-input-error-text",
+}
+
+export enum TypographyTestIds {
+  H1 = "ui-typography-h1",
+  H2 = "ui-typography-h2",
+  H3 = "ui-typography-h3",
+  H4 = "ui-typography-h4",
+  H5 = "ui-typography-h5",
+  P1 = "ui-typography-p1",
+  P2 = "ui-typography-p2",
+  P3 = "ui-typography-p3",
+  P4 = "ui-typography-p4",
+  P5 = "ui-typography-p5",
+}
+
+export enum CheckboxTestIds {
+  Checkbox = "ui-checkbox",
+}
+
+export enum TableTestIds {
+  Table = "ui-table",
+  TableRow = "ui-table-row",
+  TableHeaderRow = "ui-table-header-row",
+  TablePlaceholderRow = "ui-table-place-holder-row",
+  TableCell = "ui-table-cell",
+  TableHeaderCell = "ui-table-header-cell",
+}
+
+export enum PredefinedBackupPasswordTestIds {
+  Title = "predefined-backup-password-title",
+  Description = "predefined-backup-password-description",
+  PasswordPlaceholder = "predefined-backup-password-placeholder",
+  PasswordRepeatPlaceholder = "predefined-backup-password-repeat-placeholder",
+  ConfirmButton = "predefined-backup-password-confirm-button",
+  SkipButton = "predefined-backup-password-skip-button",
+}
+
+export enum PredefinedBackupProgressTestIds {
+  Title = "predefined-backup-progress-title",
+  Description = "predefined-backup-progress-description",
+  ProgressBar = "predefined-backup-progress-progressbar",
+}
+
+export enum ProgressBarTestIds {
+  Description = "progressbar-description",
+  Progress = "progressbar-progress",
+  Details = "progressbar-details",
+}
+
+export enum ContactSupportModalTestIds {
+  Title = "contact-support-modal-success-title",
+  Description = "contact-support-modal-success-description",
+  CloseButton = "contact-support-modal-success-close-button",
+}
+
+export enum ButtonTestIds {
+  PrimaryButton = "primary-button",
+}
+
+export enum BackupModalTestIds {
+  Title = "backup-features-modal-title",
+  Description = "backup-features-modal-description",
+  FeatureElementActive = "backup-features-modal-element-active",
+  FeatureElementInactive = "backup-features-modal-element-inactive",
+  CreateBackupAction = "backup-features-modal-create-action",
+  CancelBackupAction = "backup-features-modal-cancel-action",
+}
+
+export enum ModalTestIds {
+  Modal = "modal-content",
+}
+
+export enum NewContactSupportModalTestIds {
+  Title = "contact-support-modal-title",
+  Subtitle = "contact-support-modal-subtitle",
+  EmailLabel = "email-label",
+  MessageLabel = "message-label",
+  AttachedFilesLabel = "attached-files-label",
+  AttachedFilesSubtext = "attached-files-subtext",
+}
--- a/libs/core/contact-support/components/contact-support-modal.component.test.tsx
+++ b/libs/core/contact-support/components/contact-support-modal.component.test.tsx
@@ -12,19 +12,6 @@ import { ContactSupportModalTestIds } from "Core/contact-support/components/cont
 import { noop } from "Core/__deprecated__/renderer/utils/noop"
 import { FileListTestIds } from "Core/__deprecated__/renderer/components/core/file-list/file-list-test-ids.enum"

-jest.mock("e2e-test-ids", () => {
-  return {
-    NewContactSupportModalTestIds: {
-      Title: "contact-support-modal-title",
-      Subtitle: "contact-support-modal-subtitle",
-      EmailLabel: "email-label",
-      MessageLabel: "message-label",
-      AttachedFilesLabel: "attached-files-label",
-      AttachedFilesSubtext: "attached-files-subtext",
-    },
-  }
-})
-
 type Props = ComponentProps<typeof ContactSupportModal>
 const defaultProps: Props = {
  open: true,
--- a/libs/core/contact-support/containers/contact-support-flow.container.test.tsx
+++ b/libs/core/contact-support/containers/contact-support-flow.container.test.tsx
@@ -15,22 +15,6 @@ jest.mock("Core/settings/store/schemas/generate-application-id", () => ({
  generateApplicationId: () => "123",
 }))

-jest.mock("e2e-test-ids", () => {
-  return {
-    ModalTestIds: {
-      Modal: "modal-content",
-    },
-    NewContactSupportModalTestIds: {
-      Title: "contact-support-modal-title",
-      Subtitle: "contact-support-modal-subtitle",
-      EmailLabel: "email-label",
-      MessageLabel: "message-label",
-      AttachedFilesLabel: "attached-files-label",
-      AttachedFilesSubtext: "attached-files-subtext",
-    },
-  }
-})
-
 type Props = ComponentProps<typeof ModalsManager>

 const defaultProps: Props = {}
--- a/libs/e2e-mock/responses/src/lib/contacts-responses.ts
+++ b/libs/e2e-mock/responses/src/lib/contacts-responses.ts
@@ -32,11 +32,11 @@ export const contactsConfig = {
    },
  },
  title: {
-    component: "h3-component",
+    component: "typography.h3",
    config: { text: "Import your contacts" },
  },
  detailText: {
-    component: "p1-component",
+    component: "typography.p1",
    config: { text: "Import all your contacts from a singles ource." },
  },
  importContactsButton: {
--- a/libs/generic-view/models/src/index.ts
+++ b/libs/generic-view/models/src/index.ts
@@ -40,14 +40,6 @@ import { tooltipAnchor } from "./lib/tooltip-anchor"
 import { overviewOsVersion } from "./lib/overview-os-version"
 import { tooltipContent } from "./lib/tooltip-content"
 import { aboutDataBox } from "./lib/about-data-box"
-import { h3Component, h4Component, h5Component } from "./lib/headers"
-import {
-  p1Component,
-  p2Component,
-  p3Component,
-  p4Component,
-  p5Component,
-} from "./lib/paragraphs"
 import { lastBackupDate } from "./lib/last-backup-date"
 import { listItem } from "./lib/list-item"
 import { marker } from "./lib/marker"
@@ -71,6 +63,7 @@ import { appPortal } from "./lib/app-portal"
 import { buttonPlain } from "./lib/button-plain"
 import { highlightText } from "./lib/highlight-text"
 import { mcContactsSearchResults } from "./lib/mc-contacts-search-results"
+import { TypographyMap } from "./lib/typography"

 export * from "./lib/block-box"
 export * from "./lib/block-plain"
@@ -137,6 +130,7 @@ export * from "./lib/selection-manager"
 export * from "./lib/app-portal"
 export * from "./lib/highlight-text"
 export * from "./lib/mc-contacts-search-results"
+export * from "./lib/typography"

 export default {
  [blockBox.key]: blockBox,
@@ -175,14 +169,6 @@ export default {
  [tooltip.key]: tooltip,
  [tooltipAnchor.key]: tooltipAnchor,
  [tooltipContent.key]: tooltipContent,
-  [h3Component.key]: h3Component,
-  [h4Component.key]: h4Component,
-  [h5Component.key]: h5Component,
-  [p1Component.key]: p1Component,
-  [p2Component.key]: p2Component,
-  [p3Component.key]: p3Component,
-  [p4Component.key]: p4Component,
-  [p5Component.key]: p5Component,
  [overviewOsVersion.key]: overviewOsVersion,
  [aboutDataBox.key]: aboutDataBox,
  [lastBackupDate.key]: lastBackupDate,
@@ -208,4 +194,5 @@ export default {
  [appPortal.key]: appPortal,
  [highlightText.key]: highlightText,
  [mcContactsSearchResults.key]: mcContactsSearchResults,
+  ...TypographyMap,
 } as const
--- a/libs/generic-view/models/src/lib/common-text-validators.ts
+++ b/libs/generic-view/models/src/lib/common-text-validators.ts
@@ -43,7 +43,12 @@ const textAlignValidator = z.object({
    .optional(),
 })

+const unboldValidator = z.object({
+  unbold: z.boolean().optional(),
+})
+
 export const commonTextValidators = singleLineTextValidator
+  .merge(unboldValidator)
  .merge(textTransformValidator)
  .merge(colorValidator)
  .merge(textAlignValidator)
--- a/libs/generic-view/models/src/lib/format-message.ts
+++ b/libs/generic-view/models/src/lib/format-message.ts
@@ -5,17 +5,20 @@

 import { z } from "zod"

-const fieldsSchema = z.record(z.string(), z.union([z.string(), z.number()]))
+export const formatMessageFieldsSchema = z.record(
+  z.string(),
+  z.union([z.string(), z.number()])
+)

 const dataValidator = z.object({
-  fields: fieldsSchema,
+  fields: formatMessageFieldsSchema,
 })

 export type FormatMessageData = z.infer<typeof dataValidator>

 const configValidator = z.object({
  messageTemplate: z.string(),
-  fields: fieldsSchema.optional(),
+  fields: formatMessageFieldsSchema.optional(),
 })

 export type FormatMessageConfig = z.infer<typeof configValidator>
@@ -25,3 +28,17 @@ export const formatMessage = {
  dataValidator,
  configValidator,
 } as const
+
+export const isValidFormatMessageConfig = (
+  config: unknown
+): config is FormatMessageConfig => {
+  const result = configValidator.safeParse(config)
+  return result.success
+}
+
+export const isValidFormatMessageData = (
+  data: unknown
+): data is FormatMessageData => {
+  const result = dataValidator.safeParse(data)
+  return result.success
+}
--- a/libs/generic-view/models/src/lib/paragraphs.ts
+++ b/libs/generic-view/models/src/lib/paragraphs.ts
@@ -20,12 +20,6 @@ const configValidator = z

 export type ParagraphConfig = z.infer<typeof configValidator>

-export const p1Component = {
-  key: "p1-component",
-  dataValidator,
-  configValidator,
-} as const
-
 export const p2Component = {
  key: "p2-component",
  dataValidator,
@@ -38,11 +32,6 @@ export const p3Component = {
  configValidator,
 } as const

-export const p4Component = {
-  key: "p4-component",
-  dataValidator,
-  configValidator,
-} as const

 export const p5Component = {
  key: "p5-component",
--- a/libs/generic-view/models/src/lib/typography.ts
+++ b/libs/generic-view/models/src/lib/typography.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+import { commonTextValidators } from "./common-text-validators"
+import { formatMessageFieldsSchema } from "./format-message"
+
+const dataValidator = z
+  .object({
+    text: z.string().optional(),
+    fields: formatMessageFieldsSchema.optional(),
+  })
+  .optional()
+
+export type TypographyData = z.infer<typeof dataValidator>
+
+const configValidator = z
+  .object({
+    text: z.string().optional(),
+    messageTemplate: z.string().optional(),
+    fields: formatMessageFieldsSchema.optional(),
+  })
+  .merge(commonTextValidators)
+  .optional()
+
+export type TypographyConfig = z.infer<typeof configValidator>
+
+export const typographyKeys = [
+  "typography.h3",
+  "typography.h4",
+  "typography.h5",
+  "typography.p1",
+  "typography.p2",
+  "typography.p3",
+  "typography.p4",
+  "typography.p5",
+] as const
+
+export type TypographyKey = (typeof typographyKeys)[number]
+
+export const TypographyMap = typographyKeys.reduce(
+  (acc, key) => {
+    acc[key] = {
+      key,
+      dataValidator,
+      configValidator,
+    }
+    return acc
+  },
+  {} as Record<
+    (typeof typographyKeys)[number],
+    {
+      key: (typeof typographyKeys)[number]
+      dataValidator: typeof dataValidator
+      configValidator: typeof configValidator
+    }
+  >
+)
--- a/libs/generic-view/theme/src/lib/theme.ts
+++ b/libs/generic-view/theme/src/lib/theme.ts
@@ -3,6 +3,7 @@
 * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
 */

+import { DefaultTheme } from "styled-components"
 import { color } from "./color"
 import { fontSize } from "./font-size"
 import { radius } from "./radius"
@@ -19,4 +20,11 @@ export const theme = {
  fontWeight,
 } as const

-export type Theme = typeof theme
+export interface Theme extends DefaultTheme {
+  color: typeof color
+  radius: typeof radius
+  space: typeof space
+  fontSize: typeof fontSize
+  lineHeight: typeof lineHeight
+  fontWeight: typeof fontWeight
+}
--- a/libs/generic-view/ui/src/index.ts
+++ b/libs/generic-view/ui/src/index.ts
@@ -16,6 +16,7 @@ import { texts } from "./lib/texts"
 import { Icon } from "./lib/icon/icon"
 import { table } from "./lib/table"
 import { entities } from "./lib/entities"
+import { typography } from "./lib/typography"

 export * from "./lib/icon/icon"
 export * from "./lib/api-connection-demo"
@@ -35,10 +36,9 @@ export { DataMigrationPage } from "./lib/predefined/data-migration/data-migratio
 export * from "./lib/segment-bar"
 export * from "./lib/buttons/button-text"
 export * from "./lib/buttons/button-primary"
-export * from "./lib/texts/paragraphs"
-export * from "./lib/texts/headers"
 export * from "./lib/texts/highlight-text"
 export * from "./lib/entities"
+export * from "./lib/typography"

 const apiComponents = {
  ...predefinedComponents,
@@ -53,6 +53,7 @@ const apiComponents = {
  ...texts,
  ...table,
  ...entities,
+  ...typography,
  icon: Icon,
 }

--- a/libs/generic-view/ui/src/lib/data-rows/labeled-text.tsx
+++ b/libs/generic-view/ui/src/lib/data-rows/labeled-text.tsx
@@ -10,7 +10,7 @@ import { LabeledTextConfig, LabeledTextData } from "generic-view/models"

 export const LabeledText: APIFC<LabeledTextData, LabeledTextConfig> = ({
  data,
-  config,
+  config = {},
  ...props
 }) => {
  return (
--- a/libs/generic-view/ui/src/lib/entities/entities-loader.tsx
+++ b/libs/generic-view/ui/src/lib/entities/entities-loader.tsx
@@ -16,7 +16,7 @@ import {
  selectEntitiesLoadingState,
 } from "generic-view/store"
 import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
-import { H3 } from "../texts/headers"
+import { Typography } from "../typography"
 import { ProgressBar } from "../interactive/progress-bar/progress-bar"

 export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
@@ -80,7 +80,7 @@ export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
  }
  return (
    <div {...props}>
-      {config.text && <H3>{config.text}</H3>}
+      {config.text && <Typography.H3 config={config} />}
      <Progress config={{ maxValue: 100 }} data={{ value: totalProgress }} />
    </div>
  )
--- a/libs/generic-view/ui/src/lib/generated/mc-contacts-view/delete-modal.tsx
+++ b/libs/generic-view/ui/src/lib/generated/mc-contacts-view/delete-modal.tsx
@@ -40,7 +40,7 @@ const generateDeleteModal = ({
      childrenKeys: [`${id}DeleteModalTitleText`],
    },
    [`${id}DeleteModalContent`]: {
-      component: "p1-component",
+      component: "typography.p1",
      config: {
        text: "This can't be undone so please make a copy of any important information first.",
      },
@@ -164,11 +164,7 @@ const generateDeleteModal = ({
      },
    },
    [`${id}ContactsDeletedToastText`]: {
-      component: "p1-component",
-      childrenKeys: [`${id}ContactsDeletedToastMessage`],
-    },
-    [`${id}ContactsDeletedToastMessage`]: {
-      component: "format-message",
+      component: "typography.p1",
      config: {
        messageTemplate: singleContact
          ? "1 contact deleted"
--- a/libs/generic-view/ui/src/lib/generated/mc-contacts-view/mc-contacts-view.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-contacts-view/mc-contacts-view.ts
@@ -255,7 +255,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactsSearchResultsItemPhoneNumber: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -367,11 +367,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    selectedContactsCounter: {
-      component: "p4-component",
-      childrenKeys: ["selectedContactsCounterText"],
-    },
-    selectedContactsCounterText: {
-      component: "format-message",
+      component: "typography.p4",
      config: {
        messageTemplate:
          "{selectedContacts} {selectedContacts, plural, one {contact} other {contacts}} selected",
@@ -490,16 +486,10 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactCheckboxTooltipContentTextWrapper"],
    },
    contactCheckboxTooltipContentTextWrapper: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        color: "grey1",
-      },
-      childrenKeys: ["contactCheckboxTooltipContentText"],
-    },
-    contactCheckboxTooltipContentText: {
-      component: "format-message",
-      config: {
-        messageTemplate: "Select",
+        text: "Select",
      },
    },
    contactCheckbox: {
@@ -520,7 +510,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactDisplayName: {
-      component: "p1-component",
+      component: "typography.p1",
      config: {
        color: "black",
      },
@@ -550,7 +540,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactPhoneNumberWrapper"],
    },
    contactPhoneNumber: {
-      component: "p1-component",
+      component: "typography.p1",
      config: {
        color: "black",
      },
@@ -658,7 +648,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["phoneDropdownCounterTooltipContentText"],
    },
    phoneDropdownCounterTooltipContentText: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        color: "grey1",
      },
@@ -846,13 +836,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    emptyStateTitle: {
-      component: "h3-component",
+      component: "typography.h3",
      config: {
        text: "Import your contacts",
      },
    },
    emptyStateDetailText: {
-      component: "p1-component",
+      component: "typography.p1",
      config: {
        text: "Import all your contacts from a single source.",
      },
@@ -1026,7 +1016,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDisplayNameHeader", "contactDetailsHeaderActions"],
    },
    contactDisplayNameHeader: {
-      component: "h3-component",
+      component: "typography.h3",
      config: {
        text: "",
        unbold: true,
@@ -1060,7 +1050,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactInformationText: {
-      component: "h4-component",
+      component: "typography.h4",
      layout: {
        margin: "0 0 16px 0",
      },
@@ -1094,7 +1084,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsPhoneNumberLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Phone number",
      },
@@ -1130,7 +1120,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsPhoneNumber1Value: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1146,15 +1136,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactDetailsPhoneNumber1Type: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
-      },
-      childrenKeys: ["contactDetailsPhoneNumber1TypeText"],
-    },
-    contactDetailsPhoneNumber1TypeText: {
-      component: "format-message",
-      config: {
        messageTemplate: "• <c>{phoneType}</c>",
      },
      dataProvider: {
@@ -1197,17 +1181,12 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsPhoneNumber1DefaultIconTooltipContentTextWrapper: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        color: "grey1",
-      },
-      childrenKeys: ["contactDetailsPhoneNumber1DefaultIconTooltipContentText"],
-    },
-    contactDetailsPhoneNumber1DefaultIconTooltipContentText: {
-      component: "format-message",
-      config: {
        messageTemplate: "Calls and SMS will go to this number by default.",
      },
+      childrenKeys: ["contactDetailsPhoneNumber1DefaultIconTooltipContentText"],
    },
    contactDetailsPhoneNumber1DefaultIcon: {
      component: "icon",
@@ -1247,7 +1226,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsPhoneNumber2Value: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1263,15 +1242,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactDetailsPhoneNumber2Type: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
-      },
-      childrenKeys: ["contactDetailsPhoneNumber2TypeText"],
-    },
-    contactDetailsPhoneNumber2TypeText: {
-      component: "format-message",
-      config: {
        messageTemplate: "• <c>{phoneType}</c>",
      },
      dataProvider: {
@@ -1308,13 +1281,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsFirstNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "First name",
      },
    },
    contactDetailsFirstNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1352,13 +1325,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsLastNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Last name",
      },
    },
    contactDetailsLastNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1396,13 +1369,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsNamePrefixLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Name prefix",
      },
    },
    contactDetailsNamePrefixValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1440,13 +1413,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsMiddleNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Middle name",
      },
    },
    contactDetailsMiddleNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1484,13 +1457,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsNameSuffixLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Name suffix",
      },
    },
    contactDetailsNameSuffixValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1521,7 +1494,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsEmail"],
    },
    contactDetailsEmailLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Email",
      },
@@ -1538,7 +1511,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsEmailValue", "contactDetailsEmailType"],
    },
    contactDetailsEmailValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1554,15 +1527,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactDetailsEmailType: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
-      },
-      childrenKeys: ["contactDetailsEmailTypeText"],
-    },
-    contactDetailsEmailTypeText: {
-      component: "format-message",
-      config: {
        messageTemplate: "• <c>{emailType}</c>",
      },
      dataProvider: {
@@ -1599,13 +1566,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsNickNameLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Nickname",
      },
    },
    contactDetailsNickNameValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1643,13 +1610,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsCompanyLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Company",
      },
    },
    contactDetailsCompanyValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1687,13 +1654,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsDepartmentLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Department",
      },
    },
    contactDetailsDepartmentValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1728,13 +1695,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsTitleLabel", "contactDetailsTitleValue"],
    },
    contactDetailsTitleLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Job Title",
      },
    },
    contactDetailsTitleValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1769,13 +1736,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsSipLabel", "contactDetailsSipValue"],
    },
    contactDetailsSipLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "SIP",
      },
    },
    contactDetailsSipValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1817,7 +1784,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsAddressLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Address",
      },
@@ -1838,15 +1805,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsAddressStreetValue"],
    },
    contactDetailsAddressStreetValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
-      },
-      childrenKeys: ["contactDetailsAddressStreetValueText"],
-    },
-    contactDetailsAddressStreetValueText: {
-      component: "format-message",
-      config: {
        messageTemplate: "{streetAddress} • <c>{addressType}</c>",
      },
      dataProvider: {
@@ -1880,15 +1841,9 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsAddressCity"],
    },
    contactDetailsAddressCity: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
-      },
-      childrenKeys: ["contactDetailsAddressCityValue"],
-    },
-    contactDetailsAddressCityValue: {
-      component: "format-message",
-      config: {
        messageTemplate: "{city} {zipCode}",
      },
      dataProvider: {
@@ -1922,7 +1877,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsAddressCountryValue"],
    },
    contactDetailsAddressCountryValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -1960,13 +1915,13 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      ],
    },
    contactDetailsWebsiteLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      config: {
        text: "Website",
      },
    },
    contactDetailsWebsiteValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
@@ -2001,7 +1956,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      childrenKeys: ["contactDetailsNotesLabel", "contactDetailsNotesValue"],
    },
    contactDetailsNotesLabel: {
-      component: "h5-component",
+      component: "typography.h5",
      layout: {
        margin: "16px 0 0 0",
      },
@@ -2010,7 +1965,7 @@ export const generateMcContactsView: ComponentGenerator<McContactsView> = (
      },
    },
    contactDetailsNotesValue: {
-      component: "p4-component",
+      component: "typography.p4",
      config: {
        color: "black",
      },
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/delete-files.ts
@@ -51,11 +51,7 @@ export const generateDeleteFiles = (
      },
    },
    [`${id}deleteModalContent`]: {
-      component: "p1-component",
-      childrenKeys: [`${id}deleteModalContentText`],
-    },
-    [`${id}deleteModalContentText`]: {
-      component: "format-message",
+      component: "typography.p1",
      config: {
        messageTemplate:
          "This will remove the {selectedItems, plural, one {file} other {files}} from Kompakt.",
@@ -169,11 +165,7 @@ export const generateDeleteFiles = (
      },
    },
    [`${id}filesDeletedToastText`]: {
-      component: "p1-component",
-      childrenKeys: [`${id}filesDeletedToastMessage`],
-    },
-    [`${id}filesDeletedToastMessage`]: {
-      component: "format-message",
+      component: "typography.p1",
      config: {
        messageTemplate:
          "{selectedItems} {selectedItems, plural, one {file} other {files}} deleted",
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-category-list.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-category-list.ts
@@ -122,7 +122,7 @@ const generateFileCategoryListItem = ({
      },
    },
    [`${id}CategoryListItemNameText`]: {
-      component: "h4-component",
+      component: "typography.h4",
      config: {
        text: name,
      },
@@ -148,7 +148,7 @@ const generateFileCategoryListItem = ({
      ],
    },
    [`${id}CategoryListItemStorageText`]: {
-      component: "p3-component",
+      component: "typography.p3",
      config: {
        text: "0",
        color: "black",
@@ -169,7 +169,7 @@ const generateFileCategoryListItem = ({
      },
    },
    [`${id}CategoryListItemCountTextWrapper`]: {
-      component: "p3-component",
+      component: "typography.p3",
      layout: {
        margin: "8px 0 0 0",
        gridPlacement: {
@@ -179,10 +179,6 @@ const generateFileCategoryListItem = ({
          height: 1,
        },
      },
-      childrenKeys: [`${id}CategoryListItemCountText`],
-    },
-    [`${id}CategoryListItemCountText`]: {
-      component: "format-message",
      config: {
        messageTemplate:
          "{totalEntities} {totalEntities, plural, one {file} other {files}}",
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-list.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/file-list.ts
@@ -193,11 +193,7 @@ const generateFileList = ({
      ],
    },
    [`${id}fileListPanelHeaderWrapper`]: {
-      component: "h3-component",
-      childrenKeys: [`${id}fileListPanelHeader`],
-    },
-    [`${id}fileListPanelHeader`]: {
-      component: "format-message",
+      component: "typography.h3",
      config: {
        messageTemplate: `${name} {totalEntities, plural, =0 {} other { (#)}}`,
      },
@@ -280,11 +276,7 @@ const generateFileList = ({
      },
    },
    [`${id}selectedItemsCounter`]: {
-      component: "p4-component",
-      childrenKeys: [`${id}selectedItemsCounterText`],
-    },
-    [`${id}selectedItemsCounterText`]: {
-      component: "format-message",
+      component: "typography.p4",
      config: {
        messageTemplate:
          "{selectedItems} {selectedItems, plural, one {file} other {files}} selected",
@@ -333,7 +325,7 @@ const generateFileList = ({
      ],
    },
    [`${id}fileListEmptyStateHeader`]: {
-      component: "h4-component",
+      component: "typography.h4",
      layout: {
        margin: "0 0 8px 0",
      },
@@ -342,7 +334,7 @@ const generateFileList = ({
      },
    },
    [`${id}fileListEmptyStateDescription`]: {
-      component: "p3-component",
+      component: "typography.p3",
      layout: {
        margin: "0 auto 24px auto",
        width: "388px",
@@ -414,7 +406,7 @@ const generateFileList = ({
      childrenKeys: [`${id}headerCellNameText`],
    },
    [`${id}headerCellNameText`]: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        textTransform: "uppercase",
        text: "Name",
@@ -431,7 +423,7 @@ const generateFileList = ({
      childrenKeys: [`${id}headerCellTypeText`],
    },
    [`${id}headerCellTypeText`]: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        textTransform: "uppercase",
        text: "Type",
@@ -448,7 +440,7 @@ const generateFileList = ({
      childrenKeys: [`${id}headerCellSizeText`],
    },
    [`${id}headerCellSizeText`]: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        textTransform: "uppercase",
        text: "Size",
@@ -487,16 +479,10 @@ const generateFileList = ({
      childrenKeys: [`${id}contactCheckboxTooltipContentTextWrapper`],
    },
    [`${id}contactCheckboxTooltipContentTextWrapper`]: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        color: "grey1",
-      },
-      childrenKeys: [`${id}contactCheckboxTooltipContentText`],
-    },
-    [`${id}contactCheckboxTooltipContentText`]: {
-      component: "format-message",
-      config: {
-        messageTemplate: "Select",
+        text: "Select",
      },
    },
    [`${id}contactCheckbox`]: {
@@ -527,7 +513,7 @@ const generateFileList = ({
      childrenKeys: [`${id}columnNameText`],
    },
    [`${id}columnNameText`]: {
-      component: "p1-component",
+      component: "typography.p1",
      config: {
        color: "black",
      },
@@ -550,7 +536,7 @@ const generateFileList = ({
      childrenKeys: [`${id}columnTypeText`],
    },
    [`${id}columnTypeText`]: {
-      component: "p3-component",
+      component: "typography.p3",
      config: {
        color: "black",
        textTransform: "uppercase",
@@ -574,7 +560,7 @@ const generateFileList = ({
      childrenKeys: [`${id}columnSizeText`],
    },
    [`${id}columnSizeText`]: {
-      component: "p3-component",
+      component: "typography.p3",
      config: {
        color: "black",
        textTransform: "format-bytes",
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/mc-file-manager-data.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/mc-file-manager-data.ts
@@ -10,7 +10,7 @@ import {
  segmentBarItemData,
 } from "generic-view/models"
 import { View } from "generic-view/utils"
-import { formatBytes } from "../../texts/format-bytes"
+import { formatBytes } from "../../typography/format-bytes"
 import { SEGMENTS_CONFIG_MAP } from "./storage-summary-bar"

 const isEntitiesLoaderConfig = (
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/mc-file-manager-view.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/mc-file-manager-view.ts
@@ -99,7 +99,7 @@ export const generateMcFileManagerView: ComponentGenerator<
      childrenKeys: ["storageSummaryHeader", "storageSummaryContent"],
    },
    storageSummaryHeader: {
-      component: "h3-component",
+      component: "typography.h3",
      layout: {
        margin: "0 0 24px 0",
      },
@@ -122,7 +122,7 @@ export const generateMcFileManagerView: ComponentGenerator<
      ],
    },
    storageSummaryUsedText: {
-      component: "p3-component",
+      component: "typography.p3",
      config: {
        // TODO: Refactor to template after https://appnroll.atlassian.net/browse/CP-3275
        text: "Used: 0 KB",
@@ -138,7 +138,7 @@ export const generateMcFileManagerView: ComponentGenerator<
      },
    },
    storageSummaryFreeText: {
-      component: "p3-component",
+      component: "typography.p3",
      config: {
        text: "0",
        color: "grey2",
@@ -191,13 +191,13 @@ export const generateMcFileManagerView: ComponentGenerator<
      ],
    },
    fileCategoryOtherFilesItemNameText: {
-      component: "h4-component",
+      component: "typography.h4",
      config: {
        text: "Other files",
      },
    },
    fileCategoryOtherFilesItemNameSize: {
-      component: "p3-component",
+      component: "typography.p3",
      layout: {
        margin: "0 0 0 3px",
      },
--- a/libs/generic-view/ui/src/lib/generated/mc-file-manager/other-files-list.tsx
+++ b/libs/generic-view/ui/src/lib/generated/mc-file-manager/other-files-list.tsx
@@ -28,7 +28,7 @@ const generateOtherFilesListItem = ({
      ],
    },
    [`${id}otherFilesListItemMarker`]: {
-      component: "p5-component",
+      component: "typography.p5",
      layout: {
        margin: "0 6px",
      },
@@ -38,7 +38,7 @@ const generateOtherFilesListItem = ({
      },
    },
    [`${id}otherFilesListItemText`]: {
-      component: "p5-component",
+      component: "typography.p5",
      config: {
        text: name,
        color: "grey1",
--- a/libs/generic-view/ui/src/lib/interactive/form/input/search-results.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/form/input/search-results.tsx
@@ -19,7 +19,7 @@ import styled from "styled-components"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { APIFC, IconType } from "generic-view/utils"
 import { Icon } from "../../../icon/icon"
-import { P3 } from "../../../texts/paragraphs"
+import { Typography } from "../../../typography"
 import {
  FormSearchInputResultsConfig,
  FormSearchInputResultsData,
@@ -143,9 +143,9 @@ export const SearchResults: APIFC<
      ) : (
        <EmptyResults>
          <Icon config={{ type: IconType.Search }} />
-          <P3>
+          <Typography.P3>
            {config?.noResultsMessage || intl.formatMessage(messages.noResults)}
-          </P3>
+          </Typography.P3>
        </EmptyResults>
      )}
    </SearchResultsWrapper>
--- a/libs/generic-view/ui/src/lib/interactive/modal/modal.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/modal/modal.tsx
@@ -30,7 +30,7 @@ export const Modal: BaseGenericComponent<
  CloseButton: typeof ModalCloseButton
  SizeController: typeof ModalSizeController
  VisibilityController: typeof ModalVisibilityController
-} = ({ children, componentKey, config }) => {
+} = ({ children, componentKey, config = {} }) => {
  const { opened } = useModalsQueue(componentKey)

  return (
--- a/libs/generic-view/ui/src/lib/predefined/contacts/mc-contacts-search-result.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/contacts/mc-contacts-search-result.tsx
@@ -10,7 +10,7 @@ import {
  ContactsSearchResultsConfig,
  ContactsSearchResultsData,
 } from "generic-view/models"
-import { P3, P4 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 import { findMatches, HighlightText } from "../../texts/highlight-text"

 export const McContactsSearchResult: APIFC<
@@ -46,7 +46,7 @@ export const McContactsSearchResult: APIFC<

  return (
    <>
-      <P3 $color={"black"} $singleLine>
+      <Typography.P3 config={{ color: "black", singleLine: true }}>
        <HighlightText
          data={{
            text: firstLine,
@@ -58,9 +58,9 @@ export const McContactsSearchResult: APIFC<
            phraseWordsSeparated: true,
          }}
        />
-      </P3>
+      </Typography.P3>
      {renderSecondLine && (
-        <P4 $color={"black"} $singleLine>
+        <Typography.P4 config={{ color: "black", singleLine: true }}>
          <HighlightText
            data={{
              text: secondLineMatches.text,
@@ -70,7 +70,7 @@ export const McContactsSearchResult: APIFC<
              matches: secondLineMatches.matches,
            }}
          />
-        </P4>
+        </Typography.P4>
      )}
    </>
  )
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx
@@ -5,8 +5,7 @@

 import React, { FunctionComponent } from "react"
 import styled, { css } from "styled-components"
-import { H4, H5 } from "../../../texts/headers"
-import { P3 } from "../../../texts/paragraphs"
+import { Typography } from "../../../typography"
 import { ButtonPrimary } from "../../../buttons/button-primary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
@@ -35,8 +34,10 @@ export const DeviceCard: FunctionComponent<
      </Image>
      <Info>
        <H4>{name}</H4>
-        <P3>{intl.formatMessage(messages.serialNumber)}</P3>
-        <H5>{serialNumber}</H5>
+        <Typography.P3>
+          {intl.formatMessage(messages.serialNumber)}
+        </Typography.P3>
+        <Typography.H5>{serialNumber}</Typography.H5>
      </Info>
      <SelectButton
        config={{
@@ -95,6 +96,8 @@ export const Image = styled.div`
  }
 `

+const H4 = styled(Typography.H4)``
+
 export const Info = styled.div`
  grid-area: info;
  align-self: center;
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-selector.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-selector.tsx
@@ -6,8 +6,7 @@
 import React, { FunctionComponent, useRef, useState } from "react"
 import { deviceCardStyles, Image, Info, Tag } from "./device-card"
 import styled, { css } from "styled-components"
-import { H4, H5 } from "../../../texts/headers"
-import { P3 } from "../../../texts/paragraphs"
+import { Typography } from "../../../typography"
 import * as DropdownArrowSvg from "../dropdown.svg"
 import * as CheckSvg from "../check.svg"
 import useOutsideClick from "Core/__deprecated__/renderer/utils/hooks/useOutsideClick"
@@ -76,9 +75,11 @@ export const DeviceSelector: FunctionComponent<Props> = ({ type, devices }) => {
          <img src={selectedDevice?.image} alt={""} />
        </Image>
        <Info>
-          <H4>{selectedDevice?.name}</H4>
-          <P3>{intl.formatMessage(messages.serialNumber)}</P3>
-          <H5>{selectedDevice?.serialNumber}</H5>
+          <Typography.H4>{selectedDevice?.name}</Typography.H4>
+          <Typography.P3>
+            {intl.formatMessage(messages.serialNumber)}
+          </Typography.P3>
+          <Typography.H5>{selectedDevice?.serialNumber}</Typography.H5>
        </Info>
        <Arrow>{dropdownVisible && <DropdownArrowSvg />}</Arrow>
      </CardWrapper>
@@ -112,9 +113,11 @@ const ListItem: FunctionComponent<
        <img src={image} alt={name} />
      </Image>
      <Info>
-        <H4>{name}</H4>
-        <P3>{intl.formatMessage(messages.serialNumber)}</P3>
-        <H5>{serialNumber}</H5>
+        <Typography.H4>{name}</Typography.H4>
+        <Typography.P3>
+          {intl.formatMessage(messages.serialNumber)}
+        </Typography.P3>
+        <Typography.H5>{serialNumber}</Typography.H5>
      </Info>
      <Check>{active && <CheckSvg />}</Check>
    </ListItemCard>
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx
@@ -4,7 +4,7 @@
 */

 import React, { FunctionComponent, useCallback } from "react"
-import { H4 } from "../../../texts/headers"
+import { Typography } from "../../../typography"
 import styled from "styled-components"
 import { DataMigrationFeature } from "generic-view/models"
 import { Divider } from "../../../helpers/divider"
@@ -75,7 +75,7 @@ export const FeaturesSelector: FunctionComponent<Props> = ({ features }) => {

  return (
    <Wrapper>
-      <H4>{intl.formatMessage(messages.title)}</H4>
+      <Typography.H4>{intl.formatMessage(messages.title)}</Typography.H4>
      <AllCheckbox
        config={{
          name: "all-features",
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/source-selector.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/source-selector.tsx
@@ -7,7 +7,7 @@ import React, { FunctionComponent } from "react"
 import { DeviceSelector } from "./device-selector"
 import styled from "styled-components"
 import * as ArrowSvg from "../arrow.svg"
-import { H4 } from "../../../texts/headers"
+import { Typography } from "../../../typography"
 import { useSelector } from "react-redux"
 import {
  selectDataMigrationSourceDevices,
@@ -31,15 +31,15 @@ export const SourceSelector: FunctionComponent = () => {
  return (
    <Wrapper>
      <Column>
-        <H4>{intl.formatMessage(messages.from)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.from)}</Typography.H4>
        <DeviceSelector type={"source"} devices={sourceDevices} />
      </Column>
      <Column>
-        <H4>&nbsp;</H4>
+        <Typography.H4>&nbsp;</Typography.H4>
        <ArrowSvg />
      </Column>
      <Column>
-        <H4>{intl.formatMessage(messages.to)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.to)}</Typography.H4>
        <DeviceSelector
          type={"target"}
          devices={targetDevice ? [targetDevice] : []}
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/data-migration.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/data-migration.tsx
@@ -5,12 +5,7 @@

 /* stylelint-disable no-duplicate-selectors */

-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
+import React, { FunctionComponent, useCallback, useEffect, useState } from "react"
 import { defineMessages } from "react-intl"
 import { useDispatch, useSelector } from "react-redux"
 import { APIFC } from "generic-view/utils"
@@ -36,15 +31,12 @@ import {
 } from "generic-view/store"
 import { Instruction, InstructionWrapper } from "./instruction"
 import styled from "styled-components"
-import { H3 } from "../../texts/headers"
+import { Typography } from "../../typography"
 import { Divider } from "../../helpers/divider"
 import { TargetSelector, TargetSelectorWrapper } from "./target-selector"
 import Form from "../../interactive/form/form"
 import { TransferSetup } from "./transfer-setup"
-import {
-  GenericThemeProvider,
-  modalTransitionDuration,
-} from "generic-view/theme"
+import { GenericThemeProvider, modalTransitionDuration } from "generic-view/theme"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
 import { PureErrorModal } from "./components/pure-error-modal"
@@ -305,6 +297,8 @@ const Wrapper = styled.div`
  }
 `

+const H3 = styled(Typography.H3)``
+
 const Header = styled.div`
  display: flex;
  justify-content: center;
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/instruction.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/instruction.tsx
@@ -5,7 +5,7 @@

 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { P1, P3 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 import * as ConnectionSvg from "./connection.svg"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
@@ -36,23 +36,31 @@ export const Instruction: FunctionComponent = () => {
    <InstructionWrapper>
      <Header>
        <h2>{intl.formatMessage(messages.title)}</h2>
-        <P3>{intl.formatMessage(messages.description)}</P3>
+        <Typography.P3>
+          {intl.formatMessage(messages.description)}
+        </Typography.P3>
      </Header>
      <Image>
        <ConnectionSvg />
      </Image>
      <Steps>
        <Step>
-          <P1>{intl.formatMessage(messages.step, { number: 1 })}</P1>
-          <P3>{intl.formatMessage(messages.step1)}</P3>
+          <Typography.P1>
+            {intl.formatMessage(messages.step, { number: 1 })}
+          </Typography.P1>
+          <Typography.P3>{intl.formatMessage(messages.step1)}</Typography.P3>
        </Step>
        <Step>
-          <P1>{intl.formatMessage(messages.step, { number: 2 })}</P1>
-          <P3>{intl.formatMessage(messages.step2)}</P3>
+          <Typography.P1>
+            {intl.formatMessage(messages.step, { number: 2 })}
+          </Typography.P1>
+          <Typography.P3>{intl.formatMessage(messages.step2)}</Typography.P3>
        </Step>
        <Step>
-          <P1>{intl.formatMessage(messages.step, { number: 3 })}</P1>
-          <P3>{intl.formatMessage(messages.step3)}</P3>
+          <Typography.P1>
+            {intl.formatMessage(messages.step, { number: 3 })}
+          </Typography.P1>
+          <Typography.P3>{intl.formatMessage(messages.step3)}</Typography.P3>
        </Step>
      </Steps>
    </InstructionWrapper>
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/target-selector.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/target-selector.tsx
@@ -5,7 +5,7 @@

 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { P3 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"
 import { DeviceCard } from "./components/device-card"
 import { useDataMigrationDeviceSelector } from "shared/feature"
 import { defineMessages } from "react-intl"
@@ -32,7 +32,9 @@ export const TargetSelector: FunctionComponent<Props> = ({ devices }) => {
    <TargetSelectorWrapper>
      <Header>
        <h2>{intl.formatMessage(messages.title)}</h2>
-        <P3>{intl.formatMessage(messages.description)}</P3>
+        <Typography.P3>
+          {intl.formatMessage(messages.description)}
+        </Typography.P3>
      </Header>
      <Devices>
        {devices.map((device) => {
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx
@@ -17,7 +17,7 @@ import { useSelector } from "react-redux"
 import { Divider } from "../../helpers/divider"
 import { Form } from "../../interactive/form/form"
 import { ButtonAction } from "generic-view/models"
-import { Paragraph5 } from "../../texts/paragraphs"
+import { Typography } from "../../typography"

 export const SELECTED_CONTACTS_FIELD = "selected-contacts"

@@ -148,7 +148,9 @@ const ContactItem: React.FC<UnifiedContact> = ({
                </Tooltip.Anchor>
                <Tooltip.Content>
                  {phoneNumbers.slice(1).map((number) => (
-                    <Paragraph5 key={number.value}>{number.value}</Paragraph5>
+                    <Typography.P5 key={number.value}>
+                      {number.value}
+                    </Typography.P5>
                  ))}
                </Tooltip.Content>
              </Tooltip>
--- a/libs/generic-view/ui/src/lib/predefined/incoming-feature-info.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/incoming-feature-info.tsx
@@ -7,8 +7,7 @@ import React from "react"
 import styled from "styled-components"
 import { APIFC } from "generic-view/utils"
 import { IncomingFeatureInfoConfig } from "generic-view/models"
-import { H4 } from "../texts/headers"
-import { P2 } from "../texts/paragraphs"
+import { Typography } from "../typography"
 import { Icon } from "../icon/icon"

 const dataTestId = {
@@ -29,13 +28,13 @@ export const IncomingFeatureInfo: APIFC<
    <Wrapper {...props} data-testid={dataTestId.wrapper}>
      <IconWrapper config={{ type: config.icon }} />
      <TextWrapper>
-        <H4 data-testid={`${dataTestId.header}-${dataTestIdSuffix}`}>
+        <Typography.H4 data-testid={`${dataTestId.header}-${dataTestIdSuffix}`}>
          {config.header}
-        </H4>
-        <P2 data-testid={`${dataTestId.text}-${dataTestIdSuffix}`}>
+        </Typography.H4>
+        <Typography.P2 data-testid={`${dataTestId.text}-${dataTestIdSuffix}`}>
          {" "}
          {config.text}
-        </P2>
+        </Typography.P2>
      </TextWrapper>
    </Wrapper>
  )
--- a/libs/generic-view/ui/src/lib/segment-bar/segment-bar-item.tsx
+++ b/libs/generic-view/ui/src/lib/segment-bar/segment-bar-item.tsx
@@ -7,7 +7,7 @@ import React from "react"
 import styled from "styled-components"
 import { BaseGenericComponent } from "generic-view/utils"
 import { Tooltip } from "../interactive/tooltip/tooltip"
-import { P5 } from "../texts/paragraphs"
+import { Typography } from "../typography"
 import { ComputedSegmentBarItem } from "./compute-segment-bar-items.helper"

 interface SegmentBarItemProps extends ComputedSegmentBarItem {
@@ -34,7 +34,7 @@ export const SegmentBarItem: BaseGenericComponent<
    {...props}
  >
    <Tooltip.Content>
-      <P5 $color={"grey1"}>{label}</P5>
+      <Typography.P5 config={{ color: "grey1" }}>{label}</Typography.P5>
    </Tooltip.Content>
    <Tooltip.Anchor />
  </TooltipStyled>
--- a/libs/generic-view/ui/src/lib/shared/warrning-box.tsx
+++ b/libs/generic-view/ui/src/lib/shared/warrning-box.tsx
@@ -12,7 +12,7 @@ import Icon, {
  IconSize,
 } from "Core/__deprecated__/renderer/components/core/icon/icon.component"
 import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
-import { H4 } from "../texts/headers"
+import { Typography } from "../typography"

 const Wrapper = styled.div`
  display: block;
@@ -59,7 +59,7 @@ export const WarrningBox: FunctionComponent<WarningBoxProps> = ({
        <Icon type={IconType.Exclamation} size={IconSize.ExtraLarge} />
      </Top>
      <Header>
-        <H4>{intl.formatMessage(messages.header)}</H4>
+        <Typography.H4>{intl.formatMessage(messages.header)}</Typography.H4>
      </Header>
      <Content>{children}</Content>
    </Wrapper>
--- a/libs/generic-view/ui/src/lib/table/table-cell.tsx
+++ b/libs/generic-view/ui/src/lib/table/table-cell.tsx
@@ -11,7 +11,7 @@ import { TableTestIds } from "e2e-test-ids"

 export const TableCell: APIFC<undefined, TableCellConfig> = ({
  children,
-  config,
+  config = {},
  data,
  ...props
 }) => {
--- a/libs/generic-view/ui/src/lib/texts/common-text-styles.ts
+++ b/libs/generic-view/ui/src/lib/texts/common-text-styles.ts
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import { css } from "styled-components"
-import { CommonTextValidators } from "generic-view/models"
-
-export interface CommonTextProps {
-  $singleLine?: NonNullable<CommonTextValidators["singleLine"]>
-  $textTransform?: NonNullable<CommonTextValidators["textTransform"]>
-  $color?: NonNullable<CommonTextValidators["color"]>
-  $textAlign?: NonNullable<CommonTextValidators["textAlign"]>
-}
-
-export const commonTextStyles = css<CommonTextProps>`
-  ${({ $singleLine }) =>
-    $singleLine &&
-    css`
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    `}
-
-  text-transform: ${({ $textTransform = "unset" }) =>
-    $textTransform === "capitalize-first-letter"
-      ? "lowercase"
-      : $textTransform};
-
-  ${({ $textTransform }) =>
-    $textTransform === "capitalize-first-letter" &&
-    css`
-      &:first-letter {
-        text-transform: uppercase;
-      }
-    `}
-
-  text-align: ${({ $textAlign = "unset" }) => $textAlign};
-`
--- a/libs/generic-view/ui/src/lib/texts/headers.tsx
+++ b/libs/generic-view/ui/src/lib/texts/headers.tsx
@@ -1,114 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import React from "react"
-import { isEmpty } from "lodash"
-import styled, { css } from "styled-components"
-import { TypographyTestIds } from "e2e-test-ids"
-import { APIFC } from "generic-view/utils"
-import { HeaderConfig, UnboldValidator } from "generic-view/models"
-import { CommonTextProps, commonTextStyles } from "./common-text-styles"
-
-interface HeaderProps extends CommonTextProps {
-  $unbold?: NonNullable<UnboldValidator["unbold"]>
-}
-
-const commonStyle = css<HeaderProps>`
-  ${commonTextStyles};
-  color: ${({ theme, $color = "black" }) => theme.color[$color]};
-
-  ${({ $unbold }) =>
-    $unbold &&
-    css`
-      font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-      b,
-      strong {
-        font-weight: ${({ theme }) => theme.fontWeight.bold};
-      }
-    `}
-`
-
-export const Header3: APIFC<undefined, HeaderConfig> = ({
-  config,
-  children,
-  ...props
-}) => {
-  return (
-    <H3
-      data-testid={TypographyTestIds.H3}
-      $unbold={config?.unbold}
-      $singleLine={config?.singleLine}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      {...props}
-    >
-      {isEmpty(children) ? config?.text : children}
-    </H3>
-  )
-}
-
-export const H3 = styled.h3<HeaderProps>`
-  font-size: ${({ theme }) => theme.fontSize.headline3};
-  line-height: ${({ theme }) => theme.lineHeight.headline3};
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-  margin: 0;
-  ${commonStyle};
-`
-
-export const Header4: APIFC<undefined, HeaderConfig> = ({
-  config,
-  children,
-  ...props
-}) => {
-  return (
-    <H4
-      data-testid={TypographyTestIds.H4}
-      $unbold={config?.unbold}
-      $singleLine={config?.singleLine}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      {...props}
-    >
-      {isEmpty(children) ? config?.text : children}
-    </H4>
-  )
-}
-
-export const H4 = styled.h4<HeaderProps>`
-  font-size: ${({ theme }) => theme.fontSize.headline4};
-  line-height: ${({ theme }) => theme.lineHeight.headline4};
-  letter-spacing: 0.02em;
-  margin: 0;
-  ${commonStyle};
-`
-
-export const Header5: APIFC<undefined, HeaderConfig> = ({
-  config,
-  children,
-  ...props
-}) => {
-  return (
-    <H5
-      data-testid={TypographyTestIds.H5}
-      $unbold={config?.unbold}
-      $singleLine={config?.singleLine}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      {...props}
-    >
-      {isEmpty(children) ? config?.text : children}
-    </H5>
-  )
-}
-
-export const H5 = styled.h5<HeaderProps>`
-  font-size: ${({ theme }) => theme.fontSize.headline5};
-  line-height: ${({ theme }) => theme.lineHeight.headline5};
-  letter-spacing: 0.04em;
-  font-weight: ${({ theme }) => theme.fontWeight.bold};
-  margin: 0;
-  ${commonStyle};
-`
--- a/libs/generic-view/ui/src/lib/texts/index.ts
+++ b/libs/generic-view/ui/src/lib/texts/index.ts
@@ -3,35 +3,9 @@
 * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
 */

-import { Header3, Header4, Header5 } from "./headers"
-import {
-  Paragraph1,
-  Paragraph2,
-  Paragraph3,
-  Paragraph4,
-  Paragraph5,
-} from "./paragraphs"
-import {
-  h3Component,
-  h4Component,
-  h5Component,
-  highlightText,
-  p1Component,
-  p2Component,
-  p3Component,
-  p4Component,
-  p5Component,
-} from "generic-view/models"
+import { highlightText } from "generic-view/models"
 import { HighlightText } from "./highlight-text"

 export const texts = {
-  [h3Component.key]: Header3,
-  [h4Component.key]: Header4,
-  [h5Component.key]: Header5,
-  [p1Component.key]: Paragraph1,
-  [p2Component.key]: Paragraph2,
-  [p3Component.key]: Paragraph3,
-  [p4Component.key]: Paragraph4,
-  [p5Component.key]: Paragraph5,
  [highlightText.key]: HighlightText,
 }
--- a/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
+++ b/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
@@ -1,231 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-import React from "react"
-import { APIFC } from "generic-view/utils"
-import styled, { css } from "styled-components"
-import { isEmpty } from "lodash"
-import { ParagraphConfig, ParagraphData } from "generic-view/models"
-import { Content } from "../data-rows/text-formatted"
-import { CommonTextProps, commonTextStyles } from "./common-text-styles"
-import { applyTextTransform } from "./apply-text-transform"
-import { TypographyTestIds } from "e2e-test-ids"
-
-type ParagraphsProps = CommonTextProps
-
-const commonStyles = css<ParagraphsProps>`
-  white-space: pre-wrap;
-  margin: 0;
-  color: ${({ theme, $color = "grey2" }) => theme.color[$color]};
-  ${commonTextStyles};
-`
-
-export const Paragraph1: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P1
-      data-testid={TypographyTestIds.P1}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P1>
-  )
-}
-
-export const P1 = styled.p<ParagraphsProps>`
-  &,
-  ${Content} p {
-    font-size: ${({ theme }) => theme.fontSize.paragraph1};
-    line-height: ${({ theme }) => theme.lineHeight.paragraph1};
-    letter-spacing: 0.02em;
-    font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-    b,
-    strong {
-      font-weight: ${({ theme }) => theme.fontWeight.bold};
-    }
-    ${commonStyles};
-  }
-`
-
-export const Paragraph2: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P2
-      data-testid={TypographyTestIds.P2}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P2>
-  )
-}
-
-export const P2 = styled.p<ParagraphsProps>`
-  font-size: ${({ theme }) => theme.fontSize.paragraph2};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph2};
-  letter-spacing: 0.02em;
-  font-weight: ${({ theme }) => theme.fontWeight.light};
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.regular};
-  }
-  ${commonStyles};
-`
-
-export const Paragraph3: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P3
-      data-testid={TypographyTestIds.P3}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P3>
-  )
-}
-
-export const P3 = styled.p<ParagraphsProps>`
-  font-size: ${({ theme }) => theme.fontSize.paragraph3};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph3};
-  letter-spacing: 0.05em;
-  font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-  }
-  ${commonStyles};
-`
-
-export const Paragraph4: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P4
-      data-testid={TypographyTestIds.P4}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P4>
-  )
-}
-
-export const P4 = styled.p<ParagraphsProps>`
-  font-size: ${({ theme }) => theme.fontSize.paragraph4};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph4};
-  font-weight: ${({ theme }) => theme.fontWeight.light};
-  letter-spacing: 0.02em;
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-  }
-  ${commonStyles};
-`
-
-export const Paragraph5: APIFC<ParagraphData, ParagraphConfig> = ({
-  config,
-  data,
-  children,
-  ...props
-}) => {
-  const text = data?.text ?? config?.text
-
-  const transformedText = applyTextTransform(
-    text,
-    config?.textTransform,
-    config?.textTransformOptions
-  )
-
-  return (
-    <P5
-      data-testid={TypographyTestIds.P5}
-      $color={config?.color}
-      $textTransform={config?.textTransform}
-      $singleLine={config?.singleLine}
-      $textAlign={config?.textAlign}
-      {...props}
-    >
-      {isEmpty(children) ? transformedText : children}
-    </P5>
-  )
-}
-
-export const P5 = styled.p<ParagraphsProps>`
-  ${commonStyles};
-  font-size: ${({ theme }) => theme.fontSize.paragraph5};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph5};
-  letter-spacing: 0.04em;
-  font-weight: ${({ theme }) => theme.fontWeight.regular};
-
-  b,
-  strong {
-    font-weight: ${({ theme }) => theme.fontWeight.bold};
-  }
-`
--- a/libs/generic-view/ui/src/lib/typography/apply-text-transform.ts
+++ b/libs/generic-view/ui/src/lib/typography/apply-text-transform.ts
--- a/libs/generic-view/ui/src/lib/typography/format-bytes.test.ts
+++ b/libs/generic-view/ui/src/lib/typography/format-bytes.test.ts
--- a/libs/generic-view/ui/src/lib/typography/format-bytes.ts
+++ b/libs/generic-view/ui/src/lib/typography/format-bytes.ts
--- a/libs/generic-view/ui/src/lib/typography/index.ts
+++ b/libs/generic-view/ui/src/lib/typography/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { Typography } from "./typography"
+
+export * from "./typography"
+
+export const typography = {
+  "typography.h3": Typography.H3,
+  "typography.h4": Typography.H4,
+  "typography.h5": Typography.H5,
+  "typography.p1": Typography.P1,
+  "typography.p2": Typography.P2,
+  "typography.p3": Typography.P3,
+  "typography.p4": Typography.P4,
+  "typography.p5": Typography.P5,
+}
--- a/libs/generic-view/ui/src/lib/typography/typography-content.tsx
+++ b/libs/generic-view/ui/src/lib/typography/typography-content.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { isEmpty } from "lodash"
+import { APIFC } from "generic-view/utils"
+import {
+  isValidFormatMessageConfig,
+  isValidFormatMessageData,
+  TypographyConfig,
+  TypographyData,
+} from "generic-view/models"
+import { applyTextTransform } from "./apply-text-transform"
+import { FormatMessage } from "../interactive/format-message"
+
+export const TypographyContent: APIFC<TypographyData, TypographyConfig> = ({
+  config,
+  data,
+  children,
+}) => {
+  if (!isEmpty(children)) {
+    return children
+  }
+
+  if (isValidFormatMessageConfig(config) && isValidFormatMessageData(data)) {
+    return <FormatMessage config={config} data={data} />
+  }
+
+  const text = data?.text ?? config?.text
+
+  return applyTextTransform(
+    text,
+    config?.textTransform,
+    config?.textTransformOptions
+  )
+}
--- a/libs/generic-view/ui/src/lib/typography/typography.config.tsx
+++ b/libs/generic-view/ui/src/lib/typography/typography.config.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { TypographyTestIds } from "e2e-test-ids"
+import { TypographyKey } from "generic-view/models"
+import { Theme } from "generic-view/theme"
+import { ThemeProps } from "styled-components"
+
+interface BaseTypographyConfig {
+  as: React.ElementType
+  ["data-testid"]: string
+}
+
+export interface TypographyStyle {
+  letterSpacing: string
+  defaultColor: string
+  fontSize: (theme: ThemeProps<Theme>) => string
+  fontHeight: (theme: ThemeProps<Theme>) => string
+  fontWeight?: (theme: ThemeProps<Theme>) => string
+  strongFontWeight?: (theme: ThemeProps<Theme>) => string
+}
+
+interface TypographyConfig extends TypographyStyle, BaseTypographyConfig {}
+
+type TypographyConfigMap = {
+  [key in TypographyKey]: TypographyConfig
+}
+
+export const typographyConfig: TypographyConfigMap = {
+  "typography.h3": {
+    as: "h3",
+    ["data-testid"]: TypographyTestIds.H3,
+    letterSpacing: "0.02em",
+    defaultColor: "black",
+    fontSize: ({ theme }) => theme.fontSize.headline3,
+    fontHeight: ({ theme }) => theme.lineHeight.headline3,
+    fontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.h4": {
+    as: "h4",
+    ["data-testid"]: TypographyTestIds.H4,
+    letterSpacing: "0.02em",
+    defaultColor: "black",
+    fontSize: ({ theme }) => theme.fontSize.headline4,
+    fontHeight: ({ theme }) => theme.lineHeight.headline4,
+  },
+  "typography.h5": {
+    as: "h5",
+    ["data-testid"]: TypographyTestIds.H5,
+    letterSpacing: "0.04em",
+    defaultColor: "black",
+    fontSize: ({ theme }) => theme.fontSize.headline5,
+    fontHeight: ({ theme }) => theme.lineHeight.headline5,
+    fontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p1": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P1,
+    letterSpacing: "0.02em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph1,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph1,
+    fontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p2": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P2,
+    letterSpacing: "0.02em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph2,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph2,
+    fontWeight: ({ theme }) => `${theme.fontWeight.light}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+  },
+  "typography.p3": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P3,
+    letterSpacing: "0.05em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph3,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph3,
+    fontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p4": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P4,
+    letterSpacing: "0.02em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph4,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph4,
+    fontWeight: ({ theme }) => `${theme.fontWeight.light}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+  "typography.p5": {
+    as: "p",
+    ["data-testid"]: TypographyTestIds.P5,
+    letterSpacing: "0.04em",
+    defaultColor: "grey2",
+    fontSize: ({ theme }) => theme.fontSize.paragraph5,
+    fontHeight: ({ theme }) => theme.lineHeight.paragraph5,
+    fontWeight: ({ theme }) => `${theme.fontWeight.regular}`,
+    strongFontWeight: ({ theme }) => `${theme.fontWeight.bold}`,
+  },
+}
--- a/libs/generic-view/ui/src/lib/typography/typography.tsx
+++ b/libs/generic-view/ui/src/lib/typography/typography.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import styled, { css } from "styled-components"
+import { APIFC } from "generic-view/utils"
+import {
+  CommonTextValidators,
+  TypographyConfig,
+  TypographyData,
+  TypographyKey,
+  UnboldValidator,
+} from "generic-view/models"
+import { Content } from "../data-rows/text-formatted"
+import { typographyConfig, TypographyStyle } from "./typography.config"
+import { TypographyContent } from "./typography-content"
+import { useOverflowTitle } from "./use-overflow-title"
+
+const BaseTypography: APIFC<TypographyData, TypographyConfig> = (props) => {
+  const { componentName, config, ...restProps } = props
+  const variant = componentName as TypographyKey
+  const staticTypographyConfig = typographyConfig[variant]
+  const { containerRef, title } = useOverflowTitle()
+
+  return (
+    <TypographyWrapper
+      ref={containerRef}
+      title={title}
+      $color={config?.color ?? staticTypographyConfig.defaultColor}
+      $textTransform={config?.textTransform}
+      $singleLine={config?.singleLine}
+      $textAlign={config?.textAlign}
+      {...staticTypographyConfig}
+      {...restProps}
+    >
+      <TypographyContent {...props} />
+    </TypographyWrapper>
+  )
+}
+
+interface TypographyWrapperStyledProps extends TypographyStyle {
+  as?: React.ElementType
+  $singleLine?: NonNullable<CommonTextValidators["singleLine"]>
+  $textTransform?: NonNullable<CommonTextValidators["textTransform"]>
+  $textAlign?: NonNullable<CommonTextValidators["textAlign"]>
+  $unbold?: NonNullable<UnboldValidator["unbold"]>
+  $color: NonNullable<CommonTextValidators["color"]>
+}
+
+const TypographyWrapper = styled.div<TypographyWrapperStyledProps>`
+  &,
+  ${Content} p {
+    margin: 0;
+    padding: 0;
+    white-space: pre-wrap;
+    color: ${({ theme, $color }) => theme.color[$color]};
+
+    font-size: ${({ fontSize, theme }) => fontSize({ theme })};
+    line-height: ${({ fontHeight, theme }) => fontHeight({ theme })};
+    font-weight: ${({ fontWeight, theme }) =>
+      fontWeight && fontWeight({ theme })};
+
+    b,
+    strong {
+      font-weight: ${({ strongFontWeight, theme }) =>
+        strongFontWeight && strongFontWeight({ theme })};
+    }
+
+    ${({ $singleLine }) =>
+      $singleLine &&
+      css`
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `}
+
+    text-transform: ${({ $textTransform = "unset" }) =>
+      $textTransform === "capitalize-first-letter"
+        ? "lowercase"
+        : $textTransform};
+
+    ${({ $textTransform }) =>
+      $textTransform === "capitalize-first-letter" &&
+      css`
+        &:first-letter {
+          text-transform: uppercase;
+        }
+      `}
+
+    text-align: ${({ $textAlign = "unset" }) => $textAlign};
+
+    ${({ $unbold }) =>
+      $unbold &&
+      css`
+        font-weight: ${({ theme }) => theme.fontWeight.regular};
+
+        b,
+        strong {
+          font-weight: ${({ theme }) => theme.fontWeight.bold};
+        }
+      `}
+  }
+`
+
+export const Typography = BaseTypography as typeof BaseTypography & {
+  H3: typeof BaseTypography
+  H4: typeof BaseTypography
+  H5: typeof BaseTypography
+  P1: typeof BaseTypography
+  P2: typeof BaseTypography
+  P3: typeof BaseTypography
+  P4: typeof BaseTypography
+  P5: typeof BaseTypography
+}
+
+
+Typography.H3 = (props) => (
+  <BaseTypography {...props} componentName="typography.h3" />
+)
+
+Typography.H4 = (props) => (
+  <BaseTypography {...props} componentName="typography.h4" />
+)
+
+Typography.H5 = (props) => (
+  <BaseTypography {...props} componentName="typography.h5" />
+)
+
+Typography.P1 = (props) => (
+  <BaseTypography {...props} componentName="typography.p1" />
+)
+
+Typography.P2 = (props) => (
+  <BaseTypography {...props} componentName="typography.p2" />
+)
+
+Typography.P3 = (props) => (
+  <BaseTypography {...props} componentName="typography.p3" />
+)
+
+Typography.P4 = (props) => (
+  <BaseTypography {...props} componentName="typography.p4" />
+)
+
+Typography.P5 = (props) => (
+  <BaseTypography {...props} componentName="typography.p5" />
+)
+
--- a/libs/generic-view/ui/src/lib/typography/use-overflow-title.tsx
+++ b/libs/generic-view/ui/src/lib/typography/use-overflow-title.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useRef, useState, useEffect } from "react"
+
+export const useOverflowTitle = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [title, setTitle] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    let resizeTimeout: NodeJS.Timeout
+
+    const checkOverflow = () => {
+      if (containerRef.current) {
+        const isOverflowing =
+          containerRef.current.scrollWidth > containerRef.current.clientWidth
+        const text = containerRef.current.textContent
+
+        if (isOverflowing && text) {
+          setTitle(text)
+        } else {
+          setTitle(undefined)
+        }
+      }
+    }
+
+    const handleResize = () => {
+      clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        checkOverflow()
+      }, 200)
+    }
+
+    checkOverflow()
+
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+      clearTimeout(resizeTimeout)
+    }
+  }, [])
+
+  return { containerRef, title }
+}
--- a/libs/generic-view/utils/src/lib/models/api-fc.types.ts
+++ b/libs/generic-view/utils/src/lib/models/api-fc.types.ts
@@ -17,9 +17,15 @@ type DefaultProps = Partial<
  componentRef?: Ref<any>
 }

-type ComponentConfigProp<T> = T extends undefined
-  ? { config?: T }
-  : { config: T }
+type HasRequired<T> = {
+  [K in keyof T]-?: NonNullable<unknown> extends Pick<T, K> ? never : K
+}[keyof T] extends never
+  ? false
+  : true
+
+type ComponentConfigProp<T> = HasRequired<T> extends true
+  ? { config: T }
+  : { config?: T }

 export type BaseGenericComponent<
  Data = undefined,
--- a/libs/help/ui/src/lib/components/article-content.tsx
+++ b/libs/help/ui/src/lib/components/article-content.tsx
@@ -16,7 +16,7 @@ import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { ModalStateKey, showModal } from "Core/modals-manager"
 import { useDispatch, useSelector } from "react-redux"
 import { ButtonTextConfig } from "generic-view/models"
-import { ButtonText, P3 } from "generic-view/ui"
+import { ButtonText, Typography } from "generic-view/ui"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { selectCurrentArticle } from "help/store"
 import { useParams } from "react-router"
@@ -205,6 +205,6 @@ const Heading = styled.h2`
  margin: 0 0 1.4rem;
 `

-const Paragraph = styled(P3)`
+const Paragraph = styled(Typography.P3)`
  color: ${({ theme }) => theme.color.black};
 `
--- a/libs/help/ui/src/lib/components/article-feedback.tsx
+++ b/libs/help/ui/src/lib/components/article-feedback.tsx
@@ -6,7 +6,7 @@
 import React from "react"
 import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
-import { H5, Icon, P1, P3 } from "generic-view/ui"
+import { Icon, Typography } from "generic-view/ui"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { useDispatch, useSelector } from "react-redux"
@@ -48,9 +48,9 @@ export const ArticleFeedback: FunctionComponent = () => {

  return (
    <Wrapper data-testid={HelpTestId.ArticleFeedback}>
-      <H5 data-testid={HelpTestId.ArticleFeedbackTitle}>
+      <Typography.H5 data-testid={HelpTestId.ArticleFeedbackTitle}>
        {intl.formatMessage(messages.title)}
-      </H5>
+      </Typography.H5>
      <Content>
        {isRated ? (
          <>
@@ -65,13 +65,17 @@ export const ArticleFeedback: FunctionComponent = () => {
              onClick={givePositiveFeedback}
              data-testid={HelpTestId.ArticleFeedbackYesButton}
            >
-              <P1>{intl.formatMessage(messages.yesButtonLabel)}</P1>
+              <Typography.P1>
+                {intl.formatMessage(messages.yesButtonLabel)}
+              </Typography.P1>
            </FeedbackButton>
            <FeedbackButton
              onClick={giveNegativeFeedback}
              data-testid={HelpTestId.ArticleFeedbackNoButton}
            >
-              <P1>{intl.formatMessage(messages.noButtonLabel)}</P1>
+              <Typography.P1>
+                {intl.formatMessage(messages.noButtonLabel)}
+              </Typography.P1>
            </FeedbackButton>
          </>
        )}
@@ -131,6 +135,6 @@ const FeedbackButton = styled.button`
  }
 `

-const Thanks = styled(P3)`
+const Thanks = styled(Typography.P3)`
  color: ${({ theme }) => theme.color.grey1};
 `
--- a/libs/help/ui/src/lib/components/article-header.tsx
+++ b/libs/help/ui/src/lib/components/article-header.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
 import { IconType } from "generic-view/utils"
 import { useHistory } from "react-router"
-import { ButtonText, H3 } from "generic-view/ui"
+import { ButtonText, Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"

 interface Props {
@@ -34,7 +34,9 @@ export const ArticleHeader: FunctionComponent<Props> = ({ title }) => {
          modifiers: ["uppercase"],
        }}
      />
-      <H3 data-testid={HelpTestId.ArticleTitle}>{title}</H3>
+      <Typography.H3 data-testid={HelpTestId.ArticleTitle}>
+        {title}
+      </Typography.H3>
    </Wrapper>
  )
 }
--- a/libs/help/ui/src/lib/components/article-warning.tsx
+++ b/libs/help/ui/src/lib/components/article-warning.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { defineMessages } from "react-intl"
-import { H4, P1 } from "generic-view/ui"
+import { Typography } from "generic-view/ui"
 import { useParams } from "react-router"
 import { useSelector } from "react-redux"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
@@ -55,10 +55,10 @@ export const ArticleWarning: FunctionComponent = () => {
        />
      </svg>
      <Content>
-        <H4>{intl.formatMessage(messages.warning)}</H4>
-        <P1 data-testid={HelpTestId.ArticleWarning}>
+        <Typography.H4>{intl.formatMessage(messages.warning)}</Typography.H4>
+        <Typography.P1 data-testid={HelpTestId.ArticleWarning}>
          {article.warningMessage}
-        </P1>
+        </Typography.P1>
      </Content>
    </Wrapper>
  )
--- a/libs/help/ui/src/lib/components/help-footer.tsx
+++ b/libs/help/ui/src/lib/components/help-footer.tsx
@@ -11,7 +11,7 @@ import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { ModalStateKey, showModal } from "Core/modals-manager"
 import { defineMessages } from "react-intl"
 import { IconType } from "generic-view/utils"
-import { ButtonText, H5 } from "generic-view/ui"
+import { ButtonText, Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"

 const messages = defineMessages({
@@ -33,9 +33,9 @@ export const HelpFooter: FunctionComponent = () => {
  }
  return (
    <Wrapper data-testid={HelpTestId.MainFooter}>
-      <H5 data-testid={HelpTestId.MainFooterTitle}>
+      <Typography.H5 data-testid={HelpTestId.MainFooterTitle}>
        {intl.formatMessage(messages.title)}
-      </H5>
+      </Typography.H5>
      <Text data-testid={HelpTestId.MainFooterDescription}>
        {intl.formatMessage(messages.description)}
      </Text>
--- a/libs/help/ui/src/lib/components/search-results.tsx
+++ b/libs/help/ui/src/lib/components/search-results.tsx
@@ -14,7 +14,7 @@ import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { NavLink } from "react-router-dom"
 import { useFormContext } from "react-hook-form"
 import { IconType } from "generic-view/utils"
-import { HighlightText, Icon, P3 } from "generic-view/ui"
+import { HighlightText, Icon, Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"
 import { cleanSearchPhrase } from "help/feature"

@@ -62,6 +62,7 @@ const SearchResultsFC: FunctionComponent<
                    data-testid={HelpTestId.SearchResultsItem}
                  >
                    <CategoryName>{category.name}/</CategoryName>
+                    {/*@ts-ignore*/}
                    <ArticleTitle>
                      <HighlightText
                        config={{
@@ -82,7 +83,9 @@ const SearchResultsFC: FunctionComponent<
      ) : (
        <EmptyResults>
          <Icon config={{ type: IconType.Search }} />
-          <P3>{intl.formatMessage(messages.noResults)}</P3>
+          <Typography.P3>
+            {intl.formatMessage(messages.noResults)}
+          </Typography.P3>
        </EmptyResults>
      )}
    </SearchResultsWrapper>
@@ -139,12 +142,12 @@ const ListItemLink = styled(NavLink)`
  }
 `

-const CategoryName = styled(P3)`
+const CategoryName = styled(Typography.P3)`
  color: ${({ theme }) => theme.color.grey2};
  white-space: nowrap;
 `

-const ArticleTitle = styled(P3)`
+const ArticleTitle = styled(Typography.P3)`
  color: ${({ theme }) => theme.color.black};
  overflow: hidden;
  text-overflow: ellipsis;
@@ -168,6 +171,7 @@ const EmptyResults = styled.div`
    height: 4.8rem;
    margin: 1rem;
  }
+
  svg * {
    fill: ${({ theme }) => theme.color.black};
  }
--- a/libs/help/ui/src/lib/components/search.tsx
+++ b/libs/help/ui/src/lib/components/search.tsx
@@ -16,7 +16,7 @@ import styled, { css } from "styled-components"
 import { useFormContext } from "react-hook-form"
 import { useHelpSearch } from "help/feature"
 import { SearchResults, SearchResultsWrapper } from "./search-results"
-import { H3, P3, SearchInput } from "generic-view/ui"
+import { SearchInput, Typography } from "generic-view/ui"
 import { useHistory } from "react-router"
 import { URL_MAIN } from "Core/__deprecated__/renderer/constants/urls"
 import { HelpTestId } from "../test-ids"
@@ -106,12 +106,12 @@ export const Search: FunctionComponent = () => {

  return (
    <Wrapper>
-      <H3 data-testid={HelpTestId.MainHeader}>
+      <Typography.H3 data-testid={HelpTestId.MainHeader}>
        {intl.formatMessage(messages.title)}
-      </H3>
-      <P3 data-testid={HelpTestId.MainSubheader}>
+      </Typography.H3>
+      <Typography.P3 data-testid={HelpTestId.MainSubheader}>
        {intl.formatMessage(messages.description)}
-      </P3>
+      </Typography.P3>
      <InputWrapper
        onKeyDown={handleKeyDown}
        dropdownActive={deferredSearchPhrase.length > 1}
--- a/libs/help/ui/src/lib/components/subcategory.tsx
+++ b/libs/help/ui/src/lib/components/subcategory.tsx
@@ -10,7 +10,7 @@ import { ArticlesList } from "./articles-list"
 import { useSelector } from "react-redux"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { selectCurrentSubcategory, selectHelpAssets } from "help/store"
-import { H5 } from "generic-view/ui"
+import { Typography } from "generic-view/ui"
 import { HelpTestId } from "../test-ids"

 interface Props {
@@ -53,6 +53,8 @@ const Wrapper = styled.div`
  gap: 1.4rem;
 `

+const H5 = styled(Typography.H5)``
+
 const Title = styled(H5)`
  display: flex;
  flex-direction: row;
--- a/libs/msc-flash/msc-flash-harmony/src/lib/ui/recovery-mode.tsx
+++ b/libs/msc-flash/msc-flash-harmony/src/lib/ui/recovery-mode.tsx
@@ -9,8 +9,7 @@ import styled, { ThemeProvider } from "styled-components"
 import { defineMessages } from "react-intl"
 import { intl, textFormatters } from "Core/__deprecated__/renderer/utils/intl"
 import { GenericThemeProvider } from "generic-view/theme"
-import { H3 } from "../../../../../generic-view/ui/src/lib/texts/headers"
-import { P3 } from "../../../../../generic-view/ui/src/lib/texts/paragraphs"
+import { Typography } from "../../../../../generic-view/ui/src/lib/typography"
 import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
 import Icon, {
  IconSize,
@@ -147,30 +146,40 @@ const RecoveryModeUI: FunctionComponent = () => {
      <Wrapper>
        <Header>
          <Icon type={IconType.RecoveryModeBlack} size={IconSize.ExtraLarge} />
-          <H3>{intl.formatMessage(messages.header)}</H3>
-          <P3>{intl.formatMessage(messages.description)}</P3>
+          <Typography.H3>{intl.formatMessage(messages.header)}</Typography.H3>
+          <Typography.P3>
+            {intl.formatMessage(messages.description)}
+          </Typography.P3>
        </Header>
        <WarrningBox>
          <Warning>
            <ul>
              <li>
-                <P3>{intl.formatMessage(messages.warning1, textFormatters)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning1, textFormatters)}
+                </Typography.P3>
              </li>
              {process.platform === "linux" && (
                <li>
-                  <P3>
+                  <Typography.P3>
                    {intl.formatMessage(messages.warningLinux, textFormatters)}
-                  </P3>
+                  </Typography.P3>
                </li>
              )}
              <li>
-                <P3>{intl.formatMessage(messages.warning2)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning2)}
+                </Typography.P3>
              </li>
              <li>
-                <P3>{intl.formatMessage(messages.warning3)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning3)}
+                </Typography.P3>
              </li>
              <li>
-                <P3>{intl.formatMessage(messages.warning4)}</P3>
+                <Typography.P3>
+                  {intl.formatMessage(messages.warning4)}
+                </Typography.P3>
              </li>
            </ul>
            <Form>