From 034c8dba4ddf6677b27bb650a3db19d2b936059a Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Fri, 6 May 2022 04:10:10 +0300
Subject: [PATCH 1/9] updated component sizes

---
 src/resources/views/components/centered-content.blade.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/resources/views/components/centered-content.blade.php b/src/resources/views/components/centered-content.blade.php
index fc7dee3..c1dc4ff 100644
--- a/src/resources/views/components/centered-content.blade.php
+++ b/src/resources/views/components/centered-content.blade.php
@@ -1,10 +1,10 @@
 @props([
-    'size' => 'default',
+    'size' => 'xl',
     'width' => [
-        'xxl' => '7xl',
-        'default' => '6xl',
+        'omg' => '7xl',
+        'xxl' => '6xl',
         'xl' => '4xl',
-        'large' => '3xl',
+        'big' => '3xl',
         'medium' => '2xl',
         'small' => 'lg',
         'tiny' => 'md'

From 087dd60ffee976638d5ce184506d5f3c021d9806 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Mon, 9 May 2022 18:46:43 +0300
Subject: [PATCH 2/9] added component/statistic

---
 .../assets/compiled/css/bladewind-ui.min.css  | 12 +++++++
 src/resources/assets/compiled/js/dropdown.js  | 14 ++++----
 src/resources/assets/compiled/js/helpers.js   | 32 ++++++++---------
 src/resources/views/components/card.blade.php | 18 ++++++++--
 .../views/components/dropdown.blade.php       |  2 +-
 src/resources/views/components/stat.blade.php | 35 -------------------
 .../views/components/statistic.blade.php      | 35 +++++++++++++++++++
 7 files changed, 87 insertions(+), 61 deletions(-)
 delete mode 100644 src/resources/views/components/stat.blade.php
 create mode 100644 src/resources/views/components/statistic.blade.php

diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index d96c744..f406aac 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -485,6 +485,7 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .z-10{z-index:10}
 .m-0{margin:0px}
 .-m-1{margin:-0.25rem}
+.-m-8{margin:-2rem}
 .mx-auto{margin-left:auto;margin-right:auto}
 .-mx-1{margin-left:-0.25rem;margin-right:-0.25rem}
 .my-4{margin-top:1rem;margin-bottom:1rem}
@@ -535,6 +536,8 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .mr-\[-5px\]{margin-right:-5px}
 .mr-\[-3px\]{margin-right:-3px}
 .ml-\[-3px\]{margin-left:-3px}
+.-mt-8{margin-top:-2rem}
+.\!-mt-8{margin-top:-2rem !important}
 .block{display:block}
 .inline-block{display:inline-block}
 .inline{display:inline}
@@ -699,6 +702,7 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .flex-none{flex:none}
 .flex-grow{flex-grow:1}
 .grow{flex-grow:1}
+.grow-0{flex-grow:0}
 @-webkit-keyframes spin{
 to{transform:rotate(360deg)}}
 @keyframes spin{
@@ -714,6 +718,7 @@ to{transform:rotate(360deg)}}
 .justify-center{justify-content:center}
 .justify-between{justify-content:space-between}
 .gap-2{gap:0.5rem}
+.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}
 .divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}
 .overflow-hidden{overflow:hidden}
 .whitespace-nowrap{white-space:nowrap}
@@ -728,6 +733,7 @@ to{transform:rotate(360deg)}}
 .border-2{border-width:2px}
 .border-b{border-bottom-width:1px}
 .border-b-2{border-bottom-width:2px}
+.border-t{border-top-width:1px}
 .border-dashed{border-style:dashed}
 .\!border-red-400{--tw-border-opacity:1 !important;border-color:rgb(248 113 113 / var(--tw-border-opacity)) !important}
 .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
@@ -739,6 +745,10 @@ to{transform:rotate(360deg)}}
 .border-blue-400\/80{border-color:rgb(96 165 250 / 0.8)}
 .border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
 .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}
+.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}
+.border-gray-50{--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity))}
+.border-gray-50\/70{border-color:rgb(249 250 251 / 0.7)}
+.border-gray-100\/30{border-color:rgb(243 244 246 / 0.3)}
 .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}
 .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}
 .bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity))}
@@ -789,6 +799,8 @@ to{transform:rotate(360deg)}}
 .bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}
 .bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}
 .bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}
+.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
+.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}
 .object-cover{-o-object-fit:cover;object-fit:cover}
 .object-top{-o-object-position:top;object-position:top}
 .p-3{padding:0.75rem}
diff --git a/src/resources/assets/compiled/js/dropdown.js b/src/resources/assets/compiled/js/dropdown.js
index 27d1ac6..9afd423 100644
--- a/src/resources/assets/compiled/js/dropdown.js
+++ b/src/resources/assets/compiled/js/dropdown.js
@@ -15,7 +15,8 @@ dom_els(`.${el_name} .dropdown-items>div.dd-item`).forEach((el) => {
         let user_function = el.getAttribute('aria-user-function');
         if(parent_tag != null) {
             dom_el(`.bw-${parent_tag}`).value = value;
-            dom_el(`.${parent_tag}>button>label`).innerHTML = `<div class="flex justify-center">${el.innerHTML}</div>`;
+            console.log(el.innerHTML);
+            dom_el(`.${parent_tag}>button>label`).innerHTML = `<div class="flex items-center">${el.innerHTML}</div>`;
             el.parentElement.parentElement.classList.toggle('hidden');
 
             if(href !== '' && href !== null && href !== undefined) {
@@ -54,10 +55,11 @@ searchDropdown = (value, parent) => {
     });
 }
 
-dom_els('.search-dropdown').forEach((el) => {
-    el.addEventListener('click', function (e){
-        e.stopImmediatePropagation();
+if(dom_els('.search-dropdown')){
+    dom_els('.search-dropdown').forEach((el) => {
+        el.addEventListener('click', function (e){
+            e.stopImmediatePropagation();
+        });
     });
-});
-
+}
 window.onload = () => { selectSelectedValues(); }
\ No newline at end of file
diff --git a/src/resources/assets/compiled/js/helpers.js b/src/resources/assets/compiled/js/helpers.js
index f04b3c6..c12e4c8 100644
--- a/src/resources/assets/compiled/js/helpers.js
+++ b/src/resources/assets/compiled/js/helpers.js
@@ -11,9 +11,9 @@ var     dropdownIsOpen = false;
 
 dom_el = (element) => { return (document.querySelector(element) != null) ? document.querySelector(element) : false;  }
 
-dom_els = function(element) { return (document.querySelectorAll(element).length>0) ? document.querySelectorAll(element) : false;  }
+dom_els = (element) => { return (document.querySelectorAll(element).length>0) ? document.querySelectorAll(element) : false;  }
 
-validateForm = function(element) {
+validateForm = (element) => {
     let has_error = 0;
     let BreakException = {};
     try{
@@ -33,7 +33,7 @@ validateForm = function(element) {
     return has_error === 0;
 }
 
-isNumberKey = function(evt) {   // usage:  onkeypress="return isNumberKey(event)"
+isNumberKey = (evt) => {   // usage:  onkeypress="return isNumberKey(event)"
     var charCode = (evt.which) ? evt.which : evt.keyCode
     if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) {
         return false;
@@ -45,7 +45,7 @@ callUserFunction = (func) => {
     if (func !== '' && func !== undefined) eval(func); 
 };
 
-serialize = function(form){
+serialize = (form) => {
     let data = new FormData(dom_el(form));
     let obj = {};
     for (let [key, value] of data) {
@@ -62,7 +62,7 @@ serialize = function(form){
     }   return obj;
 }
 
-showMessage = function(message, type, dismissable=true) {
+showMessage = (message, type, dismissable=true) => {
     clearTimeout(notification_timeout);
     let notification_bar = dom_el('.bw-notification');
     let message_container = dom_el('.bw-notification .message-container');
@@ -95,7 +95,7 @@ showMessage = function(message, type, dismissable=true) {
     }
 }
 
-displayFormErrors = function(errors){
+displayFormErrors = (errors) => {
     if( errors) {
         let number_of_errors = Object.keys(errors).length;
         if ( number_of_errors > 0 ) {
@@ -105,14 +105,14 @@ displayFormErrors = function(errors){
     }
 }
 
-stringContains = function(str, keyword) { 
+stringContains = (str, keyword) => { 
     if(typeof(str) !== 'string') return false; 
     return (str.indexOf(keyword) != -1); 
 }
 
-doNothing = function() { }
+doNothing = () => { }
 
-changeCssForDomArray = function(els, css, mode='add') { 
+changeCssForDomArray = (els, css, mode='add') => { 
     if(dom_els(els).length > 0){
         dom_els(els).forEach((el) => { 
             changeCss(el, css, mode, true);
@@ -120,7 +120,7 @@ changeCssForDomArray = function(els, css, mode='add') {
     }
 }
 
-changeCss = function(el, css, mode='add', elIsDomObject=false) { 
+changeCss = (el, css, mode='add', elIsDomObject=false) => { 
     // css can be comma separated
     // if elIsDomObject dont run it through dom_el
     if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){
@@ -141,17 +141,17 @@ changeCss = function(el, css, mode='add', elIsDomObject=false) {
     }
 }
 
-showModal = function(el) { unhide(`.bw-${el}-modal`); }
+showModal = (el) => { unhide(`.bw-${el}-modal`); }
 
-hideModal = function(el) { hide(`.bw-${el}-modal`); }
+hideModal = (el) => { hide(`.bw-${el}-modal`); }
 
-hide = function(el, elIsDomObject=false) { 
+hide = (el, elIsDomObject=false) => { 
     if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){
         changeCss(el, 'hidden', 'add', elIsDomObject); 
     }
 }
 
-unhide = function(el, elIsDomObject=false) { 
+unhide = (el, elIsDomObject=false) => { 
     if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){ 
         changeCss(el, 'hidden', 'remove', elIsDomObject); 
     }
@@ -193,10 +193,10 @@ animateCSS = (element, animation) =>
       }
   }
 
-  removeCommas = function(amount) {
+  removeCommas = (amount) => {
     return amount.toString().replace(/,/g, '');
   }
 
-  toCurrency = function(amount) {
+  toCurrency = (amount) => {
     return ((parseFloat(amount).toFixed(2))*1).toLocaleString();
   }
\ No newline at end of file
diff --git a/src/resources/views/components/card.blade.php b/src/resources/views/components/card.blade.php
index 705d795..aafd3bc 100644
--- a/src/resources/views/components/card.blade.php
+++ b/src/resources/views/components/card.blade.php
@@ -3,11 +3,23 @@
     'css' => '',
     'has_shadow' => 'true',
     'reduce_padding' => 'false',
+    'header' => '',
+    'footer' => '',
 ])
 
-<div class="bw-card bg-white @if($reduce_padding=='false')p-8 @else px-4 pb-4 pt-2 @endif rounded-lg @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif {{$css}}">
-    @if($title !== '')<div class="uppercase tracking-wide text-xs text-gray-400/90 mb-2">{{ $title}}</div>@endif
-    <div @if($title !== '')class="mt-6"@endif>
+<div class="bw-card bg-white @if($header == '') @if($reduce_padding=='false')p-8 @else px-4 pb-4 pt-2 @endif @endif rounded-lg @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif {{$css}}">
+    @if($header != '')
+        <div class="border-b border-gray-100/30">
+            {{$header}}
+        </div>
+    @endif
+    @if($title !== '' && $header == '')<div class="uppercase tracking-wide text-xs text-gray-400/90 mb-2">{{ $title}}</div>@endif
+    <div @if($title !== '' && $header == '')class="mt-6"@endif>
         {{ $slot }}
     </div>
+    @if($footer != '')
+        <div class="border-t border-gray-100/30">
+            {{$footer}}
+        </div>
+    @endif
 </div>
\ No newline at end of file
diff --git a/src/resources/views/components/dropdown.blade.php b/src/resources/views/components/dropdown.blade.php
index 944639b..cd89a0b 100644
--- a/src/resources/views/components/dropdown.blade.php
+++ b/src/resources/views/components/dropdown.blade.php
@@ -104,7 +104,7 @@
 @endphp
 
 <div class="relative {{ $name }}">
-    <button type="button" class="bw-dropdown bg-white cursor-pointer text-left w-full text-gray-400  flex justify-between">
+    <button type="button" class="bw-dropdown bg-white cursor-pointer text-left w-full text-gray-400 flex justify-between">
         <label class="cursor-pointer">
             @if($show_filter_icon == 'true')
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/src/resources/views/components/stat.blade.php b/src/resources/views/components/stat.blade.php
deleted file mode 100644
index 2995e9b..0000000
--- a/src/resources/views/components/stat.blade.php
+++ /dev/null
@@ -1,35 +0,0 @@
-@props([
-    'type' => 'stat',
-    'figure' => '',
-    'icon' => '',
-    'title' => '',
-    'show_spinner' => 'false',
-    'css' => '',
-    'has_shadow' => 'true',
-])
-@if ($type === 'stat')
-
-    <div class="bw-card bg-white p-6 mb-6 rounded-sm relative animate__animated animate__fadeIn @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif">
-        <div>
-            <div class="uppercase tracking-wide text-xs zoom-out text-gray-400/90 mb-2">{{ $title}}</div>
-            <div class="text-3xl zoom-out text-gray-500/90 font-light {{ $css }}">
-                @if($show_spinner=='true')<x-bladewind::spinner></x-bladewind::spinner><span class="figure">{{ $figure }}</span>
-            </div>
-            <div class="mt-6">
-                {{ $slot }}
-            </div>
-        </div>
-        <div class="absolute right-5 top-5">{{ $icon }}</div>
-    </div>
-
-@else
-
-    <div class="bg-white p-8 rounded-lg mb-8 @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif {{$css}}" 
-        style="box-shadow: rgba(149, 157, 165, 0.09) 0px 8px 10px;">
-        @if($title !== '')<div class="section-heading">{{ $title}}</div>@endif
-        <div @if($title !== '')class="mt-6"@endif>
-            {{ $slot }}
-        </div>
-    </div>
-
-@endif
\ No newline at end of file
diff --git a/src/resources/views/components/statistic.blade.php b/src/resources/views/components/statistic.blade.php
new file mode 100644
index 0000000..f8ab089
--- /dev/null
+++ b/src/resources/views/components/statistic.blade.php
@@ -0,0 +1,35 @@
+@props([
+    'number' => '',
+    'label_position' => 'top',
+    'icon_position' => 'left',
+    'currency_position' => 'left',
+    'label' => '',
+    'icon' => '',
+    'currency' => '',
+    'show_spinner' => 'false',
+    'has_shadow' => 'true',
+    'css' => '',
+])
+
+    <div class="bw-statistic bg-white p-6 rounded-sm relative animate__animated animate__fadeIn @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif{{$css}}">
+        <div class="flex space-x-4">
+            @if($icon !== '' && $icon_position=='left')
+            <div class="grow-0 icon">{!! $icon !!}</div>
+            @endif
+            <div class="grow number">
+                @if($label_position=='top')
+                <div class="uppercase tracking-widest text-xs zoom-out text-gray-400/90 mb-1 label">{{ $label}}</div>
+                @endif
+                <div class="text-3xl zoom-out text-gray-500/90 font-light">
+                    @if($show_spinner=='true')<x-bladewind::spinner></x-bladewind::spinner>@endif 
+                    @if($currency!=='' && $currency_position == 'left') <span class="text-gray-300 text-2xl">{{$currency}}</span>@endif<span class="figure tracking-wider">{{ $number }}</span>@if($currency!=='' && $currency_position == 'right') <span class="text-gray-300 text-2xl">{{$currency}}</span>@endif
+                </div>
+                @if($label_position=='bottom')
+                <div class="uppercase tracking-wide text-xs zoom-out text-gray-400/90 mt-1 label">{{ $label}}</div>
+                @endif
+            </div>
+            @if($icon !== '' && $icon_position=='right')
+            <div class="grow-0 icon">{!! $icon !!}</div>
+            @endif
+        </div>
+    </div>
\ No newline at end of file

From 3dde00191797759b706f76ca18f2ed4e0418edd2 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Tue, 10 May 2022 10:47:29 +0300
Subject: [PATCH 3/9] added component/progress-bar

---
 .../assets/compiled/css/bladewind-ui.min.css  | 65 ++++++++-----------
 .../views/components/list-item.blade.php      |  1 +
 .../components/list-view-container.blade.php  |  3 -
 .../views/components/list-view-item.blade.php | 25 -------
 .../views/components/list-view.blade.php      |  7 ++
 .../views/components/progress-bar.blade.php   | 48 ++++++++++++++
 .../views/components/statistic.blade.php      |  2 +-
 src/resources/views/components/tag.blade.php  |  2 +-
 8 files changed, 84 insertions(+), 69 deletions(-)
 create mode 100644 src/resources/views/components/list-item.blade.php
 delete mode 100644 src/resources/views/components/list-view-container.blade.php
 delete mode 100644 src/resources/views/components/list-view-item.blade.php
 create mode 100644 src/resources/views/components/list-view.blade.php
 create mode 100644 src/resources/views/components/progress-bar.blade.php

diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index f406aac..706a309 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -476,22 +476,18 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .top-10{top:2.5rem}
 .bottom-10{bottom:2.5rem}
 .right-0{right:0px}
-.right-5{right:1.25rem}
-.top-5{top:1.25rem}
 .z-40{z-index:40}
 .z-30{z-index:30}
 .z-50{z-index:50}
 .z-20{z-index:20}
 .z-10{z-index:10}
-.m-0{margin:0px}
-.-m-1{margin:-0.25rem}
-.-m-8{margin:-2rem}
 .mx-auto{margin-left:auto;margin-right:auto}
 .-mx-1{margin-left:-0.25rem;margin-right:-0.25rem}
 .my-4{margin-top:1rem;margin-bottom:1rem}
 .\!mx-6{margin-left:1.5rem !important;margin-right:1.5rem !important}
 .my-auto{margin-top:auto;margin-bottom:auto}
 .my-3{margin-top:0.75rem;margin-bottom:0.75rem}
+.my-2{margin-top:0.5rem;margin-bottom:0.5rem}
 .mx-\[-3px\]{margin-left:-3px;margin-right:-3px}
 .ml-3{margin-left:0.75rem}
 .ml-\[230px\]{margin-left:230px}
@@ -515,29 +511,13 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .mb-7{margin-bottom:1.75rem}
 .mt-4{margin-top:1rem}
 .mb-4{margin-bottom:1rem}
-.-mt-4{margin-top:-1rem}
-.mr-4{margin-right:1rem}
 .-mr-2{margin-right:-0.5rem}
 .mt-8{margin-top:2rem}
-.mb-6{margin-bottom:1.5rem}
-.mb-8{margin-bottom:2rem}
-.-mb-px{margin-bottom:-1px}
-.\!-mr-2{margin-right:-0.5rem !important}
-.ml-\[2px\]{margin-left:2px}
-.\!ml-\[2px\]{margin-left:2px !important}
-.mr-\[-4px\]{margin-right:-4px}
 .mr-\[-2px\]{margin-right:-2px}
-.mb-\[-2px\]{margin-bottom:-2px}
-.mb-0{margin-bottom:0px}
-.mb-\[-1px\]{margin-bottom:-1px}
-.mt-\[-2px\]{margin-top:-2px}
-.mt-0{margin-top:0px}
 .mt-\[-1px\]{margin-top:-1px}
-.mr-\[-5px\]{margin-right:-5px}
-.mr-\[-3px\]{margin-right:-3px}
-.ml-\[-3px\]{margin-left:-3px}
-.-mt-8{margin-top:-2rem}
-.\!-mt-8{margin-top:-2rem !important}
+.\!ml-\[2px\]{margin-left:2px !important}
+.-mb-px{margin-bottom:-1px}
+.\!-mr-2{margin-right:-0.5rem !important}
 .block{display:block}
 .inline-block{display:inline-block}
 .inline{display:inline}
@@ -563,10 +543,10 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .h-1{height:0.25rem}
 .h-full{height:100%}
 .h-14{height:3.5rem}
-.h-24{height:6rem}
-.h-36{height:9rem}
 .h-7{height:1.75rem}
 .h-11{height:2.75rem}
+.h-24{height:6rem}
+.h-36{height:9rem}
 .min-h-screen{min-height:100vh}
 .w-full{width:100%}
 .w-6{width:1.5rem}
@@ -688,10 +668,10 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .w-1\/3{width:33.333333%}
 .w-1\/2{width:50%}
 .w-14{width:3.5rem}
-.w-24{width:6rem}
-.w-36{width:9rem}
 .w-7{width:1.75rem}
 .w-11{width:2.75rem}
+.w-24{width:6rem}
+.w-36{width:9rem}
 .min-w-full{min-width:100%}
 .max-w-7xl{max-width:80rem}
 .max-w-6xl{max-width:72rem}
@@ -720,6 +700,7 @@ to{transform:rotate(360deg)}}
 .gap-2{gap:0.5rem}
 .space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}
 .divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}
+.divide-gray-200\/70 > :not([hidden]) ~ :not([hidden]){border-color:rgb(229 231 235 / 0.7)}
 .overflow-hidden{overflow:hidden}
 .whitespace-nowrap{white-space:nowrap}
 .rounded-full{border-radius:9999px}
@@ -732,10 +713,11 @@ to{transform:rotate(360deg)}}
 .\!border-0{border-width:0px !important}
 .border-2{border-width:2px}
 .border-b{border-bottom-width:1px}
-.border-b-2{border-bottom-width:2px}
 .border-t{border-top-width:1px}
+.border-b-2{border-bottom-width:2px}
 .border-dashed{border-style:dashed}
 .\!border-red-400{--tw-border-opacity:1 !important;border-color:rgb(248 113 113 / var(--tw-border-opacity)) !important}
+.border-gray-100\/30{border-color:rgb(243 244 246 / 0.3)}
 .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
 .border-gray-100\/80{border-color:rgb(243 244 246 / 0.8)}
 .border-transparent{border-color:transparent}
@@ -745,10 +727,6 @@ to{transform:rotate(360deg)}}
 .border-blue-400\/80{border-color:rgb(96 165 250 / 0.8)}
 .border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
 .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}
-.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}
-.border-gray-50{--tw-border-opacity:1;border-color:rgb(249 250 251 / var(--tw-border-opacity))}
-.border-gray-50\/70{border-color:rgb(249 250 251 / 0.7)}
-.border-gray-100\/30{border-color:rgb(243 244 246 / 0.3)}
 .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}
 .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}
 .bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity))}
@@ -781,6 +759,8 @@ to{transform:rotate(360deg)}}
 .bg-black\/40{background-color:rgb(0 0 0 / 0.4)}
 .bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}
 .bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}
+.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}
+.bg-slate-200\/70{background-color:rgb(226 232 240 / 0.7)}
 .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}
 .bg-pink-100\/80{background-color:rgb(252 231 243 / 0.8)}
 .bg-cyan-100\/80{background-color:rgb(207 250 254 / 0.8)}
@@ -799,8 +779,16 @@ to{transform:rotate(360deg)}}
 .bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}
 .bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}
 .bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}
-.bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
-.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}
+.\!bg-slate-300{--tw-bg-opacity:1 !important;background-color:rgb(203 213 225 / var(--tw-bg-opacity)) !important}
+.bg-red-200\/80{background-color:rgb(254 202 202 / 0.8)}
+.bg-yellow-200\/80{background-color:rgb(254 240 138 / 0.8)}
+.bg-green-200\/80{background-color:rgb(187 247 208 / 0.8)}
+.bg-pink-200\/80{background-color:rgb(251 207 232 / 0.8)}
+.bg-cyan-200\/80{background-color:rgb(165 243 252 / 0.8)}
+.bg-gray-200\/80{background-color:rgb(229 231 235 / 0.8)}
+.bg-blue-200\/80{background-color:rgb(191 219 254 / 0.8)}
+.bg-purple-200\/80{background-color:rgb(233 213 255 / 0.8)}
+.bg-orange-200\/80{background-color:rgb(254 215 170 / 0.8)}
 .object-cover{-o-object-fit:cover;object-fit:cover}
 .object-top{-o-object-position:top;object-position:top}
 .p-3{padding:0.75rem}
@@ -822,6 +810,7 @@ to{transform:rotate(360deg)}}
 .px-6{padding-left:1.5rem;padding-right:1.5rem}
 .py-4{padding-top:1rem;padding-bottom:1rem}
 .py-6{padding-top:1.5rem;padding-bottom:1.5rem}
+.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
 .px-\[10px\]{padding-left:10px;padding-right:10px}
 .py-\[5px\]{padding-top:5px;padding-bottom:5px}
 .pl-2{padding-left:0.5rem}
@@ -902,7 +891,6 @@ to{transform:rotate(360deg)}}
 .text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}
 .text-blue-50{--tw-text-opacity:1;color:rgb(239 246 255 / var(--tw-text-opacity))}
 .text-orange-50{--tw-text-opacity:1;color:rgb(255 247 237 / var(--tw-text-opacity))}
-.text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60 / var(--tw-text-opacity))}
 .\!placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
 .\!placeholder-gray-400:-ms-input-placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
 .\!placeholder-gray-400::placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
@@ -927,8 +915,8 @@ to{transform:rotate(360deg)}}
 .transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
 .duration-100{transition-duration:100ms}
 .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
-.hover\:mx-\[-2px\]:hover{margin-left:-2px;margin-right:-2px}
-.hover\:mr-\[-2px\]:hover{margin-right:-2px}
+.first\:pt-0:first-child{padding-top:0px}
+.last\:pb-0:last-child{padding-bottom:0px}
 .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
 .hover\:border-blue-600:hover{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
 .hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}
@@ -945,7 +933,6 @@ to{transform:rotate(360deg)}}
 .hover\:bg-opacity-75:hover{--tw-bg-opacity:0.75}
 .hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
 .hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}
-.hover\:text-orange-700:hover{--tw-text-opacity:1;color:rgb(194 65 12 / var(--tw-text-opacity))}
 .hover\:opacity-100:hover{opacity:1}
 .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
 .focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity))}
diff --git a/src/resources/views/components/list-item.blade.php b/src/resources/views/components/list-item.blade.php
new file mode 100644
index 0000000..1428f0c
--- /dev/null
+++ b/src/resources/views/components/list-item.blade.php
@@ -0,0 +1 @@
+<li class="flex px-4 py-4 first:pt-0 last:pb-0">{{$slot}}</li>
\ No newline at end of file
diff --git a/src/resources/views/components/list-view-container.blade.php b/src/resources/views/components/list-view-container.blade.php
deleted file mode 100644
index 725d57f..0000000
--- a/src/resources/views/components/list-view-container.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-<div {{ $attributes->merge(['class' => "divide-y -mt-4"]) }}>
-    {{ $slot }}
-</div>
\ No newline at end of file
diff --git a/src/resources/views/components/list-view-item.blade.php b/src/resources/views/components/list-view-item.blade.php
deleted file mode 100644
index c1ffd98..0000000
--- a/src/resources/views/components/list-view-item.blade.php
+++ /dev/null
@@ -1,25 +0,0 @@
-@props([
-    'column1_title' => '',
-    'column1_content' => '',
-    'column2_content' => '',
-    'avatar' => '',
-    'avatar_alt' => ''
-])
-<div class="flex py-4">
-    @if($avatar !== '')
-        <div>
-            <div class="mr-4 w-12 h-12 rounded-full ring-2 ring-gray-200 ring-offset-2 overflow-hidden bg-gray-50">
-                <img src="{{ $avatar }}" alt="{{ $avatar_alt }}" class="object-cover object-top" />
-            </div>
-        </div>
-    @endif
-    <div class="flex-grow">
-        <div class="block">
-            <div class="text-gray-600 text-sm">{{ $column1_title }}</div>
-            <div class="text-sm zoom-out text-gray-500/80">{{ $column1_content }}</div>
-        </div>
-    </div>
-    <div class="text-right">
-        {{ $column2_content }}
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/resources/views/components/list-view.blade.php b/src/resources/views/components/list-view.blade.php
new file mode 100644
index 0000000..fb5fb3b
--- /dev/null
+++ b/src/resources/views/components/list-view.blade.php
@@ -0,0 +1,7 @@
+@props([
+    'transparent' => 'false',
+    'css' => ''
+])
+<ul role="list" class="@if($transparent=='false')bg-white @endif py-4 divide-y divide-gray-200/70 {{$css}}">
+    {{ $slot }}
+</ul>
\ No newline at end of file
diff --git a/src/resources/views/components/progress-bar.blade.php b/src/resources/views/components/progress-bar.blade.php
new file mode 100644
index 0000000..c127685
--- /dev/null
+++ b/src/resources/views/components/progress-bar.blade.php
@@ -0,0 +1,48 @@
+@php use Illuminate\Support\Str; @endphp
+@props([
+    'percentage' => 0,
+    'color' => 'blue',
+    'show_percentage_label' => 'false',
+    'show_percentage_label_inline' => 'true',
+    'percentage_label_position' => 'top left',
+    'shade' => 'faint',
+    'color_weight' => [
+        'faint' => 200,
+        'dark' => 500,
+    ],
+    'text_color_weight' => [
+        'faint' => 500,
+        'dark' => 50,
+    ],
+    'percentage_prefix' => '',
+    'percentage_suffix' => '',
+    'css' => '',
+    'css_override' => '',
+])
+@php 
+    if ($color == 'gray' && $shade == 'faint') {
+        $css_override = '!bg-slate-300';
+    }
+@endphp
+<div class="w-[0%] w-[1%] w-[2%] w-[3%] w-[4%] w-[5%] w-[6%] w-[7%] w-[8%] w-[9%] w-[10%] w-[11%] w-[12%] w-[13%] w-[14%] w-[15%] w-[16%] w-[17%] w-[18%] w-[19%] w-[20%] w-[21%] w-[22%] w-[23%] w-[24%] w-[25%] w-[26%] w-[27%] w-[28%] w-[29%] w-[30%] w-[31%] w-[32%] w-[33%] w-[34%] w-[35%] w-[36%] w-[37%] w-[38%] w-[39%] w-[40%] w-[41%] w-[42%] w-[43%] w-[44%] w-[45%] w-[46%] w-[47%] w-[48%] w-[49%] w-[50%] w-[51%] w-[52%] w-[53%] w-[54%] w-[55%] w-[56%] w-[57%] w-[58%] w-[59%] w-[60%] w-[61%] w-[62%] w-[63%] w-[64%] w-[65%] w-[66%] w-[67%] w-[68%] w-[69%] w-[70%] w-[71%] w-[72%] w-[73%] w-[74%] w-[75%] w-[76%] w-[77%] w-[78%] w-[79%] w-[80%] w-[81%] w-[82%] w-[83%] w-[84%] w-[85%] w-[86%] w-[87%] w-[88%] w-[89%] w-[90%] w-[91%] w-[92%] w-[93%] w-[94%] w-[95%] w-[96%] w-[97%] w-[98%] w-[99%] w-[100%]"></div>
+<div class="bw-progress-bar {{$css}}">
+    @if($show_percentage_label == 'true' && 
+        $show_percentage_label_inline == 'false' && 
+        Str::contains($percentage_label_position, 'top'))
+    <div class="text-sm {{str_replace('top ','text-', $percentage_label_position)}}">
+        {{$percentage_prefix}} {{ $percentage}}% {{$percentage_suffix}}
+    </div>
+    @endif
+    <div class="bg-slate-200/70 w-full mt-1 my-2 rounded-full">
+        <div class="w-[{{$percentage}}%] text-center py-1 bg-{{$color}}-{{$color_weight[$shade]}}/80 {{$css_override}} text-{{$color}} rounded-full bar-width animate__animated animate__fadeIn">
+            @if($show_percentage_label=='true' && $show_percentage_label_inline=='true')<span class="text-{{$color}}-{{$text_color_weight[$shade]}} px-2 text-xs">{{ $percentage}}%</span>@endif
+        </div>
+    </div>
+    @if($show_percentage_label == 'true' && 
+        $show_percentage_label_inline == 'false' && 
+        Str::contains($percentage_label_position, 'bottom'))
+    <div class="text-sm {{str_replace('bottom ','text-', $percentage_label_position)}}">
+        {{$percentage_prefix}} {{ $percentage}}% {{$percentage_suffix}}
+    </div>
+    @endif
+</div>
\ No newline at end of file
diff --git a/src/resources/views/components/statistic.blade.php b/src/resources/views/components/statistic.blade.php
index f8ab089..0aeb57c 100644
--- a/src/resources/views/components/statistic.blade.php
+++ b/src/resources/views/components/statistic.blade.php
@@ -11,7 +11,7 @@
     'css' => '',
 ])
 
-    <div class="bw-statistic bg-white p-6 rounded-sm relative animate__animated animate__fadeIn @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif{{$css}}">
+    <div class="bw-statistic bg-white p-6 rounded-sm relative @if($has_shadow=='true')shadow-2xl shadow-gray-200/40 @endif{{$css}}">
         <div class="flex space-x-4">
             @if($icon !== '' && $icon_position=='left')
             <div class="grow-0 icon">{!! $icon !!}</div>
diff --git a/src/resources/views/components/tag.blade.php b/src/resources/views/components/tag.blade.php
index 748f82d..fdfa417 100644
--- a/src/resources/views/components/tag.blade.php
+++ b/src/resources/views/components/tag.blade.php
@@ -16,7 +16,7 @@
     'id' => uniqid(),
     'add_id_prefix' => 'true',
 ])
-<span class="bg-red-100/80 bg-yellow-100/80 bg-green-100/80 bg-pink-100/80 bg-cyan-100/80 bg-gray-100/80 bg-blue-100/80 bg-purple-100/80 bg-orange-100/80 bg-red-500/80 bg-yellow-500/80 bg-green-500/80 bg-pink-500/80 bg-gray-500/80 bg-cyan-500/80 bg-blue-500/80 bg-gray-500/80 bg-purple-500/80 bg-orange-500/80 text-red-500 text-yellow-500 text-green-500 bg-gray-500 text-pink-500 text-cyan-500 text-purple-500 text-orange-500 text-red-50 text-yellow-50 text-green-50 text-pink-50 text-cyan-50 text-purple-50 text-gray-50 text-blue-50 text-orange-50"></span>
+<span class="bg-red-100/80 bg-yellow-100/80 bg-green-100/80 bg-pink-100/80 bg-cyan-100/80 bg-gray-100/80 bg-blue-100/80 bg-purple-100/80 bg-orange-100/80 bg-red-500/80 bg-yellow-500/80 bg-green-500/80 bg-pink-500/80 bg-gray-500/80 bg-cyan-500/80 bg-blue-500/80 bg-gray-500/80 bg-purple-500/80 bg-orange-500/80 text-red-500 text-yellow-500 text-green-500 bg-gray-500 text-pink-500 text-cyan-500 text-purple-500 text-orange-500 text-red-50 text-yellow-50 text-green-50 text-pink-50 text-cyan-50 text-purple-50 text-gray-50 text-blue-50 text-orange-50 bg-red-200/80 bg-yellow-200/80 bg-green-200/80 bg-pink-200/80 bg-cyan-200/80 bg-gray-200/80 bg-blue-200/80 bg-purple-200/80 bg-orange-200/80"></span>
 <label style="zoom:95%" id="@if($add_id_prefix=='true')bw-@endif{{$id}}" class="text-xs uppercase px-[10px] py-[5px] tracking-widest whitespace-nowrap inline-block bg-{{$color}}-{{$color_weight[$shade]}}/80 text-{{$color}}-{{$text_color_weight[$shade]}} {{$css}}">
 {{ $label }}
 @if($can_close == 'true')

From e37361c82084b051622b666bb918bc4631f94dc7 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Tue, 10 May 2022 12:36:40 +0300
Subject: [PATCH 4/9] added component/horizontal-line-graph

---
 .../assets/compiled/css/bladewind-ui.min.css  | 10 +++++++
 .../horizontal-line-graph.blade.php           | 30 ++++++++++---------
 .../views/components/progress-bar.blade.php   | 14 ++++-----
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index 706a309..1448ed9 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -899,6 +899,16 @@ to{transform:rotate(360deg)}}
 .opacity-25{opacity:0.25}
 .opacity-75{opacity:0.75}
 .opacity-70{opacity:0.7}
+.opacity-80{opacity:0.8}
+.opacity-50{opacity:0.5}
+.opacity-100{opacity:1}
+.opacity-0{opacity:0}
+.opacity-5{opacity:0.05}
+.opacity-10{opacity:0.1}
+.opacity-20{opacity:0.2}
+.opacity-30{opacity:0.3}
+.opacity-90{opacity:0.9}
+.opacity-95{opacity:0.95}
 .shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
diff --git a/src/resources/views/components/horizontal-line-graph.blade.php b/src/resources/views/components/horizontal-line-graph.blade.php
index 547f374..676ff8d 100644
--- a/src/resources/views/components/horizontal-line-graph.blade.php
+++ b/src/resources/views/components/horizontal-line-graph.blade.php
@@ -1,18 +1,20 @@
+@php use Illuminate\Support\Str; @endphp
 @props([
     'label' => '',
     'percentage' => 0,
-    'color' => 'gray',
-    'showPercentage' => 'true',
-    'showLabel' => 'true'
+    'color' => 'blue',
+    'shade' => 'faint',
+    'percentage_label_opacity' => '50',
+    'css' => '',
 ])
-<div class="bg-gray-300 bg-blue-300 bg-green-300 bg-red-300 bg-yellow-300 bg-black bg-orange-300"></div>
-<div class="w-[0%] w-[1%] w-[2%] w-[3%] w-[4%] w-[5%] w-[6%] w-[7%] w-[8%] w-[9%] w-[10%] w-[11%] w-[12%] w-[13%] w-[14%] w-[15%] w-[16%] w-[17%] w-[18%] w-[19%] w-[20%] w-[21%] w-[22%] w-[23%] w-[24%] w-[25%] w-[26%] w-[27%] w-[28%] w-[29%] w-[30%] w-[31%] w-[32%] w-[33%] w-[34%] w-[35%] w-[36%] w-[37%] w-[38%] w-[39%] w-[40%] w-[41%] w-[42%] w-[43%] w-[44%] w-[45%] w-[46%] w-[47%] w-[48%] w-[49%] w-[50%] w-[51%] w-[52%] w-[53%] w-[54%] w-[55%] w-[56%] w-[57%] w-[58%] w-[59%] w-[60%] w-[61%] w-[62%] w-[63%] w-[64%] w-[65%] w-[66%] w-[67%] w-[68%] w-[69%] w-[70%] w-[71%] w-[72%] w-[73%] w-[74%] w-[75%] w-[76%] w-[77%] w-[78%] w-[79%] w-[80%] w-[81%] w-[82%] w-[83%] w-[84%] w-[85%] w-[86%] w-[87%] w-[88%] w-[89%] w-[90%] w-[91%] w-[92%] w-[93%] w-[94%] w-[95%] w-[96%] w-[97%] w-[98%] w-[99%] w-[100%]"></div>
-
-<div {{ $attributes->merge(['class' => ""]) }}>
-    @if($showLabel == 'true')
-    <span class="text-xs">{{ $label }} @if($showPercentage == 'true')(<span class="legend">{{ $slot }}{{ $percentage}}</span>%) @endif</span>
-    @endif
-    <div class="bg-gray-100 w-full mt-1 mb-4">
-        <div class="w-[{{$percentage}}%] h-1 bg-{{$color}}-300 rounded-full bar-width"></div>
-    </div>
-</div>
\ No newline at end of file
+<span class="opacity-0 opacity-5 opacity-10 opacity-20 opacity-25 opacity-30 opacity-40 opacity-50 opacity-60 opacity-70 opacity-75 opacity-80 opacity-90 opacity-95 opacity-100"></span>
+<x-bladewind::progress-bar 
+    percentage="{{$percentage}}" 
+    shade="{{$shade}}"
+    color="{{$color}}"
+    percentage_prefix="{{$label}}"
+    show_percentage_label="true"
+    show_percentage_label_inline="false"
+    percentage_label_position="top left"
+    percentage_label_opacity="{{$percentage_label_opacity}}"
+    css={{$css}} />
\ No newline at end of file
diff --git a/src/resources/views/components/progress-bar.blade.php b/src/resources/views/components/progress-bar.blade.php
index c127685..a3677a8 100644
--- a/src/resources/views/components/progress-bar.blade.php
+++ b/src/resources/views/components/progress-bar.blade.php
@@ -18,19 +18,19 @@
     'percentage_suffix' => '',
     'css' => '',
     'css_override' => '',
+    'percentage_label_opacity' => '100'
 ])
 @php 
-    if ($color == 'gray' && $shade == 'faint') {
-        $css_override = '!bg-slate-300';
-    }
+    if ($color == 'gray' && $shade == 'faint') $css_override = '!bg-slate-300';
+    if(! is_numeric($percentage_label_opacity*1)) $percentage_label_opacity = '100';
 @endphp
 <div class="w-[0%] w-[1%] w-[2%] w-[3%] w-[4%] w-[5%] w-[6%] w-[7%] w-[8%] w-[9%] w-[10%] w-[11%] w-[12%] w-[13%] w-[14%] w-[15%] w-[16%] w-[17%] w-[18%] w-[19%] w-[20%] w-[21%] w-[22%] w-[23%] w-[24%] w-[25%] w-[26%] w-[27%] w-[28%] w-[29%] w-[30%] w-[31%] w-[32%] w-[33%] w-[34%] w-[35%] w-[36%] w-[37%] w-[38%] w-[39%] w-[40%] w-[41%] w-[42%] w-[43%] w-[44%] w-[45%] w-[46%] w-[47%] w-[48%] w-[49%] w-[50%] w-[51%] w-[52%] w-[53%] w-[54%] w-[55%] w-[56%] w-[57%] w-[58%] w-[59%] w-[60%] w-[61%] w-[62%] w-[63%] w-[64%] w-[65%] w-[66%] w-[67%] w-[68%] w-[69%] w-[70%] w-[71%] w-[72%] w-[73%] w-[74%] w-[75%] w-[76%] w-[77%] w-[78%] w-[79%] w-[80%] w-[81%] w-[82%] w-[83%] w-[84%] w-[85%] w-[86%] w-[87%] w-[88%] w-[89%] w-[90%] w-[91%] w-[92%] w-[93%] w-[94%] w-[95%] w-[96%] w-[97%] w-[98%] w-[99%] w-[100%]"></div>
 <div class="bw-progress-bar {{$css}}">
     @if($show_percentage_label == 'true' && 
         $show_percentage_label_inline == 'false' && 
         Str::contains($percentage_label_position, 'top'))
-    <div class="text-sm {{str_replace('top ','text-', $percentage_label_position)}}">
-        {{$percentage_prefix}} {{ $percentage}}% {{$percentage_suffix}}
+    <div class="text-xs tracking-wider {{str_replace('top ','text-', $percentage_label_position)}}">
+        {{$percentage_prefix}} <span class="opacity-{{$percentage_label_opacity}}">{{ $percentage}}%</span> {{$percentage_suffix}}
     </div>
     @endif
     <div class="bg-slate-200/70 w-full mt-1 my-2 rounded-full">
@@ -41,8 +41,8 @@
     @if($show_percentage_label == 'true' && 
         $show_percentage_label_inline == 'false' && 
         Str::contains($percentage_label_position, 'bottom'))
-    <div class="text-sm {{str_replace('bottom ','text-', $percentage_label_position)}}">
-        {{$percentage_prefix}} {{ $percentage}}% {{$percentage_suffix}}
+    <div class="text-xs tracking-wider {{str_replace('bottom ','text-', $percentage_label_position)}}">
+        {{$percentage_prefix}} <span class="opacity-{{$percentage_label_opacity}}">{{ $percentage}}%</span> {{$percentage_suffix}}
     </div>
     @endif
 </div>
\ No newline at end of file

From 1c0b315d9d7763a2a2a4be276bc8c97b85453053 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Wed, 11 May 2022 18:24:20 +0000
Subject: [PATCH 5/9] added component/toggle

---
 .../assets/compiled/css/bladewind-ui.min.css  | 40 +++++++++++++++++++
 .../views/components/modal.blade.php          |  8 ++--
 .../components/process-complete.blade.php     | 17 ++++----
 .../views/components/processing.blade.php     |  6 +--
 .../views/components/toggle.blade.php         | 31 ++++++++++++++
 5 files changed, 88 insertions(+), 14 deletions(-)
 create mode 100644 src/resources/views/components/toggle.blade.php

diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index 1448ed9..fcb01a8 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -462,6 +462,7 @@ table.with-hover-effect tr:nth-child(even)>td:first-child{border-left-width:2px;
 table.with-hover-effect tr:nth-child(even)>td:last-child{border-right-width:2px;--tw-border-opacity:1;border-right-color:rgb(249 250 251 / var(--tw-border-opacity))}
 table.with-hover-effect tr:nth-child(even):hover>td:first-child{border-left-width:2px;--tw-border-opacity:1;border-left-color:rgb(134 239 172 / var(--tw-border-opacity))}
 table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-width:2px;--tw-border-opacity:1;border-right-color:rgb(134 239 172 / var(--tw-border-opacity))}
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}
 .pointer-events-none{pointer-events:none}
 .fixed{position:fixed}
 .absolute{position:absolute}
@@ -476,6 +477,9 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .top-10{top:2.5rem}
 .bottom-10{bottom:2.5rem}
 .right-0{right:0px}
+.-left-1{left:-0.25rem}
+.-top-1{top:-0.25rem}
+.left-1\/2{left:50%}
 .z-40{z-index:40}
 .z-30{z-index:30}
 .z-50{z-index:50}
@@ -518,6 +522,7 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .\!ml-\[2px\]{margin-left:2px !important}
 .-mb-px{margin-bottom:-1px}
 .\!-mr-2{margin-right:-0.5rem !important}
+.mb-12{margin-bottom:3rem}
 .block{display:block}
 .inline-block{display:inline-block}
 .inline{display:inline}
@@ -680,9 +685,11 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .max-w-md{max-width:28rem}
 .max-w-xl{max-width:36rem}
 .flex-none{flex:none}
+.flex-shrink-0{flex-shrink:0}
 .flex-grow{flex-grow:1}
 .grow{flex-grow:1}
 .grow-0{flex-grow:0}
+.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
 @-webkit-keyframes spin{
 to{transform:rotate(360deg)}}
 @keyframes spin{
@@ -691,6 +698,7 @@ to{transform:rotate(360deg)}}
 .cursor-pointer{cursor:pointer}
 .cursor-default{cursor:default}
 .cursor-not-allowed{cursor:not-allowed}
+.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}
 .grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
 .flex-wrap{flex-wrap:wrap}
 .items-start{align-items:flex-start}
@@ -707,6 +715,7 @@ to{transform:rotate(360deg)}}
 .rounded-lg{border-radius:0.5rem}
 .rounded{border-radius:0.25rem}
 .rounded-sm{border-radius:0.125rem}
+.rounded-md{border-radius:0.375rem}
 .rounded-br-lg{border-bottom-right-radius:0.5rem}
 .rounded-bl-lg{border-bottom-left-radius:0.5rem}
 .border{border-width:1px}
@@ -727,6 +736,7 @@ to{transform:rotate(360deg)}}
 .border-blue-400\/80{border-color:rgb(96 165 250 / 0.8)}
 .border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
 .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}
+.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}
 .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}
 .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}
 .bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity))}
@@ -789,6 +799,8 @@ to{transform:rotate(360deg)}}
 .bg-blue-200\/80{background-color:rgb(191 219 254 / 0.8)}
 .bg-purple-200\/80{background-color:rgb(233 213 255 / 0.8)}
 .bg-orange-200\/80{background-color:rgb(254 215 170 / 0.8)}
+.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}
+.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}
 .object-cover{-o-object-fit:cover;object-fit:cover}
 .object-top{-o-object-position:top;object-position:top}
 .p-3{padding:0.75rem}
@@ -830,6 +842,8 @@ to{transform:rotate(360deg)}}
 .pl-10{padding-left:2.5rem}
 .pl-6{padding-left:1.5rem}
 .pb-1{padding-bottom:0.25rem}
+.pr-2{padding-right:0.5rem}
+.pl-4{padding-left:1rem}
 .text-left{text-align:left}
 .text-center{text-align:center}
 .text-right{text-align:right}
@@ -913,6 +927,8 @@ to{transform:rotate(360deg)}}
 .shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
+.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
+.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-gray-100{--tw-shadow-color:#f3f4f6;--tw-shadow:var(--tw-shadow-colored)}
 .shadow-gray-200\/40{--tw-shadow-color:rgb(229 231 235 / 0.4);--tw-shadow:var(--tw-shadow-colored)}
 .shadow-gray-200{--tw-shadow-color:#e5e7eb;--tw-shadow:var(--tw-shadow-colored)}
@@ -924,7 +940,14 @@ to{transform:rotate(360deg)}}
 .backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
 .transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
 .duration-100{transition-duration:100ms}
+.duration-300{transition-duration:300ms}
 .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}
+.after\:h-8::after{content:var(--tw-content);height:2rem}
+.after\:w-8::after{content:var(--tw-content);width:2rem}
+.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}
+.after\:bg-white::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}
+.after\:shadow-md::after{content:var(--tw-content);--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
+.after\:duration-300::after{content:var(--tw-content);transition-duration:300ms}
 .first\:pt-0:first-child{padding-top:0px}
 .last\:pb-0:last-child{padding-bottom:0px}
 .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
@@ -966,5 +989,22 @@ to{transform:rotate(360deg)}}
 .active\:bg-pink-700:active{--tw-bg-opacity:1;background-color:rgb(190 24 93 / var(--tw-bg-opacity))}
 .active\:bg-black:active{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
 .disabled\:opacity-60:disabled{opacity:0.6}
+.group:hover .group-hover\:after\:translate-x-0::after{content:var(--tw-content);--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
+.peer:checked ~ .peer-checked\:bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:bg-red-500\/80{background-color:rgb(239 68 68 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:bg-blue-500\/80{background-color:rgb(59 130 246 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-yellow-500\/80{background-color:rgb(234 179 8 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-green-500\/80{background-color:rgb(34 197 94 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-pink-500\/80{background-color:rgb(236 72 153 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-cyan-500\/80{background-color:rgb(6 182 212 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:bg-purple-500\/80{background-color:rgb(168 85 247 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-orange-500\/80{background-color:rgb(249 115 22 / 0.8)}
+.peer:checked ~ .peer-checked\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:after\:translate-x-10::after{content:var(--tw-content);--tw-translate-x:2.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
+.peer:disabled ~ .peer-disabled\:opacity-20{opacity:0.2}
+.peer:disabled ~ .peer-disabled\:opacity-40{opacity:0.4}
 @media (prefers-color-scheme: dark){
 .dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}}
diff --git a/src/resources/views/components/modal.blade.php b/src/resources/views/components/modal.blade.php
index 9feadd5..07bf7c0 100644
--- a/src/resources/views/components/modal.blade.php
+++ b/src/resources/views/components/modal.blade.php
@@ -94,9 +94,11 @@ class="w-full h-full bg-black/40 fixed left-0 top-0 backdrop-blur-md z-40 flex b
         e.stopImmediatePropagation(); 
     });
 
-    dom_els('.bw-{{$name}}-modal .modal-footer>button').forEach((el) => {
-        el.addEventListener('click', function (e){ e.stopImmediatePropagation(); });
-    });
+    if(dom_els('.bw-{{$name}}-modal .modal-footer>button')){
+        dom_els('.bw-{{$name}}-modal .modal-footer>button').forEach((el) => {
+            el.addEventListener('click', function (e){ e.stopImmediatePropagation(); });
+        });
+    }
 
     document.addEventListener('keyup', function(e){
         if(e.key === "Escape") {
diff --git a/src/resources/views/components/process-complete.blade.php b/src/resources/views/components/process-complete.blade.php
index 340d3e5..93c55c9 100644
--- a/src/resources/views/components/process-complete.blade.php
+++ b/src/resources/views/components/process-complete.blade.php
@@ -3,20 +3,21 @@
     // available options are passed and failed
     // default is passed and it shows a green thumbsup icon
     // failed process shows a red thumbs down icon
-    'processCompletedAs' => 'passed',
+    'process_completed_as' => 'passed',
 
     // message to display when process is complete
     'message' => '',
 
     // text to display on the button when process is complete
-    'buttonLabel' => '',
+    'button_label' => '',
     
     // a javascript function that will be called when the button is clicked on
-    'buttonAction' => ''
+    'button_action' => '',
+    'hide' => 'true',
 ])
-@php $name = preg_replace('/[\s-]/', '_', $name); @endphp
-<div class="{{$name}} text-center mt-6 hidden">
-    @if($processCompletedAs === 'passed')
+@php $name = preg_replace('/[\s]/', '-', $name); @endphp
+<div class="{{$name}} text-center mt-6 {{$hide}}">
+    @if($process_completed_as === 'passed')
         <svg xmlns="http://www.w3.org/2000/svg" class="h-14 w-14 block mx-auto bg-green-400 text-white rounded-full p-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
         </svg>
@@ -25,9 +26,9 @@
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5" />
         </svg>
     @endif
-    <div class="my-3 text-sm @if($processCompletedAs === 'passed') text-green-600 @else text-red-600 @endif">
+    <div class="my-3 text-sm @if($process_completed_as === 'passed') text-green-600 @else text-red-600 @endif">
         {{ $message }} <span class="error-message"></span>
         <div class="mt-8"></div>
-        <x-button type="tiny" onclick="{{$buttonAction}}">{{ $buttonLabel }}</x-button>
+        <x-bladewind::button type="secondary" size="tiny" onclick="{{$button_action}}">{{ $button_label }}</x-bladewind::button>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/resources/views/components/processing.blade.php b/src/resources/views/components/processing.blade.php
index 7a04005..0d761ef 100644
--- a/src/resources/views/components/processing.blade.php
+++ b/src/resources/views/components/processing.blade.php
@@ -1,7 +1,7 @@
 @props([ 
     'name' => 'processing',
 
-    // the process indicator is rendered with the page and so by default
+    // the process indicator is rendered within the page and so by default
     // its hidden until a process needs to be started
     // you can set this to false to unhide the process indicator on page load
     'hide' => 'true',
@@ -9,8 +9,8 @@
     // message to display when the process is running
     'message' => '',
 ])
-@php $name = preg_replace('/[\s-]/', '_', $name); @endphp
+@php $name = preg_replace('/[\s]/', '-', $name); @endphp
 <div class="{{ $name }} text-center text-sm @if($hide == 'true') hidden @endif mt-6">
-    <x-spinner />
+    <x-bladewind::spinner />
     <div class="my-3 text-gray-400">{{ $message }}</div>
 </div>
\ No newline at end of file
diff --git a/src/resources/views/components/toggle.blade.php b/src/resources/views/components/toggle.blade.php
new file mode 100644
index 0000000..1b47c97
--- /dev/null
+++ b/src/resources/views/components/toggle.blade.php
@@ -0,0 +1,31 @@
+@props([ 
+    // unique name for identifying the toggle element
+    // useful for checking the value of the toggle when form is submitted
+    'name' => 'bw-toggle',
+    // label to display next to the toggle element
+    'label' => '',
+    // position of the label above.. left or right
+    'label_position' => 'left',
+    // sets or unsets disabled="disabled" on the toggle element
+    'disabled' => 'false',
+    // sets or unsets checked="checked" on the toggle element
+    'checked' => 'false',
+    // background color to display when toggle is active
+    'color' => 'blue',
+    // should the label and toggle element be justified in their parent element
+    'justified' => 'false',
+    // how thin or thick should the toggle bar be
+    'bar' => 'thick',
+    // javascript function to run when toggle is clicked
+    'onclick' => 'javascript:void(0)',
+])
+@php $name = preg_replace('/[\s-]/', '_', $name); @endphp
+
+<label class="relative @if($justified=='false')inline-flex @else flex @endif justify-between items-center group" onclick="{!!$onclick!!}">
+    @if($label_position == 'left' && $label !== '')<span class="pr-4">{!!$label!!}</span>@endif
+    <input type="checkbox" name="{{$name}}" @if($checked=='true')checked="checked"@endif @if($disabled=='true')disabled="disabled"@endif class="absolute left-1/2 -translate-x-1/2 w-full h-full peer appearance-none rounded-md" />
+    <span class="w-20 @if($bar=='thick')h-10 @else h-5 @endif flex items-center flex-shrink-0 p-1 bg-gray-300 rounded-full duration-300 ease-in-out 
+                peer-disabled:opacity-40 @if($color=='red')peer-checked:bg-red-500/80 @endif @if($color=='yellow')peer-checked:bg-yellow-500/80 @endif @if($color=='green')peer-checked:bg-green-500/80 @endif @if($color=='pink')peer-checked:bg-pink-500/80 @endif @if($color=='cyan')peer-checked:bg-cyan-500/80 @endif @if($color=='gray')peer-checked:bg-slate-500 @endif @if($color=='purple')peer-checked:bg-purple-500/80 @endif @if($color=='orange')peer-checked:bg-orange-500/80 @endif @if($color=='blue')peer-checked:bg-blue-500/80 @endif after:w-8 after:h-8 after:bg-white after:rounded-full after:shadow-md after:duration-300 
+                peer-checked:after:translate-x-10 group-hover:after:translate-x-0"></span>
+    @if($label_position=='right' && $label !== '')<span class="pl-4">{!!$label!!}</span>@endif
+</label>
\ No newline at end of file

From f542ec1e6b9ac3ffe5ff7d4e17f39d36940e7a7b Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Fri, 13 May 2022 00:45:30 +0000
Subject: [PATCH 6/9] updated component/tab

---
 .../assets/compiled/css/bladewind-ui.min.css  | 15 ++++++
 src/resources/assets/compiled/js/helpers.js   | 24 +++++++++
 .../views/components/tab-body.blade.php       |  5 ++
 .../views/components/tab-content.blade.php    |  6 +--
 .../views/components/tab-contents.blade.php   | 17 ------
 .../views/components/tab-group.blade.php      | 20 +++++++
 .../views/components/tab-heading.blade.php    | 28 ++++++++++
 src/resources/views/components/tab.blade.php  | 53 -------------------
 src/resources/views/components/tabs.blade.php |  9 ----
 src/resources/views/components/tag.blade.php  |  2 +-
 10 files changed, 96 insertions(+), 83 deletions(-)
 create mode 100644 src/resources/views/components/tab-body.blade.php
 delete mode 100644 src/resources/views/components/tab-contents.blade.php
 create mode 100644 src/resources/views/components/tab-group.blade.php
 create mode 100644 src/resources/views/components/tab-heading.blade.php
 delete mode 100644 src/resources/views/components/tab.blade.php
 delete mode 100644 src/resources/views/components/tabs.blade.php

diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index fcb01a8..837c1ca 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -737,6 +737,15 @@ to{transform:rotate(360deg)}}
 .border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
 .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}
 .border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}
+.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}
+.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}
+.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8 / var(--tw-border-opacity))}
+.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94 / var(--tw-border-opacity))}
+.border-pink-500{--tw-border-opacity:1;border-color:rgb(236 72 153 / var(--tw-border-opacity))}
+.border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}
+.border-cyan-500{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))}
+.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247 / var(--tw-border-opacity))}
+.border-orange-500{--tw-border-opacity:1;border-color:rgb(249 115 22 / var(--tw-border-opacity))}
 .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}
 .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}
 .bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8 / var(--tw-bg-opacity))}
@@ -905,6 +914,9 @@ to{transform:rotate(360deg)}}
 .text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}
 .text-blue-50{--tw-text-opacity:1;color:rgb(239 246 255 / var(--tw-text-opacity))}
 .text-orange-50{--tw-text-opacity:1;color:rgb(255 247 237 / var(--tw-text-opacity))}
+.\!text-gray-500{--tw-text-opacity:1 !important;color:rgb(107 114 128 / var(--tw-text-opacity)) !important}
+.\!text-blue-500{--tw-text-opacity:1 !important;color:rgb(59 130 246 / var(--tw-text-opacity)) !important}
+.\!text-gray-200{--tw-text-opacity:1 !important;color:rgb(229 231 235 / var(--tw-text-opacity)) !important}
 .\!placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
 .\!placeholder-gray-400:-ms-input-placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
 .\!placeholder-gray-400::placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
@@ -952,6 +964,7 @@ to{transform:rotate(360deg)}}
 .last\:pb-0:last-child{padding-bottom:0px}
 .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
 .hover\:border-blue-600:hover{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
+.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}
 .hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}
 .hover\:bg-yellow-700:hover{--tw-bg-opacity:1;background-color:rgb(161 98 7 / var(--tw-bg-opacity))}
 .hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87 / var(--tw-bg-opacity))}
@@ -966,6 +979,8 @@ to{transform:rotate(360deg)}}
 .hover\:bg-opacity-75:hover{--tw-bg-opacity:0.75}
 .hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
 .hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}
+.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}
+.hover\:\!text-gray-300:hover{--tw-text-opacity:1 !important;color:rgb(209 213 219 / var(--tw-text-opacity)) !important}
 .hover\:opacity-100:hover{opacity:1}
 .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
 .focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity))}
diff --git a/src/resources/assets/compiled/js/helpers.js b/src/resources/assets/compiled/js/helpers.js
index c12e4c8..beaeaaf 100644
--- a/src/resources/assets/compiled/js/helpers.js
+++ b/src/resources/assets/compiled/js/helpers.js
@@ -199,4 +199,28 @@ animateCSS = (element, animation) =>
 
   toCurrency = (amount) => {
     return ((parseFloat(amount).toFixed(2))*1).toLocaleString();
+  }
+
+  goToTab = (el, color) => {
+      let tab_content = dom_el('.bw-tc-'+el);
+      if( tab_content === null ) {
+          alert('no matching x-bladewind.tab-content div found for this tab');
+          return false;
+      }
+      changeCssForDomArray(
+          'li.atab span', 
+          `text-${color}-500,border-${color}-500,hover:text-${color}-500,hover:border-${color}-500`, 
+          'remove');
+      changeCssForDomArray(
+          'li.atab span', 
+          'text-gray-500,border-transparent,hover:text-gray-600,hover:border-gray-300');
+      changeCss(
+          `.atab-${el} span`, 
+          'text-gray-500,border-transparent,hover:text-gray-600,hover:border-gray-300', 'remove');
+      changeCss(
+          `.atab-${el} span`, 
+          `text-${color}-500,border-${color}-500,hover:text-${color}-500,hover:border-${color}-500`);
+      
+      dom_els('div.atab-content').forEach((el) => { hide(el, true); });
+      unhide(tab_content, true);
   }
\ No newline at end of file
diff --git a/src/resources/views/components/tab-body.blade.php b/src/resources/views/components/tab-body.blade.php
new file mode 100644
index 0000000..00fd1ea
--- /dev/null
+++ b/src/resources/views/components/tab-body.blade.php
@@ -0,0 +1,5 @@
+@aware([ 'name' => 'tab'])
+@php $name = preg_replace('/[\s-]/', '_', $name); @endphp
+<div class="{{ $name }}-tab-contents" data-name="{{ $name }}">
+    {{ $slot }}
+</div>
\ No newline at end of file
diff --git a/src/resources/views/components/tab-content.blade.php b/src/resources/views/components/tab-content.blade.php
index 45be85f..071d054 100644
--- a/src/resources/views/components/tab-content.blade.php
+++ b/src/resources/views/components/tab-content.blade.php
@@ -7,9 +7,9 @@
     'name' => 'tab'
 ])
 @php 
-    $name = preg_replace('/[\s-]/', '_', $name);
-    $activeCss = ($active == 'false') ? 'hidden' : '';
+    $name = preg_replace('/[\s]/', '-', $name);
+    $active_css = ($active == 'false') ? 'hidden' : '';
 @endphp
-<div {{ $attributes->merge([ 'class' => "atab-content ag-tc-$name $activeCss" ]) }}>
+<div class="atab-content bw-tc-{{$name}} {{$active_css}} p-4">
     {{ $slot }}
 </div>
\ No newline at end of file
diff --git a/src/resources/views/components/tab-contents.blade.php b/src/resources/views/components/tab-contents.blade.php
deleted file mode 100644
index 2167690..0000000
--- a/src/resources/views/components/tab-contents.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-@props([
-    // unique way to identify this tab content container using css or javascript
-    // this name is used for grouping tab content for  their corresponding tabs
-    // the name should be the same as the name given to the tabs container x-tabs
-    'for' => 'tab'
-])
-@php 
-    $name = preg_replace('/[\s-]/', '_', $for);
-@endphp
-<div class="{{ $name }}-tab-contents" data-name="{{ $name }}">
-    {{ $slot }}
-</div>
-<script>
-    if( dom_el('.ag-tab-{{ $name }}') == null ){
-        alert('you need to define an x-tabs div with the same name as the <{{ $name }}> tab contents container');
-    }
-</script>
\ No newline at end of file
diff --git a/src/resources/views/components/tab-group.blade.php b/src/resources/views/components/tab-group.blade.php
new file mode 100644
index 0000000..e42e439
--- /dev/null
+++ b/src/resources/views/components/tab-group.blade.php
@@ -0,0 +1,20 @@
+@props([ 
+    'name' => '' ,
+    'headings' => '',
+    'color' => 'blue',
+])
+@php 
+    $name = preg_replace('/[\s]/', '-', $name);
+@endphp
+<div class="border-b border-gray-200 dark:border-gray-700 bw-tab bw-tab-{{ $name }}">
+    <ul class="flex flex-wrap -mb-px tab">
+        @php if ($name == '') dd('you need to specify the name property of the tab'); @endphp
+        {{ $headings }}
+    </ul>
+</div>
+ <x-bladewind::tab-body for="{{$name}}">
+    {{$slot}}
+</x-bladewind::tab-body>
+
+<script>
+</script>
\ No newline at end of file
diff --git a/src/resources/views/components/tab-heading.blade.php b/src/resources/views/components/tab-heading.blade.php
new file mode 100644
index 0000000..5a017d8
--- /dev/null
+++ b/src/resources/views/components/tab-heading.blade.php
@@ -0,0 +1,28 @@
+@props([
+    // the text to display on the tab
+    'label' => 'tab',
+    // available options are true or false as strings. setting this to true will set this tab 
+    // as the active tab and will be highlighted
+    'active' => 'false',
+    // defines if the tab is disabled. available options are true or false as strings not booleans
+    'disabled' => 'false',
+    // unique way to identify this tab using css or javascript
+    // this name is used for switching to a corresponding tab content
+    // if url => 'default'
+    'name' => 'tab',
+    // the default action of a tab is to switch to its corresponding tab content div 
+    // to enable switching, the tab content div needs to have the same name as the tab
+    // the alternative action is to pass a url. clicking on the tab will open the url
+    'url' => 'default',
+])
+@aware(['color' => 'blue'])
+@php 
+    $name = preg_replace('/[\s]/', '-', $name);
+@endphp
+
+<li class="mr-2 cursor-pointer atab atab-{{ $name }}">
+    <span onclick="@if($disabled == 'false') @if($url == 'default')goToTab('{{$name}}', '{{$color}}') @else location.href='{{ $url }}' @endif @else javascript:void(0)@endif" 
+        class="inline-block py-4 px-4 text-sm font-medium text-center border-b-2 @if($disabled !== 'false') text-gray-300 hover:!text-gray-300 cursor-not-allowed @else
+        @if($active !== 'true' && $disabled == 'false') text-gray-500  border-transparent hover:text-gray-600 hover:border-gray-300
+        @else text-{{$color}}-500 border-{{$color}}-500 hover:text-{{$color}}-500 hover:border-{{$color}}-500 @endif @endif">{!! $label !!}</span>
+</li>
\ No newline at end of file
diff --git a/src/resources/views/components/tab.blade.php b/src/resources/views/components/tab.blade.php
deleted file mode 100644
index e74988a..0000000
--- a/src/resources/views/components/tab.blade.php
+++ /dev/null
@@ -1,53 +0,0 @@
-@props([
-    // the text to display on the tab
-    'label' => 'tab',
-    // available options are true or false as strings. setting this to true will set this tab 
-    // as the active tab and will be highlighted
-    'active' => 'false',
-    // defines if the tab is disabled. available options are true or false as strings not booleans
-    'disabled' => 'false',
-    // unique way to identify this tab using css or javascript
-    // this name is used for switching to a corresponding tab content
-    // if action => 'default'
-    'name' => 'tab',
-    // the deafult action of a tab is to switch to its corresponding tab content div 
-    // to enable switching, the tab content div needs to have the same name as the tab
-    // the alternative action is to pass a url. clicking on the tab will open the url
-    'action' => 'default',
-    'parent' => '',
-])
-@php 
-    $name = preg_replace('/[\s-]/', '_', $name);
-@endphp
-
-<li class="mr-2 cursor-pointer atab atab-{{ $name }}">
-    <a href="@if($action !== 'default') {{ $action }} @else javascript:goToTab('{{$name}}') @endif" 
-        class="inline-block py-4 px-4 text-sm font-medium text-center border-b-2 
-        @if($active != 'true') text-gray-500  border-transparent hover:text-gray-600 hover:border-gray-300
-        @else text-blue-600 border-blue-600 hover:text-blue-600 hover:border-blue-600 @endif 
-        @if($disabled == 'true') !text-gray-400 cursor-not-allowed @endif">{{ $label }}
-    </a>
-</li>
-
-<script>
-    goToTab = function(el) {
-        let tab_content = dom_el('.ag-tc-'+el);
-        if( tab_content === null ) {
-            alert('no matching content div found for this tab');
-            return false;
-        }
-        changeCssForDomArray(
-            '{{$parent}} li.atab a', 
-            'text-blue-600,border-blue-600,hover:text-blue-600,hover:border-blue-600', 
-            'remove');
-        changeCssForDomArray(
-            '{{$parent}} li.atab a', 
-            'text-gray-500,border-transparent,hover:text-gray-600,hover:border-gray-300');
-        changeCss(
-            `.atab-${el} a`, 
-            'text-blue-600,border-blue-600,hover:text-blue-600,hover:border-blue-600');
-        
-        dom_els('{{$parent}} div.atab-content').forEach((el) =>{ hide(el, true); });
-        unhide(tab_content, true);
-    }
-</script>
\ No newline at end of file
diff --git a/src/resources/views/components/tabs.blade.php b/src/resources/views/components/tabs.blade.php
deleted file mode 100644
index 9fe077e..0000000
--- a/src/resources/views/components/tabs.blade.php
+++ /dev/null
@@ -1,9 +0,0 @@
-@props([ 'name' => '' ])
-@php 
-    $name = preg_replace('/[\s-]/', '_', $name);
-@endphp
-<div class="border-b border-gray-200 dark:border-gray-700 ag-tab-{{ $name }}">
-    <ul class="flex flex-wrap -mb-px tab">
-        @if($name != '') {{ $slot }} @else you need to specify the name property of the tab @endif
-    </ul>
-</div>
\ No newline at end of file
diff --git a/src/resources/views/components/tag.blade.php b/src/resources/views/components/tag.blade.php
index fdfa417..691eae1 100644
--- a/src/resources/views/components/tag.blade.php
+++ b/src/resources/views/components/tag.blade.php
@@ -16,7 +16,7 @@
     'id' => uniqid(),
     'add_id_prefix' => 'true',
 ])
-<span class="bg-red-100/80 bg-yellow-100/80 bg-green-100/80 bg-pink-100/80 bg-cyan-100/80 bg-gray-100/80 bg-blue-100/80 bg-purple-100/80 bg-orange-100/80 bg-red-500/80 bg-yellow-500/80 bg-green-500/80 bg-pink-500/80 bg-gray-500/80 bg-cyan-500/80 bg-blue-500/80 bg-gray-500/80 bg-purple-500/80 bg-orange-500/80 text-red-500 text-yellow-500 text-green-500 bg-gray-500 text-pink-500 text-cyan-500 text-purple-500 text-orange-500 text-red-50 text-yellow-50 text-green-50 text-pink-50 text-cyan-50 text-purple-50 text-gray-50 text-blue-50 text-orange-50 bg-red-200/80 bg-yellow-200/80 bg-green-200/80 bg-pink-200/80 bg-cyan-200/80 bg-gray-200/80 bg-blue-200/80 bg-purple-200/80 bg-orange-200/80"></span>
+<span class="bg-red-100/80 bg-yellow-100/80 bg-green-100/80 bg-pink-100/80 bg-cyan-100/80 bg-gray-100/80 bg-blue-100/80 bg-purple-100/80 bg-orange-100/80 bg-red-500/80 bg-yellow-500/80 bg-green-500/80 bg-pink-500/80 bg-gray-500/80 bg-cyan-500/80 bg-blue-500/80 bg-gray-500/80 bg-purple-500/80 bg-orange-500/80 text-red-500 text-yellow-500 text-green-500 bg-gray-500 text-pink-500 text-cyan-500 text-purple-500 text-orange-500 text-red-50 text-yellow-50 text-green-50 text-pink-50 text-cyan-50 text-purple-50 text-gray-50 text-blue-50 text-orange-50 bg-red-200/80 bg-yellow-200/80 bg-green-200/80 bg-pink-200/80 bg-cyan-200/80 bg-gray-200/80 bg-blue-200/80 bg-purple-200/80 bg-orange-200/80 border-red-500 border-yellow-500 border-green-500 border-pink-500 border-gray-500 border-cyan-500 border-blue-500 border-gray-500 border-purple-500 border-orange-500"></span>
 <label style="zoom:95%" id="@if($add_id_prefix=='true')bw-@endif{{$id}}" class="text-xs uppercase px-[10px] py-[5px] tracking-widest whitespace-nowrap inline-block bg-{{$color}}-{{$color_weight[$shade]}}/80 text-{{$color}}-{{$text_color_weight[$shade]}} {{$css}}">
 {{ $label }}
 @if($can_close == 'true')

From 4bd16c9c2777e931fb43f48f2f5a7db58af47138 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Sun, 15 May 2022 19:32:19 +0000
Subject: [PATCH 7/9] added component/textarea

---
 .../assets/compiled/css/bladewind-ui.min.css  | 103 +++++++-----------
 src/resources/assets/raw/css/input.css        |  21 +++-
 .../views/components/input.blade.php          |  18 +--
 .../views/components/textarea.blade.php       |  28 ++---
 4 files changed, 76 insertions(+), 94 deletions(-)

diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index 837c1ca..e9d8db9 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -408,17 +408,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 *, ::before, ::after{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }
-.container{width:100%}
-@media (min-width: 640px){
-.container{max-width:640px}}
-@media (min-width: 768px){
-.container{max-width:768px}}
-@media (min-width: 1024px){
-.container{max-width:1024px}}
-@media (min-width: 1280px){
-.container{max-width:1280px}}
-@media (min-width: 1536px){
-.container{max-width:1536px}}
 .bw-button{border-radius:9999px;padding-top:1rem;padding-bottom:1rem;padding-left:1.75rem;padding-right:1.75rem;font-size:0.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:0.1em}
 .bw-button:focus{outline:2px solid transparent;outline-offset:2px}
 .bw-button.big{padding-top:1.5rem;padding-bottom:1.5rem;padding-left:3rem;padding-right:3rem}
@@ -441,11 +430,16 @@ button.bw-dropdown:focus, select:focus{border-width:1px;--tw-border-opacity:1;bo
 .peer:-moz-placeholder-shown ~ button.bw-dropdown, .peer:-moz-placeholder-shown ~ select{margin-top:0.5rem}
 .peer:-ms-input-placeholder ~ button.bw-dropdown, .peer:-ms-input-placeholder ~ select{margin-top:0.5rem}
 .peer:placeholder-shown ~ button.bw-dropdown, .peer:placeholder-shown ~ select{margin-top:0.5rem}
-.bw-textarea, .bw-input, select{border-width:1px;border-color:rgb(203 213 225 / 0.5);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;outline:2px solid transparent !important;outline-offset:2px !important;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important}
+.bw-textarea, .bw-input, select{border-radius:0.375rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;outline:2px solid transparent !important;outline-offset:2px !important;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important}
 .bw-textarea:focus, .bw-input:focus, select:focus{border-width:1px;--tw-border-opacity:1;border-color:rgb(147 197 253 / var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px}
 .peer:-moz-placeholder-shown ~ .bw-textarea, .peer:-moz-placeholder-shown ~ .bw-input, .peer:-moz-placeholder-shown ~ select{margin-top:0.5rem}
 .peer:-ms-input-placeholder ~ .bw-textarea, .peer:-ms-input-placeholder ~ .bw-input, .peer:-ms-input-placeholder ~ select{margin-top:0.5rem}
 .peer:placeholder-shown ~ .bw-textarea, .peer:placeholder-shown ~ .bw-input, .peer:placeholder-shown ~ select{margin-top:0.5rem}
+.form-label{position:absolute;left:0.875rem;top:-0.375rem;cursor:text;padding-left:0.25rem;padding-right:0.25rem;padding-top:0px;padding-bottom:0px;font-size:0.75rem;line-height:1rem;font-weight:600;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
+.peer:-moz-placeholder-shown ~ .form-label{top:0.875rem;font-size:0.875rem;line-height:1.25rem}
+.peer:-ms-input-placeholder ~ .form-label{top:0.875rem;font-size:0.875rem;line-height:1.25rem}
+.peer:placeholder-shown ~ .form-label{top:0.875rem;font-size:0.875rem;line-height:1.25rem}
+.peer:focus ~ .form-label{top:-0.375rem;font-size:0.75rem;line-height:1rem}
 .bw-side-nav>nav>a.active{border-radius:0.375rem;background-color:rgb(59 130 246 / 0.6);background-image:linear-gradient(to right, var(--tw-gradient-stops));--tw-gradient-from:rgb(59 130 246 / 0.6);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to, rgb(59 130 246 / 0));--tw-gradient-to:#1d4ed8}
 .bw-side-nav>nav>a.active:hover{cursor:default}
 .bw-table.divided tr{border-top-width:1px;border-bottom-width:8px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity));border-bottom-color:rgb(229 231 235 / 0.4)}
@@ -462,7 +456,6 @@ table.with-hover-effect tr:nth-child(even)>td:first-child{border-left-width:2px;
 table.with-hover-effect tr:nth-child(even)>td:last-child{border-right-width:2px;--tw-border-opacity:1;border-right-color:rgb(249 250 251 / var(--tw-border-opacity))}
 table.with-hover-effect tr:nth-child(even):hover>td:first-child{border-left-width:2px;--tw-border-opacity:1;border-left-color:rgb(134 239 172 / var(--tw-border-opacity))}
 table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-width:2px;--tw-border-opacity:1;border-right-color:rgb(134 239 172 / var(--tw-border-opacity))}
-.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}
 .pointer-events-none{pointer-events:none}
 .fixed{position:fixed}
 .absolute{position:absolute}
@@ -477,8 +470,6 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .top-10{top:2.5rem}
 .bottom-10{bottom:2.5rem}
 .right-0{right:0px}
-.-left-1{left:-0.25rem}
-.-top-1{top:-0.25rem}
 .left-1\/2{left:50%}
 .z-40{z-index:40}
 .z-30{z-index:30}
@@ -514,7 +505,6 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .mt-1{margin-top:0.25rem}
 .mb-7{margin-bottom:1.75rem}
 .mt-4{margin-top:1rem}
-.mb-4{margin-bottom:1rem}
 .-mr-2{margin-right:-0.5rem}
 .mt-8{margin-top:2rem}
 .mr-\[-2px\]{margin-right:-2px}
@@ -522,7 +512,6 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .\!ml-\[2px\]{margin-left:2px !important}
 .-mb-px{margin-bottom:-1px}
 .\!-mr-2{margin-right:-0.5rem !important}
-.mb-12{margin-bottom:3rem}
 .block{display:block}
 .inline-block{display:inline-block}
 .inline{display:inline}
@@ -545,7 +534,6 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .h-52{height:13rem}
 .h-1\/2{height:50%}
 .h-0{height:0px}
-.h-1{height:0.25rem}
 .h-full{height:100%}
 .h-14{height:3.5rem}
 .h-7{height:1.75rem}
@@ -566,6 +554,12 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .w-3{width:0.75rem}
 .w-4{width:1rem}
 .w-0{width:0px}
+.w-1\/6{width:16.666667%}
+.w-1\/5{width:20%}
+.w-1\/4{width:25%}
+.w-1\/3{width:33.333333%}
+.w-1\/2{width:50%}
+.w-14{width:3.5rem}
 .w-\[0\%\]{width:0%}
 .w-\[1\%\]{width:1%}
 .w-\[2\%\]{width:2%}
@@ -667,12 +661,6 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .w-\[98\%\]{width:98%}
 .w-\[99\%\]{width:99%}
 .w-\[100\%\]{width:100%}
-.w-1\/6{width:16.666667%}
-.w-1\/5{width:20%}
-.w-1\/4{width:25%}
-.w-1\/3{width:33.333333%}
-.w-1\/2{width:50%}
-.w-14{width:3.5rem}
 .w-7{width:1.75rem}
 .w-11{width:2.75rem}
 .w-24{width:6rem}
@@ -730,20 +718,19 @@ to{transform:rotate(360deg)}}
 .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
 .border-gray-100\/80{border-color:rgb(243 244 246 / 0.8)}
 .border-transparent{border-color:transparent}
+.border-slate-300\/50{border-color:rgb(203 213 225 / 0.5)}
 .border-green-400\/80{border-color:rgb(74 222 128 / 0.8)}
 .border-red-400\/80{border-color:rgb(248 113 113 / 0.8)}
 .border-yellow-400\/80{border-color:rgb(250 204 21 / 0.8)}
 .border-blue-400\/80{border-color:rgb(96 165 250 / 0.8)}
-.border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
 .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}
-.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}
-.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}
 .border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}
 .border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8 / var(--tw-border-opacity))}
 .border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94 / var(--tw-border-opacity))}
 .border-pink-500{--tw-border-opacity:1;border-color:rgb(236 72 153 / var(--tw-border-opacity))}
 .border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}
 .border-cyan-500{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))}
+.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}
 .border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247 / var(--tw-border-opacity))}
 .border-orange-500{--tw-border-opacity:1;border-color:rgb(249 115 22 / var(--tw-border-opacity))}
 .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}
@@ -765,12 +752,6 @@ to{transform:rotate(360deg)}}
 .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}
 .bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}
 .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}
-.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}
-.bg-blue-300{--tw-bg-opacity:1;background-color:rgb(147 197 253 / var(--tw-bg-opacity))}
-.bg-green-300{--tw-bg-opacity:1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}
-.bg-red-300{--tw-bg-opacity:1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}
-.bg-yellow-300{--tw-bg-opacity:1;background-color:rgb(253 224 71 / var(--tw-bg-opacity))}
-.bg-orange-300{--tw-bg-opacity:1;background-color:rgb(253 186 116 / var(--tw-bg-opacity))}
 .bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}
 .bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}
 .bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}
@@ -778,7 +759,7 @@ to{transform:rotate(360deg)}}
 .bg-black\/40{background-color:rgb(0 0 0 / 0.4)}
 .bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}
 .bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}
-.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}
+.\!bg-slate-300{--tw-bg-opacity:1 !important;background-color:rgb(203 213 225 / var(--tw-bg-opacity)) !important}
 .bg-slate-200\/70{background-color:rgb(226 232 240 / 0.7)}
 .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}
 .bg-pink-100\/80{background-color:rgb(252 231 243 / 0.8)}
@@ -796,9 +777,6 @@ to{transform:rotate(360deg)}}
 .bg-purple-500\/80{background-color:rgb(168 85 247 / 0.8)}
 .bg-orange-500\/80{background-color:rgb(249 115 22 / 0.8)}
 .bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}
-.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}
-.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}
-.\!bg-slate-300{--tw-bg-opacity:1 !important;background-color:rgb(203 213 225 / var(--tw-bg-opacity)) !important}
 .bg-red-200\/80{background-color:rgb(254 202 202 / 0.8)}
 .bg-yellow-200\/80{background-color:rgb(254 240 138 / 0.8)}
 .bg-green-200\/80{background-color:rgb(187 247 208 / 0.8)}
@@ -808,8 +786,9 @@ to{transform:rotate(360deg)}}
 .bg-blue-200\/80{background-color:rgb(191 219 254 / 0.8)}
 .bg-purple-200\/80{background-color:rgb(233 213 255 / 0.8)}
 .bg-orange-200\/80{background-color:rgb(254 215 170 / 0.8)}
-.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}
-.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}
+.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))}
+.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}
+.bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}
 .object-cover{-o-object-fit:cover;object-fit:cover}
 .object-top{-o-object-position:top;object-position:top}
 .p-3{padding:0.75rem}
@@ -851,7 +830,6 @@ to{transform:rotate(360deg)}}
 .pl-10{padding-left:2.5rem}
 .pl-6{padding-left:1.5rem}
 .pb-1{padding-bottom:0.25rem}
-.pr-2{padding-right:0.5rem}
 .pl-4{padding-left:1rem}
 .text-left{text-align:left}
 .text-center{text-align:center}
@@ -892,6 +870,8 @@ to{transform:rotate(360deg)}}
 .text-gray-600\/80{color:rgb(75 85 99 / 0.8)}
 .text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))}
 .text-gray-400\/80{color:rgb(156 163 175 / 0.8)}
+.text-blue-900\/40{color:rgb(30 58 138 / 0.4)}
+.text-red-400\/80{color:rgb(248 113 113 / 0.8)}
 .text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))}
 .text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))}
 .text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8 / var(--tw-text-opacity))}
@@ -899,8 +879,6 @@ to{transform:rotate(360deg)}}
 .text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}
 .\!text-gray-600{--tw-text-opacity:1 !important;color:rgb(75 85 99 / var(--tw-text-opacity)) !important}
 .text-gray-500\/90{color:rgb(107 114 128 / 0.9)}
-.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}
-.\!text-gray-400{--tw-text-opacity:1 !important;color:rgb(156 163 175 / var(--tw-text-opacity)) !important}
 .text-pink-500{--tw-text-opacity:1;color:rgb(236 72 153 / var(--tw-text-opacity))}
 .text-cyan-500{--tw-text-opacity:1;color:rgb(6 182 212 / var(--tw-text-opacity))}
 .text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247 / var(--tw-text-opacity))}
@@ -914,33 +892,31 @@ to{transform:rotate(360deg)}}
 .text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}
 .text-blue-50{--tw-text-opacity:1;color:rgb(239 246 255 / var(--tw-text-opacity))}
 .text-orange-50{--tw-text-opacity:1;color:rgb(255 247 237 / var(--tw-text-opacity))}
-.\!text-gray-500{--tw-text-opacity:1 !important;color:rgb(107 114 128 / var(--tw-text-opacity)) !important}
-.\!text-blue-500{--tw-text-opacity:1 !important;color:rgb(59 130 246 / var(--tw-text-opacity)) !important}
-.\!text-gray-200{--tw-text-opacity:1 !important;color:rgb(229 231 235 / var(--tw-text-opacity)) !important}
 .\!placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
 .\!placeholder-gray-400:-ms-input-placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
 .\!placeholder-gray-400::placeholder{--tw-placeholder-opacity:1 !important;color:rgb(156 163 175 / var(--tw-placeholder-opacity)) !important}
+.placeholder-transparent::-moz-placeholder{color:transparent}
+.placeholder-transparent:-ms-input-placeholder{color:transparent}
+.placeholder-transparent::placeholder{color:transparent}
 .opacity-60{opacity:0.6}
 .opacity-40{opacity:0.4}
-.opacity-25{opacity:0.25}
-.opacity-75{opacity:0.75}
-.opacity-70{opacity:0.7}
-.opacity-80{opacity:0.8}
-.opacity-50{opacity:0.5}
-.opacity-100{opacity:1}
 .opacity-0{opacity:0}
 .opacity-5{opacity:0.05}
 .opacity-10{opacity:0.1}
 .opacity-20{opacity:0.2}
+.opacity-25{opacity:0.25}
 .opacity-30{opacity:0.3}
+.opacity-50{opacity:0.5}
+.opacity-70{opacity:0.7}
+.opacity-75{opacity:0.75}
+.opacity-80{opacity:0.8}
 .opacity-90{opacity:0.9}
 .opacity-95{opacity:0.95}
+.opacity-100{opacity:1}
 .shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
-.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
-.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 .shadow-gray-100{--tw-shadow-color:#f3f4f6;--tw-shadow:var(--tw-shadow-colored)}
 .shadow-gray-200\/40{--tw-shadow-color:rgb(229 231 235 / 0.4);--tw-shadow:var(--tw-shadow-colored)}
 .shadow-gray-200{--tw-shadow-color:#e5e7eb;--tw-shadow:var(--tw-shadow-colored)}
@@ -963,8 +939,6 @@ to{transform:rotate(360deg)}}
 .first\:pt-0:first-child{padding-top:0px}
 .last\:pb-0:last-child{padding-bottom:0px}
 .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}
-.hover\:border-blue-600:hover{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}
-.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}
 .hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}
 .hover\:bg-yellow-700:hover{--tw-bg-opacity:1;background-color:rgb(161 98 7 / var(--tw-bg-opacity))}
 .hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87 / var(--tw-bg-opacity))}
@@ -977,10 +951,8 @@ to{transform:rotate(360deg)}}
 .hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}
 .hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}
 .hover\:bg-opacity-75:hover{--tw-bg-opacity:0.75}
-.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
-.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}
-.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}
 .hover\:\!text-gray-300:hover{--tw-text-opacity:1 !important;color:rgb(209 213 219 / var(--tw-text-opacity)) !important}
+.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}
 .hover\:opacity-100:hover{opacity:1}
 .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
 .focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity))}
@@ -1005,21 +977,20 @@ to{transform:rotate(360deg)}}
 .active\:bg-black:active{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
 .disabled\:opacity-60:disabled{opacity:0.6}
 .group:hover .group-hover\:after\:translate-x-0::after{content:var(--tw-content);--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
-.peer:checked ~ .peer-checked\:bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}
 .peer:checked ~ .peer-checked\:bg-red-500\/80{background-color:rgb(239 68 68 / 0.8)}
-.peer:checked ~ .peer-checked\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}
-.peer:checked ~ .peer-checked\:bg-blue-500\/80{background-color:rgb(59 130 246 / 0.8)}
 .peer:checked ~ .peer-checked\:bg-yellow-500\/80{background-color:rgb(234 179 8 / 0.8)}
 .peer:checked ~ .peer-checked\:bg-green-500\/80{background-color:rgb(34 197 94 / 0.8)}
 .peer:checked ~ .peer-checked\:bg-pink-500\/80{background-color:rgb(236 72 153 / 0.8)}
 .peer:checked ~ .peer-checked\:bg-cyan-500\/80{background-color:rgb(6 182 212 / 0.8)}
-.peer:checked ~ .peer-checked\:bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
 .peer:checked ~ .peer-checked\:bg-purple-500\/80{background-color:rgb(168 85 247 / 0.8)}
 .peer:checked ~ .peer-checked\:bg-orange-500\/80{background-color:rgb(249 115 22 / 0.8)}
-.peer:checked ~ .peer-checked\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}
-.peer:checked ~ .peer-checked\:bg-slate-500{--tw-bg-opacity:1;background-color:rgb(100 116 139 / var(--tw-bg-opacity))}
+.peer:checked ~ .peer-checked\:bg-blue-500\/80{background-color:rgb(59 130 246 / 0.8)}
 .peer:checked ~ .peer-checked\:after\:translate-x-10::after{content:var(--tw-content);--tw-translate-x:2.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
-.peer:disabled ~ .peer-disabled\:opacity-20{opacity:0.2}
 .peer:disabled ~ .peer-disabled\:opacity-40{opacity:0.4}
 @media (prefers-color-scheme: dark){
-.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}}
+.dark\:border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85 / var(--tw-border-opacity))}
+.dark\:border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}
+.dark\:bg-gray-700\/90{background-color:rgb(55 65 81 / 0.9)}
+.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}
+.dark\:focus\:border-slate-900:focus{--tw-border-opacity:1;border-color:rgb(15 23 42 / var(--tw-border-opacity))}}
diff --git a/src/resources/assets/raw/css/input.css b/src/resources/assets/raw/css/input.css
index 1cd83ed..0fa99ae 100644
--- a/src/resources/assets/raw/css/input.css
+++ b/src/resources/assets/raw/css/input.css
@@ -3,19 +3,34 @@
     .bw-input,
     select {
         @apply 
-            border 
-            border-slate-300/50 
             py-3 px-4
             !outline-none
             !ring-0
             focus:outline-none 
             focus:border 
-            focus:border-blue-300 
+            focus:border-blue-300
             peer-placeholder-shown:mt-2
+            rounded-md 
     }
     input.no-label{
         @apply placeholder-transparent
     }
+    .form-label {
+        @apply 
+            absolute 
+            left-3.5 
+            -top-1.5 
+            text-xs 
+            px-1 
+            py-0 
+            font-semibold 
+            transition-all 
+            peer-placeholder-shown:top-3.5 
+            peer-placeholder-shown:text-sm  
+            peer-focus:-top-1.5 
+            peer-focus:text-xs
+            cursor-text
+    }
     .form-tick:checked {
         background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
         border-color: transparent;
diff --git a/src/resources/views/components/input.blade.php b/src/resources/views/components/input.blade.php
index fb5dd05..8f9660a 100644
--- a/src/resources/views/components/input.blade.php
+++ b/src/resources/views/components/input.blade.php
@@ -1,6 +1,6 @@
 @props([
     // name of the input field for use in forms
-    'name' => 'name',
+    'name' => 'input-'.uniqid(),
     'type' => 'text', // text, password, email, tel, search
     'label' => '',
     'numeric' => 'false',
@@ -8,27 +8,27 @@
     'add_clearing' => 'true', // adds margin after the input field
     'placeholder' => '', // placeholder text
     'selected_value' => '', // selected value
-    'has_label' => 'false', // display label for the input
     'css' => '',
 ])
 @php
     $name = preg_replace('/[\s-]/', '_', $name);
-    $label = ucwords(str_replace('_', ' ',$name));
-    $required_symbol = ($has_label == 'false' && $required == 'true') ? ' *' : '';
+    $required_symbol = ($label == '' && $required == 'true') ? ' *' : '';
 @endphp
 <div class="relative w-full @if($add_clearing == 'true') mb-2 @endif">
     <input 
-        class="bw-input w-full @if($has_label == 'true') peer @endif @if($required == 'true') required @endif {{$name}} {{$css}}"
+        class="bw-input w-full border border-slate-300/50 dark:border-slate-700 dark:bg-gray-700/90 dark:focus:border-slate-900 peer @if($required == 'true') required @endif {{$name}} {{$css}} @if($label !== '')placeholder-transparent @endif"
         type="{{ $type }}" 
         id="{{ $name }}"
         name="{{ $name }}" 
         value="{{ $selected_value }}" 
         autocomplete="off"
-        placeholder="{{ $placeholder }}{{$required_symbol}}" 
+        placeholder="{{ ($label !== '') ? $label : $placeholder }}{{$required_symbol}}" 
         @if($numeric == 'true') onkeypress="return isNumberKey(event)" @endif />
-    @if($has_label == 'true')
-        <label for="{{ $name }}" class="form-label">{{ $label }} 
-            @if($required == 'true') <span class="text-red-300">*</span>@endif
+    @if($label !== '')
+        <label for="{{ $name }}" class="form-label bg-white text-blue-900/40 dark:bg-gray-700/90 dark:text-gray-400" onclick="dom_el('.{{$name}}').focus()">{{ $label }} 
+            @if($required == 'true') <span class="text-red-400/80" style="zoom:90%"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+</svg></span>@endif
         </label>
     @endif
 </div>
\ No newline at end of file
diff --git a/src/resources/views/components/textarea.blade.php b/src/resources/views/components/textarea.blade.php
index c781be9..4b0d4cf 100644
--- a/src/resources/views/components/textarea.blade.php
+++ b/src/resources/views/components/textarea.blade.php
@@ -1,30 +1,26 @@
 @props([
-    'name' => 'name',
+    // name of the input field for use in forms
+    'name' => 'textarea-'.uniqid(),
+    'rows' => 3,
     'label' => '',
     'required' => 'false',
     'add_clearing' => 'true',
-    'placeholder' => '',
-    'rows' => 3,
+    'placeholder' => '', // placeholder text
     'selected_value' => '', // selected value
-    'has_label' => 'false', // display label for the inpur
     'css' => '',
 ])
 @php
     $name = preg_replace('/[\s-]/', '_', $name);
-    $label = ucwords(str_replace('_', ' ',$name));
-    $required_symbol = ($has_label == 'false' && $required == 'true') ? '*' : '';
+    $required_symbol = ($label == '' && $required == 'true') ? ' *' : '';
 @endphp
 <div class="relative w-full @if($add_clearing == 'true') mb-2 @endif">
-    <textarea 
-        class="bw-textarea w-full @if($has_label == 'true') peer @endif @if($required == 'true') required @endif {{$name}} {{$css}}"
-        id="{{ $name }}"
-        rows="{{ $rows }}"
-        name="{{ $name }}" 
-        placeholder="{{ $placeholder }}{{$required_symbol}}">{{ $selected_value }}</textarea>
-
-    @if($has_label == 'true')
-        <label for="{{ $name }}" class="form-label">{{ $label }} 
-            @if($required == 'true') <span class="text-red-300">*</span>@endif
+    <textarea class="bw-input w-full border border-slate-300/50 dark:border-slate-700 dark:bg-gray-700/90 dark:focus:border-slate-900 peer @if($required == 'true') required @endif {{$name}} {{$css}} @if($label !== '')placeholder-transparent @endif"
+        id="{{ $name }}" name="{{ $name }}" placeholder="{{ ($label !== '') ? $label : $placeholder }}{{$required_symbol}}">{{ $selected_value }}</textarea>
+    @if($label !== '')
+        <label for="{{ $name }}" class="form-label bg-white text-blue-900/40 dark:bg-gray-700/90 dark:text-gray-400" onclick="dom_el('.{{$name}}').focus()">{{ $label }} 
+            @if($required == 'true') <span class="text-red-400/80" style="zoom:90%"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline-block -mt-1" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+</svg></span>@endif
         </label>
     @endif
 </div>
\ No newline at end of file

From 26b13c6b90c537cc6534da4b67af6ad88537c7a1 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Sun, 15 May 2022 21:21:06 +0000
Subject: [PATCH 8/9] update component/error doc

---
 composer.json                                        |  4 ++--
 .../assets/compiled/css/bladewind-ui.min.css         |  3 +++
 src/resources/assets/compiled/images/404.svg         |  1 +
 src/resources/views/components/error.blade.php       | 12 ++++++------
 4 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 src/resources/assets/compiled/images/404.svg

diff --git a/composer.json b/composer.json
index c01d457..f074da9 100644
--- a/composer.json
+++ b/composer.json
@@ -1,9 +1,9 @@
 {
     "name": "mkocansey/bladewind",
-    "description": "UI Components using TailwindCSS , Laravel Blade Templates and vanilla Javascript",
+    "description": "Laravel UI Components using TailwindCSS, Blade Templates and vanilla Javascript",
     "keywords": ["laravel", "ui components", "tailwindcss", "blade components"],
     "require": {
-        "php": "^7.3|^8.1"
+        "php": ">=7.3"
     },
     "license": "MIT",
     "type": "library",
diff --git a/src/resources/assets/compiled/css/bladewind-ui.min.css b/src/resources/assets/compiled/css/bladewind-ui.min.css
index e9d8db9..f05f1ad 100644
--- a/src/resources/assets/compiled/css/bladewind-ui.min.css
+++ b/src/resources/assets/compiled/css/bladewind-ui.min.css
@@ -512,6 +512,8 @@ table.with-hover-effect tr:nth-child(even):hover>td:last-child{border-right-widt
 .\!ml-\[2px\]{margin-left:2px !important}
 .-mb-px{margin-bottom:-1px}
 .\!-mr-2{margin-right:-0.5rem !important}
+.mb-10{margin-bottom:2.5rem}
+.mb-12{margin-bottom:3rem}
 .block{display:block}
 .inline-block{display:inline-block}
 .inline{display:inline}
@@ -831,6 +833,7 @@ to{transform:rotate(360deg)}}
 .pl-6{padding-left:1.5rem}
 .pb-1{padding-bottom:0.25rem}
 .pl-4{padding-left:1rem}
+.pt-4{padding-top:1rem}
 .text-left{text-align:left}
 .text-center{text-align:center}
 .text-right{text-align:right}
diff --git a/src/resources/assets/compiled/images/404.svg b/src/resources/assets/compiled/images/404.svg
new file mode 100644
index 0000000..39ee0bf
--- /dev/null
+++ b/src/resources/assets/compiled/images/404.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g id="freepik--background-simple--inject-50"><path d="M81.91,305.64s25,57,88.21,75.64,130.71-6.2,185.87-24.87S440.16,290,427.87,241.05s-58.76-45.43-102.1-88.9S277.49,90.54,217.43,77.7,91.63,115.41,75.19,187,81.91,305.64,81.91,305.64Z" style="fill:#90CAF9"></path><path d="M81.91,305.64s25,57,88.21,75.64,130.71-6.2,185.87-24.87S440.16,290,427.87,241.05s-58.76-45.43-102.1-88.9S277.49,90.54,217.43,77.7,91.63,115.41,75.19,187,81.91,305.64,81.91,305.64Z" style="fill:#fff;opacity:0.8"></path></g><g id="freepik--Trees--inject-50"><path d="M403,228.6s22.92,2.27,34.53,16.48c0,0,12.28-16.46,34.32-16.12a44.55,44.55,0,1,0-68.86-.32Z" style="fill:#90CAF9"></path><path d="M403,228.6s22.92,2.27,34.53,16.48c0,0,12.28-16.46,34.32-16.12a44.55,44.55,0,1,0-68.86-.32Z" style="fill:#fff;opacity:0.5"></path><polygon points="436.76 159.12 435.99 307.66 439.86 307.66 436.76 159.12" style="fill:#b8b8b8"></polygon><path d="M437.93,240.75s7.73-13.93,21.66-18.19c0,0-14.7,3.49-22,15.48Z" style="fill:#b8b8b8"></path><path d="M437.93,201.29s7.73-13.93,21.66-18.19c0,0-14.7,3.48-22,15.48Z" style="fill:#b8b8b8"></path><path d="M437.93,221s7.73-13.93,21.66-18.19c0,0-14.7,3.49-22,15.48Z" style="fill:#b8b8b8"></path><path d="M436.78,211.34s-7.47-13.92-20.91-18.18c0,0,14.19,3.48,21.28,15.48Z" style="fill:#b8b8b8"></path><path d="M436.78,230.69s-7.47-13.93-20.91-18.18c0,0,14.19,3.48,21.28,15.47Z" style="fill:#b8b8b8"></path><path d="M27.87,228.6s22.92,2.27,34.53,16.48c0,0,12.28-16.46,34.32-16.12a44.55,44.55,0,1,0-68.86-.32Z" style="fill:#90CAF9"></path><path d="M27.87,228.6s22.92,2.27,34.53,16.48c0,0,12.28-16.46,34.32-16.12a44.55,44.55,0,1,0-68.86-.32Z" style="fill:#fff;opacity:0.5"></path><polygon points="61.65 159.12 60.87 307.66 64.74 307.66 61.65 159.12" style="fill:#b8b8b8"></polygon><path d="M62.81,240.75s7.73-13.93,21.66-18.19c0,0-14.7,3.49-22,15.48Z" style="fill:#b8b8b8"></path><path d="M62.81,201.29s7.73-13.93,21.66-18.19c0,0-14.7,3.48-22,15.48Z" style="fill:#b8b8b8"></path><path d="M62.81,221s7.73-13.93,21.66-18.19c0,0-14.7,3.49-22,15.48Z" style="fill:#b8b8b8"></path><path d="M61.66,211.34s-7.47-13.92-20.91-18.18c0,0,14.19,3.48,21.28,15.48Z" style="fill:#b8b8b8"></path><path d="M61.66,230.69s-7.47-13.93-20.91-18.18c0,0,14.19,3.48,21.28,15.47Z" style="fill:#b8b8b8"></path><path d="M309.87,243s18.76,1.85,28.26,13.48c0,0,10.05-13.47,28.09-13.2a36.46,36.46,0,1,0-56.36-.25Z" style="fill:#90CAF9"></path><path d="M309.87,243s18.76,1.85,28.26,13.48c0,0,10.05-13.47,28.09-13.2a36.46,36.46,0,1,0-56.36-.25Z" style="fill:#fff;opacity:0.5"></path><polygon points="337.51 186.08 336.88 307.66 340.05 307.66 337.51 186.08" style="fill:#b8b8b8"></polygon><path d="M338.46,252.9s6.34-11.4,17.73-14.89c0,0-12,2.85-18,12.67Z" style="fill:#b8b8b8"></path><path d="M338.46,220.6s6.34-11.4,17.73-14.88c0,0-12,2.85-18,12.66Z" style="fill:#b8b8b8"></path><path d="M338.46,236.75s6.34-11.4,17.73-14.89c0,0-12,2.85-18,12.67Z" style="fill:#b8b8b8"></path><path d="M337.52,228.83s-6.11-11.4-17.11-14.88c0,0,11.61,2.85,17.42,12.66Z" style="fill:#b8b8b8"></path><path d="M337.52,244.66s-6.11-11.4-17.11-14.88c0,0,11.61,2.85,17.42,12.67Z" style="fill:#b8b8b8"></path><path d="M128.36,243s18.76,1.85,28.26,13.48c0,0,10-13.47,28.09-13.2a36.46,36.46,0,1,0-56.36-.25Z" style="fill:#90CAF9"></path><path d="M128.36,243s18.76,1.85,28.26,13.48c0,0,10-13.47,28.09-13.2a36.46,36.46,0,1,0-56.36-.25Z" style="fill:#fff;opacity:0.5"></path><polygon points="156 186.08 155.37 307.66 158.54 307.66 156 186.08" style="fill:#b8b8b8"></polygon><path d="M157,252.9s6.34-11.4,17.73-14.89c0,0-12,2.85-18,12.67Z" style="fill:#b8b8b8"></path><path d="M157,220.6s6.34-11.4,17.73-14.88c0,0-12,2.85-18,12.66Z" style="fill:#b8b8b8"></path><path d="M157,236.75s6.34-11.4,17.73-14.89c0,0-12,2.85-18,12.67Z" style="fill:#b8b8b8"></path><path d="M156,228.83S149.9,217.43,138.9,214c0,0,11.61,2.85,17.42,12.66Z" style="fill:#b8b8b8"></path><path d="M156,244.66s-6.11-11.4-17.11-14.88c0,0,11.61,2.85,17.42,12.67Z" style="fill:#b8b8b8"></path><line x1="34.77" y1="308.19" x2="466.31" y2="308.19" style="fill:none;stroke:#263238;stroke-miterlimit:10;stroke-width:1.04742px"></line></g><g id="freepik--Characters--inject-50"><path d="M152.59,356.45c0,3-18.43,5.39-41.18,5.39s-41.18-2.41-41.18-5.39,18.44-5.39,41.18-5.39S152.59,353.48,152.59,356.45Z" style="opacity:0.30000000000000004"></path><path d="M238.8,356.45c0,3-18.44,5.39-41.18,5.39s-41.18-2.41-41.18-5.39,18.44-5.39,41.18-5.39S238.8,353.48,238.8,356.45Z" style="opacity:0.30000000000000004"></path><path d="M353,356.45c0,3-18.43,5.39-41.17,5.39s-41.18-2.41-41.18-5.39,18.43-5.39,41.18-5.39S353,353.48,353,356.45Z" style="opacity:0.30000000000000004"></path><path d="M448.4,356.45c0,3-18.44,5.39-41.18,5.39S366,359.43,366,356.45s18.44-5.39,41.18-5.39S448.4,353.48,448.4,356.45Z" style="opacity:0.30000000000000004"></path><path d="M316.28,198.77s-1.69,7-1.69,8.18a10.06,10.06,0,0,1-.24,2.17s-3.61,4.33-3.13,5.53a5.83,5.83,0,0,0,2.41,2.16s1.92,7,3.85,7.46a46.34,46.34,0,0,0,6,.72l.72,5.77,9.62-1.44-2.4-8.66,1-7.46s1.68-3.12,0-8.17-5.29-5.29-7.7-5.29A83.06,83.06,0,0,1,316.28,198.77Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M320.61,195.17s-8.42-.25-8.18,1.92,8.9,5,8.9,5-2.89,1.92-1.45,3.85,4.81,3.61,4.81,3.61-1,4.09.49,4.33,2.4-1.93,2.64-2.65,2.89-.48,3.61,1.44a10,10,0,0,1,.72,3.13s2.89-8.66,3.37-12.51S325.18,195.17,320.61,195.17Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M325.94,214s2.91-6.4,4.65-3.25,1,6.43-.71,6.78-3.14.69-3.14.69" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M314.11,280.79c-.47.55-8.18,17.08-9.14,22.61s-7.21,38.49-7.46,39.93-13.46,4.33-14.43,4.57,1,2.89,3.85,3.61,11.07,4.09,13,2.16,4.57-12.75,5.29-13.95,14.26-33.1,14.26-33.1,6.94-15.31,8.38-16.76-1.71-7.86-2.92-9.79S317.48,276.94,314.11,280.79Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M312.67,281s3.37,16.12,5.05,21.89a46.07,46.07,0,0,0,7,13.47c1.93,2.65,11.31,26,11.31,26l1.44,3.61s-.48,1.44-3.12,3.36-10.11,5.05-8.18,5.78,9.62.72,13.23.48a12.5,12.5,0,0,0,8.17-3.85c1.45-1.69-2.4-6.5-2.4-7.46s-8.42-30.3-8.9-31.75-2.89-11.78-2.89-11.78V289s1.21-2.16,1.21-7-3.61-5.78-3.61-5.78l-19.73,1.93Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M311,279.59s.49,4.09,1.93,4.33,16.35,4.33,22.85-.48c0,0,1.2-3.61.48-4.57s-2.41-.48-11.06-.48S311,278.39,311,279.59Z" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M333.11,225.71s-8.9,1.2-12.75,5-7.21,10.83-8.89,17.32-2.89,30.31-.49,31.51,22.61,2.41,26,1-.24-12.75-.24-17.08,3.85-19,3.13-27.17S333.11,225.71,333.11,225.71Z" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M301,250.71c-.11-9.9-4.15-18.35-9.52-22l0-2-14.8.15c-8.33.09-15,11-14.83,24.3s7,24.07,15.34,24l14.8-.15,0-2C297.19,269.14,301.05,260.61,301,250.71Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M307.64,250.64c-.11-10.4-4.12-19.28-9.76-23.14l0-2.13-6.34.07c-8.76.09-15.73,11.52-15.58,25.53s7.36,25.29,16.12,25.2l6.34-.07,0-2.12C303.93,270,307.75,261,307.64,250.64Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M314,250.57c.15,14-6.83,25.44-15.58,25.53s-16-11.19-16.12-25.19,6.83-25.44,15.58-25.54S313.83,236.56,314,250.57Z" style="fill:#737373;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M310.36,250.14c.07,6.63-3.24,12.05-7.39,12.1s-7.57-5.31-7.64-12,3.24-12,7.39-12.1S310.29,243.5,310.36,250.14Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M428.2,300a121.5,121.5,0,0,0,1.05-18.6c-3.25,1.5-22.21,2.05-23.95,2.09s-20.7-.59-23.95-2.09a121.5,121.5,0,0,0,1,18.6c1.31,8.11,12.83,40.58,13.09,42.15a34.94,34.94,0,0,0,1.31,4.46s-6.55,4.71-9.43,6.54-.78,2.62,2.1,2.62,8.9-.79,10.73-.79c1.62,0,4.44-1.41,5.1-1.75.66.34,3.48,1.75,5.09,1.75,1.84,0,7.86.79,10.74.79s5-.79,2.1-2.62-9.43-6.54-9.43-6.54a34.94,34.94,0,0,0,1.31-4.46C415.37,340.55,426.89,308.08,428.2,300Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M401.34,230.49s-10.13,3.31-15.36,6.63-10.48,21.3-10.48,22a22.41,22.41,0,0,1-1.22,3.66s-5.24-1.22-6.28,3.14,5.23,9.95,8.55,10.13,4.36-.87,4.36-.87-2.09,4.19-1.22,5.93,8.21,8.21,22.7,8,25-2.62,26.53-4.71,1.75-6.46,1.75-6.46,5.41-1.4,7.33-4.89,1.57-7.16.52-10.82S432.06,247.94,428.4,242s-11.35-9.25-15-10.3S403.78,230.49,401.34,230.49Z" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M404.41,245.19c1.45-.48,6-4.52,7.75-8.56a19.47,19.47,0,0,0,1.45-4.85l-.23-.07c-3.66-1.05-9.6-1.22-12-1.22,0,0-2.12.69-4.92,1.76a18,18,0,0,0,1.2,6.32C399.24,242.61,403,245.68,404.41,245.19Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M421.06,253.35S425.25,275.7,430,278" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M380.91,275.18s5.24-19.73,5.59-21.65" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M427.83,263.45s-2.9.65-2.9,2.75" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M378.56,263.77s3.23,2.1,2.91,5.33" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M400.2,355c1.62,0,4.44-1.41,5.1-1.75.66.34,3.48,1.75,5.09,1.75,1.84,0,7.86.79,10.74.79s5-.79,2.1-2.62c-2.51-1.59-7.77-5.35-9.11-6.31-3.09,2.82-9.2,2.12-9.2,2.12a31.37,31.37,0,0,1-3.67-.78c-1.83-.53-4.45-1.57-4.45-1.57s-6.55,4.71-9.43,6.54-.78,2.62,2.1,2.62S398.37,355,400.2,355Z" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><line x1="404.92" y1="346.67" x2="404.92" y2="301.01" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></line><polyline points="405.3 353.2 404.92 348.93 404.92 346.67" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></polyline><line x1="401.25" y1="299.44" x2="408.84" y2="299.44" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></line><path d="M391.33,204.29s-5.44,3.26-4.63,6.12,3.27,3.41,2.73,5S387,218,389.15,219a18.36,18.36,0,0,0,3.82,1.23s2,6.94,5.44,8.16,9.4.41,13.62-.13a7.05,7.05,0,0,0,6.12-5.18c.41-1.49-1.77.28-2.86-1.36s.55-5.85,1.77-9.53-2.45-10.62-7.21-12.93S396,198.16,391.33,204.29Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M400.47,228a36.87,36.87,0,0,0-1.4,7c-.18,3,2.27,6.29,4.89,6.11s4.88-5.41,5.23-8-.87-9.6-.87-9.6-4,.18-5.59,1.57A9.68,9.68,0,0,0,400.47,228Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M396.92,208.1s.13,4.08,4.22,8a25.29,25.29,0,0,0,8.57,5.45,7.53,7.53,0,0,1-.68,2.58,1.89,1.89,0,0,1-1.9,1h-1.37s-2,4.69-4.42,5.37-8.37.21-9.19-5.78-.95-10.89-.27-12.12S396.92,208.1,396.92,208.1Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M439.71,260.8a11,11,0,0,0,1.11-4c0-1.82-3.38-4.43-4-5.08s-1.24-.58-1.37.33a3.74,3.74,0,0,0,1.17,2.73,3.06,3.06,0,0,1,1.05,1.57c.06.45-1.12,2.66-.53,4.09S439.39,262.3,439.71,260.8Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M304.28,250.59S319,255.3,327.85,266.3s14.66,9.42,25.66,5.76,15.19-16.76,30.38-5.76,18.33,15.18,30.9,8.9,19.37-21.47,30.9-16.24,6.28,32,7.33,45-.53,45.57,2.09,49.76,29.33,1,29.33,1" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.1422600000000003px"></path><path d="M331.85,233.11s-2.93-4.78-7.25-3.53c-4.57,1.32-6.93,7.85-8,11.92s-1.79,8.47-3.75,12.26c0,0-8.66-.15-13.49-1.55a114.2,114.2,0,0,1-10.86-4s-1.71-2.39-2.92-2.86-4.35-1.39-4.58-.67,3.64,3.09,3.64,3.09-7.2,1-7.92,1.77,5.09,3.07,5.09,3.07,2.17.7,7.45-.56c0,0,19.37,12.3,23.23,13.71s6,1.86,8.63-3.22,11.36-17.68,12.75-22.75" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M293.53,250.25c-2.83-1.06-5-2-5-2s-1.71-2.39-2.92-2.86-4.35-1.39-4.58-.67,3.64,3.09,3.64,3.09-7.2,1-7.92,1.77,5.09,3.07,5.09,3.07,2.17.7,7.45-.56l2.71,1.71Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M368.19,262.64a11,11,0,0,1-1.11-4c0-1.82,3.39-4.42,4-5.07s1.23-.58,1.36.33a3.74,3.74,0,0,1-1.17,2.73,3.06,3.06,0,0,0-1.05,1.57c-.06.44,1.12,2.66.53,4.09S368.51,264.13,368.19,262.64Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M370.52,257.15s-2.79,5.15-1.17,7,3.19-4.16,3.49-5.82S371.55,255,370.52,257.15Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M372.82,259s-2.79,5.15-1.17,7,3.19-4.16,3.49-5.82S373.85,256.79,372.82,259Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M375.35,259.43s-2.79,5.15-1.17,7,3.19-4.16,3.49-5.82S376.38,257.27,375.35,259.43Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M378.59,259.47s-2.6,4-1.18,5.51,2.95-3.24,3.25-4.61S379.55,257.67,378.59,259.47Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M437.85,257.35s2.79,5.15,1.17,7-3.19-4.17-3.49-5.83S436.82,255.19,437.85,257.35Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M435.55,259.15s2.79,5.15,1.17,7-3.19-4.17-3.49-5.83S434.52,257,435.55,259.15Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M433,259.63s2.79,5.15,1.17,7-3.19-4.16-3.48-5.83S432,257.47,433,259.63Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M429.78,259.67s2.6,4.05,1.18,5.51-2.95-3.24-3.24-4.61S428.82,257.87,429.78,259.67Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M85.72,316.65v5.68a18,18,0,0,0-4.13,7.58c-1.21,4.64-5,24.61-4,25.13S88,357.71,91,357.26c3.44-.52,6.37-.34,4.64-2.24s-10.82-7.21-10.82-7.21,10-14.46,12.22-19.8,2.58-13.6,2.58-13.6l-13.42-.51Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M91,357.26c3.44-.52,6.37-.34,4.64-2.24s-10.82-7.21-10.82-7.21l-.34,2.06-6.55-.8c-.48,3.34-.69,5.79-.34,6C78.66,355.55,88,357.71,91,357.26Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M118.6,319.59l1.55,2.76a10.07,10.07,0,0,0-.52,8.09c1.55,4.82,5.17,22.55,5.17,23.58s2.23,1.72,4,1.72,6.67.34,7.36.34,5.68.86,7.4-.17-2.19-3.1-4.77-4.3-8.26-4.3-8.26-4.3,1.37-14.12,1.37-20.32,1.38-8.26-.51-12.05-13.77,1.73-13.77,1.73Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M138.74,351.61c-2.58-1.21-8.26-4.3-8.26-4.3l-.69,2.58-5.53,1c.33,1.72.54,2.9.54,3.14,0,1,2.23,1.72,4,1.72s6.67.34,7.36.34,5.68.86,7.4-.17S141.32,352.81,138.74,351.61Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M109.33,205a47.36,47.36,0,0,0-4.61-6.54c-2.37-2.67-9.8-2.52-13.06,1s-2.23,9.8-1,11.58,3.71,10.1,3.71,10.1l.59,5.94,13.81,4.9-2.82-9.65s5.35-1,5.79-2.67-.89-7.28-.89-7.28,1.78-1.19,1.63-2.23S109.33,205,109.33,205Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M93.44,211.4s2.36,2,3.65-.29,2.27-4.53,2.27-6.47-4.85-3.55-1.62-4.85,5.56,1.59,7-1.31.13-3.21-7.63-3.21-11.64,3.88-10,8.73a65.31,65.31,0,0,0,4.85,10.34Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M109.77,208.43a3.71,3.71,0,1,1-3.71-3.71A3.71,3.71,0,0,1,109.77,208.43Z" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M109.23,205.14a3.62,3.62,0,0,1,1.36-.27,3.49,3.49,0,0,1,1.69,6.54" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><line x1="102.35" y1="208.43" x2="93.44" y2="211.4" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></line><path d="M96,213.33s-1.78-3.71-3.56-3-.89,6.54.89,7.13a3.84,3.84,0,0,0,3.41-.89s1.49,3.12,3.27,4" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M84.32,280l-1.11,14.22-3.32,21.05s7.76,6.09,15,6.09,9.23-.92,9.23-.92l4.06-21.6,4.06,22.71s8-1.29,13.3-2.59a35.08,35.08,0,0,0,10.34-4.8l-10.71-27.88-2.32-14.38s-12,1.11-19.21,1.48-16.8-1.48-16.8-1.48Z" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M91.93,223.18s17,5.93,22.25,11.69c2.9,3.2,6.15,25.1,7.32,30.45s3.21,16,3.21,16-10.37,4.68-18.39,4.85-23.41-3.51-23.41-3.51,1.83-23.73,1.83-34.76.17-18.23,2-21.74C86.75,226.19,89.76,222.84,91.93,223.18Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M87.46,284.38s.92,15.51,0,21.24a44.06,44.06,0,0,1-3.32,10.71" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M87.83,291.77a8.47,8.47,0,0,0,5.54-6.28" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M80.81,312.27s9.24,7.94,23.64,5" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M111.84,316.88s15.14-1.66,21.79-6.09" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M179.56,216s-1.46,1.08-6.55,4.8-1.08,9.34-1.08,9.34-3.64.57-8.5,5.68,2.17,13.88,8.74,15.25,14.25-6.76,16.55-14.3-.74-18.91-2.27-21.26S179.56,216,179.56,216Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M198.84,215s2.53-3.91.24-9.58-9.13-8.26-15.79-4.15A11.73,11.73,0,0,0,178,214.54c.65,2.62,3.93,6.65,4.62,6.71s6.68,2.24,10.77.33S198.84,215,198.84,215Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M169.41,347s4.75,7.39,13,8.65.83-6.14-.56-7.26S170.53,344.85,169.41,347Z" style="fill:#737373;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M213.36,348.9s9.07,2.23,8.37,4.19-8.09,1.81-12.41.69-8.38-2.79-7.82-4.6S213.36,348.9,213.36,348.9Z" style="fill:#737373;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M187.57,229.7s-12.14,1.78-14.36,6.07.91,27.66.91,27.66-5.18,11.43-5.25,18.79,3.21,20.31,2.95,23.54-3.58,40-3.58,41,7,3.24,17.09,4.44,29.39-2.39,29.39-2.39-.38-21.7.63-34.64-.43-24.57-3-29.4-14.54-22.22-14.54-22.22,5.8-10.52,6.16-15.12-1.51-7-5.89-12.29A15.27,15.27,0,0,0,187.57,229.7Z" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M197.84,262.56s5.8-10.52,6.16-15.12-1.51-7-5.89-12.29c-.21-.26-.43-.49-.65-.73l-.16.15c-4.5,7.35-19.38,19.91-23.81,23.57.34,3.13.63,5.29.63,5.29s-5.18,11.43-5.25,18.79a67.11,67.11,0,0,0,1,10c10.51-6,24.57-17.23,32.18-23.49C199.67,265.21,197.84,262.56,197.84,262.56Z" style="fill:#737373;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M185.33,221.12a75.07,75.07,0,0,1,.55,8.27c-.16,2.05.5,6.73,4,8.2s5.7-.58,5.69-2.64a20.8,20.8,0,0,0-1-5l.1-5.65S188.63,220.52,185.33,221.12Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M182.19,217.45s-2.57-2.26-2.65,1,2.92,4.34,3.58,4.56a2.21,2.21,0,0,0,1.58-.39s4.66,4,8.4,4.26,5.26-1.47,6.14-8.26-6.13-13.68-6.13-13.68S187.11,216,182.19,217.45Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M125,281.18a9,9,0,0,1,.56-3.4c.62-1.36,4-2.14,4.75-2.4s1.13,0,.91.71a3.1,3.1,0,0,1-1.81,1.64,2.54,2.54,0,0,0-1.33.81c-.19.32-.07,2.37-1,3.24S124.69,282.41,125,281.18Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M201.64,251.11s-12-1.57-17.29,6.81-15.18,37.7-33.51,42.42-23.57-33-34.57-31.95c-10.48,1-17.8,0-24.09,11.52-3.36,6.17-20.16,73.54-28.1,74.23-25.29,2.21-41.57.77-41.57.77" style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.1422600000000003px"></path><path d="M92.71,223.66s-2.77-1.11-6.47,1.1-13.66,26.41-12.92,29,11.26,7.39,17.17,9.05,16.62,3.7,16.62,3.7,3.32,5.17,4.43,5.35a24.06,24.06,0,0,0,4.8-.55s2,1.66,2.77-.19-.74-4.24-2.4-6.09-8.68-2.77-8.68-2.77L89,249.14,97,234.37" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M111.54,271.85a24.06,24.06,0,0,0,4.8-.55s2,1.66,2.77-.19-.74-4.24-2.4-6.09-8.68-2.77-8.68-2.77L89,249.14l2.84-5.29c-7.11-4.43-11.83-4.1-14.38-3.21-2.55,6.12-4.49,11.92-4.15,13.11.74,2.59,11.26,7.39,17.17,9.05s16.62,3.7,16.62,3.7S110.43,271.67,111.54,271.85Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M230.49,251.52c-.81-8.73-5-15.9-10-18.75l-.16-1.78-13.06,1.21c-7.35.68-12.42,10.77-11.33,22.53s7.93,20.73,15.28,20l13.06-1.21-.17-1.78C228.51,268.06,231.3,260.25,230.49,251.52Z" style="fill:#263238;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M236.4,251c-.85-9.17-5-16.72-10.29-19.72l-.18-1.87-5.59.52c-7.72.72-13.05,11.31-11.91,23.67s8.34,21.79,16.06,21.07l5.59-.52-.17-1.87C234.53,268.34,237.25,260.14,236.4,251Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M242,250.45c1.15,12.36-4.18,22.95-11.91,23.67S215.17,265.4,214,253.05s4.18-23,11.9-23.67S240.84,238.1,242,250.45Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M248,243.23l-21.69,2a2.32,2.32,0,0,1-2.53-2.1h0a2.32,2.32,0,0,1,2.1-2.53l21.69-2a2.32,2.32,0,0,1,2.53,2.1h0A2.32,2.32,0,0,1,248,243.23Z" style="fill:#737373;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M249.61,260.42l-21.69,2a2.32,2.32,0,0,1-2.53-2.1h0a2.32,2.32,0,0,1,2.1-2.53l21.69-2a2.34,2.34,0,0,1,2.53,2.1h0A2.32,2.32,0,0,1,249.61,260.42Z" style="fill:#737373;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M180.07,231.33s-5.22,1-7.69,4-7.54,26.15-6.37,28.81,19.92,6,25.71,6.48a83.17,83.17,0,0,0,13.94-.62s5-.13,6.37-.36,3.89-1.58,3.93-2.09-.21-1.73-2.08-1.88-5.88-1.49-6.39-1.53a32.6,32.6,0,0,1,3.65-.74s.26-1-1.8-1-3.93-.14-4.71,1a17.2,17.2,0,0,0-1.42,2.8s-11.55.81-17.82-2.25-8.25-4.08-8.25-4.08l4.5-18" style="fill:#90CAF9;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M212,269.67c1.39-.23,3.89-1.58,3.93-2.09s-.21-1.73-2.08-1.88-5.88-1.49-6.39-1.53a32.6,32.6,0,0,1,3.65-.74s.26-1-1.8-1-3.93-.14-4.71,1a17.2,17.2,0,0,0-1.42,2.8s-11.55.81-17.82-2.25-8.25-4.08-8.25-4.08l2.74-11a39.2,39.2,0,0,0-11.17-2.77c-1.87,7.54-3.4,16.42-2.7,18,1.16,2.66,19.92,6,25.71,6.48a83.17,83.17,0,0,0,13.94-.62S210.64,269.9,212,269.67Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M127.54,279.24s-3.86,2.89-3.27,4.8,3.81-2,4.61-3.15S129.05,278,127.54,279.24Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M128.3,281.83s-3.85,2.89-3.27,4.8,3.82-2,4.61-3.15S129.81,280.57,128.3,281.83Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M130.13,283.51s-3.85,2.89-3.26,4.8,3.81-2,4.61-3.15S131.65,282.25,130.13,283.51Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path><path d="M131.64,284.87s-3.33,2.14-2.77,3.72,3.31-1.41,4-2.33S133,283.86,131.64,284.87Z" style="fill:#fff;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.04742px"></path></g></svg>
\ No newline at end of file
diff --git a/src/resources/views/components/error.blade.php b/src/resources/views/components/error.blade.php
index 8f5f6a2..6753425 100644
--- a/src/resources/views/components/error.blade.php
+++ b/src/resources/views/components/error.blade.php
@@ -1,19 +1,19 @@
 @props([
     'heading' => 'Error!',
     'description' => 'Something went wrong',
-    'buttonText' => 'Go to homepage',
-    'buttonUrl' => '',
-    'image' => '/assets/images/ss-login.svg',
+    'button_text' => 'Go to homepage',
+    'button_url' => '/',
+    'image' => '',
 ])
 <div class="flex justify-center items-center">
     <div class="max-w-xl px-8">
-        <img src="{{ $image }}" alt="{{$heading}}" class="p-6 h-1/2" />
+        <div class="p-6">{!!$image!!}</div>
         <h1 class="text-center text-2xl zoom-out font-extralight tracking-wider text-red-400 -mt-10">{{ $heading }}</h1>
-        <p class="mt-1 mb-7 font-light text-sm text-gray-600/80 text-center px-12">
+        <p class="mt-2 mb-12 font-light text-gray-600/80 text-center px-12">
             {!! $description !!}
         </p>
         <div class="text-center pt-2">
-            <a href="{{ $buttonUrl }}"><x-button type="primary">{{ $buttonText }}</x-button></a>
+            <a href="{{ $button_url }}"><x-bladewind::button type="primary" size="small">{{ $button_text }}</x-bladewind::button></a>
         </div>
     </div>
 </div>
\ No newline at end of file

From 9949a04c55d62a138768adae11961013946558b5 Mon Sep 17 00:00:00 2001
From: "Michael K. Ocansey" <kabutey@gmail.com>
Date: Sun, 15 May 2022 22:45:35 +0000
Subject: [PATCH 9/9] Update README.md

---
 README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1926036..1a89680 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,46 @@
-# bladewind-ui-components
-UI Components using TailwindCSS , Laravel Blade Templates and vanilla Javascript
+<p><img src="https://img.shields.io/github/license/mkocansey/bladewind" alt="License" /></p><br />
+
+## About BladewindUI
+
+BladewindUI is a collection of UI components written purely using TailwindCSS, Laravel blade templates and Vanilla Javascript. These components are super simple to use and come with different levels of customization.
+<br /><br />
+### Components Include
+
+- **[Alert](https://bladewindui.com/component/alert)**
+- **[Avatar](https://bladewindui.com/component/avatar)**
+- **[Button](https://bladewindui.com/component/button)**
+- **[Card](https://bladewindui.com/component/card)**
+- **[Centered Element](https://bladewindui.com/component/centered-element)**
+- **[Checkbox](https://bladewindui.com/component/checkbox)**
+- **[Datepicker](https://bladewindui.com/component/datepicker)**
+- **[Dropdown](https://bladewindui.com/component/dropdown)**
+- **[Empty State](https://bladewindui.com/component/empty-state)**
+- **[Filepicker](https://bladewindui.com/component/filepicker)**
+- **[Horizontal Line Graph](https://bladewindui.com/component/horizontal-line-graph)**
+- **[List View](https://bladewindui.com/component/list-view)**
+- **[Modal](https://bladewindui.com/component/modal)**
+- **[Notification](https://bladewindui.com/component/notification)**
+- **[Process Indicator](https://bladewindui.com/component/process-indicator)**
+- **[Progress Bar](https://bladewindui.com/component/progress-bar)**
+- **[Radio Button](https://bladewindui.com/component/radio-button)**
+- **[Rating](https://bladewindui.com/component/rating)**
+- **[Statistic](https://bladewindui.com/component/statistic)**
+- **[Spinner](https://bladewindui.com/component/spinner)**
+- **[Tab](https://bladewindui.com/component/tab)**
+- **[Table](https://bladewindui.com/component/table)**
+- **[Tag](https://bladewindui.com/component/tag)**
+- **[Textbox](https://bladewindui.com/component/textbox)**
+- **[Textarea](https://bladewindui.com/component/textarea)**
+- **[Toggle](https://bladewindui.com/component/toggle)**
+
+<br /><br />
+
+## Security Vulnerabilities
+
+If you discover a security vulnerability, please e-mail Michael K. Ocansey at [kabutey@gmail.com](mailto:kabutey@gmail.com).
+
+<br />
+
+## License
+
+BladewindUI components is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).