From 44d9a6aff928c44f47a4712f88cc79d95b90b483 Mon Sep 17 00:00:00 2001
From: bellord13 <elife.by@gmail.com>
Date: Sat, 18 Nov 2023 02:26:27 +0300
Subject: [PATCH] fix

---
 tests/cheatSheet/button/buttons.php | 1226 +++++++++++++++++++
 tests/cheatSheet/field/checkbox.php |   32 +
 tests/cheatSheet/field/color.php    |   11 +
 tests/cheatSheet/field/file.php     |   16 +
 tests/cheatSheet/field/number.php   |   12 +
 tests/cheatSheet/field/radio.php    |   97 ++
 tests/cheatSheet/field/select.php   |   32 +
 tests/cheatSheet/field/tel.php      |   20 +
 tests/cheatSheet/field/text.php     |   41 +
 tests/cheatSheet/field/textarea.php |   24 +
 tests/cheatSheet/modals.php         |   92 ++
 tests/cheatSheet/popover.php        |   91 ++
 tests/cheatSheet/text.php           |    7 +
 tests/cheatSheet/tooltip.php        |   67 +
 tests/cheatsheetTest.php            | 1763 +--------------------------
 15 files changed, 1791 insertions(+), 1740 deletions(-)
 create mode 100644 tests/cheatSheet/button/buttons.php
 create mode 100644 tests/cheatSheet/field/checkbox.php
 create mode 100644 tests/cheatSheet/field/color.php
 create mode 100644 tests/cheatSheet/field/file.php
 create mode 100644 tests/cheatSheet/field/number.php
 create mode 100644 tests/cheatSheet/field/radio.php
 create mode 100644 tests/cheatSheet/field/select.php
 create mode 100644 tests/cheatSheet/field/tel.php
 create mode 100644 tests/cheatSheet/field/text.php
 create mode 100644 tests/cheatSheet/field/textarea.php
 create mode 100644 tests/cheatSheet/modals.php
 create mode 100644 tests/cheatSheet/popover.php
 create mode 100644 tests/cheatSheet/text.php
 create mode 100644 tests/cheatSheet/tooltip.php

diff --git a/tests/cheatSheet/button/buttons.php b/tests/cheatSheet/button/buttons.php
new file mode 100644
index 0000000..2974fa9
--- /dev/null
+++ b/tests/cheatSheet/button/buttons.php
@@ -0,0 +1,1226 @@
+<div class="flex-list" style="--col-count: 7;">
+    <div class="flex-list-item"></div>
+    <div class="flex-list-item">bordered</div>
+    <div class="flex-list-item">bordered radius</div>
+    <div class="flex-list-item">bordered round</div>
+    <div class="flex-list-item">material</div>
+    <div class="flex-list-item">material radius</div>
+    <div class="flex-list-item">material round</div>
+    <?
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'test ',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'test ',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'default',
+        'CLASS' => 'kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+    echo '<div class="flex-list-item">';
+
+
+
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'primary',
+        'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'secondary',
+        'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'error',
+        'CLASS' => ' kit-button--error kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--error kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'warning',
+        'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+
+
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'success',
+        'CLASS' => ' kit-button--success kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+
+
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success kit-button--bordered',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success kit-button--bordered kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success kit-button--bordered kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success kit-button--material',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success kit-button--material kit-button--radius',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';echo '<div class="flex-list-item">';
+    service()->templater()->render('kit:button', [
+        'DISABLED' => true,
+        'LABEL' => 'disabled',
+        'CLASS' => 'kit-button--success kit-button--material kit-button--round',
+        'ICON' => service()->templater()->get('kit:svg/star'),
+    ]);
+    echo '</div>';
+
+    /** ICON */
+
+    if(1){
+
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon test ',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon test ',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'default',
+            'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+        echo '<div class="flex-list-item">';
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'primary',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'secondary',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'error',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'warning',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+
+
+
+
+
+
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'success',
+            'CLASS' => 'kit-button--icon  kit-button--success kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+
+
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success kit-button--material',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--radius',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';echo '<div class="flex-list-item">';
+        service()->templater()->render('kit:button', [
+            'DISABLED' => true,
+            'LABEL' => 'disabled',
+            'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--round',
+            'ICON' => service()->templater()->get('kit:svg/star'),
+        ]);
+        echo '</div>';
+    }
+
+    ?>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/checkbox.php b/tests/cheatSheet/field/checkbox.php
new file mode 100644
index 0000000..cb114bd
--- /dev/null
+++ b/tests/cheatSheet/field/checkbox.php
@@ -0,0 +1,32 @@
+<div class="flex-list" style="--col-count: 3">
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'checkbox',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'agreement2',
+            'VALUE' => 'Y',
+            'CHECKED' => true,
+            'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-material',
+            'TYPE' => 'checkbox',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'agreement',
+            'VALUE' => 'Y',
+            'LABEL' => 'kit-field--check-mark-material',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-stroke',
+            'TYPE' => 'checkbox',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'agreement',
+            'VALUE' => 'Y',
+            'LABEL' => 'kit-field--check-mark-stroke',
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/color.php b/tests/cheatSheet/field/color.php
new file mode 100644
index 0000000..fd15d14
--- /dev/null
+++ b/tests/cheatSheet/field/color.php
@@ -0,0 +1,11 @@
+<div class="flex-list" style="--col-count: 3">
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'color',
+            'HINT' => 'color picker by xu-ui',
+            'NAME' => 'color',
+            'VALUE' => '#1a8cff',
+            'LABEL' => 'color',
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/file.php b/tests/cheatSheet/field/file.php
new file mode 100644
index 0000000..9a3c946
--- /dev/null
+++ b/tests/cheatSheet/field/file.php
@@ -0,0 +1,16 @@
+<div class="flex-list" style="--col-count: 3">
+    <div class="flex-list-item"><?
+        $inputFile = new \Wt\Core\Form\InputFile($fieldName = 'MULTIPLE_FIELD_INPUT_FILE');
+        $inputFile->multiple = true;
+        $inputFile->hint = 'Поле для ввода файлов';
+        $inputFile->render();
+        ?>
+    </div>
+    <div class="flex-list-item"><?
+        $inputFile = new \Wt\Core\Form\InputFile($fieldName = 'SINGLE_FIELD_INPUT_FILE');
+        $inputFile->multiple = false;
+        $inputFile->hint = 'Поле для ввода файлов';
+        $inputFile->render();
+        ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/number.php b/tests/cheatSheet/field/number.php
new file mode 100644
index 0000000..b20955c
--- /dev/null
+++ b/tests/cheatSheet/field/number.php
@@ -0,0 +1,12 @@
+<div class="flex-list" style="--col-count: 3">
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'number',
+            'HINT' => 'number',
+            'NAME' => 'number',
+            'VALUE' => '10',
+            'PLACEHOLDER' => 'number',
+            'LABEL' => 'number',
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/radio.php b/tests/cheatSheet/field/radio.php
new file mode 100644
index 0000000..1263b62
--- /dev/null
+++ b/tests/cheatSheet/field/radio.php
@@ -0,0 +1,97 @@
+<div class="flex-list" style="--col-count: 3">
+
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio',
+            'VALUE' => 'radio1',
+            'CHECKED' => true,
+            'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio',
+            'VALUE' => 'radio2',
+            'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio',
+            'VALUE' => 'radio3',
+            'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
+        ]); ?>
+    </div>
+
+
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-stroke',
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio-stroke',
+            'VALUE' => 'radio4',
+            'CHECKED' => true,
+            'LABEL' => 'kit-field--check-mark-stroke',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-stroke',
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio-stroke',
+            'VALUE' => 'radio5',
+            'LABEL' => 'kit-field--check-mark-stroke',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-stroke',
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio-stroke',
+            'VALUE' => 'radio6',
+            'LABEL' => 'kit-field--check-mark-stroke',
+        ]); ?>
+    </div>
+
+
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-material',
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio-material',
+            'VALUE' => 'radio7',
+            'CHECKED' => true,
+            'LABEL' => 'kit-field--check-mark-material',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-material',
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio-material',
+            'VALUE' => 'radio8',
+            'LABEL' => 'kit-field--check-mark-material',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'CLASS' => 'kit-field--check-mark-material',
+            'TYPE' => 'radio',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'radio-material',
+            'VALUE' => 'radio9',
+            'LABEL' => 'kit-field--check-mark-material',
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/select.php b/tests/cheatSheet/field/select.php
new file mode 100644
index 0000000..ba06567
--- /dev/null
+++ b/tests/cheatSheet/field/select.php
@@ -0,0 +1,32 @@
+<div class="flex-list" style="--col-count: 3">
+
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:select', [
+            'HINT' => 'text hint',
+            'NAME' => 'select',
+            'LABEL' => 'select',
+            'OPTIONS' => [
+                [
+                    'ID' => '1',
+                    'NAME' => 'Значение выпадающего списка 1',
+                ],
+                [
+                    'ID' => '2',
+                    'NAME' => 'Значение выпадающего списка 2',
+                ],
+                [
+                    'ID' => '3',
+                    'NAME' => 'Значение выпадающего списка 3',
+                ],
+                [
+                    'ID' => '4',
+                    'NAME' => 'Значение выпадающего списка 4',
+                ],
+                [
+                    'ID' => '5',
+                    'NAME' => 'Значение выпадающего списка 5',
+                ],
+            ]
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/tel.php b/tests/cheatSheet/field/tel.php
new file mode 100644
index 0000000..a2c6038
--- /dev/null
+++ b/tests/cheatSheet/field/tel.php
@@ -0,0 +1,20 @@
+<div class="flex-list" style="--col-count: 3">
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'tel',
+            'HINT' => 'phone',
+            'NAME' => 'phone',
+            'VALUE' => '+7800',
+            'LABEL' => 'phone',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'tel',
+            'HINT' => 'phone',
+            'NAME' => 'phone',
+            'VALUE' => '',
+            'LABEL' => 'phone',
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/text.php b/tests/cheatSheet/field/text.php
new file mode 100644
index 0000000..498ceb5
--- /dev/null
+++ b/tests/cheatSheet/field/text.php
@@ -0,0 +1,41 @@
+<div class="flex-list" style="--col-count: 3">
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'text',
+            'HINT' => 'time mask',
+            'NAME' => 'time_mask',
+            'VALUE' => '',
+            'PLACEHOLDER' => '',
+            'LABEL' => 'time mask',
+            'ATTR' => [
+                'data-mask' => '99:99'
+            ]
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'text',
+            'HINT' => 'text hint',
+            'NAME' => 'input_name',
+            'VALUE' => '10',
+            'PLACEHOLDER' => 'number',
+            'LABEL' => 'Test input',
+        ]); ?>
+    </div>
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:input', [
+            'TYPE' => 'text',
+            'HINT' => 'air-datepicker',
+            'NAME' => 'datepicker',
+            'VALUE' => '',
+            'PLACEHOLDER' => '',
+            'LABEL' => 'datepicker',
+            'DATEPICKER' => true,
+            'ATTR' => [
+                'data-mask' => '99.99.9999'
+            ]
+        ]); ?>
+    </div>
+
+
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/field/textarea.php b/tests/cheatSheet/field/textarea.php
new file mode 100644
index 0000000..c53f54e
--- /dev/null
+++ b/tests/cheatSheet/field/textarea.php
@@ -0,0 +1,24 @@
+<div class="flex-list" style="--col-count: 3">
+
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:textarea', [
+            'CLASS' => 'kit-field--check-mark-stroke',
+            'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'textarea',
+            'VALUE' => '',
+            'MAXLENGTH' => 1000,
+            'LABEL' => 'textarea label',
+        ]); ?>
+    </div>
+
+    <div class="flex-list-item"><?
+        service()->templater()->render('kit:textarea', [
+            'CLASS' => 'kit-field--check-mark-stroke',
+            //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'NAME' => 'textarea',
+            'VALUE' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
+            'MAXLENGTH' => 1000,
+            'LABEL' => 'textarea label',
+        ]); ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/modals.php b/tests/cheatSheet/modals.php
new file mode 100644
index 0000000..6b28814
--- /dev/null
+++ b/tests/cheatSheet/modals.php
@@ -0,0 +1,92 @@
+<?
+
+$closeButtonTemplate = service()->templater()->getTemplate('kit:button', [
+    'LABEL' => 'Close',
+    'CLASS' => ' ',
+    'ATTR' => [
+        'data-bs-dismiss' => 'modal',
+    ],
+]);
+?>
+<div class="d-flex justify-content-between flex-wrap">
+    <?
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'Vertically centered scrollable modal',
+        'CLASS' => 'kit-button--primary kit-button--bordered',
+        'ATTR' => [
+            'data-bs-toggle' => 'modal',
+            'data-bs-target' => '#exampleModalCenteredScrollable',
+        ],
+    ]);
+    ?>
+</div>
+<?
+service()->templater()->render('kit:modal', [
+    'ID' => 'exampleModalCenteredScrollable',
+    'TITLE' => 'Modal title',
+    'BODY' => '<p>This is some placeholder content to show the scrolling behavior for modals.</p>'
+                    .str_repeat('<br>', 50)
+                    .'<p>This content should appear at the bottom after you scroll.</p>',
+    'FOOTER' => $closeButtonTemplate,
+]);
+?>
+
+<h3>Dialogue chain</h3>
+
+<div class="d-flex justify-content-between flex-wrap">
+    <?
+    service()->templater()->render('kit:button', [
+        'LABEL' => 'Start',
+        'CLASS' => 'kit-button--primary kit-button--bordered',
+        'ATTR' => [
+            'data-bs-toggle' => 'modal',
+            'data-bs-target' => '#modalStep1',
+        ],
+    ]);
+    ?>
+</div>
+<?
+$nextButtonTemplate = function($selector){
+    return service()->templater()->getTemplate('kit:button', [
+        'LABEL' => 'Next',
+        'CLASS' => '',
+        'ATTR' => [
+            'data-bs-dismiss' => 'modal',
+            'data-bs-target' => $selector,
+            'data-bs-toggle' => 'modal',
+        ],
+    ]);
+};
+$prevButtonTemplate = function($selector){
+    return service()->templater()->getTemplate('kit:button', [
+        'LABEL' => 'Prev',
+        'CLASS' => ' ',
+        'ATTR' => [
+            'data-bs-dismiss' => 'modal',
+            'data-bs-target' => $selector,
+            'data-bs-toggle' => 'modal',
+        ],
+    ]);
+};
+service()->templater()->render('kit:modal', [
+    'ID' => 'modalStep1',
+    'TITLE' => 'Step 1',
+    'CLASS' => 'modal--dialogue-chain',
+    'BODY' => '<p></p>',
+    'FOOTER' => $closeButtonTemplate.$nextButtonTemplate('#modalStep2'),
+]);
+service()->templater()->render('kit:modal', [
+    'ID' => 'modalStep2',
+    'TITLE' => 'Step 2',
+    'CLASS' => 'modal--dialogue-chain',
+    'BODY' => '<p></p>',
+    'FOOTER' => $closeButtonTemplate.$prevButtonTemplate('#modalStep1').$nextButtonTemplate('#modalStep3'),
+]);
+service()->templater()->render('kit:modal', [
+    'ID' => 'modalStep3',
+    'TITLE' => 'Step 3',
+    'CLASS' => 'modal--dialogue-chain',
+    'BODY' => '<p></p>',
+    'FOOTER' => $closeButtonTemplate,
+]);
+
diff --git a/tests/cheatSheet/popover.php b/tests/cheatSheet/popover.php
new file mode 100644
index 0000000..2c657f3
--- /dev/null
+++ b/tests/cheatSheet/popover.php
@@ -0,0 +1,91 @@
+
+
+<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Popover on top',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'popover',
+                'data-bs-placement' => 'top',
+                'data-bs-content' => 'Top popover',
+                'data-bs-container' => 'body',
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Popover on right',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'popover',
+                'data-bs-placement' => 'right',
+                'data-bs-content' => 'Right popover',
+                'data-bs-container' => 'body',
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Popover on bottom',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'popover',
+                'data-bs-placement' => 'bottom',
+                'data-bs-content' => 'Bottom popover',
+                'data-bs-container' => 'body',
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Popover on left',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'popover',
+                'data-bs-placement' => 'left',
+                'data-bs-content' => 'Left popover',
+                'data-bs-container' => 'body',
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => htmlspecialchars('<HTML> & header'),
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'popover',
+                'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
+                'data-bs-container' => 'body',
+                'data-bs-html' => 'true',
+                'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'trigger focus',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'popover',
+                'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
+                'data-bs-container' => 'body',
+                'data-bs-html' => 'true',
+                'data-bs-trigger' => 'focus',
+                'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+            ]
+        ]);
+        ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatSheet/text.php b/tests/cheatSheet/text.php
new file mode 100644
index 0000000..6588c56
--- /dev/null
+++ b/tests/cheatSheet/text.php
@@ -0,0 +1,7 @@
+<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
+<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
+<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
+<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
+<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
+<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
\ No newline at end of file
diff --git a/tests/cheatSheet/tooltip.php b/tests/cheatSheet/tooltip.php
new file mode 100644
index 0000000..69e203c
--- /dev/null
+++ b/tests/cheatSheet/tooltip.php
@@ -0,0 +1,67 @@
+<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Tooltip on top',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'tooltip',
+                'data-bs-placement' => 'top',
+                'title' => 'Tooltip on top'
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Tooltip on end',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'tooltip',
+                'data-bs-placement' => 'right',
+                'title' => 'Tooltip on end'
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Tooltip on bottom',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'tooltip',
+                'data-bs-placement' => 'bottom',
+                'title' => 'Tooltip on bottom'
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Tooltip on start',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'tooltip',
+                'data-bs-placement' => 'left',
+                'title' => 'Tooltip on start'
+            ]
+        ]);
+        ?>
+    </div>
+    <div class="flex-list-item">
+        <?
+        service()->templater()->render('kit:button', [
+            'LABEL' => 'Tooltip with HTML',
+            'CLASS' => '',
+            'ATTR' => [
+                'data-bs-toggle' => 'tooltip',
+                'data-bs-html' => 'true',
+                'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
+            ]
+        ]);
+        ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/cheatsheetTest.php b/tests/cheatsheetTest.php
index 4e884f0..4638028 100644
--- a/tests/cheatsheetTest.php
+++ b/tests/cheatsheetTest.php
@@ -14,6 +14,14 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
 }
 $APPLICATION->ShowHead();
 
+/**
+ * @param $name
+ * @param $filePath
+ */
+function includeSection ($name, $filePath){
+    ?><div class="kit-section"><h2><?=$name?></h2><? include $filePath; ?></div><?
+}
+
 ?>
 <script>
     kit.ready(['popover', 'datepicker'], function () {
@@ -21,1748 +29,23 @@ $APPLICATION->ShowHead();
     });
 </script>
 <div class="kit-wrapper">
-
     <h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
-    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
-    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
-    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
-    <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
-    <h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
 
-
-    <h2>Tooltip</h2>
-    <div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Tooltip on top',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'tooltip',
-                    'data-bs-placement' => 'top',
-                    'title' => 'Tooltip on top'
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Tooltip on end',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'tooltip',
-                    'data-bs-placement' => 'right',
-                    'title' => 'Tooltip on end'
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Tooltip on bottom',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'tooltip',
-                    'data-bs-placement' => 'bottom',
-                    'title' => 'Tooltip on bottom'
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Tooltip on start',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'tooltip',
-                    'data-bs-placement' => 'left',
-                    'title' => 'Tooltip on start'
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Tooltip with HTML',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'tooltip',
-                    'data-bs-html' => 'true',
-                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
-                ]
-            ]);
-            ?>
-        </div>
-    </div>
-
-    <h2>Popover</h2>
-
-    <div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Popover on top',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'popover',
-                    'data-bs-placement' => 'top',
-                    'data-bs-content' => 'Top popover',
-                    'data-bs-container' => 'body',
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Popover on right',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'popover',
-                    'data-bs-placement' => 'right',
-                    'data-bs-content' => 'Right popover',
-                    'data-bs-container' => 'body',
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Popover on bottom',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'popover',
-                    'data-bs-placement' => 'bottom',
-                    'data-bs-content' => 'Bottom popover',
-                    'data-bs-container' => 'body',
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'Popover on left',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'popover',
-                    'data-bs-placement' => 'left',
-                    'data-bs-content' => 'Left popover',
-                    'data-bs-container' => 'body',
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => htmlspecialchars('<HTML> & header'),
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'popover',
-                    'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
-                    'data-bs-container' => 'body',
-                    'data-bs-html' => 'true',
-                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
-                ]
-            ]);
-            ?>
-        </div>
-        <div class="flex-list-item">
-            <?
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'trigger focus',
-                'CLASS' => '',
-                'ATTR' => [
-                    'data-bs-toggle' => 'popover',
-                    'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
-                    'data-bs-container' => 'body',
-                    'data-bs-html' => 'true',
-                    'data-bs-trigger' => 'focus',
-                    'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
-                ]
-            ]);
-            ?>
-        </div>
-    </div>
-
-
-    <h2>Modals</h2>
-    <div class="d-flex justify-content-between flex-wrap">
-        <?
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'Vertically centered scrollable modal',
-            'CLASS' => 'kit-button--primary kit-button--bordered',
-            'ATTR' => [
-                'data-bs-toggle' => 'modal',
-                'data-bs-target' => '#exampleModalCenteredScrollable',
-            ],
-        ]);
-        ?>
-    </div>
     <?
-    service()->templater()->render('kit:modal', [
-        'ID' => 'exampleModalCenteredScrollable',
-        'TITLE' => 'Modal title',
-        'BODY' => '<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
-                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-                    <p>This content should appear at the bottom after you scroll.</p>',
-        'FOOTER' => '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary">Save changes</button>',
-    ]);
+    includeSection('Text samples',__DIR__ . '/cheatSheet/text.php');
+    includeSection('Tooltip',__DIR__ . '/cheatSheet/tooltip.php');
+    includeSection('Popover',__DIR__ . '/cheatSheet/popover.php');
+    includeSection('Modals',__DIR__ . '/cheatSheet/modals.php');
+    includeSection('Color fields',__DIR__ . '/cheatSheet/field/color.php');
+    includeSection('Tel fields',__DIR__ . '/cheatSheet/field/tel.php');
+    includeSection('Number fields',__DIR__ . '/cheatSheet/field/number.php');
+    includeSection('Select fields',__DIR__ . '/cheatSheet/field/select.php');
+    includeSection('Checkbox fields',__DIR__ . '/cheatSheet/field/checkbox.php');
+    includeSection('Radio fields',__DIR__ . '/cheatSheet/field/radio.php');
+    includeSection('Text fields',__DIR__ . '/cheatSheet/field/text.php');
+    includeSection('Textarea fields',__DIR__ . '/cheatSheet/field/textarea.php');
+    includeSection('File fields',__DIR__ . '/cheatSheet/field/file.php');
+    includeSection('Buttons',__DIR__ . '/cheatSheet/button/buttons.php');
     ?>
-
-
-
-    <h2>Input type color</h2>
-    <div class="flex-list" style="--col-count: 3">
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'color',
-                'HINT' => 'color picker by xu-ui',
-                'NAME' => 'color',
-                'VALUE' => '#1a8cff',
-                'LABEL' => 'color',
-            ]); ?>
-        </div>
-    </div>
-
-
-    <h2>Input type tel</h2>
-    <div class="flex-list" style="--col-count: 3">
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'tel',
-                'HINT' => 'phone',
-                'NAME' => 'phone',
-                'VALUE' => '+7800',
-                'LABEL' => 'phone',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'tel',
-                'HINT' => 'phone',
-                'NAME' => 'phone',
-                'VALUE' => '',
-                'LABEL' => 'phone',
-            ]); ?>
-        </div>
-    </div>
-
-    <h2>Input type number</h2>
-    <div class="flex-list" style="--col-count: 3">
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'number',
-                'HINT' => 'number',
-                'NAME' => 'number',
-                'VALUE' => '10',
-                'PLACEHOLDER' => 'number',
-                'LABEL' => 'number',
-            ]); ?>
-        </div>
-    </div>
-
-    <h2>Select</h2>
-    <div class="flex-list" style="--col-count: 3">
-
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:select', [
-                'HINT' => 'text hint',
-                'NAME' => 'select',
-                'LABEL' => 'select',
-                'OPTIONS' => [
-                    [
-                        'ID' => '1',
-                        'NAME' => 'Значение выпадающего списка 1',
-                    ],
-                    [
-                        'ID' => '2',
-                        'NAME' => 'Значение выпадающего списка 2',
-                    ],
-                    [
-                        'ID' => '3',
-                        'NAME' => 'Значение выпадающего списка 3',
-                    ],
-                    [
-                        'ID' => '4',
-                        'NAME' => 'Значение выпадающего списка 4',
-                    ],
-                    [
-                        'ID' => '5',
-                        'NAME' => 'Значение выпадающего списка 5',
-                    ],
-                ]
-            ]); ?>
-        </div>
-    </div>
-
-
-    <h2>Input type checkbox</h2>
-    <div class="flex-list" style="--col-count: 3">
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'checkbox',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'agreement2',
-                'VALUE' => 'Y',
-                'CHECKED' => true,
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'checkbox',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'agreement',
-                'VALUE' => 'Y',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'checkbox',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'agreement',
-                'VALUE' => 'Y',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-    </div>
-
-    <h2>Input type radio</h2>
-    <div class="flex-list" style="--col-count: 3">
-
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio',
-                'VALUE' => 'radio1',
-                'CHECKED' => true,
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio',
-                'VALUE' => 'radio2',
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio',
-                'VALUE' => 'radio3',
-                'LABEL' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
-            ]); ?>
-        </div>
-
-
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-stroke',
-                'VALUE' => 'radio4',
-                'CHECKED' => true,
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-stroke',
-                'VALUE' => 'radio5',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-stroke',
-                'VALUE' => 'radio6',
-                'LABEL' => 'kit-field--check-mark-stroke',
-            ]); ?>
-        </div>
-
-
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-material',
-                'VALUE' => 'radio7',
-                'CHECKED' => true,
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-material',
-                'VALUE' => 'radio8',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'CLASS' => 'kit-field--check-mark-material',
-                'TYPE' => 'radio',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'radio-material',
-                'VALUE' => 'radio9',
-                'LABEL' => 'kit-field--check-mark-material',
-            ]); ?>
-        </div>
-    </div>
-
-
-    <h2>Input type text</h2>
-
-    <div class="flex-list" style="--col-count: 3">
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'text',
-                'HINT' => 'time mask',
-                'NAME' => 'time_mask',
-                'VALUE' => '',
-                'PLACEHOLDER' => '',
-                'LABEL' => 'time mask',
-                'ATTR' => [
-                    'data-mask' => '99:99'
-                ]
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'text',
-                'HINT' => 'text hint',
-                'NAME' => 'input_name',
-                'VALUE' => '10',
-                'PLACEHOLDER' => 'number',
-                'LABEL' => 'Test input',
-            ]); ?>
-        </div>
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:input', [
-                'TYPE' => 'text',
-                'HINT' => 'air-datepicker',
-                'NAME' => 'datepicker',
-                'VALUE' => '',
-                'PLACEHOLDER' => '',
-                'LABEL' => 'datepicker',
-                'DATEPICKER' => true,
-                'ATTR' => [
-                    'data-mask' => '99.99.9999'
-                ]
-            ]); ?>
-        </div>
-
-
-    </div>
-
-    <h2>Textarea</h2>
-    <div class="flex-list" style="--col-count: 3">
-
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:textarea', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'textarea',
-                'VALUE' => '',
-                'MAXLENGTH' => 1000,
-                'LABEL' => 'textarea label',
-            ]); ?>
-        </div>
-
-        <div class="flex-list-item"><?
-            service()->templater()->render('kit:textarea', [
-                'CLASS' => 'kit-field--check-mark-stroke',
-                //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'NAME' => 'textarea',
-                'VALUE' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.',
-                'MAXLENGTH' => 1000,
-                'LABEL' => 'textarea label',
-            ]); ?>
-        </div>
-    </div>
-
-    <h2>Input type file</h2>
-    <div class="flex-list" style="--col-count: 3">
-        <div class="flex-list-item"><?
-            $inputFile = new \Wt\Core\Form\InputFile($fieldName = 'FIELD_INPUT_FILE');
-            $inputFile->multiple = true;
-            $inputFile->hint = 'Поле для ввода файлов';
-            $inputFile->render();
-            ?>
-        </div>
-    </div>
-
-
-    <h2>Buttons</h2>
-    <div class="flex-list" style="--col-count: 7;">
-        <div class="flex-list-item"></div>
-        <div class="flex-list-item">bordered</div>
-        <div class="flex-list-item">bordered radius</div>
-        <div class="flex-list-item">bordered round</div>
-        <div class="flex-list-item">material</div>
-        <div class="flex-list-item">material radius</div>
-        <div class="flex-list-item">material round</div>
-        <?
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'test ',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'test ',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'default',
-            'CLASS' => 'kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-        echo '<div class="flex-list-item">';
-
-
-
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'primary',
-            'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--primary kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'secondary',
-            'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--secondary kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'error',
-            'CLASS' => ' kit-button--error kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--error kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'warning',
-            'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => ' kit-button--warning kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-
-
-
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'LABEL' => 'success',
-            'CLASS' => ' kit-button--success kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-
-
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success kit-button--bordered',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success kit-button--bordered kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success kit-button--bordered kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success kit-button--material',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success kit-button--material kit-button--radius',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';echo '<div class="flex-list-item">';
-        service()->templater()->render('kit:button', [
-            'DISABLED' => true,
-            'LABEL' => 'disabled',
-            'CLASS' => 'kit-button--success kit-button--material kit-button--round',
-            'ICON' => service()->templater()->get('kit:svg/star'),
-        ]);
-        echo '</div>';
-
-        /** ICON */
-
-        if(1){
-
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon test ',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon test ',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'default',
-                'CLASS' => 'kit-button--icon kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-            echo '<div class="flex-list-item">';
-
-
-
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'primary',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--primary kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'secondary',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--secondary kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'error',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--error kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'warning',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon  kit-button--warning kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-
-
-
-
-
-
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'LABEL' => 'success',
-                'CLASS' => 'kit-button--icon  kit-button--success kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-
-
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success kit-button--bordered kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success kit-button--material',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--radius',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';echo '<div class="flex-list-item">';
-            service()->templater()->render('kit:button', [
-                'DISABLED' => true,
-                'LABEL' => 'disabled',
-                'CLASS' => 'kit-button--icon kit-button--success kit-button--material kit-button--round',
-                'ICON' => service()->templater()->get('kit:svg/star'),
-            ]);
-            echo '</div>';
-        }
-
-        ?>
-    </div>
-
-
-    <div class="flex-list" style="--col-count: 1;">
-        <?
-
-
-
-
-
-
-
-
-        ?>
-    </div>
 </div>
-<?
-?>
\ No newline at end of file
+<?
\ No newline at end of file