diff --git a/.gitignore b/.gitignore
index 0e1fa41..37dab9d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
 .parcel-cache
+
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7e782f..6796be1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## 16.12.2022 - релиз версии 0.1.0!
+### 16.12.2022 - релиз версии 0.1.0!
 
 ### 20.12.2022 - обновление 0.1.12.
 
@@ -12,3 +12,11 @@
 
 - Изменеия в расположении файлов scss.
 - Исправлено влияние стилей селекта на JS приложение.
+
+### 29.12.2022 - обновление 0.1.17
+
+- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
+- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно).
+- Исправленны выявленные баги.
+- Исправленно отображение страницы с примером на мобильных устройствах.
+- Обновленна документация!
diff --git a/README.md b/README.md
index 87ab5ae..8af1769 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.1.14
+## version ~ 0.1.17
 
 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
 Доступна кастомизация, мультивыбор и живой поиск по елементам.
@@ -45,8 +45,8 @@ npm i cg-select
 ### Пример создния обычного селекта
 
 ```javascript
-import {DropDown} from 'cg-select/src/cg-select';
-import 'cg-select/src/main.scss'
+import { DropDown } from 'cg-select/src/cg-select';
+import 'cg-select/src/main.scss';
 
 const dropdown = new DropDown({
   selector: '.cg-dropdown_selector',
@@ -74,7 +74,7 @@ const dropdown = new DropDown({
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
 
-Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select.
+Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже.
 
 **Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html
 
@@ -88,10 +88,10 @@ const dropdown = new DropDown({
 
 ## Compatibility
 
-Совместимость с приложениями |  JS  |  React  | Angular |  Vue |
-| -------------------------- | :--: | :-----: | :-----: | :--: |
-| CG-SELECT                  | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |  ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |  ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png)|
-| Комментарий                | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
+| Совместимость с приложениями |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
+| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
+| CG-SELECT                    | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
+| Комментарий                  |            Протестирован в Js приложениях и работает успешно.            |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                           тесты не проведены                            |
 
 ## History
 
diff --git a/documentation/DropDown.html b/documentation/DropDown.html
index 6c4b60a..6302d9e 100644
--- a/documentation/DropDown.html
+++ b/documentation/DropDown.html
@@ -110,10 +110,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -134,10 +131,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/cg-dropdown.js.html b/documentation/cg-dropdown.js.html
index 0cdaf02..926a887 100644
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>JSDoc: Source: cg-dropdown.js</title>
+    <title>JSDoc: Source: cg-select.js</title>
 
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
@@ -15,7 +15,7 @@
 
   <body>
     <div id="main">
-      <h1 class="page-title">Source: cg-dropdown.js</h1>
+      <h1 class="page-title">Source: cg-select.js</h1>
 
       <section>
         <article>
@@ -40,7 +40,7 @@
           /**
            * @class Описание класса DropDown
            * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
-           *@author Овсяников Максим
+           * @author Овсяников Максим
            */
           export class DropDown {
             /**
@@ -116,7 +116,9 @@
                 darkTheme: true/false,
                 searchMode: true/false,
                 closeOnSelect:  true/false,
-                lenguage: 'ru/en',
+                nativeSelectMode: true/false,
+                listDisplayMode: true/false,
+                language: 'ru/en',
                 styles: {
                   head: {
                     background: '...',
@@ -238,11 +240,14 @@
               }
           
               const select = this.#element.querySelector('.cg-select');
+              const nativeSelect = this.#element.querySelector('.nativeSelect');
               if (value === true) {
                 this.#element.setAttribute('disabled', true);
+                nativeSelect.setAttribute('disabled', true);
                 select.classList.add('disabled');
               } else {
                 this.#element.removeAttribute('disabled');
+                nativeSelect.removeAttribute('disabled');
                 select.classList.remove('disabled');
               }
             }
@@ -255,11 +260,18 @@
              * @method buttonControl
              */
             buttonControl(button, method) {
+              const {listDisplayMode} = this.#options;
+          
+          
+              if(listDisplayMode === true){
+                return
+              }
+          
               this.btn = button;
               button.addEventListener('click', () => {
-                if (method === 'open') {
+                if (method.toLowerCase() === 'open') {
                   this.#open(true);
-                } else if (method === 'close') {
+                } else if (method.toLowerCase() === 'close') {
                   this.#close();
                 } else {
                   return;
@@ -269,14 +281,18 @@
           
             /**
              * Метод экземпляра класса DropDown
-             * @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
+             * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
              * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
-             * @method addLenguage
+             * @method addLanguage
              */
-            addLenguage(lenguage) {
-              const { placeholder, textInListSearch } = lenguage;
+            addLanguage(language) {
+              const { placeholder, textInListSearch, selectPlaceholder } = language;
               const { searchMode } = this.#options;
           
+              const select = this.#element.querySelector('.selected');
+              const textNodeSelect = document.createTextNode(selectPlaceholder);
+              select.appendChild(textNodeSelect);
+          
               if (searchMode &amp;&amp; searchMode == true) {
                 const search = this.#element.querySelector('.inputSearch');
                 const textNoRezult = this.#element.querySelector('.noRezult');
@@ -323,9 +339,10 @@
           
               const elem = document.querySelector(options.selector);
           
-              if (!elem) {
-                throw new Error(`Element with selector ${options.selector}`);
-              }
+              //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
+              // if (!elem) {
+              //   throw new Error(`Element with selector ${options.selector}`);
+              // }
           
               this.#element = elem;
           
@@ -368,14 +385,18 @@
              * @protected
              */
             #initSelected(select) {
-              const { styles, selected, placeholder, lable } = this.#options;
+              const { styles, selected, placeholder, lable, language } = this.#options;
           
               if (selected) {
                 createSelected(this.#element, selected);
               } else if (placeholder) {
                 createSelected(this.#element, placeholder);
               } else {
-                createSelected(this.#element, 'Select...');
+                if (language &amp;&amp; language === 'ru') {
+                  createSelected(this.#element, ru.selectPlaceholder);
+                } else {
+                  createSelected(this.#element, en.selectPlaceholder);
+                }
               }
           
               if (select) {
@@ -405,7 +426,13 @@
              * @description Рендер елементов в селекте.
              */
             #render(select) {
-              const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options;
+              const { 
+                styles, multiselect, 
+                searchMode, multiselectTag, 
+                darkTheme, language, 
+                nativeSelectMode, listDisplayMode 
+              } = this.#options;
+          
               const random = Math.random().toString(36).substring(2, 10);
           
               if (select || (select &amp;&amp; styles)) {
@@ -422,12 +449,13 @@
               this.random = random;
           
               if (searchMode) {
-                if (lenguage === 'ru') {
+                if (language === 'ru') {
                   inputSearch = createInputSearch(random, ru.placeholder);
                 } else {
                   inputSearch = createInputSearch(random, en.placeholder);
                 }
-          
+                const { search } = styles;
+                customStylesFormat(search, inputSearch);
                 ulList.appendChild(inputSearch);
               }
           
@@ -491,9 +519,19 @@
                 this.#checkTheme();
               }
           
+              if(nativeSelectMode === true){
+                this.#selectMode(nativeSelectMode);
+              }
+          
+          
+          
               this.#list = this.#element.querySelector('.list');
               this.#caret = this.#element.querySelector('.caret');
           
+              if(listDisplayMode === true){
+                this.#displayMode(listDisplayMode)
+              }
+          
               this.#addOptionsBehaviour();
             }
           
@@ -751,14 +789,14 @@
              * @method #searchMode
              */
             #searchMode(random) {
-              const { lenguage } = this.#options;
+              const { language } = this.#options;
           
               const input = this.#element.querySelector(`#searchSelect-${random}`);
               const searchSelect = this.#element.querySelectorAll('.list__item');
               const result = document.createElement('p');
           
               let textNode = '';
-              if (lenguage === 'ru') {
+              if (language &amp;&amp; language === 'ru') {
                 textNode = document.createTextNode(`${ru.textInListSearch}`);
               } else {
                 textNode = document.createTextNode(`${en.textInListSearch}`);
@@ -774,17 +812,22 @@
               });
           
               input.oninput = function () {
-                let val = this.value.trim();
+                let valueSearch = this.value.trim().toLowerCase();
+                let anyMatch = false;
           
-                if (val != '') {
+                if (valueSearch != '') {
                   searchSelect.forEach((elem) => {
-                    if (elem.innerText.search(val) == -1) {
+                    let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
+                    anyMatch = anyMatch || isMatching;
+          
+                    if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
                       elem.classList.add('displayHide');
-                      result.classList.remove('displayHide');
                     } else {
                       elem.classList.remove('displayHide');
                     }
                   });
+          
+                  result.classList.toggle('displayHide', anyMatch);
                 } else {
                   searchSelect.forEach((elem) => {
                     elem.classList.remove('displayHide');
@@ -838,6 +881,64 @@
                 }
               });
             }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
+             * @description Изменяет отображение селекта на мобильных устройствах
+             * @method #selectMode
+             */
+            #selectMode(nativeSelectMode){
+              let win = window.outerWidth;
+          
+              if(nativeSelectMode === true){
+                const select = this.#element.querySelector('.cg-select');
+                const list = this.#element.querySelector('.list');
+                const nativeSelect = this.#element.querySelector('.nativeSelect')
+          
+                if(win &lt; 576){
+                  select.classList.add('displayHide');
+                  list.classList.add('displayHide');
+                  nativeSelect.classList.add('nativeSelectActive');       
+                } else if( win > 576){
+                  select.classList.remove('displayHide');
+                  list.classList.remove('displayHide');
+                  nativeSelect.classList.remove('nativeSelectActive');
+                  nativeSelect.classList.add('displayHide');
+                }
+              } else{
+                return
+              }
+          
+            }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+             * @description Изменяет отображение листа с выбором в виде модального окна.
+             * @method #displayMode
+             */
+            #displayMode(listDisplayMode){
+              if(listDisplayMode === true){
+                const modal = document.createElement('div');
+                const body = document.querySelector('body')
+                const list = this.#list;
+            
+                modal.appendChild(list);
+                this.#element.appendChild(modal);
+          
+                this.#element.addEventListener('click', () => {
+                  modal.classList.toggle('modal');
+                  list.classList.toggle('listModal');
+                  body.classList.toggle('overflowHide')
+                });
+              } else{
+                return
+              }
+          
+            }
           }
 </code></pre>
         </article>
@@ -850,10 +951,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -874,10 +972,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html b/documentation/constructor.html
similarity index 78%
rename from documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
rename to documentation/constructor.html
index 4bf47c8..b45b164 100644
--- a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
+++ b/documentation/constructor.html
@@ -79,29 +79,31 @@
             <h5>Example</h5>
 
             <pre class="prettyprint"><code>options = {
-      selector: 'Уникальный селектор',
-      selected: 'Выбранный элемент',
-      placeholder: '...',
-      items: [string|number|object],
-      darkTheme: true/false,
-      searchMode: true/false,
-      closeOnSelect:  true/false,
-      lenguage: 'ru/en',
-      styles: {
-        head: {
-          background: '...',
-        },
-        list: {...},
-        chips: {...},
-        caret: {...},
-        placeholder: {...},
-        lable: {..},
-      },
-      event: '...',
-      url: 'http/...',
-      multiselect: true/false,
-      multiselectTag: true/false,
-}</code></pre>
+              selector: 'Уникальный селектор',
+              selected: 'Выбранный элемент',
+              placeholder: '...',
+              items: [string|number|object],
+              darkTheme: true/false,
+              searchMode: true/false,
+              closeOnSelect:  true/false,
+              nativeSelectMode: true/false,
+              listDisplayMode: true/false,
+              language: 'ru/en',
+              styles: {
+                head: {
+                  background: '...',
+                },
+                list: {...},
+                chips: {...},
+                caret: {...},
+                placeholder: {...},
+                lable: {..},
+              },
+              event: '...',
+              url: 'http/...',
+              multiselect: true/false,
+              multiselectTag: true/false,
+        }</code></pre>
           </div>
         </article>
 
@@ -112,28 +114,34 @@
               <strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
               который задаеться при создании селекта.
             </li>
+
             <li>
               <strong>selected</strong> - необязательный параметр, в который передается элемент
               который будет выбран изначально в селекте.
             </li>
+
             <li>
               <strong>placeholder</strong> - необязательный параметр, в который передается текст
               плейсхолдера селекта.
             </li>
+
             <li>
               <strong>items</strong> -
               <strong
                 >*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
               >, это массив елементов, которые будут отображаться в селекте при выборе.
             </li>
+
             <li>
               <strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
               светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
             </li>
+
             <li>
               <strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
               по элеметам селекта.
             </li>
+
             <li>
               <strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
               поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
@@ -142,16 +150,33 @@
             </li>
 
             <li>
-              <strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
+              <strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
+              тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
+              десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
+              отображаться нативный селект из HTML 5;
+            </li>
+
+            <li>
+              <strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
+              опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
+              с выбором опции будет отображаться как модальное окно.
+            </li>
+
+            <li>
+              <strong>language</strong> - необязательный параметр, отвечающий за локализацию
               некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
-              локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
+              локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
               передав туда объект с полями для текста.
             </li>
+
             <li>
               <strong>event</strong> - необязательный параметр, который отвечает за поведения
               селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
               открываться при наведении.
             </li>
+
             <li>
               <strong>url</strong> -
               <strong
@@ -160,16 +185,19 @@
               >
               htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
             </li>
+
             <li>
               <strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
               селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
               отрисовываются как обычный текст, через запятую.
             </li>
+
             <li>
               <strong>multiselectTag</strong> - необязательный параметр, который отвечает за
               поведения селекта, для него,
               <strong>***работает только в месте с подключением multiselect.</strong>
             </li>
+
             <li>
               <strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
               элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
@@ -186,10 +214,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -210,10 +235,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/create-element.js.html b/documentation/create-element.js.html
index 66cdeae..7352981 100644
--- a/documentation/create-element.js.html
+++ b/documentation/create-element.js.html
@@ -153,10 +153,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -177,10 +174,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/global.html b/documentation/global.html
index f768fe3..c89fe8d 100644
--- a/documentation/global.html
+++ b/documentation/global.html
@@ -158,6 +158,104 @@
             </dd>
           </dl>
 
+          <h4 class="name" id="displayMode">
+            <span class="type-signature">(protected) </span>#displayMode<span class="signature"
+              >(listDisplayMode)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            Изменяет отображение листа с выбором в виде модального окна.
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>listDisplayMode</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  параметр отвечающий за отображение выбора в виде модального окна.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
+                  <a href="cg-dropdown.js.html#line895">line 895</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="selectMode">
+            <span class="type-signature">(protected) </span>#selectMode<span class="signature"
+              >(nativeSelectMode)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Изменяет отображение селекта на мобильных устройствах</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>nativeSelectMode</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  параметр отвечающий за добавления нативного селекта.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
+                  <a href="cg-dropdown.js.html#line864">line 864</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
           <h4 class="name" id="initEvent">
             <span class="type-signature">(protected) </span>#initEvent<span class="signature"
               >()</span
@@ -440,7 +538,7 @@
           </dl>
 
           <h4 class="name" id="addLenguage">
-            <span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span
+            <span class="type-signature"></span>addLanguage<span class="signature">(language)</span
             ><span class="type-signature"></span>
           </h4>
 
@@ -464,7 +562,7 @@
 
             <tbody>
               <tr>
-                <td class="name"><code>lenguage</code></td>
+                <td class="name"><code>language</code></td>
 
                 <td class="type">
                   <span class="param-type">object</span>
@@ -758,7 +856,7 @@
             <dd class="tag-source">
               <ul class="dummy">
                 <li>
-                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
                   <a href="cg-dropdown.js.html#line173">line 173</a>
                 </li>
               </ul>
@@ -774,10 +872,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -798,10 +893,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/index.html b/documentation/index.html
index 6294523..d148f79 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -19,7 +19,7 @@
 
       <section>
         <h2>CG-SELECT</h2>
-        <a href="/src/page/index.html">-- Вернуться к примеру --</a>
+        <a href="/example/index.html">-- Вернуться к примеру --</a>
         <p>
           Этот компонент предлагает более гибкую настройку и использование селекта. Так же
           реализованны методы взаимодействия с селектом.
@@ -35,10 +35,7 @@
         </ul>
         <p>
           <strong>*Все настройки можно посмореть в вкладке</strong>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса</a
-          >
+          <a href="constructor.html">Конструктор класса</a>
         </p>
 
         <h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
@@ -59,10 +56,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -83,10 +77,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/module-Utils.html b/documentation/module-Utils.html
index 30caeb6..2f816c2 100644
--- a/documentation/module-Utils.html
+++ b/documentation/module-Utils.html
@@ -618,10 +618,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -642,10 +639,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/module-createElementChips.html b/documentation/module-createElementChips.html
index 735abcb..e12f9d7 100644
--- a/documentation/module-createElementChips.html
+++ b/documentation/module-createElementChips.html
@@ -260,10 +260,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -284,10 +281,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/documentation/utils.js.html b/documentation/utils.js.html
index e0aee0a..5870c80 100644
--- a/documentation/utils.js.html
+++ b/documentation/utils.js.html
@@ -257,10 +257,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
+          <a href="constructor.html">Конструктор класса DropDown</a>
         </li>
       </ul>
       <h3>Modules</h3>
@@ -281,10 +278,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>
diff --git a/src/page/example.js b/example/example.js
similarity index 72%
rename from src/page/example.js
rename to example/example.js
index 98c3da0..f807677 100644
--- a/src/page/example.js
+++ b/example/example.js
@@ -13,6 +13,14 @@ const codeFourth = document.getElementById('codeFourth');
 const fifthBtn = document.getElementById('fifth');
 const codeFifth = document.getElementById('codeFifth');
 
+const six = document.getElementById('six')
+const codeSix = document.getElementById('codeSix');
+
+
+const Native = document.getElementById('Native')
+const codeNative = document.getElementById('codeNative')
+
+
 firstBtn.addEventListener('click', () => {
     codeFirst.classList.toggle("active")
 })
@@ -32,3 +40,11 @@ fourthBtn.addEventListener('click', () => {
 fifthBtn.addEventListener('click', () => {
     codeFifth.classList.toggle("active")
 })
+
+six.addEventListener('click', () => {
+    codeSix.classList.toggle("active")
+})
+
+Native.addEventListener('click', () => {
+    codeNative.classList.toggle("active")
+})
\ No newline at end of file
diff --git a/src/page/example.scss b/example/example.scss
similarity index 93%
rename from src/page/example.scss
rename to example/example.scss
index b196547..b1bd873 100644
--- a/src/page/example.scss
+++ b/example/example.scss
@@ -87,7 +87,6 @@
 
 .content {
   margin-top: 15px;
-  // background-color: #6b6d76;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -113,7 +112,6 @@
   }
 
   &_submit {
-    //background-color: #2a2f3b;
     width: 200px;
     height: 35px;
     border-radius: 10px;
@@ -194,3 +192,21 @@ pre {
 .active {
   display: block;
 }
+
+@media (max-width: 576px) {
+  .container {
+    width: 95%;
+  }
+
+  .header {
+    margin-top: 15px;
+    h1 {
+      font-size: 32px;
+    }
+  }
+
+  .example-select_title {
+    font-size: 14px;
+    height: 40px;
+  }
+}
diff --git a/src/page/index.html b/example/index.html
similarity index 70%
rename from src/page/index.html
rename to example/index.html
index fe5a440..b36fe6f 100644
--- a/src/page/index.html
+++ b/example/index.html
@@ -4,8 +4,17 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      property="og:description"
+      content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="cg-select" />
+    <meta property="og:url" content="https://cg-select.itguild.info" />
+    <meta property="og:image" content="/src/images/logoCG.jpg" />
+
     <title>Cg-Select</title>
-    <link href="/src/page/example.scss" rel="stylesheet" />
+    <link href="example.scss" rel="stylesheet" />
   </head>
   <body class="body-example">
     <div class="container">
@@ -18,7 +27,7 @@
         <nav>
           <ul class="navlist">
             <li><a href="">Home</a></li>
-            <li><a href="/documentation/index.html">Documentation</a></li>
+            <li><a href="../documentation/index.html">Documentation</a></li>
           </ul>
         </nav>
       </header>
@@ -66,6 +75,93 @@
         </form>
       </div>
 
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 12px; color: white">
+            *При мобильном разрешении появляеться нативный селект.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_selectNative"></button>
+          </div>
+
+          <button type="button" class="check-code" id="Native">Посмотреть код</button>
+          <code id="codeNative">
+            <pre>
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+                selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                nativeSelectMode: <span class="code__keyword">true,</span>
+                items: [
+                  <span class="code__string">'BMW',</span>
+                  {
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
+                    value: 1,
+                  },
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'Ferari',</span> 
+                ],
+                styles: {
+                  head: {
+                    width: <span class="code__string">'830px',</span> 
+                  },
+                  list: {
+                    width: <span class="code__string">'824px',</span> 
+                  },
+                },
+              });
+            </pre>
+          </code>
+        </form>
+      </div>
+
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 12px; color: white">
+            *При использовании данного метода лист с выбором появляеться как модальное окно.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
+          </div>
+
+          <button type="button" class="check-code" id="six">Посмотреть код</button>
+
+          <code id="codeSix">
+            <pre>
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+                selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                listDisplayMode: <span class="code__keyword">true,</span>
+                items: [
+                  <span class="code__string">'BMW',</span>
+                  {
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
+                    value: 1,
+                  },
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'Ferari',</span> 
+                ],
+                styles: {
+                  head: {
+                    width: <span class="code__string">'830px',</span> 
+                  },
+                  list: {
+                    width: <span class="code__string">'824px',</span> 
+                  },
+                },
+              });
+            </pre>
+          </code>
+        </form>
+      </div>
+
       <div class="example-select">
         <h1 class="example-select_title">Селект с данными с URL</h1>
         <div class="layout-select">
@@ -218,7 +314,7 @@
         <h1 class="example-select_title">Функция disabled</h1>
 
         <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
-        <label for="checkboxDisable">Вы согласны на обработку данных</label>
+        <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
 
         <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
diff --git a/src/page/index.js b/example/index.js
similarity index 79%
rename from src/page/index.js
rename to example/index.js
index c1a5fc6..97649f8 100644
--- a/src/page/index.js
+++ b/example/index.js
@@ -27,12 +27,59 @@ const dropdown = new DropDown({
   },
 });
 
-// const ger = {
-//   placeholder: 'searcH????',
-//   textInListSearch: 'None',
-// };
+// ------------------------------NativeSelect-----------------------
+const dropdownNativeSelect = new DropDown({
+  selector: '.cg-dropdown_selectNative',
+  placeholder: 'Выберите авто',
+  nativeSelectMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+    'Kamaz',
+    'Ural'
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+});
 
-// dropdown.addLenguage(ger);
+// ------------------------------listDisplayMode--------------------
+const dropdownlistDisplayMode = new DropDown({
+  selector: '.cg-dropdown_listDisplayMode',
+  placeholder: 'Выберите авто',
+  listDisplayMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+});
 
 // ------------------------------URL--------------------
 const dropdown3 = new DropDown({
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..5f6d2ca
--- /dev/null
+++ b/index.js
@@ -0,0 +1,4 @@
+import { DropDown } from './src/cg-select';
+
+
+export default DropDown;
diff --git a/package-lock.json b/package-lock.json
index 0b1c114..5d17e5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cg-select",
-  "version": "0.1.14",
+  "version": "0.1.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cg-select",
-      "version": "0.1.14",
+      "version": "0.1.17",
       "license": "ISC",
       "dependencies": {
         "@parcel/optimizer-css": "^2.8.0",
@@ -14,6 +14,7 @@
       },
       "devDependencies": {
         "@parcel/transformer-sass": "^2.7.0",
+        "jsdoc": "^4.0.0",
         "parcel": "^2.7.0",
         "prettier": "^2.7.1"
       }
@@ -115,6 +116,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/parser": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz",
+      "integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -173,6 +186,18 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@jsdoc/salty": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.2.tgz",
+      "integrity": "sha512-A1FrVnc7L9qI2gUGsfN0trTiJNK72Y0CL/VAyrmYEmeKI3pnHDawP64CEev31XLyAAOx2xmDo3tbadPxC0CSbw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=v12.0.0"
+      }
+    },
     "node_modules/@lezer/common": {
       "version": "0.15.12",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
@@ -774,6 +799,304 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.2.tgz",
+      "integrity": "sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg==",
+      "peer": true,
+      "dependencies": {
+        "@mischnic/json-sourcemap": "^0.1.0",
+        "@parcel/cache": "2.8.2",
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/events": "2.8.2",
+        "@parcel/fs": "2.8.2",
+        "@parcel/graph": "2.8.2",
+        "@parcel/hash": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/package-manager": "2.8.2",
+        "@parcel/plugin": "2.8.2",
+        "@parcel/source-map": "^2.1.1",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "@parcel/workers": "2.8.2",
+        "abortcontroller-polyfill": "^1.1.9",
+        "base-x": "^3.0.8",
+        "browserslist": "^4.6.6",
+        "clone": "^2.1.1",
+        "dotenv": "^7.0.0",
+        "dotenv-expand": "^5.1.0",
+        "json5": "^2.2.0",
+        "msgpackr": "^1.5.4",
+        "nullthrows": "^1.1.1",
+        "semver": "^5.7.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/cache": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.8.2.tgz",
+      "integrity": "sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/fs": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "lmdb": "2.5.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/codeframe": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.8.2.tgz",
+      "integrity": "sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ==",
+      "peer": true,
+      "dependencies": {
+        "chalk": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/diagnostic": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.2.tgz",
+      "integrity": "sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A==",
+      "peer": true,
+      "dependencies": {
+        "@mischnic/json-sourcemap": "^0.1.0",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/events": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.8.2.tgz",
+      "integrity": "sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/fs": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.8.2.tgz",
+      "integrity": "sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/fs-search": "2.8.2",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "@parcel/watcher": "^2.0.7",
+        "@parcel/workers": "2.8.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/fs-search": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.8.2.tgz",
+      "integrity": "sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw==",
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/hash": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.2.tgz",
+      "integrity": "sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ==",
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "xxhash-wasm": "^0.4.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/logger": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.8.2.tgz",
+      "integrity": "sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/events": "2.8.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/markdown-ansi": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz",
+      "integrity": "sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ==",
+      "peer": true,
+      "dependencies": {
+        "chalk": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/package-manager": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.8.2.tgz",
+      "integrity": "sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/fs": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "@parcel/workers": "2.8.2",
+        "semver": "^5.7.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/plugin": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.8.2.tgz",
+      "integrity": "sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/types": "2.8.2"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/types": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.8.2.tgz",
+      "integrity": "sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/cache": "2.8.2",
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/fs": "2.8.2",
+        "@parcel/package-manager": "2.8.2",
+        "@parcel/source-map": "^2.1.1",
+        "@parcel/workers": "2.8.2",
+        "utility-types": "^3.10.0"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/utils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.8.2.tgz",
+      "integrity": "sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/codeframe": "2.8.2",
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/hash": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/markdown-ansi": "2.8.2",
+        "@parcel/source-map": "^2.1.1",
+        "chalk": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/core/node_modules/@parcel/workers": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.8.2.tgz",
+      "integrity": "sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw==",
+      "peer": true,
+      "dependencies": {
+        "@parcel/diagnostic": "2.8.2",
+        "@parcel/logger": "2.8.2",
+        "@parcel/types": "2.8.2",
+        "@parcel/utils": "2.8.2",
+        "chrome-trace-event": "^1.0.2",
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "peerDependencies": {
+        "@parcel/core": "^2.8.2"
+      }
+    },
     "node_modules/@parcel/optimizer-css/node_modules/@parcel/diagnostic": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -839,6 +1162,22 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@parcel/optimizer-css/node_modules/@parcel/graph": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.2.tgz",
+      "integrity": "sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ==",
+      "peer": true,
+      "dependencies": {
+        "nullthrows": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@parcel/optimizer-css/node_modules/@parcel/hash": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -1713,6 +2052,28 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
+      "dev": true
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+      "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "dev": true
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -1722,8 +2083,7 @@
     "node_modules/abortcontroller-polyfill": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
-      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
-      "dev": true
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
     },
     "node_modules/acorn": {
       "version": "8.8.0",
@@ -1764,6 +2124,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -1800,7 +2166,6 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
       "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -1814,6 +2179,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -1898,6 +2269,18 @@
         }
       ]
     },
+    "node_modules/catharsis": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
+      "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.15"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1952,7 +2335,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
       "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-      "dev": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -2140,7 +2522,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
       "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2148,8 +2529,7 @@
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
-      "dev": true
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.251",
@@ -2565,6 +2945,53 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "node_modules/js2xmlparser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
+      "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
+      "dev": true,
+      "dependencies": {
+        "xmlcreate": "^2.0.4"
+      }
+    },
+    "node_modules/jsdoc": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
+      "integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.9.4",
+        "@jsdoc/salty": "^0.2.1",
+        "@types/markdown-it": "^12.2.3",
+        "bluebird": "^3.7.2",
+        "catharsis": "^0.9.0",
+        "escape-string-regexp": "^2.0.0",
+        "js2xmlparser": "^4.0.2",
+        "klaw": "^3.0.0",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "marked": "^4.0.10",
+        "mkdirp": "^1.0.4",
+        "requizzle": "^0.2.3",
+        "strip-json-comments": "^3.1.0",
+        "underscore": "~1.13.2"
+      },
+      "bin": {
+        "jsdoc": "jsdoc.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/jsdoc/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -2590,6 +3017,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
@@ -2773,6 +3209,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dev": true,
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/lmdb": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
@@ -2837,12 +3282,65 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it-anchor": {
+      "version": "8.6.6",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
+      "integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/marked": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
+      "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "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/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2854,6 +3352,18 @@
         "node": "*"
       }
     },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/msgpackr": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
@@ -3238,6 +3748,15 @@
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
       "dev": true
     },
+    "node_modules/requizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
+      "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3251,7 +3770,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3327,6 +3845,18 @@
       "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/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-outer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@@ -3453,6 +3983,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
+    "node_modules/underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
     "node_modules/universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -3510,6 +4052,12 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/xmlcreate": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
+      "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==",
+      "dev": true
+    },
     "node_modules/xxhash-wasm": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",
@@ -3604,6 +4152,12 @@
         }
       }
     },
+    "@babel/parser": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.7.tgz",
+      "integrity": "sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==",
+      "dev": true
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -3653,6 +4207,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@jsdoc/salty": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.2.tgz",
+      "integrity": "sha512-A1FrVnc7L9qI2gUGsfN0trTiJNK72Y0CL/VAyrmYEmeKI3pnHDawP64CEev31XLyAAOx2xmDo3tbadPxC0CSbw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "@lezer/common": {
       "version": "0.15.12",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-0.15.12.tgz",
@@ -4020,6 +4583,196 @@
             "chalk": "^4.1.0"
           }
         },
+        "@parcel/core": {
+          "version": "2.8.2",
+          "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.8.2.tgz",
+          "integrity": "sha512-ZGuq6p+Lzx6fgufaVsuOBwgpU3hgskTvIDIMdIDi9gOZyhGPK7U2srXdX+VYUL5ZSGbX04/P6QlB9FMAXK+nEg==",
+          "peer": true,
+          "requires": {
+            "@mischnic/json-sourcemap": "^0.1.0",
+            "@parcel/cache": "2.8.2",
+            "@parcel/diagnostic": "2.8.2",
+            "@parcel/events": "2.8.2",
+            "@parcel/fs": "2.8.2",
+            "@parcel/graph": "2.8.2",
+            "@parcel/hash": "2.8.2",
+            "@parcel/logger": "2.8.2",
+            "@parcel/package-manager": "2.8.2",
+            "@parcel/plugin": "2.8.2",
+            "@parcel/source-map": "^2.1.1",
+            "@parcel/types": "2.8.2",
+            "@parcel/utils": "2.8.2",
+            "@parcel/workers": "2.8.2",
+            "abortcontroller-polyfill": "^1.1.9",
+            "base-x": "^3.0.8",
+            "browserslist": "^4.6.6",
+            "clone": "^2.1.1",
+            "dotenv": "^7.0.0",
+            "dotenv-expand": "^5.1.0",
+            "json5": "^2.2.0",
+            "msgpackr": "^1.5.4",
+            "nullthrows": "^1.1.1",
+            "semver": "^5.7.1"
+          },
+          "dependencies": {
+            "@parcel/cache": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.8.2.tgz",
+              "integrity": "sha512-kiyoOgh1RXp5qp+wlb8Pi/Z7o9D82Oj5RlHnKSAauyR7jgnI8Vq8JTeBmlLqrf+kHxcDcp2p86hidSeANhlQNg==",
+              "peer": true,
+              "requires": {
+                "@parcel/fs": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "lmdb": "2.5.2"
+              }
+            },
+            "@parcel/codeframe": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.8.2.tgz",
+              "integrity": "sha512-U2GT9gq1Zs3Gr83j8JIs10bLbGOHFl57Y8D57nrdR05F4iilV/UR6K7jkhdoiFc9WiHh3ewvrko5+pSdAVFPgQ==",
+              "peer": true,
+              "requires": {
+                "chalk": "^4.1.0"
+              }
+            },
+            "@parcel/diagnostic": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.2.tgz",
+              "integrity": "sha512-tGSMwM2rSYLjJW0fCd9gb3tNjfCX/83PZ10/5u2E33UZVkk8OIHsQmsrtq2H2g4oQL3rFxkfEx6nGPDGHwlx7A==",
+              "peer": true,
+              "requires": {
+                "@mischnic/json-sourcemap": "^0.1.0",
+                "nullthrows": "^1.1.1"
+              }
+            },
+            "@parcel/events": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.8.2.tgz",
+              "integrity": "sha512-o5etrsKm16y8iRPnjtEBNy4lD0WAigD66yt/RZl9Rx0vPVDly/63Rr9+BrXWVW7bJ7x0S0VVpWW4j3f/qZOsXg==",
+              "peer": true
+            },
+            "@parcel/fs": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.8.2.tgz",
+              "integrity": "sha512-aN8znbMndSqn1xwZEmMblzqmJsxcExv2jKLl/a9RUHAP7LaPYcPZIykDL3YwGCiKTCzjmRpXnNoyosjFFeBaHA==",
+              "peer": true,
+              "requires": {
+                "@parcel/fs-search": "2.8.2",
+                "@parcel/types": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "@parcel/watcher": "^2.0.7",
+                "@parcel/workers": "2.8.2"
+              }
+            },
+            "@parcel/fs-search": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/fs-search/-/fs-search-2.8.2.tgz",
+              "integrity": "sha512-ovQnupRm/MoE/tbgH0Ivknk0QYenXAewjcog+T5umDmUlTmnIRZjURrgDf5Xtw8T/CD5Xv+HmIXpJ9Ez/LzJpw==",
+              "peer": true,
+              "requires": {
+                "detect-libc": "^1.0.3"
+              }
+            },
+            "@parcel/hash": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.2.tgz",
+              "integrity": "sha512-NBnP8Hu0xvAqAfZXRaMM66i8nJyxpKS86BbhwkbgTGbwO1OY87GERliHeREJfcER0E0ZzwNow7MNR8ZDm6IvJQ==",
+              "peer": true,
+              "requires": {
+                "detect-libc": "^1.0.3",
+                "xxhash-wasm": "^0.4.2"
+              }
+            },
+            "@parcel/logger": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.8.2.tgz",
+              "integrity": "sha512-zlhK6QHxfFJMlVJxxcCw0xxBDrYPFPOhMxSD6p6b0z9Yct1l3NdpmfabgjKX8wnZmHokFsil6daleM+M80n2Ew==",
+              "peer": true,
+              "requires": {
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/events": "2.8.2"
+              }
+            },
+            "@parcel/markdown-ansi": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.8.2.tgz",
+              "integrity": "sha512-5y29TXgRgG0ybuXaDsDk4Aofg/nDUeAAyVl9/toYCDDhxpQV4yZt8WNPu4PaNYKGLuNgXwsmz+ryZQHGmfbAIQ==",
+              "peer": true,
+              "requires": {
+                "chalk": "^4.1.0"
+              }
+            },
+            "@parcel/package-manager": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.8.2.tgz",
+              "integrity": "sha512-hx4Imi0yhsSS0aNZkEANPYNNKqBuR63EUNWSxMyHh4ZOvbHoOXnMn1ySGdx6v0oi9HvKymNsLMQ1T5CuI4l4Bw==",
+              "peer": true,
+              "requires": {
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/fs": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/types": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "@parcel/workers": "2.8.2",
+                "semver": "^5.7.1"
+              }
+            },
+            "@parcel/plugin": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.8.2.tgz",
+              "integrity": "sha512-YG7TWfKsoNm72jbz3b3TLec0qJHVkuAWSzGzowdIhX37cP1kRfp6BU2VcH+qYPP/KYJLzhcZa9n3by147mGcxw==",
+              "peer": true,
+              "requires": {
+                "@parcel/types": "2.8.2"
+              }
+            },
+            "@parcel/types": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.8.2.tgz",
+              "integrity": "sha512-HAYhokWxM10raIhqaYj9VR9eAvJ+xP2sNfQ1IcQybHpq3qblcBe/4jDeuUpwIyKeQ4gorp7xY+q8KDoR20j43w==",
+              "peer": true,
+              "requires": {
+                "@parcel/cache": "2.8.2",
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/fs": "2.8.2",
+                "@parcel/package-manager": "2.8.2",
+                "@parcel/source-map": "^2.1.1",
+                "@parcel/workers": "2.8.2",
+                "utility-types": "^3.10.0"
+              }
+            },
+            "@parcel/utils": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.8.2.tgz",
+              "integrity": "sha512-Ufax7wZxC9FNsUpR0EU7Z22LEY/q9jjsDTwswctCdfpWb7TE/NudOfM9myycfRvwBVEYN50lPbkt1QltEVnXQQ==",
+              "peer": true,
+              "requires": {
+                "@parcel/codeframe": "2.8.2",
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/hash": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/markdown-ansi": "2.8.2",
+                "@parcel/source-map": "^2.1.1",
+                "chalk": "^4.1.0"
+              }
+            },
+            "@parcel/workers": {
+              "version": "2.8.2",
+              "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.8.2.tgz",
+              "integrity": "sha512-Eg6CofIrJSNBa2fjXwvnzVLPKwR/6fkfQTFAm3Jl+4JYLVknBtTSFzQNp/Fa+HUEG889H9ucTk2CBi/fVPBAFw==",
+              "peer": true,
+              "requires": {
+                "@parcel/diagnostic": "2.8.2",
+                "@parcel/logger": "2.8.2",
+                "@parcel/types": "2.8.2",
+                "@parcel/utils": "2.8.2",
+                "chrome-trace-event": "^1.0.2",
+                "nullthrows": "^1.1.1"
+              }
+            }
+          }
+        },
         "@parcel/diagnostic": {
           "version": "2.8.0",
           "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.8.0.tgz",
@@ -4054,6 +4807,15 @@
             "detect-libc": "^1.0.3"
           }
         },
+        "@parcel/graph": {
+          "version": "2.8.2",
+          "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-2.8.2.tgz",
+          "integrity": "sha512-SLEvBQBgfkXgU4EBu30+CNanpuKjcNuEv/x8SwobCF0i3Rk+QKbe7T36bNR7727mao++2Ha69q93Dd9dTPw0kQ==",
+          "peer": true,
+          "requires": {
+            "nullthrows": "^1.1.1"
+          }
+        },
         "@parcel/hash": {
           "version": "2.8.0",
           "resolved": "https://registry.npmjs.org/@parcel/hash/-/hash-2.8.0.tgz",
@@ -4601,6 +5363,28 @@
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
       "dev": true
     },
+    "@types/linkify-it": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==",
+      "dev": true
+    },
+    "@types/markdown-it": {
+      "version": "12.2.3",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-12.2.3.tgz",
+      "integrity": "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==",
+      "dev": true,
+      "requires": {
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
+      }
+    },
+    "@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "dev": true
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -4610,8 +5394,7 @@
     "abortcontroller-polyfill": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.3.tgz",
-      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q==",
-      "dev": true
+      "integrity": "sha512-zetDJxd89y3X99Kvo4qFx8GKlt6GsvN3UcRZHwU6iFA/0KiOmhkTVhe8oRoTBiTVPZu09x3vCra47+w8Yz1+2Q=="
     },
     "acorn": {
       "version": "8.8.0",
@@ -4637,6 +5420,12 @@
         "picomatch": "^2.0.4"
       }
     },
+    "argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -4667,7 +5456,6 @@
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
       "integrity": "sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -4678,6 +5466,12 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+      "dev": true
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4730,6 +5524,15 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001400.tgz",
       "integrity": "sha512-Mv659Hn65Z4LgZdJ7ge5JTVbE3rqbJaaXgW5LEI9/tOaXclfIZ8DW7D7FCWWWmWiiPS7AC48S8kf3DApSxQdgA=="
     },
+    "catharsis": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz",
+      "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4763,8 +5566,7 @@
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
-      "dev": true
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
     },
     "color-convert": {
       "version": "2.0.1",
@@ -4899,14 +5701,12 @@
     "dotenv": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz",
-      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==",
-      "dev": true
+      "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g=="
     },
     "dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
-      "dev": true
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
     },
     "electron-to-chromium": {
       "version": "1.4.251",
@@ -5189,6 +5989,46 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "dev": true
     },
+    "js2xmlparser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz",
+      "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==",
+      "dev": true,
+      "requires": {
+        "xmlcreate": "^2.0.4"
+      }
+    },
+    "jsdoc": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.0.tgz",
+      "integrity": "sha512-tzTgkklbWKrlaQL2+e3NNgLcZu3NaK2vsHRx7tyHQ+H5jcB9Gx0txSd2eJWlMC/xU1+7LQu4s58Ry0RkuaEQVg==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.9.4",
+        "@jsdoc/salty": "^0.2.1",
+        "@types/markdown-it": "^12.2.3",
+        "bluebird": "^3.7.2",
+        "catharsis": "^0.9.0",
+        "escape-string-regexp": "^2.0.0",
+        "js2xmlparser": "^4.0.2",
+        "klaw": "^3.0.0",
+        "markdown-it": "^12.3.2",
+        "markdown-it-anchor": "^8.4.1",
+        "marked": "^4.0.10",
+        "mkdirp": "^1.0.4",
+        "requizzle": "^0.2.3",
+        "strip-json-comments": "^3.1.0",
+        "underscore": "~1.13.2"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+          "dev": true
+        }
+      }
+    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -5208,6 +6048,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "klaw": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
+      "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
     "lightningcss": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.16.1.tgz",
@@ -5278,6 +6127,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "lmdb": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-2.5.2.tgz",
@@ -5331,12 +6189,52 @@
         }
       }
     },
+    "markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+          "dev": true
+        }
+      }
+    },
+    "markdown-it-anchor": {
+      "version": "8.6.6",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.6.tgz",
+      "integrity": "sha512-jRW30YGywD2ESXDc+l17AiritL0uVaSnWsb26f+68qaW9zgbIIr1f4v2Nsvc0+s0Z2N3uX6t/yAw7BwCQ1wMsA==",
+      "dev": true,
+      "requires": {}
+    },
+    "marked": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.2.5.tgz",
+      "integrity": "sha512-jPueVhumq7idETHkb203WDD4fMA3yV9emQ5vLwop58lu8bTclMghBWcYAavlDqIEMaisADinV1TooIFCfqOsYQ==",
+      "dev": true
+    },
     "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
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5345,6 +6243,12 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true
+    },
     "msgpackr": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.3.tgz",
@@ -5621,6 +6525,15 @@
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
       "dev": true
     },
+    "requizzle": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz",
+      "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -5630,8 +6543,7 @@
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
     "sass": {
       "version": "1.54.9",
@@ -5677,6 +6589,12 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
     "strip-outer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
@@ -5769,6 +6687,18 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
+      "dev": true
+    },
+    "underscore": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
+      "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
+      "dev": true
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -5804,6 +6734,12 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "xmlcreate": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz",
+      "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==",
+      "dev": true
+    },
     "xxhash-wasm": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz",
diff --git a/package.json b/package.json
index 78e8c21..a82e8e5 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,16 @@
 {
   "name": "cg-select",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
     "url": "https://github.com/apuc/"
   },
   "homepage": "https://cg-select.itguild.info",
+  "main": "dist/index.js",
   "scripts": {
-    "start": "parcel src/page/index.html -p 4500 --open ",
-    "build": "parcel build ./src/page/index.html",
+    "start": "parcel example/index.html -p 4500 --open ",
+    "build": "parcel build index.js",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"
   },
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.7.0",
+    "jsdoc": "^4.0.0",
     "parcel": "^2.7.0",
     "prettier": "^2.7.1"
   },
diff --git a/src/cg-select.js b/src/cg-select.js
index f1ffe59..a9ead64 100644
--- a/src/cg-select.js
+++ b/src/cg-select.js
@@ -95,6 +95,8 @@ export class DropDown {
       darkTheme: true/false,
       searchMode: true/false,
       closeOnSelect:  true/false,
+      nativeSelectMode: true/false,
+      listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
@@ -237,11 +239,18 @@ export class DropDown {
    * @method buttonControl
    */
   buttonControl(button, method) {
+    const {listDisplayMode} = this.#options;
+
+
+    if(listDisplayMode === true){
+      return
+    }
+
     this.btn = button;
     button.addEventListener('click', () => {
-      if (method === 'open') {
+      if (method.toLowerCase() === 'open') {
         this.#open(true);
-      } else if (method === 'close') {
+      } else if (method.toLowerCase() === 'close') {
         this.#close();
       } else {
         return;
@@ -396,7 +405,13 @@ export class DropDown {
    * @description Рендер елементов в селекте.
    */
   #render(select) {
-    const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options;
+    const { 
+      styles, multiselect, 
+      searchMode, multiselectTag, 
+      darkTheme, language, 
+      nativeSelectMode, listDisplayMode 
+    } = this.#options;
+
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -483,9 +498,19 @@ export class DropDown {
       this.#checkTheme();
     }
 
+    if(nativeSelectMode === true){
+      this.#selectMode(nativeSelectMode);
+    }
+
+
+
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
+    if(listDisplayMode === true){
+      this.#displayMode(listDisplayMode)
+    }
+
     this.#addOptionsBehaviour();
   }
 
@@ -835,4 +860,62 @@ export class DropDown {
       }
     });
   }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
+   * @description Изменяет отображение селекта на мобильных устройствах
+   * @method #selectMode
+   */
+  #selectMode(nativeSelectMode){
+    let win = window.outerWidth;
+
+    if(nativeSelectMode === true){
+      const select = this.#element.querySelector('.cg-select');
+      const list = this.#element.querySelector('.list');
+      const nativeSelect = this.#element.querySelector('.nativeSelect')
+
+      if(win < 576){
+        select.classList.add('displayHide');
+        list.classList.add('displayHide');
+        nativeSelect.classList.add('nativeSelectActive');       
+      } else if( win > 576){
+        select.classList.remove('displayHide');
+        list.classList.remove('displayHide');
+        nativeSelect.classList.remove('nativeSelectActive');
+        nativeSelect.classList.add('displayHide');
+      }
+    } else{
+      return
+    }
+
+  }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+   * @description Изменяет отображение листа с выбором в виде модального окна.
+   * @method #displayMode
+   */
+  #displayMode(listDisplayMode){
+    if(listDisplayMode === true){
+      const modal = document.createElement('div');
+      const body = document.querySelector('body')
+      const list = this.#list;
+  
+      modal.appendChild(list);
+      this.#element.appendChild(modal);
+
+      this.#element.addEventListener('click', () => {
+        modal.classList.toggle('modal');
+        list.classList.toggle('listModal');
+        body.classList.toggle('overflowHide')
+      });
+    } else{
+      return
+    }
+
+  }
 }
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index e28803e..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { DropDown } from './cg-select';
-
-export default DropDown;
diff --git a/src/main.scss b/src/main.scss
index 5ff4e87..6a42d86 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -2,6 +2,7 @@
 @import './style/scrollbar.scss';
 @import './style/svgStyle.scss';
 @import './style/whiteTheme.scss';
+@import './style/displayMode.scss';
 
 // ----Layout----
 .cg-dropdown {
@@ -258,8 +259,11 @@ input[type='checkbox'] {
 .label {
   color: white;
 }
+
 //-------Behavior--------
+
 .active {
+  text-align: start;
   background: #8282822c;
 }
 
@@ -270,7 +274,7 @@ input[type='checkbox'] {
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
 
-  display: block;
+  display: block !important;
   opacity: 1;
 
   &_none {
@@ -289,7 +293,7 @@ input[type='checkbox'] {
 }
 
 .displayHide {
-  display: none;
+  display: none !important;
 }
 
 /*320px - 576px*/
@@ -299,23 +303,13 @@ input[type='checkbox'] {
     padding: 0;
   }
 
-  .container {
-    width: 90%;
-
-    .header {
-      h1 {
-        font-size: 32px;
-      }
-    }
-  }
-
   .list {
     width: 98% !important;
   }
 
-  // .open {
-  //   display: none !important;
-  // }
+  .listModal {
+    width: 88% !important;
+  }
 
   .cg-select {
     width: 100% !important;
diff --git a/src/style/displayMode.scss b/src/style/displayMode.scss
new file mode 100644
index 0000000..4053578
--- /dev/null
+++ b/src/style/displayMode.scss
@@ -0,0 +1,24 @@
+.modal {
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.45);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+
+  &_active {
+    display: flex;
+  }
+}
+
+.listModal {
+  position: fixed !important;
+  top: 150px;
+}
+
+.overflowHide {
+  overflow: hidden;
+}
diff --git a/src/style/nativeSelect.scss b/src/style/nativeSelect.scss
index c634533..596572c 100644
--- a/src/style/nativeSelect.scss
+++ b/src/style/nativeSelect.scss
@@ -18,19 +18,25 @@
   }
 }
 
-// @media (max-width: 576px) {
-//   .nativeSelect {
-//     display: block;
-//     min-width: 235px;
-//     height: 50px;
+.nativeSelectActive {
+  display: block;
+  min-width: 235px;
+  height: 50px;
+  border: none;
+  border-radius: 10px;
+}
 
-//     border: none;
-//     border-radius: 10px;
-//   }
+@media (max-width: 576px) {
+  .nativeSelect {
+    min-width: 235px;
+    height: 50px;
+    border: none;
+    border-radius: 10px;
+  }
 
-//   select[multiple='multiple'] {
-//     color: black;
-//     background-color: white;
-//     border-radius: 0;
-//   }
-// }
+  select[multiple='multiple'] {
+    color: black;
+    background-color: white;
+    border-radius: 0;
+  }
+}