From 70044e7a42f86fcfdda2a3a90426c834c8a9d508 Mon Sep 17 00:00:00 2001
From: AJ Meireles <alvaro.meireles@live.com>
Date: Tue, 2 Jul 2024 11:53:57 -0300
Subject: [PATCH] adding flat buttons

---
 app/Enums/Examples/Ui/Button.php              |  82 +++-
 composer.lock                                 | 448 ++++++++++--------
 contents/on-this-page.json                    |   6 +-
 .../views/documentation/ui/button.blade.php   | 248 ++++++----
 4 files changed, 492 insertions(+), 292 deletions(-)

diff --git a/app/Enums/Examples/Ui/Button.php b/app/Enums/Examples/Ui/Button.php
index 57e25602..9ba7d17b 100644
--- a/app/Enums/Examples/Ui/Button.php
+++ b/app/Enums/Examples/Ui/Button.php
@@ -39,19 +39,19 @@ class Button
     </x-button>
     HTML;
 
-    public const ICONS = <<<'HTML'
+    public const ICON = <<<'HTML'
     <x-button icon="cog" position="left">TallStackUi</x-button>
     <x-button icon="users" position="right">TallStackUi</x-button>
     HTML;
 
-    public const SIZES = <<<'HTML'
+    public const SIZE = <<<'HTML'
     <x-button xs>TallStackUi</x-button>
     <x-button sm>TallStackUi</x-button>
     <x-button md>TallStackUi</x-button>
     <x-button lg>TallStackUi</x-button>
     HTML;
 
-    public const LOADINGS = <<<'HTML'
+    public const LOADING = <<<'HTML'
     <x-button wire:click="target" loading>
         Basic
     </x-button>
@@ -69,7 +69,7 @@ class Button
     </x-button>
     HTML;
 
-    public const COLORS = <<<'HTML'
+    public const COLOR = <<<'HTML'
     <x-button text="Primary" />
     <x-button text="Secondary" color="secondary" />
     <x-button text="Slate" color="slate" />
@@ -98,7 +98,7 @@ class Button
     <x-button text="White" color="white" />
     HTML;
 
-    public const OUTLINES = <<<'HTML'
+    public const OUTLINE = <<<'HTML'
     <x-button text="Primary" outline />
     <x-button text="Secondary" color="secondary" outline />
     <x-button text="Slate" color="slate" outline />
@@ -127,7 +127,7 @@ class Button
     <x-button text="White" color="white" outline />
     HTML;
 
-    public const LIGHTS = <<<'HTML'
+    public const LIGHT = <<<'HTML'
     <x-button text="Primary" light />
     <x-button text="Secondary" color="secondary" light />
     <x-button text="Slate" color="slate" light />
@@ -156,6 +156,35 @@ class Button
     <x-button text="White" color="white" light />
     HTML;
 
+    public const FLAT = <<<'HTML'
+    <x-button text="Primary" flat />
+    <x-button text="Secondary" color="secondary" flat />
+    <x-button text="Slate" color="slate" flat />
+    <x-button text="Gray" color="gray" flat />
+    <x-button text="Zinc" color="zinc" flat />
+    <x-button text="Neutral" color="neutral" flat />
+    <x-button text="Stone" color="stone" flat />
+    <x-button text="Red" color="red" flat />
+    <x-button text="Orange" color="orange" flat />
+    <x-button text="Amber" color="amber" flat />
+    <x-button text="Yellow" color="yellow" flat />
+    <x-button text="Lime" color="lime" flat />
+    <x-button text="Green" color="green" flat />
+    <x-button text="Emerald" color="emerald" flat />
+    <x-button text="Teal" color="teal" flat />
+    <x-button text="Cyan" color="cyan" flat />
+    <x-button text="Sky" color="sky" flat />
+    <x-button text="Blue" color="blue" flat />
+    <x-button text="Indigo" color="indigo" flat />
+    <x-button text="Violet" color="violet" flat />
+    <x-button text="Purple" color="purple" flat />
+    <x-button text="Fuchsia" color="fuchsia" flat />
+    <x-button text="Pink" color="pink" flat />
+    <x-button text="Rose" color="rose" flat />
+    <x-button text="Black" color="black" flat />
+    <x-button text="White" color="white" flat />
+    HTML;
+
     public const CIRCLE = <<<'HTML'
     <x-button.circle>TS</x-button.circle>
 
@@ -168,17 +197,17 @@ class Button
     <x-button.circle href="https://google.com.br" target="_blank">TS</x-button.circle>
     HTML;
 
-    public const CIRCLE_ICONS = <<<'HTML'
+    public const CIRCLE_ICON = <<<'HTML'
     <x-button.circle icon="pencil" />
     HTML;
 
-    public const CIRCLE_SIZES = <<<'HTML'
+    public const CIRCLE_SIZE = <<<'HTML'
     <x-button.circle text="SM" sm/>
     <x-button.circle text="MD" />
     <x-button.circle text="LG" lg/>
     HTML;
 
-    public const CIRCLE_LOADINGS = <<<'HTML'
+    public const CIRCLE_LOADING = <<<'HTML'
     <x-button.circle wire:click="basic" icon="pencil" loading />
 
     <!-- You can specify the target of the delay (method or property) -->
@@ -195,7 +224,7 @@ class Button
                      delay="longest" />
     HTML;
 
-    public const CIRCLE_COLORS = <<<'HTML'
+    public const CIRCLE_COLOR = <<<'HTML'
     <x-button.circle text="TS" />
     <x-button.circle text="TS" color="secondary" />
     <x-button.circle text="TS" color="slate" />
@@ -224,7 +253,7 @@ class Button
     <x-button.circle text="TS" color="white" />
     HTML;
 
-    public const CIRCLE_OUTLINES = <<<'HTML'
+    public const CIRCLE_OUTLINE = <<<'HTML'
     <x-button.circle text="TS" outline />
     <x-button.circle text="TS" color="secondary" outline />
     <x-button.circle text="TS" color="slate" outline />
@@ -253,7 +282,7 @@ class Button
     <x-button.circle text="TS" color="white" outline />
     HTML;
 
-    public const CIRCLE_LIGHTS = <<<'HTML'
+    public const CIRCLE_LIGHT = <<<'HTML'
     <x-button.circle text="TS" light />
     <x-button.circle text="TS" color="secondary" light />
     <x-button.circle text="TS" color="slate" light />
@@ -282,6 +311,35 @@ class Button
     <x-button.circle text="TS" color="white" light />
     HTML;
 
+    public const CIRCLE_FLAT = <<<'HTML'
+    <x-button.circle text="TS" flat />
+    <x-button.circle text="TS" color="secondary" flat />
+    <x-button.circle text="TS" color="slate" flat />
+    <x-button.circle text="TS" color="gray" flat />
+    <x-button.circle text="TS" color="zinc" flat />
+    <x-button.circle text="TS" color="neutral" flat />
+    <x-button.circle text="TS" color="stone" flat />
+    <x-button.circle text="TS" color="red" flat />
+    <x-button.circle text="TS" color="orange" flat />
+    <x-button.circle text="TS" color="amber" flat />
+    <x-button.circle text="TS" color="yellow" flat />
+    <x-button.circle text="TS" color="lime" flat />
+    <x-button.circle text="TS" color="green" flat />
+    <x-button.circle text="TS" color="emerald" flat />
+    <x-button.circle text="TS" color="teal" flat />
+    <x-button.circle text="TS" color="cyan" flat />
+    <x-button.circle text="TS" color="sky" flat />
+    <x-button.circle text="TS" color="blue" flat />
+    <x-button.circle text="TS" color="indigo" flat />
+    <x-button.circle text="TS" color="violet" flat />
+    <x-button.circle text="TS" color="purple" flat />
+    <x-button.circle text="TS" color="fuchsia" flat />
+    <x-button.circle text="TS" color="pink" flat />
+    <x-button.circle text="TS" color="rose" flat />
+    <x-button.circle text="TS" color="black" flat />
+    <x-button.circle text="TS" color="white" flat />
+    HTML;
+
     public const PERSONALIZATION = <<<'HTML'
     TallStackUi::personalize()
         ->button()
diff --git a/composer.lock b/composer.lock
index f6478918..fa2f17e9 100644
--- a/composer.lock
+++ b/composer.lock
@@ -1052,16 +1052,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v11.12.0",
+            "version": "v11.13.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "9a6d9cea83cfa6b9e8eda05c89741d0411d8ebe8"
+                "reference": "92deaa4f037ff100e36809443811301819a8cf84"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/9a6d9cea83cfa6b9e8eda05c89741d0411d8ebe8",
-                "reference": "9a6d9cea83cfa6b9e8eda05c89741d0411d8ebe8",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/92deaa4f037ff100e36809443811301819a8cf84",
+                "reference": "92deaa4f037ff100e36809443811301819a8cf84",
                 "shasum": ""
             },
             "require": {
@@ -1253,7 +1253,7 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2024-06-25T19:33:56+00:00"
+            "time": "2024-06-27T09:04:50+00:00"
         },
         {
             "name": "laravel/prompts",
@@ -1965,16 +1965,16 @@
         },
         {
             "name": "monolog/monolog",
-            "version": "3.6.0",
+            "version": "3.7.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Seldaek/monolog.git",
-                "reference": "4b18b21a5527a3d5ffdac2fd35d3ab25a9597654"
+                "reference": "f4393b648b78a5408747de94fca38beb5f7e9ef8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/4b18b21a5527a3d5ffdac2fd35d3ab25a9597654",
-                "reference": "4b18b21a5527a3d5ffdac2fd35d3ab25a9597654",
+                "url": "https://api.github.com/repos/Seldaek/monolog/zipball/f4393b648b78a5408747de94fca38beb5f7e9ef8",
+                "reference": "f4393b648b78a5408747de94fca38beb5f7e9ef8",
                 "shasum": ""
             },
             "require": {
@@ -2050,7 +2050,7 @@
             ],
             "support": {
                 "issues": "https://github.com/Seldaek/monolog/issues",
-                "source": "https://github.com/Seldaek/monolog/tree/3.6.0"
+                "source": "https://github.com/Seldaek/monolog/tree/3.7.0"
             },
             "funding": [
                 {
@@ -2062,7 +2062,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-04-12T21:02:21+00:00"
+            "time": "2024-06-28T09:40:51+00:00"
         },
         {
             "name": "nesbot/carbon",
@@ -2320,16 +2320,16 @@
         },
         {
             "name": "nikic/php-parser",
-            "version": "v5.0.2",
+            "version": "v5.1.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nikic/PHP-Parser.git",
-                "reference": "139676794dc1e9231bf7bcd123cfc0c99182cb13"
+                "reference": "683130c2ff8c2739f4822ff7ac5c873ec529abd1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/139676794dc1e9231bf7bcd123cfc0c99182cb13",
-                "reference": "139676794dc1e9231bf7bcd123cfc0c99182cb13",
+                "url": "https://api.github.com/repos/nikic/PHP-Parser/zipball/683130c2ff8c2739f4822ff7ac5c873ec529abd1",
+                "reference": "683130c2ff8c2739f4822ff7ac5c873ec529abd1",
                 "shasum": ""
             },
             "require": {
@@ -2340,7 +2340,7 @@
             },
             "require-dev": {
                 "ircmaxell/php-yacc": "^0.0.7",
-                "phpunit/phpunit": "^7.0 || ^8.0 || ^9.0"
+                "phpunit/phpunit": "^9.0"
             },
             "bin": [
                 "bin/php-parse"
@@ -2372,9 +2372,9 @@
             ],
             "support": {
                 "issues": "https://github.com/nikic/PHP-Parser/issues",
-                "source": "https://github.com/nikic/PHP-Parser/tree/v5.0.2"
+                "source": "https://github.com/nikic/PHP-Parser/tree/v5.1.0"
             },
-            "time": "2024-03-05T20:51:40+00:00"
+            "time": "2024-07-01T20:03:41+00:00"
         },
         {
             "name": "nunomaduro/termwind",
@@ -3331,16 +3331,16 @@
         },
         {
             "name": "symfony/console",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/console.git",
-                "reference": "9b008f2d7b21c74ef4d0c3de6077a642bc55ece3"
+                "reference": "0aa29ca177f432ab68533432db0de059f39c92ae"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/console/zipball/9b008f2d7b21c74ef4d0c3de6077a642bc55ece3",
-                "reference": "9b008f2d7b21c74ef4d0c3de6077a642bc55ece3",
+                "url": "https://api.github.com/repos/symfony/console/zipball/0aa29ca177f432ab68533432db0de059f39c92ae",
+                "reference": "0aa29ca177f432ab68533432db0de059f39c92ae",
                 "shasum": ""
             },
             "require": {
@@ -3404,7 +3404,7 @@
                 "terminal"
             ],
             "support": {
-                "source": "https://github.com/symfony/console/tree/v7.1.1"
+                "source": "https://github.com/symfony/console/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -3420,7 +3420,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-05-31T14:57:53+00:00"
+            "time": "2024-06-28T10:03:55+00:00"
         },
         {
             "name": "symfony/css-selector",
@@ -3556,16 +3556,16 @@
         },
         {
             "name": "symfony/error-handler",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/error-handler.git",
-                "reference": "e9b8bbce0b4f322939332ab7b6b81d8c11da27dd"
+                "reference": "2412d3dddb5c9ea51a39cfbff1c565fc9844ca32"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/error-handler/zipball/e9b8bbce0b4f322939332ab7b6b81d8c11da27dd",
-                "reference": "e9b8bbce0b4f322939332ab7b6b81d8c11da27dd",
+                "url": "https://api.github.com/repos/symfony/error-handler/zipball/2412d3dddb5c9ea51a39cfbff1c565fc9844ca32",
+                "reference": "2412d3dddb5c9ea51a39cfbff1c565fc9844ca32",
                 "shasum": ""
             },
             "require": {
@@ -3611,7 +3611,7 @@
             "description": "Provides tools to manage errors and ease debugging PHP code",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/error-handler/tree/v7.1.1"
+                "source": "https://github.com/symfony/error-handler/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -3627,7 +3627,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-05-31T14:57:53+00:00"
+            "time": "2024-06-25T19:55:06+00:00"
         },
         {
             "name": "symfony/event-dispatcher",
@@ -3928,16 +3928,16 @@
         },
         {
             "name": "symfony/http-kernel",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-kernel.git",
-                "reference": "fa8d1c75b5f33b1302afccf81811f93976c6e26f"
+                "reference": "ae3fa717db4d41a55d14c2bd92399e37cf5bc0f6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/fa8d1c75b5f33b1302afccf81811f93976c6e26f",
-                "reference": "fa8d1c75b5f33b1302afccf81811f93976c6e26f",
+                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/ae3fa717db4d41a55d14c2bd92399e37cf5bc0f6",
+                "reference": "ae3fa717db4d41a55d14c2bd92399e37cf5bc0f6",
                 "shasum": ""
             },
             "require": {
@@ -4022,7 +4022,7 @@
             "description": "Provides a structured process for converting a Request into a Response",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/http-kernel/tree/v7.1.1"
+                "source": "https://github.com/symfony/http-kernel/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -4038,20 +4038,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-06-04T06:52:15+00:00"
+            "time": "2024-06-28T13:13:31+00:00"
         },
         {
             "name": "symfony/mailer",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/mailer.git",
-                "reference": "2eaad2e167cae930f25a3d731fec8b2ded5e751e"
+                "reference": "8fcff0af9043c8f8a8e229437cea363e282f9aee"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/mailer/zipball/2eaad2e167cae930f25a3d731fec8b2ded5e751e",
-                "reference": "2eaad2e167cae930f25a3d731fec8b2ded5e751e",
+                "url": "https://api.github.com/repos/symfony/mailer/zipball/8fcff0af9043c8f8a8e229437cea363e282f9aee",
+                "reference": "8fcff0af9043c8f8a8e229437cea363e282f9aee",
                 "shasum": ""
             },
             "require": {
@@ -4102,7 +4102,7 @@
             "description": "Helps sending emails",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/mailer/tree/v7.1.1"
+                "source": "https://github.com/symfony/mailer/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -4118,20 +4118,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-05-31T14:57:53+00:00"
+            "time": "2024-06-28T08:00:31+00:00"
         },
         {
             "name": "symfony/mime",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/mime.git",
-                "reference": "21027eaacc1a8a20f5e616c25c3580f5dd3a15df"
+                "reference": "26a00b85477e69a4bab63b66c5dce64f18b0cbfc"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/mime/zipball/21027eaacc1a8a20f5e616c25c3580f5dd3a15df",
-                "reference": "21027eaacc1a8a20f5e616c25c3580f5dd3a15df",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/26a00b85477e69a4bab63b66c5dce64f18b0cbfc",
+                "reference": "26a00b85477e69a4bab63b66c5dce64f18b0cbfc",
                 "shasum": ""
             },
             "require": {
@@ -4186,7 +4186,7 @@
                 "mime-type"
             ],
             "support": {
-                "source": "https://github.com/symfony/mime/tree/v7.1.1"
+                "source": "https://github.com/symfony/mime/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -4202,7 +4202,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-06-04T06:40:14+00:00"
+            "time": "2024-06-28T10:03:55+00:00"
         },
         {
             "name": "symfony/polyfill-ctype",
@@ -5141,16 +5141,16 @@
         },
         {
             "name": "symfony/string",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/string.git",
-                "reference": "60bc311c74e0af215101235aa6f471bcbc032df2"
+                "reference": "14221089ac66cf82e3cf3d1c1da65de305587ff8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/string/zipball/60bc311c74e0af215101235aa6f471bcbc032df2",
-                "reference": "60bc311c74e0af215101235aa6f471bcbc032df2",
+                "url": "https://api.github.com/repos/symfony/string/zipball/14221089ac66cf82e3cf3d1c1da65de305587ff8",
+                "reference": "14221089ac66cf82e3cf3d1c1da65de305587ff8",
                 "shasum": ""
             },
             "require": {
@@ -5208,7 +5208,7 @@
                 "utf8"
             ],
             "support": {
-                "source": "https://github.com/symfony/string/tree/v7.1.1"
+                "source": "https://github.com/symfony/string/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -5224,7 +5224,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-06-04T06:40:14+00:00"
+            "time": "2024-06-28T09:27:18+00:00"
         },
         {
             "name": "symfony/translation",
@@ -5474,16 +5474,16 @@
         },
         {
             "name": "symfony/var-dumper",
-            "version": "v7.1.1",
+            "version": "v7.1.2",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/var-dumper.git",
-                "reference": "deb2c2b506ff6fdbb340e00b34e9901e1605f293"
+                "reference": "5857c57c6b4b86524c08cf4f4bc95327270a816d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/deb2c2b506ff6fdbb340e00b34e9901e1605f293",
-                "reference": "deb2c2b506ff6fdbb340e00b34e9901e1605f293",
+                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/5857c57c6b4b86524c08cf4f4bc95327270a816d",
+                "reference": "5857c57c6b4b86524c08cf4f4bc95327270a816d",
                 "shasum": ""
             },
             "require": {
@@ -5537,7 +5537,7 @@
                 "dump"
             ],
             "support": {
-                "source": "https://github.com/symfony/var-dumper/tree/v7.1.1"
+                "source": "https://github.com/symfony/var-dumper/tree/v7.1.2"
             },
             "funding": [
                 {
@@ -5553,20 +5553,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-05-31T14:57:53+00:00"
+            "time": "2024-06-28T08:00:31+00:00"
         },
         {
             "name": "tallstackui/tallstackui",
-            "version": "v1.31.2",
+            "version": "v1.32.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/tallstackui/tallstackui.git",
-                "reference": "2f830f8c8a7b23ce60289307ee87afad0c32c7e3"
+                "reference": "e92c2ed819f8e50d4f1481c68706eeb6c11a6a75"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/tallstackui/tallstackui/zipball/2f830f8c8a7b23ce60289307ee87afad0c32c7e3",
-                "reference": "2f830f8c8a7b23ce60289307ee87afad0c32c7e3",
+                "url": "https://api.github.com/repos/tallstackui/tallstackui/zipball/e92c2ed819f8e50d4f1481c68706eeb6c11a6a75",
+                "reference": "e92c2ed819f8e50d4f1481c68706eeb6c11a6a75",
                 "shasum": ""
             },
             "require": {
@@ -5610,7 +5610,7 @@
             "description": "TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.",
             "support": {
                 "issues": "https://github.com/tallstackui/tallstackui/issues",
-                "source": "https://github.com/tallstackui/tallstackui/tree/v1.31.2"
+                "source": "https://github.com/tallstackui/tallstackui/tree/v1.32.0"
             },
             "funding": [
                 {
@@ -5618,7 +5618,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-06-26T16:14:20+00:00"
+            "time": "2024-07-02T14:29:38+00:00"
         },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
@@ -6959,26 +6959,26 @@
         },
         {
             "name": "pestphp/pest-plugin-type-coverage",
-            "version": "v2.8.3",
+            "version": "v2.8.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pestphp/pest-plugin-type-coverage.git",
-                "reference": "bb232225c3dd6468dffdab271b3d67377afed369"
+                "reference": "ce599efae7c2493e300960cb9c697a9bdd15c44e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pestphp/pest-plugin-type-coverage/zipball/bb232225c3dd6468dffdab271b3d67377afed369",
-                "reference": "bb232225c3dd6468dffdab271b3d67377afed369",
+                "url": "https://api.github.com/repos/pestphp/pest-plugin-type-coverage/zipball/ce599efae7c2493e300960cb9c697a9bdd15c44e",
+                "reference": "ce599efae7c2493e300960cb9c697a9bdd15c44e",
                 "shasum": ""
             },
             "require": {
                 "pestphp/pest-plugin": "^2.1.1",
                 "php": "^8.1",
-                "phpstan/phpstan": "^1.11.3",
+                "phpstan/phpstan": "^1.11.6",
                 "tomasvotruba/type-coverage": "^0.2.8"
             },
             "require-dev": {
-                "pestphp/pest": "^2.34.7",
+                "pestphp/pest": "^2.34.8",
                 "pestphp/pest-dev-tools": "^2.16.0"
             },
             "type": "library",
@@ -7012,7 +7012,7 @@
             ],
             "support": {
                 "issues": "https://github.com/pestphp/pest-plugin-type-coverage/issues",
-                "source": "https://github.com/pestphp/pest-plugin-type-coverage/tree/v2.8.3"
+                "source": "https://github.com/pestphp/pest-plugin-type-coverage/tree/v2.8.4"
             },
             "funding": [
                 {
@@ -7028,7 +7028,7 @@
                     "type": "patreon"
                 }
             ],
-            "time": "2024-06-03T19:38:34+00:00"
+            "time": "2024-07-01T17:18:50+00:00"
         },
         {
             "name": "phar-io/manifest",
@@ -7148,6 +7148,134 @@
             },
             "time": "2022-02-21T01:04:05+00:00"
         },
+        {
+            "name": "php-di/invoker",
+            "version": "2.3.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/PHP-DI/Invoker.git",
+                "reference": "33234b32dafa8eb69202f950a1fc92055ed76a86"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/PHP-DI/Invoker/zipball/33234b32dafa8eb69202f950a1fc92055ed76a86",
+                "reference": "33234b32dafa8eb69202f950a1fc92055ed76a86",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.3",
+                "psr/container": "^1.0|^2.0"
+            },
+            "require-dev": {
+                "athletic/athletic": "~0.1.8",
+                "mnapoli/hard-mode": "~0.3.0",
+                "phpunit/phpunit": "^9.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Invoker\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "Generic and extensible callable invoker",
+            "homepage": "https://github.com/PHP-DI/Invoker",
+            "keywords": [
+                "callable",
+                "dependency",
+                "dependency-injection",
+                "injection",
+                "invoke",
+                "invoker"
+            ],
+            "support": {
+                "issues": "https://github.com/PHP-DI/Invoker/issues",
+                "source": "https://github.com/PHP-DI/Invoker/tree/2.3.4"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/mnapoli",
+                    "type": "github"
+                }
+            ],
+            "time": "2023-09-08T09:24:21+00:00"
+        },
+        {
+            "name": "php-di/php-di",
+            "version": "7.0.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/PHP-DI/PHP-DI.git",
+                "reference": "8097948a89f6ec782839b3e958432f427cac37fd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/PHP-DI/PHP-DI/zipball/8097948a89f6ec782839b3e958432f427cac37fd",
+                "reference": "8097948a89f6ec782839b3e958432f427cac37fd",
+                "shasum": ""
+            },
+            "require": {
+                "laravel/serializable-closure": "^1.0",
+                "php": ">=8.0",
+                "php-di/invoker": "^2.0",
+                "psr/container": "^1.1 || ^2.0"
+            },
+            "provide": {
+                "psr/container-implementation": "^1.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3",
+                "friendsofphp/proxy-manager-lts": "^1",
+                "mnapoli/phpunit-easymock": "^1.3",
+                "phpunit/phpunit": "^9.5",
+                "vimeo/psalm": "^4.6"
+            },
+            "suggest": {
+                "friendsofphp/proxy-manager-lts": "Install it if you want to use lazy injection (version ^1)"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/functions.php"
+                ],
+                "psr-4": {
+                    "DI\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "The dependency injection container for humans",
+            "homepage": "https://php-di.org/",
+            "keywords": [
+                "PSR-11",
+                "container",
+                "container-interop",
+                "dependency injection",
+                "di",
+                "ioc",
+                "psr11"
+            ],
+            "support": {
+                "issues": "https://github.com/PHP-DI/PHP-DI/issues",
+                "source": "https://github.com/PHP-DI/PHP-DI/tree/7.0.6"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/mnapoli",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/php-di/php-di",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2023-11-02T10:04:50+00:00"
+        },
         {
             "name": "phpdocumentor/reflection-common",
             "version": "2.2.0",
@@ -7372,16 +7500,16 @@
         },
         {
             "name": "phpstan/phpstan",
-            "version": "1.11.5",
+            "version": "1.11.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/phpstan/phpstan.git",
-                "reference": "490f0ae1c92b082f154681d7849aee776a7c1443"
+                "reference": "6ac78f1165346c83b4a753f7e4186d969c6ad0ee"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/490f0ae1c92b082f154681d7849aee776a7c1443",
-                "reference": "490f0ae1c92b082f154681d7849aee776a7c1443",
+                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/6ac78f1165346c83b4a753f7e4186d969c6ad0ee",
+                "reference": "6ac78f1165346c83b4a753f7e4186d969c6ad0ee",
                 "shasum": ""
             },
             "require": {
@@ -7426,20 +7554,20 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-06-17T15:10:54+00:00"
+            "time": "2024-07-01T15:33:06+00:00"
         },
         {
             "name": "phpunit/php-code-coverage",
-            "version": "10.1.14",
+            "version": "10.1.15",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/php-code-coverage.git",
-                "reference": "e3f51450ebffe8e0efdf7346ae966a656f7d5e5b"
+                "reference": "5da8b1728acd1e6ffdf2ff32ffbdfd04307f26ae"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/e3f51450ebffe8e0efdf7346ae966a656f7d5e5b",
-                "reference": "e3f51450ebffe8e0efdf7346ae966a656f7d5e5b",
+                "url": "https://api.github.com/repos/sebastianbergmann/php-code-coverage/zipball/5da8b1728acd1e6ffdf2ff32ffbdfd04307f26ae",
+                "reference": "5da8b1728acd1e6ffdf2ff32ffbdfd04307f26ae",
                 "shasum": ""
             },
             "require": {
@@ -7496,7 +7624,7 @@
             "support": {
                 "issues": "https://github.com/sebastianbergmann/php-code-coverage/issues",
                 "security": "https://github.com/sebastianbergmann/php-code-coverage/security/policy",
-                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/10.1.14"
+                "source": "https://github.com/sebastianbergmann/php-code-coverage/tree/10.1.15"
             },
             "funding": [
                 {
@@ -7504,7 +7632,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-03-12T15:33:41+00:00"
+            "time": "2024-06-29T08:25:15+00:00"
         },
         {
             "name": "phpunit/php-file-iterator",
@@ -7850,71 +7978,18 @@
             ],
             "time": "2024-04-05T04:39:01+00:00"
         },
-        {
-            "name": "pimple/pimple",
-            "version": "v3.5.0",
-            "source": {
-                "type": "git",
-                "url": "https://github.com/silexphp/Pimple.git",
-                "reference": "a94b3a4db7fb774b3d78dad2315ddc07629e1bed"
-            },
-            "dist": {
-                "type": "zip",
-                "url": "https://api.github.com/repos/silexphp/Pimple/zipball/a94b3a4db7fb774b3d78dad2315ddc07629e1bed",
-                "reference": "a94b3a4db7fb774b3d78dad2315ddc07629e1bed",
-                "shasum": ""
-            },
-            "require": {
-                "php": ">=7.2.5",
-                "psr/container": "^1.1 || ^2.0"
-            },
-            "require-dev": {
-                "symfony/phpunit-bridge": "^5.4@dev"
-            },
-            "type": "library",
-            "extra": {
-                "branch-alias": {
-                    "dev-master": "3.4.x-dev"
-                }
-            },
-            "autoload": {
-                "psr-0": {
-                    "Pimple": "src/"
-                }
-            },
-            "notification-url": "https://packagist.org/downloads/",
-            "license": [
-                "MIT"
-            ],
-            "authors": [
-                {
-                    "name": "Fabien Potencier",
-                    "email": "fabien@symfony.com"
-                }
-            ],
-            "description": "Pimple, a simple Dependency Injection Container",
-            "homepage": "https://pimple.symfony.com",
-            "keywords": [
-                "container",
-                "dependency injection"
-            ],
-            "support": {
-                "source": "https://github.com/silexphp/Pimple/tree/v3.5.0"
-            },
-            "time": "2021-10-28T11:13:42+00:00"
-        },
         {
             "name": "rector/rector",
-            "version": "1.1.1",
+            "version": "1.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/rectorphp/rector.git",
-                "reference": "c930cdb21294f10955ddfc31b720971e8333943d"
+                "reference": "2fa387553db22b6f9bcccf5ff16f2c2c18a52a65"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/rectorphp/rector/zipball/c930cdb21294f10955ddfc31b720971e8333943d",
-                "reference": "c930cdb21294f10955ddfc31b720971e8333943d",
+                "url": "https://api.github.com/repos/rectorphp/rector/zipball/2fa387553db22b6f9bcccf5ff16f2c2c18a52a65",
+                "reference": "2fa387553db22b6f9bcccf5ff16f2c2c18a52a65",
                 "shasum": ""
             },
             "require": {
@@ -7952,7 +8027,7 @@
             ],
             "support": {
                 "issues": "https://github.com/rectorphp/rector/issues",
-                "source": "https://github.com/rectorphp/rector/tree/1.1.1"
+                "source": "https://github.com/rectorphp/rector/tree/1.2.0"
             },
             "funding": [
                 {
@@ -7960,7 +8035,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-06-21T07:51:17+00:00"
+            "time": "2024-07-01T14:24:45+00:00"
         },
         {
             "name": "sebastian/cli-parser",
@@ -8943,16 +9018,16 @@
         },
         {
             "name": "spatie/error-solutions",
-            "version": "1.0.2",
+            "version": "1.0.4",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/error-solutions.git",
-                "reference": "9782ba6e25cb026cc653619e01ca695d428b3f03"
+                "reference": "264a7eef892aceb2fd65e206127ad3af4f3a2d6b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/error-solutions/zipball/9782ba6e25cb026cc653619e01ca695d428b3f03",
-                "reference": "9782ba6e25cb026cc653619e01ca695d428b3f03",
+                "url": "https://api.github.com/repos/spatie/error-solutions/zipball/264a7eef892aceb2fd65e206127ad3af4f3a2d6b",
+                "reference": "264a7eef892aceb2fd65e206127ad3af4f3a2d6b",
                 "shasum": ""
             },
             "require": {
@@ -9005,7 +9080,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/error-solutions/issues",
-                "source": "https://github.com/spatie/error-solutions/tree/1.0.2"
+                "source": "https://github.com/spatie/error-solutions/tree/1.0.4"
             },
             "funding": [
                 {
@@ -9013,7 +9088,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-06-26T13:09:17+00:00"
+            "time": "2024-06-28T13:33:04+00:00"
         },
         {
             "name": "spatie/flare-client-php",
@@ -9260,16 +9335,16 @@
         },
         {
             "name": "spatie/laravel-ray",
-            "version": "1.36.2",
+            "version": "1.36.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/laravel-ray.git",
-                "reference": "1852faa96e5aa6778ea3401ec3176eee77268718"
+                "reference": "9becea4bf279d9bc5e11f89ef36894239d2be60e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/laravel-ray/zipball/1852faa96e5aa6778ea3401ec3176eee77268718",
-                "reference": "1852faa96e5aa6778ea3401ec3176eee77268718",
+                "url": "https://api.github.com/repos/spatie/laravel-ray/zipball/9becea4bf279d9bc5e11f89ef36894239d2be60e",
+                "reference": "9becea4bf279d9bc5e11f89ef36894239d2be60e",
                 "shasum": ""
             },
             "require": {
@@ -9283,7 +9358,7 @@
                 "spatie/backtrace": "^1.0",
                 "spatie/ray": "^1.41.1",
                 "symfony/stopwatch": "4.2|^5.1|^6.0|^7.0",
-                "zbateson/mail-mime-parser": "^1.3.1|^2.0"
+                "zbateson/mail-mime-parser": "^1.3.1|^2.0|^3.0"
             },
             "require-dev": {
                 "guzzlehttp/guzzle": "^7.3",
@@ -9331,7 +9406,7 @@
             ],
             "support": {
                 "issues": "https://github.com/spatie/laravel-ray/issues",
-                "source": "https://github.com/spatie/laravel-ray/tree/1.36.2"
+                "source": "https://github.com/spatie/laravel-ray/tree/1.36.3"
             },
             "funding": [
                 {
@@ -9343,7 +9418,7 @@
                     "type": "other"
                 }
             ],
-            "time": "2024-05-02T08:26:02+00:00"
+            "time": "2024-07-02T13:33:54+00:00"
         },
         {
             "name": "spatie/macroable",
@@ -9790,30 +9865,31 @@
         },
         {
             "name": "zbateson/mail-mime-parser",
-            "version": "2.4.1",
+            "version": "3.0.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/zbateson/mail-mime-parser.git",
-                "reference": "ff49e02f6489b38f7cc3d1bd3971adc0f872569c"
+                "reference": "6ade63b0a43047935791d7977e22717a68cc388b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/zbateson/mail-mime-parser/zipball/ff49e02f6489b38f7cc3d1bd3971adc0f872569c",
-                "reference": "ff49e02f6489b38f7cc3d1bd3971adc0f872569c",
+                "url": "https://api.github.com/repos/zbateson/mail-mime-parser/zipball/6ade63b0a43047935791d7977e22717a68cc388b",
+                "reference": "6ade63b0a43047935791d7977e22717a68cc388b",
                 "shasum": ""
             },
             "require": {
-                "guzzlehttp/psr7": "^1.7.0|^2.0",
-                "php": ">=7.1",
-                "pimple/pimple": "^3.0",
-                "zbateson/mb-wrapper": "^1.0.1",
-                "zbateson/stream-decorators": "^1.0.6"
+                "guzzlehttp/psr7": "^2.5",
+                "php": ">=8.0",
+                "php-di/php-di": "^6.0|^7.0",
+                "psr/log": "^1|^2|^3",
+                "zbateson/mb-wrapper": "^2.0",
+                "zbateson/stream-decorators": "^2.1"
             },
             "require-dev": {
                 "friendsofphp/php-cs-fixer": "*",
-                "mikey179/vfsstream": "^1.6.0",
+                "monolog/monolog": "^2|^3",
                 "phpstan/phpstan": "*",
-                "phpunit/phpunit": "<10"
+                "phpunit/phpunit": "^9.6"
             },
             "suggest": {
                 "ext-iconv": "For best support/performance",
@@ -9861,24 +9937,24 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-04-28T00:58:54+00:00"
+            "time": "2024-04-29T21:53:01+00:00"
         },
         {
             "name": "zbateson/mb-wrapper",
-            "version": "1.2.1",
+            "version": "2.0.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/zbateson/mb-wrapper.git",
-                "reference": "09a8b77eb94af3823a9a6623dcc94f8d988da67f"
+                "reference": "9e4373a153585d12b6c621ac4a6bb143264d4619"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/zbateson/mb-wrapper/zipball/09a8b77eb94af3823a9a6623dcc94f8d988da67f",
-                "reference": "09a8b77eb94af3823a9a6623dcc94f8d988da67f",
+                "url": "https://api.github.com/repos/zbateson/mb-wrapper/zipball/9e4373a153585d12b6c621ac4a6bb143264d4619",
+                "reference": "9e4373a153585d12b6c621ac4a6bb143264d4619",
                 "shasum": ""
             },
             "require": {
-                "php": ">=7.1",
+                "php": ">=8.0",
                 "symfony/polyfill-iconv": "^1.9",
                 "symfony/polyfill-mbstring": "^1.9"
             },
@@ -9922,7 +9998,7 @@
             ],
             "support": {
                 "issues": "https://github.com/zbateson/mb-wrapper/issues",
-                "source": "https://github.com/zbateson/mb-wrapper/tree/1.2.1"
+                "source": "https://github.com/zbateson/mb-wrapper/tree/2.0.0"
             },
             "funding": [
                 {
@@ -9930,31 +10006,31 @@
                     "type": "github"
                 }
             ],
-            "time": "2024-03-18T04:31:04+00:00"
+            "time": "2024-03-20T01:38:07+00:00"
         },
         {
             "name": "zbateson/stream-decorators",
-            "version": "1.2.1",
+            "version": "2.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/zbateson/stream-decorators.git",
-                "reference": "783b034024fda8eafa19675fb2552f8654d3a3e9"
+                "reference": "32a2a62fb0f26313395c996ebd658d33c3f9c4e5"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/zbateson/stream-decorators/zipball/783b034024fda8eafa19675fb2552f8654d3a3e9",
-                "reference": "783b034024fda8eafa19675fb2552f8654d3a3e9",
+                "url": "https://api.github.com/repos/zbateson/stream-decorators/zipball/32a2a62fb0f26313395c996ebd658d33c3f9c4e5",
+                "reference": "32a2a62fb0f26313395c996ebd658d33c3f9c4e5",
                 "shasum": ""
             },
             "require": {
-                "guzzlehttp/psr7": "^1.9 | ^2.0",
-                "php": ">=7.2",
-                "zbateson/mb-wrapper": "^1.0.0"
+                "guzzlehttp/psr7": "^2.5",
+                "php": ">=8.0",
+                "zbateson/mb-wrapper": "^2.0"
             },
             "require-dev": {
                 "friendsofphp/php-cs-fixer": "*",
                 "phpstan/phpstan": "*",
-                "phpunit/phpunit": "<10.0"
+                "phpunit/phpunit": "^9.6|^10.0"
             },
             "type": "library",
             "autoload": {
@@ -9985,7 +10061,7 @@
             ],
             "support": {
                 "issues": "https://github.com/zbateson/stream-decorators/issues",
-                "source": "https://github.com/zbateson/stream-decorators/tree/1.2.1"
+                "source": "https://github.com/zbateson/stream-decorators/tree/2.1.1"
             },
             "funding": [
                 {
@@ -9993,7 +10069,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2023-05-30T22:51:52+00:00"
+            "time": "2024-04-29T21:42:39+00:00"
         }
     ],
     "aliases": [],
diff --git a/contents/on-this-page.json b/contents/on-this-page.json
index 99032403..7723ea8b 100644
--- a/contents/on-this-page.json
+++ b/contents/on-this-page.json
@@ -229,7 +229,8 @@
                 "7": "Loading Effect",
                 "8": "Color Variations",
                 "9": "Light Variations",
-                "10": "Outline Variations"
+                "10": "Outline Variations",
+                "11": "Flat Variations"
             }
         },
         "Circle": {
@@ -244,7 +245,8 @@
                 "6": "Loading Effect",
                 "7": "Color Variations",
                 "8": "Light Variations",
-                "9": "Outline Variations"
+                "9": "Outline Variations",
+                "10": "Flat Variations"
             }
         }
     },
diff --git a/resources/views/documentation/ui/button.blade.php b/resources/views/documentation/ui/button.blade.php
index 296c0b93..af849a9e 100644
--- a/resources/views/documentation/ui/button.blade.php
+++ b/resources/views/documentation/ui/button.blade.php
@@ -53,7 +53,7 @@
         </x-preview>
     </x-section>
     <x-section title="Icon Slot" anchor="normal-icon-slot" description="An option to use any Heroicon.">
-        <x-preview language="blade" :contents="$icons">
+        <x-preview language="blade" :contents="$icon">
             <div class="inline-flex space-x-2">
                 <x-button icon="cog" position="left">TallStackUi</x-button>
                 <x-button icon="users" position="right">TallStackUi</x-button>
@@ -61,7 +61,7 @@
         </x-preview>
     </x-section>
     <x-section title="Size Variations" anchor="normal-size-variations">
-        <x-preview language="blade" :contents="$sizes">
+        <x-preview language="blade" :contents="$size">
             <div class="flex flex-col items-center justify-center space-y-2 sm:space-x-2 sm:space-y-0 sm:flex-row sm:justify-start">
                 <div>
                     <x-button xs>TallStackUi</x-button>
@@ -79,7 +79,7 @@
         </x-preview>
     </x-section>
     <x-section title="Loading Effect" anchor="normal-loading-effect">
-        <x-preview language="blade" :contents="$loadings">
+        <x-preview language="blade" :contents="$loading">
             <div class="flex flex-col items-center justify-center space-y-2 sm:space-x-2 sm:space-y-0 sm:flex-row sm:justify-start">
                 <div>
                     <livewire:documentation.ui.button :model="1" />
@@ -94,7 +94,7 @@
         </x-preview>
     </x-section>
     <x-section title="Color Variations" anchor="normal-color-variations">
-        <x-preview language="blade" :contents="$colors">
+        <x-preview language="blade" :contents="$color">
             <div class="gap-2 space-y-2">
                 <x-button text="Primary" />
                 <x-button text="Secondary" color="secondary" />
@@ -126,7 +126,7 @@
         </x-preview>
     </x-section>
     <x-section title="Light Variations" anchor="normal-light-variations">
-        <x-preview language="blade" :contents="$lights">
+        <x-preview language="blade" :contents="$light">
             <div class="gap-2 space-y-2">
                 <x-button text="Primary" light />
                 <x-button text="Secondary" color="secondary" light />
@@ -158,7 +158,7 @@
         </x-preview>
     </x-section>
     <x-section title="Outline Variations" anchor="normal-outline-variations">
-        <x-preview language="blade" :contents="$outlines">
+        <x-preview language="blade" :contents="$outline">
             <div class="gap-2 space-y-2">
                 <x-button text="Primary" outline />
                 <x-button text="Secondary" color="secondary" outline />
@@ -189,26 +189,58 @@
             </div>
         </x-preview>
     </x-section>
+    <x-section title="Flat Variations" anchor="normal-flat-variations" new>
+        <x-preview language="blade" :contents="$flat">
+            <div class="gap-2 space-y-2">
+                <x-button text="Primary" flat />
+                <x-button text="Secondary" color="secondary" flat />
+                <x-button text="Slate" color="slate" flat />
+                <x-button text="Gray" color="gray" flat />
+                <x-button text="Zinc" color="zinc" flat />
+                <x-button text="Neutral" color="neutral" flat />
+                <x-button text="Stone" color="stone" flat />
+                <x-button text="Red" color="red" flat />
+                <x-button text="Orange" color="orange" flat />
+                <x-button text="Amber" color="amber" flat />
+                <x-button text="Yellow" color="yellow" flat />
+                <x-button text="Lime" color="lime" flat />
+                <x-button text="Green" color="green" flat />
+                <x-button text="Emerald" color="emerald" flat />
+                <x-button text="Teal" color="teal" flat />
+                <x-button text="Cyan" color="cyan" flat />
+                <x-button text="Sky" color="sky" flat />
+                <x-button text="Blue" color="blue" flat />
+                <x-button text="Indigo" color="indigo" flat />
+                <x-button text="Violet" color="violet" flat />
+                <x-button text="Purple" color="purple" flat />
+                <x-button text="Fuchsia" color="fuchsia" flat />
+                <x-button text="Pink" color="pink" flat />
+                <x-button text="Rose" color="rose" flat />
+                <x-button text="Black" color="black" flat />
+                <x-button text="White" color="white" flat />
+            </div>
+        </x-preview>
+    </x-section>
     <x-separator text="Circle" />
     <x-section title="Basic Usage" anchor="circle-basic-usage">
         <x-preview language="blade" :contents="$circle">
-            <x-button.circle>TS</x-button.circle>
+            <x-button.circle icon="users" />
         </x-preview>
     </x-section>
     <x-section title="Button as Link" anchor="circle-button-as-link">
         <x-preview language="blade" :contents="$circleA">
-            <x-button.circle href="https://google.com.br" target="_blank">TS</x-button.circle>
+            <x-button.circle href="https://google.com.br" target="_blank" icon="arrow-up-right" />
         </x-preview>
     </x-section>
     <x-section title="Icon Slot" anchor="circle-icon-slot" description="An option to use any Heroicon.">
-        <x-preview language="blade" :contents="$circleIcons">
+        <x-preview language="blade" :contents="$circleIcon">
             <x-button.circle icon="pencil"/>
         </x-preview>
     </x-section>
     <x-section title="Size Variations"
                anchor="circle-size-variations"
                description="An option to use any Heroicon.">
-        <x-preview language="blade" :contents="$circleSizes">
+        <x-preview language="blade" :contents="$circleSize">
             <x-button.circle icon="pencil" xs/>
             <x-button.circle icon="pencil" sm/>
             <x-button.circle icon="pencil" />
@@ -216,7 +248,7 @@
         </x-preview>
     </x-section>
     <x-section title="Loading Effect" anchor="circle-loading-effect">
-        <x-preview language="blade" :contents="$circleLoadings">
+        <x-preview language="blade" :contents="$circleLoading">
             <div class="inline-flex items-center space-x-2">
                 <livewire:documentation.ui.button :model="2" />
                 <livewire:documentation.ui.button :model="2" :type="2" />
@@ -225,98 +257,130 @@
         </x-preview>
     </x-section>
     <x-section title="Color Variations" anchor="circle-color-variations">
-        <x-preview language="blade" :contents="$circleColors">
+        <x-preview language="blade" :contents="$circleColor">
             <div class="gap-2 space-y-2">
-                <x-button.circle text="TS" />
-                <x-button.circle text="TS" color="secondary" />
-                <x-button.circle text="TS" color="slate" />
-                <x-button.circle text="TS" color="gray" />
-                <x-button.circle text="TS" color="zinc" />
-                <x-button.circle text="TS" color="neutral" />
-                <x-button.circle text="TS" color="stone" />
-                <x-button.circle text="TS" color="red" />
-                <x-button.circle text="TS" color="orange" />
-                <x-button.circle text="TS" color="amber" />
-                <x-button.circle text="TS" color="yellow" />
-                <x-button.circle text="TS" color="lime" />
-                <x-button.circle text="TS" color="green" />
-                <x-button.circle text="TS" color="emerald" />
-                <x-button.circle text="TS" color="teal" />
-                <x-button.circle text="TS" color="cyan" />
-                <x-button.circle text="TS" color="sky" />
-                <x-button.circle text="TS" color="blue" />
-                <x-button.circle text="TS" color="indigo" />
-                <x-button.circle text="TS" color="violet" />
-                <x-button.circle text="TS" color="purple" />
-                <x-button.circle text="TS" color="fuchsia" />
-                <x-button.circle text="TS" color="pink" />
-                <x-button.circle text="TS" color="rose" />
-                <x-button.circle text="TS" color="black" />
-                <x-button.circle text="TS" color="white" />
+                <x-button.circle icon="bookmark" />
+                <x-button.circle icon="bookmark" color="secondary" />
+                <x-button.circle icon="bookmark" color="slate" />
+                <x-button.circle icon="bookmark" color="gray" />
+                <x-button.circle icon="bookmark" color="zinc" />
+                <x-button.circle icon="bookmark" color="neutral" />
+                <x-button.circle icon="bookmark" color="stone" />
+                <x-button.circle icon="bookmark" color="red" />
+                <x-button.circle icon="bookmark" color="orange" />
+                <x-button.circle icon="bookmark" color="amber" />
+                <x-button.circle icon="bookmark" color="yellow" />
+                <x-button.circle icon="bookmark" color="lime" />
+                <x-button.circle icon="bookmark" color="green" />
+                <x-button.circle icon="bookmark" color="emerald" />
+                <x-button.circle icon="bookmark" color="teal" />
+                <x-button.circle icon="bookmark" color="cyan" />
+                <x-button.circle icon="bookmark" color="sky" />
+                <x-button.circle icon="bookmark" color="blue" />
+                <x-button.circle icon="bookmark" color="indigo" />
+                <x-button.circle icon="bookmark" color="violet" />
+                <x-button.circle icon="bookmark" color="purple" />
+                <x-button.circle icon="bookmark" color="fuchsia" />
+                <x-button.circle icon="bookmark" color="pink" />
+                <x-button.circle icon="bookmark" color="rose" />
+                <x-button.circle icon="bookmark" color="black" />
+                <x-button.circle icon="bookmark" color="white" />
             </div>
         </x-preview>
     </x-section>
     <x-section title="Light Variations" anchor="circle-light-variations">
-        <x-preview language="blade" :contents="$circleLights">
+        <x-preview language="blade" :contents="$circleLight">
             <div class="gap-2 space-y-2">
-                <x-button.circle text="TS" light />
-                <x-button.circle text="TS" color="secondary" light />
-                <x-button.circle text="TS" color="slate" light />
-                <x-button.circle text="TS" color="gray" light />
-                <x-button.circle text="TS" color="zinc" light />
-                <x-button.circle text="TS" color="neutral" light />
-                <x-button.circle text="TS" color="stone" light />
-                <x-button.circle text="TS" color="red" light />
-                <x-button.circle text="TS" color="orange" light />
-                <x-button.circle text="TS" color="amber" light />
-                <x-button.circle text="TS" color="yellow" light />
-                <x-button.circle text="TS" color="lime" light />
-                <x-button.circle text="TS" color="green" light />
-                <x-button.circle text="TS" color="emerald" light />
-                <x-button.circle text="TS" color="teal" light />
-                <x-button.circle text="TS" color="cyan" light />
-                <x-button.circle text="TS" color="sky" light />
-                <x-button.circle text="TS" color="blue" light />
-                <x-button.circle text="TS" color="indigo" light />
-                <x-button.circle text="TS" color="violet" light />
-                <x-button.circle text="TS" color="purple" light />
-                <x-button.circle text="TS" color="fuchsia" light />
-                <x-button.circle text="TS" color="pink" light />
-                <x-button.circle text="TS" color="rose" light />
-                <x-button.circle text="TS" color="black" light />
-                <x-button.circle text="TS" color="white" light />
+                <x-button.circle icon="bookmark" light />
+                <x-button.circle icon="bookmark" color="secondary" light />
+                <x-button.circle icon="bookmark" color="slate" light />
+                <x-button.circle icon="bookmark" color="gray" light />
+                <x-button.circle icon="bookmark" color="zinc" light />
+                <x-button.circle icon="bookmark" color="neutral" light />
+                <x-button.circle icon="bookmark" color="stone" light />
+                <x-button.circle icon="bookmark" color="red" light />
+                <x-button.circle icon="bookmark" color="orange" light />
+                <x-button.circle icon="bookmark" color="amber" light />
+                <x-button.circle icon="bookmark" color="yellow" light />
+                <x-button.circle icon="bookmark" color="lime" light />
+                <x-button.circle icon="bookmark" color="green" light />
+                <x-button.circle icon="bookmark" color="emerald" light />
+                <x-button.circle icon="bookmark" color="teal" light />
+                <x-button.circle icon="bookmark" color="cyan" light />
+                <x-button.circle icon="bookmark" color="sky" light />
+                <x-button.circle icon="bookmark" color="blue" light />
+                <x-button.circle icon="bookmark" color="indigo" light />
+                <x-button.circle icon="bookmark" color="violet" light />
+                <x-button.circle icon="bookmark" color="purple" light />
+                <x-button.circle icon="bookmark" color="fuchsia" light />
+                <x-button.circle icon="bookmark" color="pink" light />
+                <x-button.circle icon="bookmark" color="rose" light />
+                <x-button.circle icon="bookmark" color="black" light />
+                <x-button.circle icon="bookmark" color="white" light />
             </div>
         </x-preview>
     </x-section>
     <x-section title="Outline Variations" anchor="circle-outline-variations">
-        <x-preview language="blade" :contents="$circleOutlines">
+        <x-preview language="blade" :contents="$circleOutline">
+            <div class="gap-2 space-y-2">
+                <x-button.circle icon="bookmark" outline />
+                <x-button.circle icon="bookmark" color="secondary" outline />
+                <x-button.circle icon="bookmark" color="slate" outline />
+                <x-button.circle icon="bookmark" color="gray" outline />
+                <x-button.circle icon="bookmark" color="zinc" outline />
+                <x-button.circle icon="bookmark" color="neutral" outline />
+                <x-button.circle icon="bookmark" color="stone" outline />
+                <x-button.circle icon="bookmark" color="red" outline />
+                <x-button.circle icon="bookmark" color="orange" outline />
+                <x-button.circle icon="bookmark" color="amber" outline />
+                <x-button.circle icon="bookmark" color="yellow" outline />
+                <x-button.circle icon="bookmark" color="lime" outline />
+                <x-button.circle icon="bookmark" color="green" outline />
+                <x-button.circle icon="bookmark" color="emerald" outline />
+                <x-button.circle icon="bookmark" color="teal" outline />
+                <x-button.circle icon="bookmark" color="cyan" outline />
+                <x-button.circle icon="bookmark" color="sky" outline />
+                <x-button.circle icon="bookmark" color="blue" outline />
+                <x-button.circle icon="bookmark" color="indigo" outline />
+                <x-button.circle icon="bookmark" color="violet" outline />
+                <x-button.circle icon="bookmark" color="purple" outline />
+                <x-button.circle icon="bookmark" color="fuchsia" outline />
+                <x-button.circle icon="bookmark" color="pink" outline />
+                <x-button.circle icon="bookmark" color="rose" outline />
+                <x-button.circle icon="bookmark" color="black" outline />
+                <x-button.circle icon="bookmark" color="white" outline />
+            </div>
+        </x-preview>
+    </x-section>
+    <x-section title="Flat Variations" anchor="circle-flat-variations" new>
+        <x-preview language="blade" :contents="$circleFlat">
             <div class="gap-2 space-y-2">
-                <x-button.circle text="TS" outline />
-                <x-button.circle text="TS" color="secondary" outline />
-                <x-button.circle text="TS" color="slate" outline />
-                <x-button.circle text="TS" color="gray" outline />
-                <x-button.circle text="TS" color="zinc" outline />
-                <x-button.circle text="TS" color="neutral" outline />
-                <x-button.circle text="TS" color="stone" outline />
-                <x-button.circle text="TS" color="red" outline />
-                <x-button.circle text="TS" color="orange" outline />
-                <x-button.circle text="TS" color="amber" outline />
-                <x-button.circle text="TS" color="yellow" outline />
-                <x-button.circle text="TS" color="lime" outline />
-                <x-button.circle text="TS" color="green" outline />
-                <x-button.circle text="TS" color="emerald" outline />
-                <x-button.circle text="TS" color="teal" outline />
-                <x-button.circle text="TS" color="cyan" outline />
-                <x-button.circle text="TS" color="sky" outline />
-                <x-button.circle text="TS" color="blue" outline />
-                <x-button.circle text="TS" color="indigo" outline />
-                <x-button.circle text="TS" color="violet" outline />
-                <x-button.circle text="TS" color="purple" outline />
-                <x-button.circle text="TS" color="fuchsia" outline />
-                <x-button.circle text="TS" color="pink" outline />
-                <x-button.circle text="TS" color="rose" outline />
-                <x-button.circle text="TS" color="black" outline />
-                <x-button.circle text="TS" color="white" outline />
+                <x-button.circle icon="bookmark" flat />
+                <x-button.circle icon="bookmark" color="secondary" flat />
+                <x-button.circle icon="bookmark" color="slate" flat />
+                <x-button.circle icon="bookmark" color="gray" flat />
+                <x-button.circle icon="bookmark" color="zinc" flat />
+                <x-button.circle icon="bookmark" color="neutral" flat />
+                <x-button.circle icon="bookmark" color="stone" flat />
+                <x-button.circle icon="bookmark" color="red" flat />
+                <x-button.circle icon="bookmark" color="orange" flat />
+                <x-button.circle icon="bookmark" color="amber" flat />
+                <x-button.circle icon="bookmark" color="yellow" flat />
+                <x-button.circle icon="bookmark" color="lime" flat />
+                <x-button.circle icon="bookmark" color="green" flat />
+                <x-button.circle icon="bookmark" color="emerald" flat />
+                <x-button.circle icon="bookmark" color="teal" flat />
+                <x-button.circle icon="bookmark" color="cyan" flat />
+                <x-button.circle icon="bookmark" color="sky" flat />
+                <x-button.circle icon="bookmark" color="blue" flat />
+                <x-button.circle icon="bookmark" color="indigo" flat />
+                <x-button.circle icon="bookmark" color="violet" flat />
+                <x-button.circle icon="bookmark" color="purple" flat />
+                <x-button.circle icon="bookmark" color="fuchsia" flat />
+                <x-button.circle icon="bookmark" color="pink" flat />
+                <x-button.circle icon="bookmark" color="rose" flat />
+                <x-button.circle icon="bookmark" color="black" flat />
+                <x-button.circle icon="bookmark" color="white" flat />
             </div>
         </x-preview>
     </x-section>