From fc93e1a35449d39b64464cc3b1feb6286bf61881 Mon Sep 17 00:00:00 2001
From: Andrey_Bogoroditskiy <Andrey_Bogoroditskiy@epam.com>
Date: Tue, 12 Mar 2024 11:04:13 +0300
Subject: [PATCH] - added title - added body - added section base

---
 .eslintrc                                     |   1 -
 package.json                                  |  12 +-
 src/components/action-link/action-link.scss   |   9 +-
 .../error-boundary/error-boundary.tsx         |   6 +-
 src/components/footer/footer.scss             |   5 +-
 src/components/footer/footer.tsx              |   7 +-
 src/components/image-banner/image-banner.scss |  16 +--
 src/components/image-banner/image-banner.tsx  |   6 +-
 .../information-card/information-card.scss    |  21 +--
 .../information-card/information-card.tsx     |   8 +-
 src/components/news-card/news-card.scss       |  31 +----
 src/components/news-card/news-card.tsx        |   8 +-
 src/components/section-base/section-base.scss |  23 ++++
 src/components/section-base/section-base.tsx  |  30 +++++
 src/components/text/text.scss                 | 124 +----------------
 src/components/text/text.tsx                  |  61 ---------
 src/components/text/typography.tsx            |  16 +++
 src/components/title/title.scss               |  12 ++
 src/components/title/title.tsx                |  26 ++++
 src/components/wave-banner/wave-banner.scss   |   9 +-
 src/components/wave-banner/wave-banner.tsx    |   6 +-
 .../embedded-section/embedded-section.scss    |  17 ---
 .../embedded-section/embedded-section.tsx     |   9 +-
 .../hero-article/hero-article.scss            |  15 +--
 .../hero-article/hero-article.tsx             |   6 +-
 src/features/hero-section/hero-section.scss   |  32 +----
 .../information-section.scss                  |  19 +--
 .../information-section.tsx                   |  16 ++-
 src/features/news-section/news-section.scss   |  20 +--
 src/features/news-section/news-section.tsx    |   9 +-
 .../project-card/project-card.scss            |   4 +-
 .../project-card/project-card.tsx             |  10 +-
 .../projects-section/projects-section.scss    |  11 +-
 .../projects-section/projects-section.tsx     |   9 +-
 src/pages/not-found/not-found.scss            |  18 +--
 src/pages/not-found/not-found.tsx             |   8 +-
 src/styles/mixins/_index.scss                 |   1 +
 .../mixins/partial-underline.mixin.scss       |   2 +-
 src/styles/mixins/typography.mixin.scss       |  47 +++++++
 yarn.lock                                     | 126 +++++++++---------
 40 files changed, 343 insertions(+), 473 deletions(-)
 create mode 100644 src/components/section-base/section-base.scss
 create mode 100644 src/components/section-base/section-base.tsx
 delete mode 100644 src/components/text/text.tsx
 create mode 100644 src/components/text/typography.tsx
 create mode 100644 src/components/title/title.scss
 create mode 100644 src/components/title/title.tsx
 rename src/{components => features}/embedded-section/embedded-section.scss (57%)
 rename src/{components => features}/embedded-section/embedded-section.tsx (57%)
 create mode 100644 src/styles/mixins/typography.mixin.scss

diff --git a/.eslintrc b/.eslintrc
index 1a2350d..d2f34a7 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -203,7 +203,6 @@
     "no-void": "off",
     "no-continue": "off",
     "no-unused-vars": "off",
-    "no-case-declarations": "off",
     "no-restricted-imports": [
       "error",
       {
diff --git a/package.json b/package.json
index 2b941cb..61b25db 100644
--- a/package.json
+++ b/package.json
@@ -30,11 +30,11 @@
     "@graphql-codegen/client-preset": "^4.2.4",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@types/graphql": "^14.5.0",
-    "@types/node": "^20.11.25",
-    "@types/react": "^18.2.64",
+    "@types/node": "^20.11.26",
+    "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
     "dotenv-cli": "^7.4.1",
     "eslint": "^8.57.0",
@@ -51,8 +51,8 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "typescript": "^5.4.0",
+    "vite": "^5.1.6",
     "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/src/components/action-link/action-link.scss b/src/components/action-link/action-link.scss
index b94037d..4605aec 100644
--- a/src/components/action-link/action-link.scss
+++ b/src/components/action-link/action-link.scss
@@ -1,14 +1,13 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .action-link {
   --_action-color: var(--action-color, var(--primary));
+  @include mixins.h5;
+  font-weight: 700;
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-family: Lato, sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.5;
   color: var(--_action-color);
   text-decoration: none;
   width: fit-content;
@@ -42,6 +41,6 @@
   }
 
   @include responsive-mixins.lg {
-    font-size: 1.25rem;
+    @include mixins.h4;
   }
 }
diff --git a/src/components/error-boundary/error-boundary.tsx b/src/components/error-boundary/error-boundary.tsx
index 744cc55..c1d287c 100644
--- a/src/components/error-boundary/error-boundary.tsx
+++ b/src/components/error-boundary/error-boundary.tsx
@@ -1,4 +1,6 @@
 import { Component, ErrorInfo, ReactNode } from "react";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.tsx";
 
 interface Props {
   children?: ReactNode;
@@ -33,8 +35,8 @@ export class ErrorBoundary extends Component<Props, State> {
       return (
         // TODO: Ask designer about component
         <section>
-          <h1>Oops, something went wrong</h1>
-          <p>There are some issues while loading the page</p>
+          <Title as="h1">Oops, something went wrong</Title>
+          <Typography>There are some issues while loading the page</Typography>
         </section>
       );
     }
diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
index 146a652..20f7c51 100644
--- a/src/components/footer/footer.scss
+++ b/src/components/footer/footer.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .footer {
   display: flex;
@@ -26,9 +27,8 @@
   }
 
   .social-title {
-    font-size: 1.25rem;
+    @include mixins.h4;
     font-weight: 600;
-    line-height: 1.5;
   }
 
   .social-links {
@@ -52,7 +52,6 @@
     font-family: "Open Sans", sans-serif;
     font-size: 0.75rem;
     font-weight: 600;
-    line-height: 1.5;
     gap: 12px;
   }
 
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index 2c7dd11..2c7f826 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,4 +1,5 @@
 import { Link } from "react-router-dom";
+import { Title } from "@/components/title/title.tsx";
 import {
   ComponentSharedSocialIcon,
   PageEntity,
@@ -19,7 +20,11 @@ export const Footer = ({ socialLinks, heading, navigation }: FooterProps) => {
     <footer className="footer">
       {socialLinks && (
         <div className="social-info">
-          {heading && <h3 className="social-title">{heading}</h3>}
+          {heading && (
+            <Title as="h3" className="social-title">
+              {heading}
+            </Title>
+          )}
           <div className="social-links">
             {socialLinks.map(({ title, newTab, url, icon }) => {
               const iconData = icon?.data?.attributes;
diff --git a/src/components/image-banner/image-banner.scss b/src/components/image-banner/image-banner.scss
index ce8b916..3ec14b0 100644
--- a/src/components/image-banner/image-banner.scss
+++ b/src/components/image-banner/image-banner.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .image-banner {
   position: relative;
@@ -33,17 +34,10 @@
   }
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h4;
   }
 
   &-body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
     margin-top: 8px;
   }
 
@@ -75,11 +69,7 @@
     }
 
     &-title {
-      font-size: 1.5rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h3;
     }
   }
 }
diff --git a/src/components/image-banner/image-banner.tsx b/src/components/image-banner/image-banner.tsx
index fc62fda..fe25e6a 100644
--- a/src/components/image-banner/image-banner.tsx
+++ b/src/components/image-banner/image-banner.tsx
@@ -1,4 +1,6 @@
 import { ActionLink } from "@/components/action-link/action-link.tsx";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.tsx";
 import "./image-banner.scss";
 
 export interface ImageBannerProps {
@@ -26,8 +28,8 @@ export const ImageBanner = ({
       </div>
       <div className="image-banner-content">
         <div className="image-banner-card">
-          <h2 className="image-banner-title">{title}</h2>
-          <p className="image-banner-body">{body}</p>
+          <Title className="image-banner-title">{title}</Title>
+          <Typography className="image-banner-body">{body}</Typography>
           <ActionLink href="/" className="image-banner-action">
             {action}
           </ActionLink>
diff --git a/src/components/information-card/information-card.scss b/src/components/information-card/information-card.scss
index 004bba9..f9bafdb 100644
--- a/src/components/information-card/information-card.scss
+++ b/src/components/information-card/information-card.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .information-card {
   padding: 24px;
@@ -18,17 +19,7 @@
   }
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  &-body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 300;
-    line-height: 1.2;
+    @include mixins.h4;
   }
 
   &-image-wrapper {
@@ -46,7 +37,7 @@
 
     &-title {
       text-align: center;
-      font-size: 1rem;
+      @include mixins.h5;
     }
 
     &-image-wrapper {
@@ -72,11 +63,7 @@
     }
 
     &-title {
-      font-size: 1.5rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h3;
     }
 
     &-image-wrapper {
diff --git a/src/components/information-card/information-card.tsx b/src/components/information-card/information-card.tsx
index a6d8104..9b9a055 100644
--- a/src/components/information-card/information-card.tsx
+++ b/src/components/information-card/information-card.tsx
@@ -1,4 +1,6 @@
 import { Button } from "@/components/button/button.tsx";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.tsx";
 import "./information-card.scss";
 
 export interface DescriptionCardProps {
@@ -19,8 +21,10 @@ export const InformationCard = ({
       <img className="" src={image} role="presentation" alt="" />
     </div>
     <div className="information-card-info">
-      <span className="information-card-title">{title}</span>
-      <p className="information-card-body">{body}</p>
+      <Title as="h4" className="information-card-title">
+        {title}
+      </Title>
+      <Typography className="information-card-body">{body}</Typography>
     </div>
     {action && (
       <Button className="information-card-action" variant="outline">
diff --git a/src/components/news-card/news-card.scss b/src/components/news-card/news-card.scss
index 48379d4..6971f8b 100644
--- a/src/components/news-card/news-card.scss
+++ b/src/components/news-card/news-card.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .news-card {
   --_text-color: var(--text-color, var(--black));
@@ -44,26 +45,17 @@
 
   &-title {
     flex-shrink: 0;
-    font-family: Lato, sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h5;
   }
 
   &-body {
     flex-grow: 1;
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
   }
 
   &-action {
-    flex-shrink: 0;
-    font-family: Lato, sans-serif;
-    font-size: 1rem;
+    @include mixins.h5;
     font-weight: 600;
-    line-height: 1.5;
+    flex-shrink: 0;
     margin-top: 16px;
     text-decoration: none;
     color: var(--_action-color);
@@ -87,14 +79,6 @@
       padding: 16px 24px 24px;
     }
 
-    &-title {
-      font-weight: 600;
-    }
-
-    &-body {
-      font-size: 0.75rem;
-    }
-
     &-action {
       font-size: 0.875rem;
     }
@@ -110,12 +94,7 @@
     }
 
     &-title {
-      font-weight: 500;
-      font-size: 1.25rem;
-    }
-
-    &-body {
-      font-size: 1rem;
+      @include mixins.h4;
     }
 
     &-action {
diff --git a/src/components/news-card/news-card.tsx b/src/components/news-card/news-card.tsx
index 81ec3b5..abe0756 100644
--- a/src/components/news-card/news-card.tsx
+++ b/src/components/news-card/news-card.tsx
@@ -1,4 +1,6 @@
 import { ElementType, HTMLAttributes } from "react";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.tsx";
 import "./news-card.scss";
 
 export type NewsCardTheme = "primary" | "secondary";
@@ -25,8 +27,10 @@ export const NewsCard = ({
       <img className="news-card-image" role="presentation" alt="" src={cover} />
     </div>
     <div className="news-card-content">
-      <span className="news-card-title">{title}</span>
-      <p className="news-card-body">{body}</p>
+      <Title as="h4" className="news-card-title">
+        {title}
+      </Title>
+      <Typography className="news-card-body">{body}</Typography>
       <a href="/" className="news-card-action">
         {action}
       </a>
diff --git a/src/components/section-base/section-base.scss b/src/components/section-base/section-base.scss
new file mode 100644
index 0000000..7ba166b
--- /dev/null
+++ b/src/components/section-base/section-base.scss
@@ -0,0 +1,23 @@
+@use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
+
+.section-base {
+  padding: 56px 16px;
+
+  &-title {
+    @include mixins.partial-underline;
+    @include mixins.h4;
+  }
+
+  @include responsive-mixins.md {
+    padding: 56px 24px;
+  }
+
+  @include responsive-mixins.lg {
+    padding: 64px 0;
+
+    &-title {
+      @include mixins.h2;
+    }
+  }
+}
diff --git a/src/components/section-base/section-base.tsx b/src/components/section-base/section-base.tsx
new file mode 100644
index 0000000..3f8b374
--- /dev/null
+++ b/src/components/section-base/section-base.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import cc from "classcat";
+import { Title, TitleProps } from "@/components/title/title.tsx";
+import "./section-base.scss";
+
+export interface SectionBaseProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const SectionBaseComponent = ({ children, className }: SectionBaseProps) => (
+  <section className={cc(["section-base", className])}>{children}</section>
+);
+
+SectionBaseComponent.Title = function ({
+  className,
+  children,
+  ...delegatedProps
+}: TitleProps) {
+  return (
+    <Title
+      {...delegatedProps}
+      className={cc(["section-base-title", className])}
+    >
+      {children}
+    </Title>
+  );
+};
+
+export const SectionBase = SectionBaseComponent;
diff --git a/src/components/text/text.scss b/src/components/text/text.scss
index ff5cef6..14b1f2f 100644
--- a/src/components/text/text.scss
+++ b/src/components/text/text.scss
@@ -1,122 +1,10 @@
-.text {
-  font-family: Lato, sans-serif;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: left;
-}
-
-.white {
-  color: #ffffff;
-}
-
-.black {
-  color: #002F3F;
-}
-
-.primary {
-  color: #0E7C73;
-}
-
-.secondary {
-  color: #97CAEF;
-}
-
-.tertiary {
-  color: #973CEF;
-}
-
-.link {
-  font-family: Lato, sans-serif;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: left;
-}
+@use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
-.title {
-  font-family: Lato, sans-serif;
-  font-weight: 500;
-  &:hover {
-    span {
-      &:before {
-        width: 100%;
-        transition: all ease-out 0.3s;
-      }
-    }
-  }
-  span {
-    display: inline;
-    position: relative;
-    &:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: -2px;
-      height: 2px;
-      width: 33%;
-      background-color: #0E7C73;
-    }
-  }
-
-  &.h1 {
-    font-size: 40px;
-    line-height: 48px;
-    letter-spacing: 0;
-    text-align: left;
-  }
-
-  &.h2 {
-    font-size: 32px;
-    line-height: 48px;
-    letter-spacing: 0;
-    text-align: left;
-  }
-
-  &.h3 {
-    font-size: 24px;
-    line-height: 36px;
-    letter-spacing: 0;
-    text-align: left;
-  }
+.text {
+  @include mixins.paragraph-small;
 
-  &.h4 {
-    font-size: 20px;
-    line-height: 30px;
-    letter-spacing: 0;
-    text-align: left;
-    span {
-      &:before {
-        display: none;
-      }
-    }
+  @include responsive-mixins.lg {
+    @include mixins.paragraph;
   }
 }
-
-.paragraph {
-  font-family: Open Sans, sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: left;
-}
-
-.small {
-  font-family: Open Sans, sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0;
-}
-
-.default {
-  font-family: Lato, sans-serif;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: left;
-}
\ No newline at end of file
diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx
deleted file mode 100644
index 74d5a04..0000000
--- a/src/components/text/text.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ReactNode } from "react";
-import cc from "classcat";
-import "./text.scss";
-
-export type TextVariant = "link" | "title" | "paragraph" | "small" | "default";
-export type TextColor =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "black"
-  | "white";
-
-export interface IProps {
-  variant?: TextVariant;
-  className?: string;
-  children: string | ReactNode;
-  link?: string;
-  headingLevel?: keyof JSX.IntrinsicElements;
-  color?: TextColor;
-}
-
-export const Text = ({
-  variant = "default",
-  className,
-  children,
-  link,
-  headingLevel = "h2",
-  color = "black",
-}: IProps) => {
-  const commonProps = {
-    className: cc(["text", variant, headingLevel, className, color]),
-    children,
-  };
-
-  switch (variant) {
-    case "link":
-      return link ? (
-        // eslint-disable-next-line jsx-a11y/anchor-has-content
-        <a href={link} {...commonProps} />
-      ) : (
-        <span {...commonProps} />
-      );
-    case "title":
-      const HeadingComponent: React.ElementType = headingLevel;
-      return (
-        <HeadingComponent
-          className={cc(["text", variant, headingLevel, color, className])}
-        >
-          <span>{children}</span>
-        </HeadingComponent>
-      );
-    case "paragraph":
-      return <p {...commonProps} />;
-    case "small":
-      return <p {...commonProps} />;
-    case "default":
-      return <div {...commonProps} />;
-    default:
-      return <div {...commonProps} />;
-  }
-};
diff --git a/src/components/text/typography.tsx b/src/components/text/typography.tsx
new file mode 100644
index 0000000..d130a81
--- /dev/null
+++ b/src/components/text/typography.tsx
@@ -0,0 +1,16 @@
+import { ElementType, HTMLAttributes } from "react";
+import cc from "classcat";
+import "./text.scss";
+
+export interface TypographyProps extends HTMLAttributes<HTMLParagraphElement> {
+  children: string;
+  as?: ElementType<HTMLAttributes<HTMLElement>, "p" | "span">;
+}
+
+export const Typography = ({
+  className,
+  as: Tag = "p",
+  ...delegatedProps
+}: TypographyProps) => (
+  <Tag {...delegatedProps} className={cc(["text", className])} />
+);
diff --git a/src/components/title/title.scss b/src/components/title/title.scss
new file mode 100644
index 0000000..5b80783
--- /dev/null
+++ b/src/components/title/title.scss
@@ -0,0 +1,12 @@
+@use "@/styles/mixins";
+
+.title {
+
+  &[data-theme="white"] {
+    color: var(--white);
+  }
+
+  &[data-theme="black"] {
+    color: var(--black);
+  }
+}
diff --git a/src/components/title/title.tsx b/src/components/title/title.tsx
new file mode 100644
index 0000000..2563e10
--- /dev/null
+++ b/src/components/title/title.tsx
@@ -0,0 +1,26 @@
+import { ElementType, HTMLAttributes, ReactNode } from "react";
+import cc from "classcat";
+import "./title.scss";
+
+export type TitleTheme = "inherit" | "black" | "white";
+
+export interface TitleProps {
+  theme?: TitleTheme;
+  className?: string;
+  children: ReactNode;
+  as?: ElementType<
+    HTMLAttributes<HTMLHeadingElement>,
+    "h1" | "h2" | "h3" | "h4" | "h5"
+  >;
+}
+
+export const Title = ({
+  className,
+  children,
+  theme = "inherit",
+  as: Tag = "h2",
+}: TitleProps) => (
+  <Tag className={cc(["title", className])} data-theme={theme}>
+    {children}
+  </Tag>
+);
diff --git a/src/components/wave-banner/wave-banner.scss b/src/components/wave-banner/wave-banner.scss
index 1f57962..e4696f9 100644
--- a/src/components/wave-banner/wave-banner.scss
+++ b/src/components/wave-banner/wave-banner.scss
@@ -38,17 +38,10 @@
   }
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h4;
   }
 
   &-body {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
     margin-top: 12px;
   }
 
diff --git a/src/components/wave-banner/wave-banner.tsx b/src/components/wave-banner/wave-banner.tsx
index e1d658b..a81ba3c 100644
--- a/src/components/wave-banner/wave-banner.tsx
+++ b/src/components/wave-banner/wave-banner.tsx
@@ -1,4 +1,6 @@
 import { Button, ButtonTheme } from "@/components/button/button.tsx";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.tsx";
 import { WavyImage } from "@/components/wavy-image/wavy-image.tsx";
 import "./wave-banner.scss";
 
@@ -21,8 +23,8 @@ export const WaveBanner = ({
     <div className="wave-banner-content">
       <WavyImage className="wave-banner-image" source={imageSource} />
       <div className="wave-banner-info">
-        <h2 className="wave-banner-title">{title}</h2>
-        <p className="wave-banner-body">{body}</p>
+        <Title className="wave-banner-title">{title}</Title>
+        <Typography className="wave-banner-body">{body}</Typography>
         {action && (
           <Button
             variant="outline"
diff --git a/src/components/embedded-section/embedded-section.scss b/src/features/embedded-section/embedded-section.scss
similarity index 57%
rename from src/components/embedded-section/embedded-section.scss
rename to src/features/embedded-section/embedded-section.scss
index d8592a5..cd7d87e 100644
--- a/src/components/embedded-section/embedded-section.scss
+++ b/src/features/embedded-section/embedded-section.scss
@@ -4,18 +4,11 @@
 .embedded-section {
   display: flex;
   flex-direction: column;
-  padding: 16px;
   margin: 0 auto;
   background-color: var(--white);
   gap: 16px;
 
   &-title {
-    @include mixins.partial-underline;
-    margin: auto;
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
     color: var(--black);
   }
 
@@ -26,20 +19,10 @@
   @include responsive-mixins.md {
     padding: 24px 24px 0;
     gap: 24px;
-
-    &-title {
-      font-size: 1.25rem;
-      line-height: 1.2;
-    }
   }
 
   @include responsive-mixins.lg {
     padding: 0 198px;
     gap: 48px;
-
-    &-title {
-      font-size: 2rem;
-      line-height: 1.5;
-    }
   }
 }
diff --git a/src/components/embedded-section/embedded-section.tsx b/src/features/embedded-section/embedded-section.tsx
similarity index 57%
rename from src/components/embedded-section/embedded-section.tsx
rename to src/features/embedded-section/embedded-section.tsx
index 282a397..0b1f460 100644
--- a/src/components/embedded-section/embedded-section.tsx
+++ b/src/features/embedded-section/embedded-section.tsx
@@ -1,4 +1,5 @@
 import { PropsWithChildren } from "react";
+import { SectionBase } from "@/components/section-base/section-base.tsx";
 import "./embedded-section.scss";
 
 export interface EmbeddedSectionProps {
@@ -10,9 +11,11 @@ export const EmbeddedSection = ({
   children,
 }: PropsWithChildren<EmbeddedSectionProps>) => {
   return (
-    <section className="embedded-section">
-      <h2 className="embedded-section-title">{title}</h2>
+    <SectionBase className="embedded-section">
+      <SectionBase.Title className="embedded-section-title">
+        {title}
+      </SectionBase.Title>
       <div className="embedded-section-content">{children}</div>
-    </section>
+    </SectionBase>
   );
 };
diff --git a/src/features/hero-section/hero-article/hero-article.scss b/src/features/hero-section/hero-article/hero-article.scss
index de2c4e9..585e1b6 100644
--- a/src/features/hero-section/hero-article/hero-article.scss
+++ b/src/features/hero-section/hero-article/hero-article.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .hero-article {
   --article-color: var(--primary);
@@ -8,18 +9,11 @@
   color: var(--white);
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h4;
   }
 
   &-body {
     margin: 12px 0 24px;
-    font-family: Open Sans, sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
   }
 
   &-wave {
@@ -42,8 +36,7 @@
     border-radius: 0 0 20px 0;
 
     &-title {
-      font-size: 1.5rem;
-      line-height: 1.2;
+      @include mixins.h3;
     }
 
     &-body {
@@ -59,7 +52,7 @@
     width: 590px;
 
     &-title {
-      font-size: 2.5rem;
+      @include mixins.h1;
     }
 
     &-body {
diff --git a/src/features/hero-section/hero-article/hero-article.tsx b/src/features/hero-section/hero-article/hero-article.tsx
index 1215e5e..6ad99bd 100644
--- a/src/features/hero-section/hero-article/hero-article.tsx
+++ b/src/features/hero-section/hero-article/hero-article.tsx
@@ -1,4 +1,6 @@
 import { Button } from "@/components/button/button.tsx";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title";
 import Wave from "@/assets/icons/wave.svg?react";
 import "./hero-article.scss";
 
@@ -16,8 +18,8 @@ export const HeroArticle = ({
   variant = "primary",
 }: HeroArticleProps) => (
   <article className="hero-article" data-variant={variant}>
-    <h2 className="hero-article-title">{title}</h2>
-    <p className="hero-article-body">{body}</p>
+    <Title className="hero-article-title">{title}</Title>
+    <Typography className="hero-article-body">{body}</Typography>
     <Button variant="inverted">Donate today</Button>
     <Wave className="hero-article-wave" />
   </article>
diff --git a/src/features/hero-section/hero-section.scss b/src/features/hero-section/hero-section.scss
index f5ce3d6..2e1f0db 100644
--- a/src/features/hero-section/hero-section.scss
+++ b/src/features/hero-section/hero-section.scss
@@ -1,4 +1,5 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
 
 .hero-section {
   position: relative;
@@ -20,24 +21,6 @@
   @include responsive-mixins.md {
     padding: 32px 24px 0;
 
-    &-article {
-      padding: 48px 48px 24px;
-      border-radius: 0 0 20px 0;
-
-      &-title {
-        font-size: 1.5rem;
-        line-height: 1.2;
-      }
-
-      &-body {
-        margin: 24px 0;
-      }
-
-      &-wave {
-        display: none;
-      }
-    }
-
     &-banner {
       position: absolute;
       top: 0;
@@ -53,19 +36,6 @@
   @include responsive-mixins.lg {
     padding: 48px 48px 0;
 
-    &-article {
-      width: 590px;
-
-      &-title {
-        font-size: 2.5rem;
-      }
-
-      &-body {
-        margin: 24px 0 48px;
-        font-size: 1.25rem;
-      }
-    }
-
     &-banner {
       margin-bottom: 48px;
     }
diff --git a/src/features/information-section/information-section.scss b/src/features/information-section/information-section.scss
index fd3c4e8..d404053 100644
--- a/src/features/information-section/information-section.scss
+++ b/src/features/information-section/information-section.scss
@@ -1,25 +1,14 @@
 @use "@/styles/responsive-mixins";
 @use "@/styles/layout";
+@use "@/styles/mixins";
 
 .information-section {
   display: flex;
   flex-direction: column;
-  padding: 32px 16px;
   gap: 20px;
 
   &-title {
     margin-bottom: 12px;
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
-  }
-
-  &-description {
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5rem;
   }
 
   &-list {
@@ -37,7 +26,6 @@
   }
 
   @include responsive-mixins.md {
-    padding: 48px 24px 24px;
     gap: 24px;
 
     &-title {
@@ -64,15 +52,10 @@
   }
 
   @include responsive-mixins.lg {
-    padding: 64px 0 36px;
     gap: 36px;
     width: map-get(layout.$columns, "col-10");
     margin: auto;
 
-    &-title {
-      font-size: 2rem;
-    }
-
     &-description {
       margin-bottom: 16px;
       font-size: 1.25rem
diff --git a/src/features/information-section/information-section.tsx b/src/features/information-section/information-section.tsx
index 3e4f2cf..a5d1983 100644
--- a/src/features/information-section/information-section.tsx
+++ b/src/features/information-section/information-section.tsx
@@ -1,5 +1,7 @@
 import { Button } from "@/components/button/button.tsx";
 import { InformationCard } from "@/components/information-card/information-card.tsx";
+import { SectionBase } from "@/components/section-base/section-base.tsx";
+import { Typography } from "@/components/text/typography.tsx";
 import { WavyCard } from "@/components/wavy-card/wavy-card.tsx";
 import provideImage from "@/assets/images/provide.png";
 import "./information-section.scss";
@@ -18,10 +20,16 @@ export const InformationSection = ({
   action,
 }: InformationSectionProps) => {
   return (
-    <section className="information-section">
-      {title && <h2 className="information-section-title">{title}</h2>}
+    <SectionBase className="information-section">
+      {title && (
+        <SectionBase.Title className="information-section-title">
+          {title}
+        </SectionBase.Title>
+      )}
       {description && (
-        <p className="information-section-description">{description}</p>
+        <Typography className="information-section-description">
+          {description}
+        </Typography>
       )}
       <ul className="information-section-list">
         {cards.map((_, index) => (
@@ -46,6 +54,6 @@ export const InformationSection = ({
           Bridging the digital divide
         </Button>
       )}
-    </section>
+    </SectionBase>
   );
 };
diff --git a/src/features/news-section/news-section.scss b/src/features/news-section/news-section.scss
index 09740b7..f534c66 100644
--- a/src/features/news-section/news-section.scss
+++ b/src/features/news-section/news-section.scss
@@ -1,17 +1,13 @@
 @use "@/styles/responsive-mixins";
 @use "@/styles/layout";
+@use "@/styles/mixins";
 
 .news-section {
   display: flex;
   flex-direction: column;
   gap: 48px;
-  padding: 48px 16px;
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
     color: var(--black);
   }
 
@@ -26,17 +22,8 @@
   }
 
   @include responsive-mixins.md {
-    padding: 36px 24px;
     gap: 24px;
 
-    &-title {
-      font-family: Lato, sans-serif;
-      font-size: 1.25rem;
-      font-weight: 500;
-      line-height: 1.5;
-      color: var(--black);
-    }
-
     &-list {
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
@@ -49,15 +36,10 @@
   }
 
   @include responsive-mixins.lg {
-    padding: 120px 0 64px;
     gap: 24px;
     width: map-get(layout.$columns, "col-10");
     margin: 0 auto;
 
-    &-title {
-      font-size: 2rem;
-    }
-
     &-list {
       gap: 24px;
     }
diff --git a/src/features/news-section/news-section.tsx b/src/features/news-section/news-section.tsx
index cf08143..8741d31 100644
--- a/src/features/news-section/news-section.tsx
+++ b/src/features/news-section/news-section.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@/components/button/button.tsx";
 import { NewsCard } from "@/components/news-card/news-card.tsx";
+import { SectionBase } from "@/components/section-base/section-base.tsx";
 import cover from "@/assets/images/cover.png";
 import "./news-section.scss";
 
@@ -10,8 +11,10 @@ export interface NewsSectionProps {
 }
 
 export const NewsSection = ({ title, cards, action }: NewsSectionProps) => (
-  <section className="news-section">
-    <h2 className="news-section-title">{title}</h2>
+  <SectionBase className="news-section">
+    <SectionBase.Title className="news-section-title">
+      {title}
+    </SectionBase.Title>
     <ul className="news-section-list">
       {cards.map((_, index) => (
         <NewsCard
@@ -31,5 +34,5 @@ export const NewsSection = ({ title, cards, action }: NewsSectionProps) => (
         {action}
       </Button>
     )}
-  </section>
+  </SectionBase>
 );
diff --git a/src/features/projects-section/project-card/project-card.scss b/src/features/projects-section/project-card/project-card.scss
index 8d0f2a5..2dfad53 100644
--- a/src/features/projects-section/project-card/project-card.scss
+++ b/src/features/projects-section/project-card/project-card.scss
@@ -38,9 +38,7 @@
 
   &-title {
     flex-shrink: 0;
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
+    @include mixins.h4;
     line-height: 1.75;
   }
 
diff --git a/src/features/projects-section/project-card/project-card.tsx b/src/features/projects-section/project-card/project-card.tsx
index fd6d186..4d5a585 100644
--- a/src/features/projects-section/project-card/project-card.tsx
+++ b/src/features/projects-section/project-card/project-card.tsx
@@ -1,6 +1,8 @@
 import { ElementType, HTMLAttributes } from "react";
 import cc from "classcat";
 import { ActionLink } from "@/components/action-link/action-link.tsx";
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title";
 import projectCover from "@/assets/images/classroom.png";
 import "./project-card.scss";
 
@@ -22,12 +24,14 @@ export const ProjectCard = ({
   return (
     <Tag className={cc(["project-card", className])} data-theme={theme}>
       <div className="project-card-info">
-        <span className="project-card-title">{data?.title}</span>
-        <p className="project-card-body">
+        <Title as="h4" className="project-card-title">
+          {data?.title}
+        </Title>
+        <Typography className="project-card-body">
           We will show how to create and edit content, exchange information
           safely, and use computers for learning purposes. We will help parents
           master Office software and understand electronic government programs.
-        </p>
+        </Typography>
         <ActionLink
           className="project-card-action"
           href="/public"
diff --git a/src/features/projects-section/projects-section.scss b/src/features/projects-section/projects-section.scss
index 4f1ec23..dff4d0d 100644
--- a/src/features/projects-section/projects-section.scss
+++ b/src/features/projects-section/projects-section.scss
@@ -1,15 +1,9 @@
 @use "@/styles/responsive-mixins";
 @use "@/styles/layout";
+@use "@/styles/mixins";
 
 .projects-section {
-  padding: 32px 16px;
-  background-color: var(--white);
-
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.25rem;
-    font-weight: 500;
-    line-height: 1.5;
     color: var(--black);
     margin-bottom: 32px;
   }
@@ -21,8 +15,6 @@
   }
 
   @include responsive-mixins.md {
-    padding: 32px 24px;
-
     &-title {
       margin-bottom: 24px;
     }
@@ -45,7 +37,6 @@
     margin: auto;
 
     &-title {
-      font-size: 2rem;
       margin-bottom: 60px;
     }
 
diff --git a/src/features/projects-section/projects-section.tsx b/src/features/projects-section/projects-section.tsx
index 03b3f90..2116eff 100644
--- a/src/features/projects-section/projects-section.tsx
+++ b/src/features/projects-section/projects-section.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import cc from "classcat";
+import { SectionBase } from "@/components/section-base/section-base.tsx";
 import { ProjectCard } from "@/features/projects-section/project-card/project-card.tsx";
 import { getIndexesToStretch } from "@/features/projects-section/utils.ts";
 import "./projects-section.scss";
@@ -32,8 +33,10 @@ export const ProjectsSection = ({ projects }: ProjectsSectionProps) => {
   };
 
   return (
-    <section className="projects-section">
-      <h2 className="projects-section-title">Our projects</h2>
+    <SectionBase className="projects-section">
+      <SectionBase.Title className="projects-section-title">
+        Our projects
+      </SectionBase.Title>
       <div className="projects-section-content">
         {projects.map((item, index) => (
           <ProjectCard
@@ -48,6 +51,6 @@ export const ProjectsSection = ({ projects }: ProjectsSectionProps) => {
           />
         ))}
       </div>
-    </section>
+    </SectionBase>
   );
 };
diff --git a/src/pages/not-found/not-found.scss b/src/pages/not-found/not-found.scss
index 1c3e450..bc43f5f 100644
--- a/src/pages/not-found/not-found.scss
+++ b/src/pages/not-found/not-found.scss
@@ -1,22 +1,17 @@
 @use "@/styles/responsive-mixins";
+@use "@/styles/mixins";
+@use "@/styles/layout";
 
 .not-found {
   padding: 24px 16px;
   color: var(--black);
 
   &-title {
-    font-family: Lato, sans-serif;
-    font-size: 1.5rem;
-    font-weight: 500;
-    line-height: 1.5;
+    @include mixins.h3;
   }
 
   &-description {
     margin-top: 12px;
-    font-family: "Open Sans", sans-serif;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
   }
 
   @include responsive-mixins.md {
@@ -24,15 +19,16 @@
   }
 
   @include responsive-mixins.lg {
-    padding: 120px 142px;
+    width: map-get(layout.$columns, "col-10");
+    margin: auto;
+    padding: 120px 0;
 
     &-title {
-      font-size: 2rem;
+      @include mixins.h2;
     }
 
     &-description {
       margin-top: 24px;
-      font-size: 1rem;
       width: 60%;
     }
   }
diff --git a/src/pages/not-found/not-found.tsx b/src/pages/not-found/not-found.tsx
index 40ae243..8c74a78 100644
--- a/src/pages/not-found/not-found.tsx
+++ b/src/pages/not-found/not-found.tsx
@@ -1,3 +1,5 @@
+import { Typography } from "@/components/text/typography.tsx";
+import { Title } from "@/components/title/title.tsx";
 import "./not-found.scss";
 
 export interface NotFoundProps {
@@ -7,7 +9,9 @@ export interface NotFoundProps {
 
 export const NotFound = ({ title, description }: NotFoundProps) => (
   <section className="not-found">
-    <h1 className="not-found-title">{title}</h1>
-    <p className="not-found-description">{description}</p>
+    <Title as="h1" className="not-found-title">
+      {title}
+    </Title>
+    <Typography className="not-found-description">{description}</Typography>
   </section>
 );
diff --git a/src/styles/mixins/_index.scss b/src/styles/mixins/_index.scss
index b1a965e..48bfe2f 100644
--- a/src/styles/mixins/_index.scss
+++ b/src/styles/mixins/_index.scss
@@ -3,3 +3,4 @@
 @forward "@/styles/mixins/image-mask.mixin";
 @forward "@/styles/mixins/button.mixin";
 @forward "@/styles/mixins/wavy-background.mixin";
+@forward "@/styles/mixins/typography.mixin";
diff --git a/src/styles/mixins/partial-underline.mixin.scss b/src/styles/mixins/partial-underline.mixin.scss
index fc850e7..42dccd3 100644
--- a/src/styles/mixins/partial-underline.mixin.scss
+++ b/src/styles/mixins/partial-underline.mixin.scss
@@ -1,6 +1,6 @@
 @mixin partial-underline {
   position: relative;
-  display: inline;
+  width: fit-content;
 
   &:after {
     content: "";
diff --git a/src/styles/mixins/typography.mixin.scss b/src/styles/mixins/typography.mixin.scss
new file mode 100644
index 0000000..37f9e13
--- /dev/null
+++ b/src/styles/mixins/typography.mixin.scss
@@ -0,0 +1,47 @@
+@mixin _typography {
+  font-family: Lato, sans-serif;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+@mixin _paragraph {
+  font-family: "Open Sans", sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+@mixin h1 {
+  @include _typography;
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
+@mixin h2 {
+  @include _typography;
+  font-size: 2rem;
+}
+
+@mixin h3 {
+  @include _typography;
+  font-size: 1.5rem;
+}
+
+@mixin h4 {
+  @include _typography;
+  font-size: 1.25rem;
+}
+
+@mixin h5 {
+  @include _typography;
+  font-size: 1rem;
+}
+
+@mixin paragraph {
+  @include _paragraph;
+  font-size: 1rem;
+}
+
+@mixin paragraph-small {
+  @include _paragraph;
+  font-size: 0.875rem;
+}
diff --git a/yarn.lock b/yarn.lock
index 3cc8d14..13b7425 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1292,10 +1292,10 @@
   "resolved" "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   "version" "0.0.29"
 
-"@types/node@*", "@types/node@^18.0.0 || >=20.0.0", "@types/node@^20.11.25", "@types/node@>=13":
-  "integrity" "sha512-TBHyJxk2b7HceLVGFcpAUjsa5zIdsPWlR6XHfyGzd0SFu+/NFgQgMAl96MSDZgQDvJAvV6BKsFOrt6zIL09JDw=="
-  "resolved" "https://registry.npmjs.org/@types/node/-/node-20.11.25.tgz"
-  "version" "20.11.25"
+"@types/node@*", "@types/node@^18.0.0 || >=20.0.0", "@types/node@^20.11.26", "@types/node@>=13":
+  "integrity" "sha512-YwOMmyhNnAWijOBQweOJnQPl068Oqd4K3OFbTc6AHJwzweUwwWG3GIFY74OKks2PJUDkQPeddOQES9mLn1CTEQ=="
+  "resolved" "https://registry.npmjs.org/@types/node/-/node-20.11.26.tgz"
+  "version" "20.11.26"
   dependencies:
     "undici-types" "~5.26.4"
 
@@ -1311,10 +1311,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.64":
-  "integrity" "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg=="
-  "resolved" "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz"
-  "version" "18.2.64"
+"@types/react@*", "@types/react@^18.2.65":
+  "integrity" "sha512-98TsY0aW4jqx/3RqsUXwMDZSWR1Z4CUlJNue8ueS2/wcxZOsz4xmW1X8ieaWVRHcmmQM3R8xVA4XWB3dJnWwDQ=="
+  "resolved" "https://registry.npmjs.org/@types/react/-/react-18.2.65.tgz"
+  "version" "18.2.65"
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -1337,16 +1337,16 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^7.1.1":
-  "integrity" "sha512-zioDz623d0RHNhvx0eesUmGfIjzrk18nSBC8xewepKXbBvN/7c1qImV7Hg8TI1URTxKax7/zxfxj3Uph8Chcuw=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/eslint-plugin@^7.2.0":
+  "integrity" "sha512-mdekAHOqS9UjlmyF/LSs6AIEvfceV749GFxoBAjwAv0nkevfKHWQFDMcBZWUiIC5ft6ePWivXoS36aKQ0Cy3sw=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
     "@eslint-community/regexpp" "^4.5.1"
-    "@typescript-eslint/scope-manager" "7.1.1"
-    "@typescript-eslint/type-utils" "7.1.1"
-    "@typescript-eslint/utils" "7.1.1"
-    "@typescript-eslint/visitor-keys" "7.1.1"
+    "@typescript-eslint/scope-manager" "7.2.0"
+    "@typescript-eslint/type-utils" "7.2.0"
+    "@typescript-eslint/utils" "7.2.0"
+    "@typescript-eslint/visitor-keys" "7.2.0"
     "debug" "^4.3.4"
     "graphemer" "^1.4.0"
     "ignore" "^5.2.4"
@@ -1354,47 +1354,47 @@
     "semver" "^7.5.4"
     "ts-api-utils" "^1.0.1"
 
-"@typescript-eslint/parser@^7.0.0", "@typescript-eslint/parser@^7.1.1":
-  "integrity" "sha512-ZWUFyL0z04R1nAEgr9e79YtV5LbafdOtN7yapNbn1ansMyaegl2D4bL7vHoJ4HPSc4CaLwuCVas8CVuneKzplQ=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/parser@^7.0.0", "@typescript-eslint/parser@^7.2.0":
+  "integrity" "sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
-    "@typescript-eslint/scope-manager" "7.1.1"
-    "@typescript-eslint/types" "7.1.1"
-    "@typescript-eslint/typescript-estree" "7.1.1"
-    "@typescript-eslint/visitor-keys" "7.1.1"
+    "@typescript-eslint/scope-manager" "7.2.0"
+    "@typescript-eslint/types" "7.2.0"
+    "@typescript-eslint/typescript-estree" "7.2.0"
+    "@typescript-eslint/visitor-keys" "7.2.0"
     "debug" "^4.3.4"
 
-"@typescript-eslint/scope-manager@7.1.1":
-  "integrity" "sha512-cirZpA8bJMRb4WZ+rO6+mnOJrGFDd38WoXCEI57+CYBqta8Yc8aJym2i7vyqLL1vVYljgw0X27axkUXz32T8TA=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/scope-manager@7.2.0":
+  "integrity" "sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
-    "@typescript-eslint/types" "7.1.1"
-    "@typescript-eslint/visitor-keys" "7.1.1"
+    "@typescript-eslint/types" "7.2.0"
+    "@typescript-eslint/visitor-keys" "7.2.0"
 
-"@typescript-eslint/type-utils@7.1.1":
-  "integrity" "sha512-5r4RKze6XHEEhlZnJtR3GYeCh1IueUHdbrukV2KSlLXaTjuSfeVF8mZUVPLovidCuZfbVjfhi4c0DNSa/Rdg5g=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/type-utils@7.2.0":
+  "integrity" "sha512-xHi51adBHo9O9330J8GQYQwrKBqbIPJGZZVQTHHmy200hvkLZFWJIFtAG/7IYTWUyun6DE6w5InDReePJYJlJA=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
-    "@typescript-eslint/typescript-estree" "7.1.1"
-    "@typescript-eslint/utils" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.2.0"
+    "@typescript-eslint/utils" "7.2.0"
     "debug" "^4.3.4"
     "ts-api-utils" "^1.0.1"
 
-"@typescript-eslint/types@7.1.1":
-  "integrity" "sha512-KhewzrlRMrgeKm1U9bh2z5aoL4s7K3tK5DwHDn8MHv0yQfWFz/0ZR6trrIHHa5CsF83j/GgHqzdbzCXJ3crx0Q=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/types@7.2.0":
+  "integrity" "sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.2.0.tgz"
+  "version" "7.2.0"
 
-"@typescript-eslint/typescript-estree@7.1.1":
-  "integrity" "sha512-9ZOncVSfr+sMXVxxca2OJOPagRwT0u/UHikM2Rd6L/aB+kL/QAuTnsv6MeXtjzCJYb8PzrXarypSGIPx3Jemxw=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/typescript-estree@7.2.0":
+  "integrity" "sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
-    "@typescript-eslint/types" "7.1.1"
-    "@typescript-eslint/visitor-keys" "7.1.1"
+    "@typescript-eslint/types" "7.2.0"
+    "@typescript-eslint/visitor-keys" "7.2.0"
     "debug" "^4.3.4"
     "globby" "^11.1.0"
     "is-glob" "^4.0.3"
@@ -1402,25 +1402,25 @@
     "semver" "^7.5.4"
     "ts-api-utils" "^1.0.1"
 
-"@typescript-eslint/utils@7.1.1":
-  "integrity" "sha512-thOXM89xA03xAE0lW7alstvnyoBUbBX38YtY+zAUcpRPcq9EIhXPuJ0YTv948MbzmKh6e1AUszn5cBFK49Umqg=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/utils@7.2.0":
+  "integrity" "sha512-YfHpnMAGb1Eekpm3XRK8hcMwGLGsnT6L+7b2XyRv6ouDuJU1tZir1GS2i0+VXRatMwSI1/UfcyPe53ADkU+IuA=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     "@types/json-schema" "^7.0.12"
     "@types/semver" "^7.5.0"
-    "@typescript-eslint/scope-manager" "7.1.1"
-    "@typescript-eslint/types" "7.1.1"
-    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/scope-manager" "7.2.0"
+    "@typescript-eslint/types" "7.2.0"
+    "@typescript-eslint/typescript-estree" "7.2.0"
     "semver" "^7.5.4"
 
-"@typescript-eslint/visitor-keys@7.1.1":
-  "integrity" "sha512-yTdHDQxY7cSoCcAtiBzVzxleJhkGB9NncSIyMYe2+OGON1ZsP9zOPws/Pqgopa65jvknOjlk/w7ulPlZ78PiLQ=="
-  "resolved" "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.1.tgz"
-  "version" "7.1.1"
+"@typescript-eslint/visitor-keys@7.2.0":
+  "integrity" "sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A=="
+  "resolved" "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz"
+  "version" "7.2.0"
   dependencies:
-    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/types" "7.2.0"
     "eslint-visitor-keys" "^3.4.1"
 
 "@ungap/structured-clone@^1.2.0":
@@ -5106,7 +5106,7 @@
     "is-typed-array" "^1.1.13"
     "possible-typed-array-names" "^1.0.0"
 
-"typescript@^5.4.2", "typescript@>=4.2.0", "typescript@>=4.9.5":
+"typescript@^5.4.0", "typescript@>=4.2.0", "typescript@>=4.9.5":
   "integrity" "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ=="
   "resolved" "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz"
   "version" "5.4.2"
@@ -5201,10 +5201,10 @@
     "@svgr/core" "^8.1.0"
     "@svgr/plugin-jsx" "^8.1.0"
 
-"vite@^2.6.0 || 3 || 4 || 5", "vite@^4.2.0 || ^5.0.0", "vite@^5.1.5":
-  "integrity" "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q=="
-  "resolved" "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz"
-  "version" "5.1.5"
+"vite@^2.6.0 || 3 || 4 || 5", "vite@^4.2.0 || ^5.0.0", "vite@^5.1.6":
+  "integrity" "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA=="
+  "resolved" "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz"
+  "version" "5.1.6"
   dependencies:
     "esbuild" "^0.19.3"
     "postcss" "^8.4.35"