From 2db4d033191403f79fc40ae4f2458efe2a726366 Mon Sep 17 00:00:00 2001
From: Dmitrii Maletskii <mltsk94@gmail.com>
Date: Mon, 10 Feb 2025 15:03:30 +0300
Subject: [PATCH 1/5] feat(Overlay): add Overlay stories

---
 .../overlay/src/__stories__/Loading.svg       |   1 +
 .../overlay/src/__stories__/Overlay.docs.mdx  |  34 ++++
 .../src/__stories__/Overlay.stories.css       |  17 ++
 .../src/__stories__/Overlay.stories.tsx       | 156 ++++++++++++++++++
 .../OverlayCustom.stories.module.css          |   5 +
 5 files changed, 213 insertions(+)
 create mode 100644 components/overlay/src/__stories__/Loading.svg
 create mode 100644 components/overlay/src/__stories__/Overlay.docs.mdx
 create mode 100644 components/overlay/src/__stories__/Overlay.stories.css
 create mode 100644 components/overlay/src/__stories__/Overlay.stories.tsx
 create mode 100644 components/overlay/src/__stories__/OverlayCustom.stories.module.css

diff --git a/components/overlay/src/__stories__/Loading.svg b/components/overlay/src/__stories__/Loading.svg
new file mode 100644
index 00000000..e155f114
--- /dev/null
+++ b/components/overlay/src/__stories__/Loading.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><radialGradient id='a12' cx='.66' fx='.66' cy='.3125' fy='.3125' gradientTransform='scale(1.5)'><stop offset='0' stop-color='#FF156D'></stop><stop offset='.3' stop-color='#FF156D' stop-opacity='.9'></stop><stop offset='.6' stop-color='#FF156D' stop-opacity='.6'></stop><stop offset='.8' stop-color='#FF156D' stop-opacity='.3'></stop><stop offset='1' stop-color='#FF156D' stop-opacity='0'></stop></radialGradient><circle transform-origin='center' fill='none' stroke='url(#a12)' stroke-width='15' stroke-linecap='round' stroke-dasharray='200 1000' stroke-dashoffset='0' cx='100' cy='100' r='70'><animateTransform type='rotate' attributeName='transform' calcMode='spline' dur='2' values='360;0' keyTimes='0;1' keySplines='0 0 1 1' repeatCount='indefinite'></animateTransform></circle><circle transform-origin='center' fill='none' opacity='.2' stroke='#FF156D' stroke-width='15' stroke-linecap='round' cx='100' cy='100' r='70'></circle></svg>
\ No newline at end of file
diff --git a/components/overlay/src/__stories__/Overlay.docs.mdx b/components/overlay/src/__stories__/Overlay.docs.mdx
new file mode 100644
index 00000000..354a8379
--- /dev/null
+++ b/components/overlay/src/__stories__/Overlay.docs.mdx
@@ -0,0 +1,34 @@
+import { Meta, Markdown, Canvas, Source, ArgsTable } from '@storybook/blocks';
+import Readme from '../../README.md';
+import Overlay from '../Overlay';
+import * as OverlayStories from './Overlay.stories';
+
+<Meta title="components/Overlay" of={OverlayStories} />
+
+<Markdown>{Readme}</Markdown>
+
+## Usage
+
+To use the component in your project you must:
+
+1. Import the component where you need it:
+
+<Source language="javascript" code="import Overlay from '@byndyusoft-ui/overlay';" />
+
+2. Call the component and give it the desired props, for example:
+
+-   Overlay view with centered modal
+
+<Canvas sourceState="shown" of={OverlayStories.OverlayStoryWithModal} />
+
+-   Overlay view with custom props
+
+<Canvas sourceState="shown" of={OverlayStories.OverlayStoryWithCustomProps} />
+
+-   Overlay view with custom styles
+
+<Canvas sourceState="shown" of={OverlayStories.OverlayStoryWithCustomStyles} />
+
+-   Overlay inside block
+
+<Canvas sourceState="shown" of={OverlayStories.OverlayStoryWithLoading} />
diff --git a/components/overlay/src/__stories__/Overlay.stories.css b/components/overlay/src/__stories__/Overlay.stories.css
new file mode 100644
index 00000000..47e510ed
--- /dev/null
+++ b/components/overlay/src/__stories__/Overlay.stories.css
@@ -0,0 +1,17 @@
+.box {
+  padding: 10px;
+  background-color: white;
+  border: 1px solid black;
+  width: 200px;
+  height: 200px;
+}
+
+.container {
+  height: 500px;
+}
+
+.content {
+    height: 500px;
+    padding: 20px;
+    position: relative;
+}
diff --git a/components/overlay/src/__stories__/Overlay.stories.tsx b/components/overlay/src/__stories__/Overlay.stories.tsx
new file mode 100644
index 00000000..4a8a9474
--- /dev/null
+++ b/components/overlay/src/__stories__/Overlay.stories.tsx
@@ -0,0 +1,156 @@
+import React, { useEffect, useRef } from 'react';
+import { StoryObj } from '@storybook/react';
+import { IOverlayProps } from '../Overlay.types';
+import Overlay from '../Overlay';
+import Loading from './Loading.svg';
+import styles from './OverlayCustom.stories.module.css';
+import './Overlay.stories.css';
+
+const GeneralTemplate: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => (
+    <div className="container">
+        <div className="content">
+            <p>Long content to demonstrate scrolling...</p>
+            <Overlay {...args}>
+                <div className="box">
+                    <h1>Overlay</h1>
+                    <p>Text in div overlay</p>
+                </div>
+            </Overlay>
+        </div>
+    </div>
+);
+
+const FrameTemplateWithModal: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+    const frameRef = useRef<HTMLDivElement>(null);
+    const [refElement, setRefElement] = React.useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        setRefElement(frameRef.current);
+    }, [frameRef.current]);
+
+    return (
+        <div className="container" ref={frameRef}>
+            <div className="content">
+                <p>Long content to demonstrate scrolling...</p>
+                <Overlay {...args} refElement={refElement}>
+                    <div className="box">
+                        <h1>Overlay</h1>
+                        <p>Text in div overlay</p>
+                    </div>
+                </Overlay>
+            </div>
+        </div>
+    );
+};
+
+const FrameTemplateWithCustomProps: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+    const frameRef = useRef<HTMLDivElement>(null);
+    const [refElement, setRefElement] = React.useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        setRefElement(frameRef.current);
+    }, [frameRef.current]);
+
+    return (
+        <div className="container" ref={frameRef}>
+            <div className="content">
+                <p>Long content to demonstrate scrolling...</p>
+                <Overlay {...args} refElement={refElement}></Overlay>
+            </div>
+        </div>
+    );
+};
+
+const FrameTemplateWithCustomStyles: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+    const frameRef = useRef<HTMLDivElement>(null);
+    const [refElement, setRefElement] = React.useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        setRefElement(frameRef.current);
+    }, [frameRef.current]);
+
+    return (
+        <div className="container" ref={frameRef}>
+            <div className="content">
+                <p>Long content to demonstrate scrolling...</p>
+                <Overlay {...args} refElement={refElement} classNames={styles}></Overlay>
+            </div>
+        </div>
+    );
+};
+
+const FrameTemplateWithLoading: (args: IOverlayProps) => JSX.Element = (args: IOverlayProps) => {
+    const frameRef = useRef<HTMLDivElement>(null);
+    const [refElement, setRefElement] = React.useState<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        setRefElement(frameRef.current);
+    }, [frameRef.current]);
+
+    return (
+        <div className="container">
+            <div className="content">
+                <div className="box" style={{ position: 'relative', margin: 'auto' }} ref={frameRef}>
+                    <Overlay {...args} refElement={refElement}>
+                        <img src={Loading} alt="Loading" />
+                    </Overlay>
+                    <h1>Overlay</h1>
+                    <p>Text in div overlay</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const GeneralOverlayStory: StoryObj<typeof GeneralTemplate> = {
+    name: 'General overlay view',
+    render: GeneralTemplate,
+    args: {
+        isVisible: false,
+        center: true
+    }
+};
+
+export const OverlayStoryWithModal: StoryObj<typeof FrameTemplateWithModal> = {
+    name: 'Overlay view with centered modal',
+    render: FrameTemplateWithModal,
+    args: {
+        isVisible: true,
+        center: true,
+        fixed: true
+    }
+};
+
+export const OverlayStoryWithCustomProps: StoryObj<typeof FrameTemplateWithCustomProps> = {
+    name: 'Overlay view with custom props',
+    render: FrameTemplateWithCustomProps,
+    args: {
+        isVisible: true,
+        color: '#87ceeb',
+        backgroundOpacity: 0.6,
+        blur: 2
+    }
+};
+
+export const OverlayStoryWithCustomStyles: StoryObj<typeof FrameTemplateWithCustomStyles> = {
+    name: 'Overlay view with custom styles',
+    render: FrameTemplateWithCustomStyles,
+    args: {
+        isVisible: true
+    }
+};
+export const OverlayStoryWithLoading: StoryObj<typeof FrameTemplateWithLoading> = {
+    name: 'Overlay inside block',
+    render: FrameTemplateWithLoading,
+    args: {
+        isVisible: true,
+        center: true,
+        color: '#87aaeb',
+        backgroundOpacity: 0.6
+    }
+};
+
+export default {
+    title: 'components/Overlay',
+    component: Overlay
+};
diff --git a/components/overlay/src/__stories__/OverlayCustom.stories.module.css b/components/overlay/src/__stories__/OverlayCustom.stories.module.css
new file mode 100644
index 00000000..cf79a0bb
--- /dev/null
+++ b/components/overlay/src/__stories__/OverlayCustom.stories.module.css
@@ -0,0 +1,5 @@
+.container {
+  position: absolute;
+  inset: 0px;
+  background: linear-gradient(to right, blue, skyblue);
+}

From 4a012eb9b80b3c1396a2baedaa5b699dcc90eec5 Mon Sep 17 00:00:00 2001
From: Dmitrii Maletskii <mltsk94@gmail.com>
Date: Mon, 10 Feb 2025 15:04:22 +0300
Subject: [PATCH 2/5] feat(Overlay): add Overlay tests

---
 components/overlay/src/Overlay.tests.tsx | 105 +++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 components/overlay/src/Overlay.tests.tsx

diff --git a/components/overlay/src/Overlay.tests.tsx b/components/overlay/src/Overlay.tests.tsx
new file mode 100644
index 00000000..3d5ab41c
--- /dev/null
+++ b/components/overlay/src/Overlay.tests.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Overlay from './Overlay';
+
+describe('components/Overlay', () => {
+    test('renders visible correctly', () => {
+        render(<Overlay isVisible>Test</Overlay>);
+
+        expect(screen.getByRole('presentation')).toHaveClass('fadeIn');
+        expect(screen.getByText('Test')).toBeInTheDocument();
+    });
+
+    test('renders invisible', () => {
+        render(<Overlay isVisible={false}>Test</Overlay>);
+
+        expect(screen.getByRole('presentation')).not.toHaveClass('isVisible');
+        expect(screen.queryByText('Test')).not.toBeInTheDocument();
+    });
+
+    test('handles click', async () => {
+        const onClick = jest.fn();
+
+        render(
+            <Overlay isVisible={false} onClick={onClick}>
+                Test
+            </Overlay>
+        );
+
+        await userEvent.click(screen.getByRole('presentation'));
+
+        expect(onClick).toBeCalledTimes(1);
+    });
+
+    test('renders with custom className', () => {
+        render(
+            <Overlay isVisible className="custom-class">
+                Test
+            </Overlay>
+        );
+
+        expect(screen.getByRole('presentation')).toHaveClass('custom-class');
+    });
+
+    test('renders with custom data-testid', () => {
+        render(
+            <Overlay isVisible data-testid="custom-overlay">
+                Test
+            </Overlay>
+        );
+
+        expect(screen.getByTestId('custom-overlay')).toBeInTheDocument();
+    });
+
+    test('applies center prop correctly', () => {
+        render(
+            <Overlay isVisible center>
+                Test
+            </Overlay>
+        );
+
+        expect(screen.getByRole('presentation')).toHaveClass('center');
+    });
+
+    test('applies fixed position when fixed prop is true', () => {
+        render(
+            <Overlay isVisible fixed>
+                Test
+            </Overlay>
+        );
+
+        expect(screen.getByRole('presentation')).toHaveStyle({ position: 'fixed' });
+    });
+
+    test('applies custom styles correctly', () => {
+        render(
+            <Overlay isVisible color="#FF0000" backgroundOpacity={0.8} fixed zIndex={200}>
+                Test
+            </Overlay>
+        );
+
+        const overlay = screen.getByRole('presentation');
+        expect(overlay.getAttribute('style')).toContain(
+            'z-index: 200; background-color: rgba(255, 0, 0, 0.8); position: fixed;'
+        );
+    });
+
+    test('applies custom classNames', () => {
+        const customClassNames = {
+            container: 'custom-container',
+            fadeIn: 'custom-fade-in',
+            fadeOut: 'custom-fade-out',
+            center: 'custom-center'
+        };
+
+        render(
+            <Overlay isVisible classNames={customClassNames}>
+                Test
+            </Overlay>
+        );
+
+        const overlay = screen.getByRole('presentation');
+        expect(overlay).toHaveClass('custom-container', 'custom-fade-in');
+    });
+});

From 9fa74667c3e48787cbd75e2c82be558605545fe2 Mon Sep 17 00:00:00 2001
From: Dmitrii Maletskii <mltsk94@gmail.com>
Date: Mon, 10 Feb 2025 15:05:10 +0300
Subject: [PATCH 3/5] feat(Overlay): implement Overlay component

---
 .gitignore                                    |    1 +
 components/overlay/.npmignore                 |    1 +
 components/overlay/README.md                  |   48 +
 components/overlay/package.json               |   39 +
 components/overlay/rollup.config.js           |   29 +
 components/overlay/src/Overlay.module.css     |   41 +
 components/overlay/src/Overlay.tsx            |   53 +
 components/overlay/src/Overlay.types.ts       |   20 +
 components/overlay/src/index.ts               |    5 +
 .../utilities/getDefaultOverlayClassNames.ts  |   11 +
 components/overlay/src/utilities/hexToRgba.ts |    8 +
 components/overlay/src/utilities/index.ts     |    2 +
 components/overlay/tsconfig.build.json        |    4 +
 components/overlay/tsconfig.json              |   11 +
 package-lock.json                             | 1324 ++++++++++++++---
 package.json                                  |    4 +-
 16 files changed, 1421 insertions(+), 180 deletions(-)
 create mode 100644 components/overlay/.npmignore
 create mode 100644 components/overlay/README.md
 create mode 100644 components/overlay/package.json
 create mode 100644 components/overlay/rollup.config.js
 create mode 100644 components/overlay/src/Overlay.module.css
 create mode 100644 components/overlay/src/Overlay.tsx
 create mode 100644 components/overlay/src/Overlay.types.ts
 create mode 100644 components/overlay/src/index.ts
 create mode 100644 components/overlay/src/utilities/getDefaultOverlayClassNames.ts
 create mode 100644 components/overlay/src/utilities/hexToRgba.ts
 create mode 100644 components/overlay/src/utilities/index.ts
 create mode 100644 components/overlay/tsconfig.build.json
 create mode 100644 components/overlay/tsconfig.json

diff --git a/.gitignore b/.gitignore
index b4c2a37f..ca15139e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 *.log
 .idea
 .DS_Store
+.vscode
 node_modules
 .cache
 dist
diff --git a/components/overlay/.npmignore b/components/overlay/.npmignore
new file mode 100644
index 00000000..85de9cf9
--- /dev/null
+++ b/components/overlay/.npmignore
@@ -0,0 +1 @@
+src
diff --git a/components/overlay/README.md b/components/overlay/README.md
new file mode 100644
index 00000000..a69cd775
--- /dev/null
+++ b/components/overlay/README.md
@@ -0,0 +1,48 @@
+# `@byndyusoft-ui/overlay`
+
+The Overlay component creates a semi-transparent layer over content.
+
+## Installation
+
+```bash
+npm install @byndyusoft-ui/overlay
+```
+
+## Usage
+
+```tsx
+import { Overlay } from '@byndyusoft-ui/overlay';
+
+function Example() {
+    return (
+        <div>
+            <div>Main content</div>
+            <Overlay isVisible={true} color="#000000" blur={5} center>
+                <div>Overlay content</div>
+            </Overlay>
+        </div>
+    );
+}
+```
+
+## Props
+
+| Prop              | Type               | Default            | Description                                                               |
+| ----------------- | ------------------ | ------------------ | ------------------------------------------------------------------------- |
+| children          | ReactNode          | -                  | Content to be rendered inside the overlay                                 |
+| className         | string             | -                  | Additional CSS class for the overlay container                            |
+| classNames        | IOverlayClassNames | Overlay.module.css | Object with class names for overlay elements                              |
+| refElement        | HTMLElement        | -                  | Reference to the element that will be used lock scroll                    |
+| color             | string             | #000000            | Overlay background color (hex format)                                     |
+| backgroundOpacity | number             | 0.6                | Background opacity (from 0 to 1)                                          |
+| blur              | number             | 10                 | Blur effect value in pixels                                               |
+| zIndex            | number             | 100                | Overlay z-index                                                           |
+| isVisible         | boolean            | false              | Controls overlay visibility                                               |
+| center            | boolean            | false              | Centers the content inside overlay                                        |
+| fixed             | boolean            | false              | Determines whether overlay should have fixed position instead of absolute |
+
+# Notes
+
+-   Component uses `useBodyScrollLock` hook to prevent body scrolling when overlay is visible
+-   The color prop expects a hex color value (e.g., "#000000")
+-   The refElement prop is used to lock scroll of the element when overlay is visible
diff --git a/components/overlay/package.json b/components/overlay/package.json
new file mode 100644
index 00000000..a7aa2fa3
--- /dev/null
+++ b/components/overlay/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@byndyusoft-ui/overlay",
+  "version": "0.1.0",
+  "description": "Byndyusoft UI Overlay React Component",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "overlay"
+  ],
+  "author": "Dmitrii Maletskii <maleckij@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/overlay#readme",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js",
+    "test": "jest --config ../../jest.config.js --roots components/overlay/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@byndyusoft-ui/use-scroll-lock": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  }
+}
diff --git a/components/overlay/rollup.config.js b/components/overlay/rollup.config.js
new file mode 100644
index 00000000..1127fb94
--- /dev/null
+++ b/components/overlay/rollup.config.js
@@ -0,0 +1,29 @@
+import typescript from '@rollup/plugin-typescript';
+import baseConfig from '../../rollup.base.config';
+import postcss from 'rollup-plugin-postcss';
+
+export default {
+    ...baseConfig,
+    input: ['src/index.ts'],
+    plugins: [
+        ...baseConfig.plugins,
+        typescript({
+            tsconfig: './tsconfig.json',
+            module: 'ESNext',
+            exclude: [
+                'src/**/*.stories.tsx',
+                'src/**/*.tests.tsx',
+                'src/**/__stories__/**',
+                'src/**/__tests__/**',
+                'node_modules/**'
+            ]
+        }),
+        postcss({
+            modules: true,
+            extract: false,
+            minimize: true,
+            sourceMap: true,
+            inject: true
+        })
+    ]
+};
diff --git a/components/overlay/src/Overlay.module.css b/components/overlay/src/Overlay.module.css
new file mode 100644
index 00000000..6a55e1c7
--- /dev/null
+++ b/components/overlay/src/Overlay.module.css
@@ -0,0 +1,41 @@
+.container {
+    position: fixed;
+    inset: 0;
+}
+
+.center > * {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.container.fadeIn {
+    animation: fadeIn 0.4s ease forwards;
+}
+  
+.container.fadeOut {
+    animation: fadeOut 0.4s ease forwards;
+}
+  
+@keyframes fadeIn {
+    0% {
+        display: block; 
+        opacity: 0;
+    }
+    100% {
+        display: block; 
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        display: block;
+        opacity: 1;
+    }
+    100% {
+        display: none;
+        opacity: 0;
+    }
+}
diff --git a/components/overlay/src/Overlay.tsx b/components/overlay/src/Overlay.tsx
new file mode 100644
index 00000000..fc3b2698
--- /dev/null
+++ b/components/overlay/src/Overlay.tsx
@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import useScrollLock from '@byndyusoft-ui/use-scroll-lock';
+import { getDefaultOverlayClassNames, hexToRgba } from './utilities';
+import { IOverlayProps } from './Overlay.types';
+
+const Overlay = forwardRef<HTMLDivElement, IOverlayProps>(
+    (
+        {
+            children,
+            className,
+            classNames,
+            refElement,
+            color = '#000000',
+            backgroundOpacity = 0.6,
+            blur = 10,
+            zIndex = 100,
+            isVisible = false,
+            center = false,
+            fixed = false,
+            ...props
+        },
+        ref
+    ): JSX.Element => {
+        useScrollLock(isVisible, refElement);
+        const mergedClassNames = Object.assign(getDefaultOverlayClassNames(), classNames);
+
+        return (
+            <div
+                className={cn(
+                    mergedClassNames.container,
+                    isVisible ? mergedClassNames.fadeIn : mergedClassNames.fadeOut,
+                    center && mergedClassNames.center,
+                    className
+                )}
+                style={{
+                    zIndex: zIndex,
+                    backgroundColor: hexToRgba(color, backgroundOpacity),
+                    backdropFilter: `blur(${blur}px)`,
+                    position: fixed ? 'fixed' : 'absolute'
+                }}
+                role="presentation"
+                ref={ref}
+                tabIndex={-1}
+                {...props}
+            >
+                {children && isVisible && children}
+            </div>
+        );
+    }
+);
+
+export default Overlay;
diff --git a/components/overlay/src/Overlay.types.ts b/components/overlay/src/Overlay.types.ts
new file mode 100644
index 00000000..6e08dfc9
--- /dev/null
+++ b/components/overlay/src/Overlay.types.ts
@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+
+export interface IOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    classNames?: IOverlayClassNames;
+    refElement?: HTMLElement | null;
+    color?: string;
+    backgroundOpacity?: number;
+    blur?: number;
+    zIndex?: number;
+    isVisible?: boolean;
+    center?: boolean;
+    fixed?: boolean;
+}
+
+export interface IOverlayClassNames {
+    container?: string;
+    fadeIn?: string;
+    fadeOut?: string;
+    center?: string;
+}
diff --git a/components/overlay/src/index.ts b/components/overlay/src/index.ts
new file mode 100644
index 00000000..248dab80
--- /dev/null
+++ b/components/overlay/src/index.ts
@@ -0,0 +1,5 @@
+import './Overlay.module.css';
+import Overlay from './Overlay';
+
+export type { IOverlayProps } from './Overlay.types';
+export default Overlay;
diff --git a/components/overlay/src/utilities/getDefaultOverlayClassNames.ts b/components/overlay/src/utilities/getDefaultOverlayClassNames.ts
new file mode 100644
index 00000000..3e600ca5
--- /dev/null
+++ b/components/overlay/src/utilities/getDefaultOverlayClassNames.ts
@@ -0,0 +1,11 @@
+import { IOverlayClassNames } from '../Overlay.types';
+import styles from '../Overlay.module.css';
+
+const getDefaultOverlayClassNames = (): IOverlayClassNames => ({
+    container: styles.container,
+    fadeIn: styles.fadeIn,
+    fadeOut: styles.fadeOut,
+    center: styles.center
+});
+
+export { getDefaultOverlayClassNames };
diff --git a/components/overlay/src/utilities/hexToRgba.ts b/components/overlay/src/utilities/hexToRgba.ts
new file mode 100644
index 00000000..d171de37
--- /dev/null
+++ b/components/overlay/src/utilities/hexToRgba.ts
@@ -0,0 +1,8 @@
+const hexToRgba = (hex: string, opacity: number): string => {
+    const r = parseInt(hex.substring(1, 3), 16);
+    const g = parseInt(hex.substring(3, 5), 16);
+    const b = parseInt(hex.substring(5, 7), 16);
+    return `rgba(${r},${g},${b},${opacity})`;
+};
+
+export { hexToRgba };
diff --git a/components/overlay/src/utilities/index.ts b/components/overlay/src/utilities/index.ts
new file mode 100644
index 00000000..75779b24
--- /dev/null
+++ b/components/overlay/src/utilities/index.ts
@@ -0,0 +1,2 @@
+export * from './hexToRgba';
+export * from './getDefaultOverlayClassNames';
diff --git a/components/overlay/tsconfig.build.json b/components/overlay/tsconfig.build.json
new file mode 100644
index 00000000..2c767fd6
--- /dev/null
+++ b/components/overlay/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/*.tests.ts", "src/*.stories.tsx"]
+}
diff --git a/components/overlay/tsconfig.json b/components/overlay/tsconfig.json
new file mode 100644
index 00000000..6c727513
--- /dev/null
+++ b/components/overlay/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs"
+  },
+  "include": ["../../types.d.ts", "src/**/*"]
+}
diff --git a/package-lock.json b/package-lock.json
index 42be0fdb..f090b6f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,11 +58,13 @@
         "jest-environment-jsdom": "^28.1.3",
         "lerna": "^3.22.1",
         "lint-staged": "^13.0.3",
+        "postcss": "^8.5.1",
         "prettier": "^2.7.1",
         "react": "^17.0.2",
         "rollup": "^2.79.0",
         "rollup-plugin-delete": "^2.0.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
         "storybook": "^7.6.17",
         "storybook-css-modules": "^1.0.8",
         "stylelint": "^13.0.0",
@@ -108,6 +110,29 @@
         "react-dom": ">=17"
       }
     },
+    "components/overlay": {
+      "name": "@byndyusoft-ui/overlay",
+      "version": "0.1.0",
+      "license": "ISC",
+      "dependencies": {
+        "@byndyusoft-ui/use-scroll-lock": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "components/Overlay": {
+      "name": "@byndyusoft-ui/Overlay",
+      "version": "0.1.0",
+      "extraneous": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "@byndyusoft-ui/use-scroll-lock": "^0.1.0",
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "components/portal": {
       "name": "@byndyusoft-ui/portal",
       "version": "1.0.0",
@@ -2310,6 +2335,10 @@
       "resolved": "components/modals-provider",
       "link": true
     },
+    "node_modules/@byndyusoft-ui/overlay": {
+      "resolved": "components/overlay",
+      "link": true
+    },
     "node_modules/@byndyusoft-ui/portal": {
       "resolved": "components/portal",
       "link": true
@@ -13444,6 +13473,29 @@
         "url": "https://tidelift.com/funding/github/npm/autoprefixer"
       }
     },
+    "node_modules/autoprefixer/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/autoprefixer/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "dev": true,
@@ -14261,6 +14313,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001577",
       "dev": true,
@@ -14713,6 +14777,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
     "node_modules/colorette": {
       "version": "1.4.0",
       "dev": true,
@@ -14860,6 +14930,15 @@
         "typedarray": "^0.0.6"
       }
     },
+    "node_modules/concat-with-sourcemaps": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+      "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "^0.6.1"
+      }
+    },
     "node_modules/confbox": {
       "version": "0.1.7",
       "dev": true,
@@ -15816,6 +15895,18 @@
         "source-map-resolve": "^0.6.0"
       }
     },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "dev": true,
@@ -15850,99 +15941,6 @@
         }
       }
     },
-    "node_modules/css-loader/node_modules/icss-utils": {
-      "version": "5.1.0",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/css-loader/node_modules/postcss": {
-      "version": "8.4.47",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
-        "source-map-js": "^1.2.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/css-loader/node_modules/postcss-modules-extract-imports": {
-      "version": "3.1.0",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/css-loader/node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.5",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/css-loader/node_modules/postcss-modules-scope": {
-      "version": "3.2.0",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/css-loader/node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/css-loader/node_modules/semver": {
       "version": "7.6.3",
       "dev": true,
@@ -16017,6 +16015,82 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "dev": true,
+      "dependencies": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "dev": true,
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
     "node_modules/csso": {
       "version": "5.0.5",
       "dev": true,
@@ -18963,6 +19037,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/generic-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz",
+      "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^3.2.0"
+      }
+    },
+    "node_modules/generic-names/node_modules/loader-utils": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
+      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
     "node_modules/genfun": {
       "version": "5.0.0",
       "dev": true,
@@ -20553,6 +20645,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==",
+      "dev": true
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
       "dev": true,
@@ -20604,6 +20714,18 @@
         "minimatch": "^3.0.4"
       }
     },
+    "node_modules/import-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+      "dev": true,
+      "dependencies": {
+        "import-from": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "dev": true,
@@ -20627,6 +20749,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/import-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dev": true,
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/import-lazy": {
       "version": "4.0.0",
       "dev": true,
@@ -23360,6 +23494,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "dev": true
+    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "dev": true,
@@ -25483,7 +25623,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -25491,7 +25633,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -26567,6 +26708,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "dev": true,
+      "dependencies": {
+        "p-finally": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/p-try": {
       "version": "2.2.0",
       "dev": true,
@@ -26935,45 +27088,151 @@
       }
     },
     "node_modules/postcss": {
-      "version": "7.0.36",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "dev": true,
-      "license": "MIT",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "chalk": "^2.4.2",
-        "source-map": "^0.6.1",
-        "supports-color": "^6.1.0"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
+        "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-html": {
-      "version": "0.36.0",
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "htmlparser2": "^3.10.0"
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
       },
       "peerDependencies": {
-        "postcss": ">=5.0.0",
-        "postcss-syntax": ">=0.36.0"
+        "postcss": "^8.2.2"
       }
     },
-    "node_modules/postcss-html/node_modules/dom-serializer": {
-      "version": "0.2.2",
+    "node_modules/postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "domelementtype": "^2.0.1",
-        "entities": "^2.0.0"
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-html/node_modules/dom-serializer/node_modules/domelementtype": {
-      "version": "2.3.0",
+    "node_modules/postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-html": {
+      "version": "0.36.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^3.10.0"
+      },
+      "peerDependencies": {
+        "postcss": ">=5.0.0",
+        "postcss-syntax": ">=0.36.0"
+      }
+    },
+    "node_modules/postcss-html/node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/postcss-html/node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.3.0",
       "dev": true,
       "funding": [
         {
@@ -27031,34 +27290,469 @@
         "readable-stream": "^3.1.1"
       }
     },
-    "node_modules/postcss-html/node_modules/readable-stream": {
-      "version": "3.6.0",
+    "node_modules/postcss-html/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss-less": {
+      "version": "3.1.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss": "^7.0.14"
+      },
+      "engines": {
+        "node": ">=6.14.4"
+      }
+    },
+    "node_modules/postcss-less/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-less/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dev": true,
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-modules": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.3.1.tgz",
+      "integrity": "sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==",
+      "dev": true,
+      "dependencies": {
+        "generic-names": "^4.0.0",
+        "icss-replace-symbols": "^1.1.0",
+        "lodash.camelcase": "^4.3.0",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "string-hash": "^1.1.1"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
+      "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
+      "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dev": true,
+      "dependencies": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-less": {
-      "version": "3.1.4",
+    "node_modules/postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "postcss": "^7.0.14"
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.14.4"
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-media-query-parser": {
-      "version": "0.2.3",
+    "node_modules/postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
       "dev": true,
-      "license": "MIT"
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
     },
     "node_modules/postcss-resolve-nested-selector": {
       "version": "0.1.1",
@@ -27076,6 +27770,29 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/postcss-safe-parser/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-safe-parser/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/postcss-sass": {
       "version": "0.4.4",
       "dev": true,
@@ -27085,6 +27802,29 @@
         "postcss": "^7.0.21"
       }
     },
+    "node_modules/postcss-sass/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-sass/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/postcss-scss": {
       "version": "2.1.1",
       "dev": true,
@@ -27096,6 +27836,29 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/postcss-scss/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/postcss-scss/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.10",
       "dev": true,
@@ -27108,86 +27871,117 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-syntax": {
-      "version": "0.36.2",
+    "node_modules/postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
       "dev": true,
-      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
       "peerDependencies": {
-        "postcss": ">=5.0.0"
+        "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/postcss/node_modules/ansi-styles": {
-      "version": "3.2.1",
+    "node_modules/postcss-svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
       "engines": {
-        "node": ">=4"
+        "node": ">= 10"
       }
     },
-    "node_modules/postcss/node_modules/chalk": {
-      "version": "2.4.2",
+    "node_modules/postcss-svgo/node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/postcss/node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
+    "node_modules/postcss-svgo/node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "css-tree": "^1.1.2"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/postcss/node_modules/color-convert": {
-      "version": "1.9.3",
+    "node_modules/postcss-svgo/node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "node_modules/postcss-svgo/node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "color-name": "1.1.3"
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/postcss/node_modules/color-name": {
-      "version": "1.1.3",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/postcss/node_modules/has-flag": {
-      "version": "3.0.0",
+    "node_modules/postcss-syntax": {
+      "version": "0.36.2",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">=4"
+      "peerDependencies": {
+        "postcss": ">=5.0.0"
       }
     },
-    "node_modules/postcss/node_modules/supports-color": {
-      "version": "6.1.0",
+    "node_modules/postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "postcss-selector-parser": "^6.0.5"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss/node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
     "node_modules/prettier": {
       "version": "2.8.8",
       "dev": true,
@@ -27316,6 +28110,15 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/promise.series": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
+      "integrity": "sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.1",
       "dev": true,
@@ -28572,6 +29375,82 @@
         "rollup": "*"
       }
     },
+    "node_modules/rollup-plugin-postcss": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
+      "integrity": "sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "concat-with-sourcemaps": "^1.1.0",
+        "cssnano": "^5.0.1",
+        "import-cwd": "^3.0.0",
+        "p-queue": "^6.6.2",
+        "pify": "^5.0.0",
+        "postcss-load-config": "^3.0.0",
+        "postcss-modules": "^4.0.0",
+        "promise.series": "^0.2.0",
+        "resolve": "^1.19.0",
+        "rollup-pluginutils": "^2.8.2",
+        "safe-identifier": "^0.4.2",
+        "style-inject": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "postcss": "8.x"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "dev": true,
+      "dependencies": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-plugin-postcss/node_modules/pify": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
+      "integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/rollup-pluginutils/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "dev": true,
@@ -28642,6 +29521,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/safe-identifier": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
+      "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==",
+      "dev": true
+    },
     "node_modules/safe-regex": {
       "version": "1.1.0",
       "dev": true,
@@ -29366,6 +30251,13 @@
         "figgy-pudding": "^3.5.1"
       }
     },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
+      "dev": true
+    },
     "node_modules/stack-utils": {
       "version": "2.0.5",
       "dev": true,
@@ -29488,6 +30380,12 @@
         "node": ">=0.6.19"
       }
     },
+    "node_modules/string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
+      "dev": true
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "dev": true,
@@ -29661,6 +30559,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/style-inject": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
+      "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==",
+      "dev": true
+    },
     "node_modules/style-loader": {
       "version": "3.3.4",
       "dev": true,
@@ -29681,6 +30585,22 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
     "node_modules/stylelint": {
       "version": "13.13.1",
       "dev": true,
@@ -29762,6 +30682,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylelint/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/stylelint/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/sugarss": {
       "version": "2.0.0",
       "dev": true,
@@ -29770,6 +30713,29 @@
         "postcss": "^7.0.2"
       }
     },
+    "node_modules/sugarss/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/sugarss/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "dev": true,
diff --git a/package.json b/package.json
index 02ad64c8..7bbcc137 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "build": "lerna run build",
     "clean": "lerna run clean",
     "lint": "lerna run lint",
-    "test": "lerna run test --concurrency=1",
+    "test": "lerna run test",
     "postinstall": "(husky install) || true",
     "build-storybook": "storybook build --disable-telemetry",
     "prettier:check": "prettier --check \"**/*.{ts,tsx,css,json}\"",
@@ -76,11 +76,13 @@
     "jest-environment-jsdom": "^28.1.3",
     "lerna": "^3.22.1",
     "lint-staged": "^13.0.3",
+    "postcss": "^8.5.1",
     "prettier": "^2.7.1",
     "react": "^17.0.2",
     "rollup": "^2.79.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.6.17",
     "storybook-css-modules": "^1.0.8",
     "stylelint": "^13.0.0",

From 18ad527391ea1e9e1b7a0171ef90bc393588cf0c Mon Sep 17 00:00:00 2001
From: Dmitrii Maletskii <mltsk94@gmail.com>
Date: Mon, 10 Feb 2025 15:40:51 +0300
Subject: [PATCH 4/5] feat(Overlay): add types

---
 components/overlay/src/types.d.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 components/overlay/src/types.d.ts

diff --git a/components/overlay/src/types.d.ts b/components/overlay/src/types.d.ts
new file mode 100644
index 00000000..8b008475
--- /dev/null
+++ b/components/overlay/src/types.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}

From 7379ea6f3e1bc28015ab10e409cbca040790f552 Mon Sep 17 00:00:00 2001
From: Dmitrii Maletskii <mltsk94@gmail.com>
Date: Mon, 10 Feb 2025 16:27:38 +0300
Subject: [PATCH 5/5] fix(Overlay): fix lint

---
 components/overlay/src/Overlay.tests.tsx         | 16 +++++++++++-----
 components/overlay/src/Overlay.tsx               |  6 ++++--
 .../overlay/src/__stories__/Overlay.stories.css  |  5 +++++
 .../overlay/src/__stories__/Overlay.stories.tsx  | 15 ++++++++-------
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/components/overlay/src/Overlay.tests.tsx b/components/overlay/src/Overlay.tests.tsx
index 3d5ab41c..005217da 100644
--- a/components/overlay/src/Overlay.tests.tsx
+++ b/components/overlay/src/Overlay.tests.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import Overlay from './Overlay';
 
 describe('components/Overlay', () => {
@@ -80,9 +80,15 @@ describe('components/Overlay', () => {
         );
 
         const overlay = screen.getByRole('presentation');
-        expect(overlay.getAttribute('style')).toContain(
-            'z-index: 200; background-color: rgba(255, 0, 0, 0.8); position: fixed;'
-        );
+        const expectedStyles = {
+            zIndex: 200,
+            backgroundColor: 'rgba(255, 0, 0, 0.8)',
+            position: 'fixed'
+        };
+
+        Object.entries(expectedStyles).forEach(([property, value]) => {
+            expect(overlay).toHaveStyle({ [property]: value });
+        });
     });
 
     test('applies custom classNames', () => {
@@ -91,7 +97,7 @@ describe('components/Overlay', () => {
             fadeIn: 'custom-fade-in',
             fadeOut: 'custom-fade-out',
             center: 'custom-center'
-        };
+        } as const;
 
         render(
             <Overlay isVisible classNames={customClassNames}>
diff --git a/components/overlay/src/Overlay.tsx b/components/overlay/src/Overlay.tsx
index fc3b2698..c44bac65 100644
--- a/components/overlay/src/Overlay.tsx
+++ b/components/overlay/src/Overlay.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
-import useScrollLock from '@byndyusoft-ui/use-scroll-lock';
+import { useScrollLock } from '@byndyusoft-ui/use-scroll-lock';
 import { getDefaultOverlayClassNames, hexToRgba } from './utilities';
 import { IOverlayProps } from './Overlay.types';
 
@@ -34,7 +34,7 @@ const Overlay = forwardRef<HTMLDivElement, IOverlayProps>(
                     className
                 )}
                 style={{
-                    zIndex: zIndex,
+                    zIndex,
                     backgroundColor: hexToRgba(color, backgroundOpacity),
                     backdropFilter: `blur(${blur}px)`,
                     position: fixed ? 'fixed' : 'absolute'
@@ -50,4 +50,6 @@ const Overlay = forwardRef<HTMLDivElement, IOverlayProps>(
     }
 );
 
+Overlay.displayName = 'Overlay';
+
 export default Overlay;
diff --git a/components/overlay/src/__stories__/Overlay.stories.css b/components/overlay/src/__stories__/Overlay.stories.css
index 47e510ed..b1526b18 100644
--- a/components/overlay/src/__stories__/Overlay.stories.css
+++ b/components/overlay/src/__stories__/Overlay.stories.css
@@ -6,6 +6,11 @@
   height: 200px;
 }
 
+.loadingBox {
+  position: relative;
+  margin: auto;
+}
+
 .container {
   height: 500px;
 }
diff --git a/components/overlay/src/__stories__/Overlay.stories.tsx b/components/overlay/src/__stories__/Overlay.stories.tsx
index 4a8a9474..f83ec51f 100644
--- a/components/overlay/src/__stories__/Overlay.stories.tsx
+++ b/components/overlay/src/__stories__/Overlay.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { StoryObj } from '@storybook/react';
+import cn from 'classnames';
 import { IOverlayProps } from '../Overlay.types';
 import Overlay from '../Overlay';
 import Loading from './Loading.svg';
@@ -26,7 +27,7 @@ const FrameTemplateWithModal: (args: IOverlayProps) => JSX.Element = (args: IOve
 
     useEffect(() => {
         setRefElement(frameRef.current);
-    }, [frameRef.current]);
+    }, []);
 
     return (
         <div className="container" ref={frameRef}>
@@ -49,13 +50,13 @@ const FrameTemplateWithCustomProps: (args: IOverlayProps) => JSX.Element = (args
 
     useEffect(() => {
         setRefElement(frameRef.current);
-    }, [frameRef.current]);
+    }, []);
 
     return (
         <div className="container" ref={frameRef}>
             <div className="content">
                 <p>Long content to demonstrate scrolling...</p>
-                <Overlay {...args} refElement={refElement}></Overlay>
+                <Overlay {...args} refElement={refElement} />
             </div>
         </div>
     );
@@ -67,13 +68,13 @@ const FrameTemplateWithCustomStyles: (args: IOverlayProps) => JSX.Element = (arg
 
     useEffect(() => {
         setRefElement(frameRef.current);
-    }, [frameRef.current]);
+    }, []);
 
     return (
         <div className="container" ref={frameRef}>
             <div className="content">
                 <p>Long content to demonstrate scrolling...</p>
-                <Overlay {...args} refElement={refElement} classNames={styles}></Overlay>
+                <Overlay {...args} refElement={refElement} classNames={styles} />
             </div>
         </div>
     );
@@ -85,12 +86,12 @@ const FrameTemplateWithLoading: (args: IOverlayProps) => JSX.Element = (args: IO
 
     useEffect(() => {
         setRefElement(frameRef.current);
-    }, [frameRef.current]);
+    }, []);
 
     return (
         <div className="container">
             <div className="content">
-                <div className="box" style={{ position: 'relative', margin: 'auto' }} ref={frameRef}>
+                <div className={cn('box', 'loadingBox')} ref={frameRef}>
                     <Overlay {...args} refElement={refElement}>
                         <img src={Loading} alt="Loading" />
                     </Overlay>