From 0b1682031cfddefc60599fa69c82f5f004ef67db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Tue, 8 Nov 2022 14:57:53 +0100
Subject: [PATCH 01/10] implement webauthn and recovery codes from keycloak
 base

---
 .../login-recovery-authn-code-config.ftl      | 176 ++++++++++++++++
 .../login/login-recovery-authn-code-input.ftl |  26 +++
 theme/keywind/login/resources/dist/index.css  |   2 +-
 theme/keywind/login/webauthn-authenticate.ftl | 130 ++++++++++++
 theme/keywind/login/webauthn-error.ftl        |  36 ++++
 theme/keywind/login/webauthn-register.ftl     | 189 ++++++++++++++++++
 6 files changed, 558 insertions(+), 1 deletion(-)
 create mode 100644 theme/keywind/login/login-recovery-authn-code-config.ftl
 create mode 100644 theme/keywind/login/login-recovery-authn-code-input.ftl
 create mode 100644 theme/keywind/login/webauthn-authenticate.ftl
 create mode 100644 theme/keywind/login/webauthn-error.ftl
 create mode 100644 theme/keywind/login/webauthn-register.ftl

diff --git a/theme/keywind/login/login-recovery-authn-code-config.ftl b/theme/keywind/login/login-recovery-authn-code-config.ftl
new file mode 100644
index 0000000..b82c4e2
--- /dev/null
+++ b/theme/keywind/login/login-recovery-authn-code-config.ftl
@@ -0,0 +1,176 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+<#import "components/checkbox/primary.ftl" as checkboxPrimary>
+
+<@layout.registrationLayout; section>
+
+<#if section = "header">
+    ${kcSanitize(msg("recovery-code-config-header"))}
+<#elseif section = "form">
+
+    <!-- warning -->
+    <div class="bg-orange-100 text-orange-600 p-4 rounded-lg text-sm" role="alert">
+        <p class="font-bold my-2">${kcSanitize(msg("recovery-code-config-warning-title"))}</p>
+        <span>${kcSanitize(msg("recovery-code-config-warning-message"))}</span>
+    </div>
+
+    <ol class="font-mono kc-recovery-codes-list" id="kc-recovery-codes-list">
+        <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+            <li><span class="font-bold">${code?counter}:</span> ${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+        </#list>
+    </ol>
+
+    <!-- actions -->
+    <div class="flex items-stretch space-x-4 mb-4">
+        <button id="printRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
+            ${kcSanitize(msg("recovery-codes-print"))}
+        </button>
+        <button id="downloadRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
+            ${kcSanitize(msg("recovery-codes-download"))}
+        </button>
+        <button id="copyRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
+            ${kcSanitize(msg("recovery-codes-copy"))}
+        </button>
+    </div>
+
+    <form action="${url.loginAction}" class="m-0 space-y-4m" method="post">
+        <input type="hidden" name="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
+        <input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
+        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
+
+        <!-- confirmation checkbox -->
+        <@checkboxPrimary.kw id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck" required="required">
+          ${kcSanitize(msg("recovery-codes-confirmation-message"))}
+        </@checkboxPrimary.kw>
+
+        <div class="flex flex-col space-y-2 mt-4">
+            <#if isAppInitiatedAction??>
+                <@buttonPrimary.kw type="submit" id="saveRecoveryAuthnCodesBtn">
+                  ${kcSanitize(msg("recovery-codes-action-complete"))}
+                </@buttonPrimary.kw>
+
+                <@buttonSecondary.kw type="submit" id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true" onclick="document.getElementById('kcRecoveryCodesConfirmationCheck').required=false;return true;">
+                  ${kcSanitize(msg("recovery-codes-action-cancel"))}
+                </@buttonSecondary.kw>
+            <#else>
+                <@buttonPrimary.kw type="submit" id="saveRecoveryAuthnCodesBtn">
+                  ${kcSanitize(msg("recovery-codes-action-complete"))}
+                </@buttonPrimary.kw>
+            </#if>
+        </div>
+    </form>
+
+    <script>
+        /* copy recovery codes  */
+        function copyRecoveryCodes() {
+            var tmpTextarea = document.createElement("textarea");
+            var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
+            for (i = 0; i < codes.length; i++) {
+                tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
+            }
+            document.body.appendChild(tmpTextarea);
+            tmpTextarea.select();
+            document.execCommand("copy");
+            document.body.removeChild(tmpTextarea);
+        }
+
+        var copyButton = document.getElementById("copyRecoveryCodes");
+        copyButton && copyButton.addEventListener("click", function () {
+            copyRecoveryCodes();
+        });
+
+        /* download recovery codes  */
+        function formatCurrentDateTime() {
+            var dt = new Date();
+            var options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return dt.toLocaleString('en-US', options);
+        }
+
+        function parseRecoveryCodeList() {
+            var recoveryCodes = document.querySelectorAll(".kc-recovery-codes-list li");
+            var recoveryCodeList = "";
+
+            for (var i = 0; i < recoveryCodes.length; i++) {
+                var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                recoveryCodeList += recoveryCodeLiElement + "\r\n";
+            }
+
+            return recoveryCodeList;
+        }
+
+        function buildDownloadContent() {
+            var recoveryCodeList = parseRecoveryCodeList();
+            var dt = new Date();
+            var options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return fileBodyContent =
+                "${msg("recovery-codes-download-file-header")}\n\n" +
+                recoveryCodeList + "\n" +
+                "${msg("recovery-codes-download-file-description")}\n\n" +
+                "${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime();
+        }
+
+        function setUpDownloadLinkAndDownload(filename, text) {
+            var el = document.createElement('a');
+            el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            el.setAttribute('download', filename);
+            el.style.display = 'none';
+            document.body.appendChild(el);
+            el.click();
+            document.body.removeChild(el);
+        }
+
+        function downloadRecoveryCodes() {
+            setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+        }
+
+        var downloadButton = document.getElementById("downloadRecoveryCodes");
+        downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+        /* print recovery codes */
+        function buildPrintContent() {
+            var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
+            var styles =
+                `@page { size: auto;  margin-top: 0; }
+                body { width: 480px; }
+                div { list-style-type: none; font-family: monospace }
+                p:first-of-type { margin-top: 48px }`
+
+            return printFileContent =
+                "<html><style>" + styles + "</style><body>" +
+                "<title>kc-download-recovery-codes</title>" +
+                "<p>${msg("recovery-codes-download-file-header")}</p>" +
+                "<div>" + recoveryCodeListHTML + "</div>" +
+                "<p>${msg("recovery-codes-download-file-description")}</p>" +
+                "<p>${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
+                "</body></html>";
+        }
+
+        function printRecoveryCodes() {
+            var w = window.open();
+            w.document.write(buildPrintContent());
+            w.print();
+            //w.close();
+        }
+
+        var printButton = document.getElementById("printRecoveryCodes");
+        printButton && printButton.addEventListener("click", printRecoveryCodes);
+    </script>
+</#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/login-recovery-authn-code-input.ftl b/theme/keywind/login/login-recovery-authn-code-input.ftl
new file mode 100644
index 0000000..3392a8b
--- /dev/null
+++ b/theme/keywind/login/login-recovery-authn-code-input.ftl
@@ -0,0 +1,26 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/input/primary.ftl" as inputPrimary>
+
+<@layout.registrationLayout; section>
+<#if section="header">
+    ${kcSanitize(msg("auth-recovery-code-header"))}
+<#elseif section = "form">
+    <form class="m-0 space-y-4" action="${url.loginAction}" method="post">
+        <@inputPrimary.kw
+          autocomplete="off"
+          autofocus=true
+          invalid=["firstName"]
+          name="recoveryCodeInput"
+          type="text"
+          value=(register.formData.firstName)!''
+        >
+          ${msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c)}
+        </@inputPrimary.kw>
+
+        <@buttonPrimary.kw type="submit" name="login">
+          ${kcSanitize(msg("doLogIn"))}
+        </@buttonPrimary.kw>
+    </form>
+</#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/resources/dist/index.css b/theme/keywind/login/resources/dist/index.css
index c7c00cd..8126256 100644
--- a/theme/keywind/login/resources/dist/index.css
+++ b/theme/keywind/login/resources/dist/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.mb-4{margin-bottom:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-6{width:1.5rem}.w-full{width:100%}.w-4{width:1rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / 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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-6{width:1.5rem}.w-4{width:1rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / 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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
diff --git a/theme/keywind/login/webauthn-authenticate.ftl b/theme/keywind/login/webauthn-authenticate.ftl
new file mode 100644
index 0000000..fdf4d91
--- /dev/null
+++ b/theme/keywind/login/webauthn-authenticate.ftl
@@ -0,0 +1,130 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+
+<@layout.registrationLayout; section>
+<#if section="header">
+    ${msg("webauthn-login-title")}
+
+<#elseif section = "form">
+    <div class="m-0">
+        <form id="webauth" action="${url.loginAction}" method="post">
+            <input type="hidden" id="clientDataJSON" name="clientDataJSON"/>
+            <input type="hidden" id="authenticatorData" name="authenticatorData"/>
+            <input type="hidden" id="signature" name="signature"/>
+            <input type="hidden" id="credentialId" name="credentialId"/>
+            <input type="hidden" id="userHandle" name="userHandle"/>
+            <input type="hidden" id="error" name="error"/>
+        </form>
+
+        <#if authenticators??>
+            <form id="authn_select" class="m-0">
+                <#list authenticators.authenticators as authenticator>
+                    <input type="hidden" name="authn_use_chk" value="${authenticator.credentialId}"/>
+                </#list>
+            </form>
+
+            <#if shouldDisplayAuthenticators?? && shouldDisplayAuthenticators>
+                <#if authenticators.authenticators?size gt 1>
+                    <p class="font-bold py-2 text-xl">${kcSanitize(msg("webauthn-available-authenticators"))?no_esc}</p>
+                </#if>
+
+                <#list authenticators.authenticators as authenticator>
+                    <div class="my-5">
+                        <p><span class="font-bold">${kcSanitize(msg('${authenticator.label}'))?no_esc}</span>
+                        <#--<#if authenticator.transports?? && authenticator.transports.displayNameProperties?has_content>
+                            (<#list authenticator.transports.displayNameProperties as nameProperty>
+                                ${kcSanitize(msg('${nameProperty!}'))?no_esc}
+                                <#if nameProperty?has_next>, </#if>
+                            </#list>)
+                        </#if>-->
+                        </p>
+
+                        <p>${kcSanitize(msg('webauthn-createdAt-label'))?no_esc}: <span class="font-bold">${kcSanitize(authenticator.createdAt)?no_esc}</span></p>
+                    </div>
+                </#list>
+            </#if>
+        </#if>
+
+        <@buttonPrimary.kw type="button" onclick="webAuthnAuthenticate()" autofocus="autofocus">
+          ${msg("webauthn-doAuthenticate")}
+        </@buttonPrimary.kw>
+    </div>
+
+<script type="text/javascript" src="${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
+<script type="text/javascript">
+    function webAuthnAuthenticate() {
+        let isUserIdentified = ${isUserIdentified};
+        if (!isUserIdentified) {
+            doAuthenticate([]);
+            return;
+        }
+        checkAllowCredentials();
+    }
+    function checkAllowCredentials() {
+        let allowCredentials = [];
+        let authn_use = document.forms['authn_select'].authn_use_chk;
+        if (authn_use !== undefined) {
+            if (authn_use.length === undefined) {
+                allowCredentials.push({
+                    id: base64url.decode(authn_use.value, {loose: true}),
+                    type: 'public-key',
+                });
+            } else {
+                for (let i = 0; i < authn_use.length; i++) {
+                    allowCredentials.push({
+                        id: base64url.decode(authn_use[i].value, {loose: true}),
+                        type: 'public-key',
+                    });
+                }
+            }
+        }
+        doAuthenticate(allowCredentials);
+    }
+function doAuthenticate(allowCredentials) {
+    // Check if WebAuthn is supported by this browser
+    if (!window.PublicKeyCredential) {
+        jQuery("#error").val("${msg("webauthn-unsupported-browser-text")?no_esc}");
+        jQuery("#webauth").submit();
+        return;
+    }
+    let challenge = "${challenge}";
+    let userVerification = "${userVerification}";
+    let rpId = "${rpId}";
+    let publicKey = {
+        rpId : rpId,
+        challenge: base64url.decode(challenge, { loose: true })
+    };
+    let createTimeout = ${createTimeout};
+    if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+    if (allowCredentials.length) {
+        publicKey.allowCredentials = allowCredentials;
+    }
+    if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
+    navigator.credentials.get({publicKey})
+        .then((result) => {
+            window.result = result;
+            let clientDataJSON = result.response.clientDataJSON;
+            let authenticatorData = result.response.authenticatorData;
+            let signature = result.response.signature;
+            jQuery("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
+            jQuery("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
+            jQuery("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
+            jQuery("#credentialId").val(result.id);
+            if(result.response.userHandle) {
+                jQuery("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
+            }
+            jQuery("#webauth").submit();
+        })
+        .catch((err) => {
+            jQuery("#error").val(err);
+            jQuery("#webauth").submit();
+        })
+    ;
+}
+</script>
+<#elseif section = "info">
+
+</#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/webauthn-error.ftl b/theme/keywind/login/webauthn-error.ftl
new file mode 100644
index 0000000..44dd00e
--- /dev/null
+++ b/theme/keywind/login/webauthn-error.ftl
@@ -0,0 +1,36 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+
+<@layout.registrationLayout displayMessage=true; section>
+    <#if section = "header">
+        ${kcSanitize(msg("webauthn-error-title"))}
+    <#elseif section = "form">
+
+        <script type="text/javascript">
+            refreshPage = () => {
+                document.getElementById('isSetRetry').value = 'retry';
+                document.getElementById('executionValue').value = '${execution}';
+                document.getElementById('kc-error-credential-form').submit();
+            }
+        </script>
+
+        <form action="${url.loginAction}" method="post" class="m-0">
+            <input type="hidden" id="executionValue" name="authenticationExecution"/>
+            <input type="hidden" id="isSetRetry" name="isSetRetry"/>
+        </form>
+
+        <@buttonPrimary.kw type="button" tabindex="4" onclick="refreshPage()">
+          ${kcSanitize(msg("doTryAgain"))}
+        </@buttonPrimary.kw>
+
+        <#if isAppInitiatedAction??>
+            <form action="${url.loginAction}" method="post" class="m-0">
+                <@buttonSecondary.kw name="cancel-aia" type="submit" value="true">
+                  ${kcSanitize(msg("doCancel"))}
+                </@buttonSecondary.kw>
+            </form>
+        </#if>
+
+    </#if>
+</@layout.registrationLayout>
diff --git a/theme/keywind/login/webauthn-register.ftl b/theme/keywind/login/webauthn-register.ftl
new file mode 100644
index 0000000..25d0dd6
--- /dev/null
+++ b/theme/keywind/login/webauthn-register.ftl
@@ -0,0 +1,189 @@
+<#import "template.ftl" as layout>
+<#import "components/button/primary.ftl" as buttonPrimary>
+<#import "components/button/secondary.ftl" as buttonSecondary>
+
+<@layout.registrationLayout; section>
+<#if section="header">
+    ${kcSanitize(msg("webauthn-registration-title"))}
+<#elseif section = "form">
+
+    <form id="register" action="${url.loginAction}" class="m-0 space-y-4" method="post">
+        <div class="${properties.kcFormGroupClass!}">
+            <input type="hidden" id="clientDataJSON" name="clientDataJSON"/>
+            <input type="hidden" id="attestationObject" name="attestationObject"/>
+            <input type="hidden" id="publicKeyCredentialId" name="publicKeyCredentialId"/>
+            <input type="hidden" id="authenticatorLabel" name="authenticatorLabel"/>
+            <input type="hidden" id="transports" name="transports"/>
+            <input type="hidden" id="error" name="error"/>
+        </div>
+    </form>
+
+    <script type="text/javascript" src="${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
+    <script type="text/javascript">
+
+        function registerSecurityKey() {
+
+            // Check if WebAuthn is supported by this browser
+            if (!window.PublicKeyCredential) {
+                jQuery("#error").val("${msg("webauthn-unsupported-browser-text")?no_esc}");
+                jQuery("#register").submit();
+                return;
+            }
+
+            // mandatory parameters
+            let challenge = "${challenge}";
+            let userid = "${userid}";
+            let username = "${username}";
+
+            let signatureAlgorithms = "${signatureAlgorithms}";
+            let pubKeyCredParams = getPubKeyCredParams(signatureAlgorithms);
+
+            let rpEntityName = "${rpEntityName}";
+            let rp = {name: rpEntityName};
+
+            let publicKey = {
+                challenge: base64url.decode(challenge, {loose: true}),
+                rp: rp,
+                user: {
+                    id: base64url.decode(userid, {loose: true}),
+                    name: username,
+                    displayName: username
+                },
+                pubKeyCredParams: pubKeyCredParams,
+            };
+
+            // optional parameters
+            let rpId = "${rpId}";
+            publicKey.rp.id = rpId;
+
+            let attestationConveyancePreference = "${attestationConveyancePreference}";
+            if (attestationConveyancePreference !== 'not specified') publicKey.attestation = attestationConveyancePreference;
+
+            let authenticatorSelection = {};
+            let isAuthenticatorSelectionSpecified = false;
+
+            let authenticatorAttachment = "${authenticatorAttachment}";
+            if (authenticatorAttachment !== 'not specified') {
+                authenticatorSelection.authenticatorAttachment = authenticatorAttachment;
+                isAuthenticatorSelectionSpecified = true;
+            }
+
+            let requireResidentKey = "${requireResidentKey}";
+            if (requireResidentKey !== 'not specified') {
+                if (requireResidentKey === 'Yes')
+                    authenticatorSelection.requireResidentKey = true;
+                else
+                    authenticatorSelection.requireResidentKey = false;
+                isAuthenticatorSelectionSpecified = true;
+            }
+
+            let userVerificationRequirement = "${userVerificationRequirement}";
+            if (userVerificationRequirement !== 'not specified') {
+                authenticatorSelection.userVerification = userVerificationRequirement;
+                isAuthenticatorSelectionSpecified = true;
+            }
+
+            if (isAuthenticatorSelectionSpecified) publicKey.authenticatorSelection = authenticatorSelection;
+
+            let createTimeout = ${createTimeout};
+            if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
+
+            let excludeCredentialIds = "${excludeCredentialIds}";
+            let excludeCredentials = getExcludeCredentials(excludeCredentialIds);
+            if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials;
+
+            navigator.credentials.create({publicKey})
+                .then(function (result) {
+                    window.result = result;
+                    let clientDataJSON = result.response.clientDataJSON;
+                    let attestationObject = result.response.attestationObject;
+                    let publicKeyCredentialId = result.rawId;
+
+                    jQuery("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), {pad: false}));
+                    jQuery("#attestationObject").val(base64url.encode(new Uint8Array(attestationObject), {pad: false}));
+                    jQuery("#publicKeyCredentialId").val(base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false}));
+
+                    if (typeof result.response.getTransports === "function") {
+                        let transports = result.response.getTransports();
+                        if (transports) {
+                            jQuery("#transports").val(getTransportsAsString(transports));
+                        }
+                    } else {
+                        console.log("Your browser is not able to recognize supported transport media for the authenticator.");
+                    }
+
+                    let initLabel = "WebAuthn Authenticator (Default Label)";
+                    let labelResult = window.prompt("Please input your registered authenticator's label", initLabel);
+                    if (labelResult === null) labelResult = initLabel;
+                    jQuery("#authenticatorLabel").val(labelResult);
+
+                    jQuery("#register").submit();
+
+                })
+                .catch(function (err) {
+                    jQuery("#error").val(err);
+                    jQuery("#register").submit();
+                });
+        }
+
+        function getPubKeyCredParams(signatureAlgorithms) {
+            let pubKeyCredParams = [];
+            if (signatureAlgorithms === "") {
+                pubKeyCredParams.push({type: "public-key", alg: -7});
+                return pubKeyCredParams;
+            }
+            let signatureAlgorithmsList = signatureAlgorithms.split(',');
+
+            for (let i = 0; i < signatureAlgorithmsList.length; i++) {
+                pubKeyCredParams.push({
+                    type: "public-key",
+                    alg: signatureAlgorithmsList[i]
+                });
+            }
+            return pubKeyCredParams;
+        }
+
+        function getExcludeCredentials(excludeCredentialIds) {
+            let excludeCredentials = [];
+            if (excludeCredentialIds === "") return excludeCredentials;
+
+            let excludeCredentialIdsList = excludeCredentialIds.split(',');
+
+            for (let i = 0; i < excludeCredentialIdsList.length; i++) {
+                excludeCredentials.push({
+                    type: "public-key",
+                    id: base64url.decode(excludeCredentialIdsList[i],
+                    {loose: true})
+                });
+            }
+            return excludeCredentials;
+        }
+
+        function getTransportsAsString(transportsList) {
+            if (transportsList === '' || transportsList.constructor !== Array) return "";
+
+            let transportsString = "";
+
+            for (let i = 0; i < transportsList.length; i++) {
+                transportsString += transportsList[i] + ",";
+            }
+
+            return transportsString.slice(0, -1);
+        }
+    </script>
+
+    <@buttonPrimary.kw type="submit" onclick="registerSecurityKey()">
+      ${kcSanitize(msg("doRegister"))}
+    </@buttonPrimary.kw>
+
+    <#if !isSetRetry?has_content && isAppInitiatedAction?has_content>
+        <form action="${url.loginAction}" method="post" class="m-0">
+            <@buttonSecondary.kw name="cancel-aia" type="submit" value="true">
+              ${kcSanitize(msg("doCancel"))}
+            </@buttonSecondary.kw>
+        </form>
+    </#if>
+
+</#if>
+</@layout.registrationLayout>

From 8ce6c30fde49640a1382f7eeb300b7322a6e1171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Tue, 8 Nov 2022 15:18:14 +0100
Subject: [PATCH 02/10] implement missing authenticator selector

---
 theme/keywind/login/resources/dist/index.css |  2 +-
 theme/keywind/login/select-authenticator.ftl | 28 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 theme/keywind/login/select-authenticator.ftl

diff --git a/theme/keywind/login/resources/dist/index.css b/theme/keywind/login/resources/dist/index.css
index 8126256..31d006a 100644
--- a/theme/keywind/login/resources/dist/index.css
+++ b/theme/keywind/login/resources/dist/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-6{width:1.5rem}.w-4{width:1rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / 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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-6{width:1.5rem}.w-4{width:1rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / 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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-primary-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
diff --git a/theme/keywind/login/select-authenticator.ftl b/theme/keywind/login/select-authenticator.ftl
new file mode 100644
index 0000000..7f0f8bb
--- /dev/null
+++ b/theme/keywind/login/select-authenticator.ftl
@@ -0,0 +1,28 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=false; section>
+    <#if section = "header">
+        ${kcSanitize(msg("loginChooseAuthenticator-registration-title"))}
+    <#elseif section = "form">
+
+        <script type="text/javascript">
+            function fillAndSubmit(authExecId) {
+                document.getElementById('authexec-hidden-input').value = authExecId;
+                document.getElementById('kc-select-credential-form').submit();
+            }
+        </script>
+
+        <form id="kc-select-credential-form" action="${url.loginAction}" class="m-0 space-y-4" method="post">
+            <div class="flex flex-col space-y-4">
+                <#list auth.authenticationSelections as authenticationSelection>
+                    <div class="px-4 py-2 relative rounded-lg cursor-pointer hover:bg-primary-50" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
+                        <p class="font-bold text-lg">${msg('${authenticationSelection.displayName}')}</p>
+                        <p>${msg('${authenticationSelection.helpText}')}</p>
+                    </div>
+                </#list>
+            </div>
+            <input type="hidden" id="authexec-hidden-input" name="authenticationExecution" />
+        </form>
+
+    </#if>
+</@layout.registrationLayout>
+

From 1063773ddf59677eae60133be63f1a351696187e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Wed, 16 Nov 2022 12:29:40 +0100
Subject: [PATCH 03/10] create secondary-small button component

---
 .../components/button/secondary-small.ftl      | 10 ++++++++++
 .../login/login-recovery-authn-code-config.ftl | 18 +++++++++---------
 2 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 theme/keywind/login/components/button/secondary-small.ftl

diff --git a/theme/keywind/login/components/button/secondary-small.ftl b/theme/keywind/login/components/button/secondary-small.ftl
new file mode 100644
index 0000000..46c260c
--- /dev/null
+++ b/theme/keywind/login/components/button/secondary-small.ftl
@@ -0,0 +1,10 @@
+<#macro kw component="button" rest...>
+  <${component}
+    class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900"
+    <#list rest as attrName, attrValue>
+      ${attrName}="${attrValue}"
+    </#list>
+  >
+    <#nested>
+  </${component}>
+</#macro>
diff --git a/theme/keywind/login/login-recovery-authn-code-config.ftl b/theme/keywind/login/login-recovery-authn-code-config.ftl
index b82c4e2..5ce527d 100644
--- a/theme/keywind/login/login-recovery-authn-code-config.ftl
+++ b/theme/keywind/login/login-recovery-authn-code-config.ftl
@@ -1,6 +1,7 @@
 <#import "template.ftl" as layout>
 <#import "components/button/primary.ftl" as buttonPrimary>
 <#import "components/button/secondary.ftl" as buttonSecondary>
+<#import "components/button/secondary-small.ftl" as buttonSecondarySmall>
 <#import "components/checkbox/primary.ftl" as checkboxPrimary>
 
 <@layout.registrationLayout; section>
@@ -23,15 +24,14 @@
 
     <!-- actions -->
     <div class="flex items-stretch space-x-4 mb-4">
-        <button id="printRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
-            ${kcSanitize(msg("recovery-codes-print"))}
-        </button>
-        <button id="downloadRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
-            ${kcSanitize(msg("recovery-codes-download"))}
-        </button>
-        <button id="copyRecoveryCodes" type="button" class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900">
-            ${kcSanitize(msg("recovery-codes-copy"))}
-        </button>
+        <@buttonSecondarySmall.kw type="button" id="printRecoveryCodes">
+          ${kcSanitize(msg("recovery-codes-print"))}
+        <@buttonSecondarySmall.kw type="button" id="downloadRecoveryCodes">
+          ${kcSanitize(msg("recovery-codes-download"))}
+        </@buttonSecondarySmall.kw>
+        <@buttonSecondarySmall.kw type="button" id="copyRecoveryCodes">
+          ${kcSanitize(msg("recovery-codes-copy"))}
+        </@buttonSecondarySmall.kw>
     </div>
 
     <form action="${url.loginAction}" class="m-0 space-y-4m" method="post">

From 55c1704c6b7827b50c66339b2d45d7d79d1ffc9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Wed, 16 Nov 2022 12:31:51 +0100
Subject: [PATCH 04/10] create secondary-small button component

---
 theme/keywind/login/resources/dist/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/keywind/login/resources/dist/index.css b/theme/keywind/login/resources/dist/index.css
index 31d006a..fb65c35 100644
--- a/theme/keywind/login/resources/dist/index.css
+++ b/theme/keywind/login/resources/dist/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-6{width:1.5rem}.w-4{width:1rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / 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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-primary-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-4{height:1rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-6{width:1.5rem}.w-full{width:100%}.w-4{width:1rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / 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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-secondary-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-primary-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}

From 1d93e03d1b840407d5f7851971f111144d4f3f69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Wed, 16 Nov 2022 12:37:26 +0100
Subject: [PATCH 05/10] fix missing closing statement

---
 theme/keywind/login/login-recovery-authn-code-config.ftl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/theme/keywind/login/login-recovery-authn-code-config.ftl b/theme/keywind/login/login-recovery-authn-code-config.ftl
index 5ce527d..6aa70e5 100644
--- a/theme/keywind/login/login-recovery-authn-code-config.ftl
+++ b/theme/keywind/login/login-recovery-authn-code-config.ftl
@@ -26,6 +26,7 @@
     <div class="flex items-stretch space-x-4 mb-4">
         <@buttonSecondarySmall.kw type="button" id="printRecoveryCodes">
           ${kcSanitize(msg("recovery-codes-print"))}
+        </@buttonSecondarySmall.kw>
         <@buttonSecondarySmall.kw type="button" id="downloadRecoveryCodes">
           ${kcSanitize(msg("recovery-codes-download"))}
         </@buttonSecondarySmall.kw>

From 2c5c3f0c7cc0fea712946f0c44d348dcd3ca3941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Fri, 18 Nov 2022 11:45:56 +0100
Subject: [PATCH 06/10] fix retry error due to missing form id

---
 theme/keywind/login/webauthn-error.ftl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/keywind/login/webauthn-error.ftl b/theme/keywind/login/webauthn-error.ftl
index 44dd00e..8b8e2ad 100644
--- a/theme/keywind/login/webauthn-error.ftl
+++ b/theme/keywind/login/webauthn-error.ftl
@@ -15,7 +15,7 @@
             }
         </script>
 
-        <form action="${url.loginAction}" method="post" class="m-0">
+        <form id="kc-error-credential-form" action="${url.loginAction}" method="post" class="m-0">
             <input type="hidden" id="executionValue" name="authenticationExecution"/>
             <input type="hidden" id="isSetRetry" name="isSetRetry"/>
         </form>

From 60f8cbc89a06205e5769f626c24ed3ad2e905623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Fri, 18 Nov 2022 11:54:04 +0100
Subject: [PATCH 07/10] remove jquery dependency, use vanilla js

---
 theme/keywind/login/webauthn-register.ftl | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/theme/keywind/login/webauthn-register.ftl b/theme/keywind/login/webauthn-register.ftl
index 25d0dd6..7700c79 100644
--- a/theme/keywind/login/webauthn-register.ftl
+++ b/theme/keywind/login/webauthn-register.ftl
@@ -18,7 +18,6 @@
         </div>
     </form>
 
-    <script type="text/javascript" src="${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
     <script type="text/javascript">
 
@@ -26,8 +25,8 @@
 
             // Check if WebAuthn is supported by this browser
             if (!window.PublicKeyCredential) {
-                jQuery("#error").val("${msg("webauthn-unsupported-browser-text")?no_esc}");
-                jQuery("#register").submit();
+                document.querySelector("#error").value = "${msg("webauthn-unsupported-browser-text")?no_esc}";
+                document.querySelector("#register").submit();
                 return;
             }
 
@@ -100,14 +99,14 @@
                     let attestationObject = result.response.attestationObject;
                     let publicKeyCredentialId = result.rawId;
 
-                    jQuery("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), {pad: false}));
-                    jQuery("#attestationObject").val(base64url.encode(new Uint8Array(attestationObject), {pad: false}));
-                    jQuery("#publicKeyCredentialId").val(base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false}));
+                    document.querySelector("#clientDataJSON").value = base64url.encode(new Uint8Array(clientDataJSON), {pad: false});
+                    document.querySelector("#attestationObject").value = base64url.encode(new Uint8Array(attestationObject), {pad: false});
+                    document.querySelector("#publicKeyCredentialId").value = base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false});
 
                     if (typeof result.response.getTransports === "function") {
                         let transports = result.response.getTransports();
                         if (transports) {
-                            jQuery("#transports").val(getTransportsAsString(transports));
+                            document.querySelector("#transports").value = getTransportsAsString(transports);
                         }
                     } else {
                         console.log("Your browser is not able to recognize supported transport media for the authenticator.");
@@ -116,14 +115,14 @@
                     let initLabel = "WebAuthn Authenticator (Default Label)";
                     let labelResult = window.prompt("Please input your registered authenticator's label", initLabel);
                     if (labelResult === null) labelResult = initLabel;
-                    jQuery("#authenticatorLabel").val(labelResult);
+                    document.querySelector("#authenticatorLabel").value = labelResult;
 
-                    jQuery("#register").submit();
+                    document.querySelector("#register").submit();
 
                 })
                 .catch(function (err) {
-                    jQuery("#error").val(err);
-                    jQuery("#register").submit();
+                    document.querySelector("#error").value = err;
+                    document.querySelector("#register").submit();
                 });
         }
 

From d8494cac374a928fe130fe696dc8affc47cef7ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Constantin=20Wildf=C3=B6rster?=
 <constantin@wildfoerster.org>
Date: Fri, 18 Nov 2022 12:01:08 +0100
Subject: [PATCH 08/10] remove jquery dependency, use vanilla js

---
 theme/keywind/login/webauthn-authenticate.ftl | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/theme/keywind/login/webauthn-authenticate.ftl b/theme/keywind/login/webauthn-authenticate.ftl
index fdf4d91..2d914f6 100644
--- a/theme/keywind/login/webauthn-authenticate.ftl
+++ b/theme/keywind/login/webauthn-authenticate.ftl
@@ -51,7 +51,6 @@
         </@buttonPrimary.kw>
     </div>
 
-<script type="text/javascript" src="${url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js"></script>
 <script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
 <script type="text/javascript">
     function webAuthnAuthenticate() {
@@ -85,8 +84,8 @@
 function doAuthenticate(allowCredentials) {
     // Check if WebAuthn is supported by this browser
     if (!window.PublicKeyCredential) {
-        jQuery("#error").val("${msg("webauthn-unsupported-browser-text")?no_esc}");
-        jQuery("#webauth").submit();
+        document.querySelector("#error").value = "${msg("webauthn-unsupported-browser-text")?no_esc}";
+        document.querySelector("#webauth").submit();
         return;
     }
     let challenge = "${challenge}";
@@ -108,18 +107,18 @@ function doAuthenticate(allowCredentials) {
             let clientDataJSON = result.response.clientDataJSON;
             let authenticatorData = result.response.authenticatorData;
             let signature = result.response.signature;
-            jQuery("#clientDataJSON").val(base64url.encode(new Uint8Array(clientDataJSON), { pad: false }));
-            jQuery("#authenticatorData").val(base64url.encode(new Uint8Array(authenticatorData), { pad: false }));
-            jQuery("#signature").val(base64url.encode(new Uint8Array(signature), { pad: false }));
-            jQuery("#credentialId").val(result.id);
+            document.querySelector("#clientDataJSON").value = base64url.encode(new Uint8Array(clientDataJSON), { pad: false });
+            document.querySelector("#authenticatorData").value = base64url.encode(new Uint8Array(authenticatorData), { pad: false });
+            document.querySelector("#signature").value = base64url.encode(new Uint8Array(signature), { pad: false });
+            document.querySelector("#credentialId").value = result.id;
             if(result.response.userHandle) {
-                jQuery("#userHandle").val(base64url.encode(new Uint8Array(result.response.userHandle), { pad: false }));
+                document.querySelector("#userHandle").value = base64url.encode(new Uint8Array(result.response.userHandle), { pad: false });
             }
-            jQuery("#webauth").submit();
+            document.querySelector("#webauth").submit();
         })
         .catch((err) => {
-            jQuery("#error").val(err);
-            jQuery("#webauth").submit();
+            document.querySelector("#error").value = err;
+            document.querySelector("#webauth").submit();
         })
     ;
 }

From 61935f6ed2adc9210db0c65e1ccc41bce7b87db4 Mon Sep 17 00:00:00 2001
From: "@lukin" <anthony@lukin.dev>
Date: Sun, 15 Jan 2023 02:00:00 +0400
Subject: [PATCH 09/10] [pages] Update Recovery Authn Code

---
 src/data/recoveryCodes.ts                     |  59 ++++
 .../components/button/secondary-small.ftl     |  10 -
 .../login-recovery-authn-code-config.ftl      | 260 ++++++------------
 .../login/login-recovery-authn-code-input.ftl |  44 +--
 .../dist/assets/module.esm-90313d2c.js        |   5 +
 theme/keywind/login/resources/dist/index.css  |   2 +-
 theme/keywind/login/resources/dist/index.js   |   6 +-
 .../login/resources/dist/recoveryCodes.js     |   8 +
 vite.config.ts                                |   2 +-
 9 files changed, 184 insertions(+), 212 deletions(-)
 create mode 100644 src/data/recoveryCodes.ts
 delete mode 100644 theme/keywind/login/components/button/secondary-small.ftl
 create mode 100644 theme/keywind/login/resources/dist/assets/module.esm-90313d2c.js
 create mode 100644 theme/keywind/login/resources/dist/recoveryCodes.js

diff --git a/src/data/recoveryCodes.ts b/src/data/recoveryCodes.ts
new file mode 100644
index 0000000..b329381
--- /dev/null
+++ b/src/data/recoveryCodes.ts
@@ -0,0 +1,59 @@
+import Alpine from 'alpinejs';
+
+type DataType = {
+  $refs: RefsType;
+  $store: StoreType;
+};
+
+type RefsType = {
+  codeList: HTMLUListElement;
+};
+
+type StoreType = {
+  recoveryCodes: {
+    downloadFileDate: string;
+    downloadFileDescription: string;
+    downloadFileHeader: string;
+    downloadFileName: string;
+  };
+};
+
+document.addEventListener('alpine:init', () => {
+  Alpine.data('recoveryCodes', function (this: DataType) {
+    const { codeList } = this.$refs;
+    const { downloadFileDate, downloadFileDescription, downloadFileHeader, downloadFileName } =
+      this.$store.recoveryCodes;
+
+    const date = new Date().toLocaleString(navigator.language);
+
+    const codeElements = codeList.getElementsByTagName('li');
+    const codes = Array.from(codeElements)
+      .map((codeElement) => codeElement.innerText)
+      .join('\n');
+
+    return {
+      copy: () => navigator.clipboard.writeText(codes),
+      download: () => {
+        const element = document.createElement('a');
+        const text = `${downloadFileHeader}\n\n${codes}\n\n${downloadFileDescription}\n\n${downloadFileDate} ${date}`;
+
+        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+        element.setAttribute('download', `${downloadFileName}.txt`);
+        element.click();
+      },
+      print: () => {
+        const codeListHTML = codeList.innerHTML;
+        const styles = 'div { font-family: monospace; list-style-type: none }';
+        const content = `<html><style>${styles}</style><body><title>${downloadFileName}</title><p>${downloadFileHeader}</p><div>${codeListHTML}</div><p>${downloadFileDescription}</p><p>${downloadFileDate} ${date}</p></body></html>`;
+
+        const printWindow = window.open();
+
+        if (printWindow) {
+          printWindow.document.write(content);
+          printWindow.print();
+          printWindow.close();
+        }
+      },
+    };
+  });
+});
diff --git a/theme/keywind/login/components/button/secondary-small.ftl b/theme/keywind/login/components/button/secondary-small.ftl
deleted file mode 100644
index 46c260c..0000000
--- a/theme/keywind/login/components/button/secondary-small.ftl
+++ /dev/null
@@ -1,10 +0,0 @@
-<#macro kw component="button" rest...>
-  <${component}
-    class="bg-secondary-100 flex justify-center px-2 py-1 relative rounded text-xs text-secondary-600 w-full focus:outline-none focus:ring-2 focus:ring-secondary-600 focus:ring-offset-2 hover:bg-secondary-200 hover:text-secondary-900"
-    <#list rest as attrName, attrValue>
-      ${attrName}="${attrValue}"
-    </#list>
-  >
-    <#nested>
-  </${component}>
-</#macro>
diff --git a/theme/keywind/login/login-recovery-authn-code-config.ftl b/theme/keywind/login/login-recovery-authn-code-config.ftl
index 6aa70e5..a8cfc35 100644
--- a/theme/keywind/login/login-recovery-authn-code-config.ftl
+++ b/theme/keywind/login/login-recovery-authn-code-config.ftl
@@ -1,177 +1,91 @@
 <#import "template.ftl" as layout>
-<#import "components/button/primary.ftl" as buttonPrimary>
-<#import "components/button/secondary.ftl" as buttonSecondary>
-<#import "components/button/secondary-small.ftl" as buttonSecondarySmall>
-<#import "components/checkbox/primary.ftl" as checkboxPrimary>
+<#import "components/atoms/alert.ftl" as alert>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
+<#import "components/atoms/checkbox.ftl" as checkbox>
+<#import "components/atoms/form.ftl" as form>
 
-<@layout.registrationLayout; section>
-
-<#if section = "header">
-    ${kcSanitize(msg("recovery-code-config-header"))}
-<#elseif section = "form">
-
-    <!-- warning -->
-    <div class="bg-orange-100 text-orange-600 p-4 rounded-lg text-sm" role="alert">
-        <p class="font-bold my-2">${kcSanitize(msg("recovery-code-config-warning-title"))}</p>
-        <span>${kcSanitize(msg("recovery-code-config-warning-message"))}</span>
-    </div>
-
-    <ol class="font-mono kc-recovery-codes-list" id="kc-recovery-codes-list">
-        <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
-            <li><span class="font-bold">${code?counter}:</span> ${code[0..3]}-${code[4..7]}-${code[8..]}</li>
-        </#list>
-    </ol>
-
-    <!-- actions -->
-    <div class="flex items-stretch space-x-4 mb-4">
-        <@buttonSecondarySmall.kw type="button" id="printRecoveryCodes">
-          ${kcSanitize(msg("recovery-codes-print"))}
-        </@buttonSecondarySmall.kw>
-        <@buttonSecondarySmall.kw type="button" id="downloadRecoveryCodes">
-          ${kcSanitize(msg("recovery-codes-download"))}
-        </@buttonSecondarySmall.kw>
-        <@buttonSecondarySmall.kw type="button" id="copyRecoveryCodes">
-          ${kcSanitize(msg("recovery-codes-copy"))}
-        </@buttonSecondarySmall.kw>
-    </div>
-
-    <form action="${url.loginAction}" class="m-0 space-y-4m" method="post">
-        <input type="hidden" name="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
-        <input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
-        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
-
-        <!-- confirmation checkbox -->
-        <@checkboxPrimary.kw id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck" required="required">
-          ${kcSanitize(msg("recovery-codes-confirmation-message"))}
-        </@checkboxPrimary.kw>
-
-        <div class="flex flex-col space-y-2 mt-4">
-            <#if isAppInitiatedAction??>
-                <@buttonPrimary.kw type="submit" id="saveRecoveryAuthnCodesBtn">
-                  ${kcSanitize(msg("recovery-codes-action-complete"))}
-                </@buttonPrimary.kw>
-
-                <@buttonSecondary.kw type="submit" id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true" onclick="document.getElementById('kcRecoveryCodesConfirmationCheck').required=false;return true;">
-                  ${kcSanitize(msg("recovery-codes-action-cancel"))}
-                </@buttonSecondary.kw>
-            <#else>
-                <@buttonPrimary.kw type="submit" id="saveRecoveryAuthnCodesBtn">
-                  ${kcSanitize(msg("recovery-codes-action-complete"))}
-                </@buttonPrimary.kw>
-            </#if>
+<@layout.registrationLayout script="dist/recoveryCodes.js" ; section>
+  <#if section="header">
+    ${msg("recovery-code-config-header")}
+  <#elseif section="form">
+    <div class="space-y-6" x-data="recoveryCodes">
+      <@alert.kw color="warning">
+        <div class="space-y-2">
+          <h4 class="font-bold">${msg("recovery-code-config-warning-title")}</h4>
+          <p>${msg("recovery-code-config-warning-message")}</p>
         </div>
-    </form>
-
-    <script>
-        /* copy recovery codes  */
-        function copyRecoveryCodes() {
-            var tmpTextarea = document.createElement("textarea");
-            var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
-            for (i = 0; i < codes.length; i++) {
-                tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
-            }
-            document.body.appendChild(tmpTextarea);
-            tmpTextarea.select();
-            document.execCommand("copy");
-            document.body.removeChild(tmpTextarea);
-        }
-
-        var copyButton = document.getElementById("copyRecoveryCodes");
-        copyButton && copyButton.addEventListener("click", function () {
-            copyRecoveryCodes();
-        });
-
-        /* download recovery codes  */
-        function formatCurrentDateTime() {
-            var dt = new Date();
-            var options = {
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                timeZoneName: 'short'
-            };
-
-            return dt.toLocaleString('en-US', options);
-        }
-
-        function parseRecoveryCodeList() {
-            var recoveryCodes = document.querySelectorAll(".kc-recovery-codes-list li");
-            var recoveryCodeList = "";
-
-            for (var i = 0; i < recoveryCodes.length; i++) {
-                var recoveryCodeLiElement = recoveryCodes[i].innerText;
-                recoveryCodeList += recoveryCodeLiElement + "\r\n";
-            }
-
-            return recoveryCodeList;
-        }
-
-        function buildDownloadContent() {
-            var recoveryCodeList = parseRecoveryCodeList();
-            var dt = new Date();
-            var options = {
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                timeZoneName: 'short'
-            };
-
-            return fileBodyContent =
-                "${msg("recovery-codes-download-file-header")}\n\n" +
-                recoveryCodeList + "\n" +
-                "${msg("recovery-codes-download-file-description")}\n\n" +
-                "${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime();
-        }
-
-        function setUpDownloadLinkAndDownload(filename, text) {
-            var el = document.createElement('a');
-            el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-            el.setAttribute('download', filename);
-            el.style.display = 'none';
-            document.body.appendChild(el);
-            el.click();
-            document.body.removeChild(el);
-        }
-
-        function downloadRecoveryCodes() {
-            setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
-        }
-
-        var downloadButton = document.getElementById("downloadRecoveryCodes");
-        downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
-
-        /* print recovery codes */
-        function buildPrintContent() {
-            var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
-            var styles =
-                `@page { size: auto;  margin-top: 0; }
-                body { width: 480px; }
-                div { list-style-type: none; font-family: monospace }
-                p:first-of-type { margin-top: 48px }`
-
-            return printFileContent =
-                "<html><style>" + styles + "</style><body>" +
-                "<title>kc-download-recovery-codes</title>" +
-                "<p>${msg("recovery-codes-download-file-header")}</p>" +
-                "<div>" + recoveryCodeListHTML + "</div>" +
-                "<p>${msg("recovery-codes-download-file-description")}</p>" +
-                "<p>${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
-                "</body></html>";
-        }
-
-        function printRecoveryCodes() {
-            var w = window.open();
-            w.document.write(buildPrintContent());
-            w.print();
-            //w.close();
-        }
-
-        var printButton = document.getElementById("printRecoveryCodes");
-        printButton && printButton.addEventListener("click", printRecoveryCodes);
-    </script>
-</#if>
+      </@alert.kw>
+      <ul class="columns-2 font-mono text-center" x-ref="codeList">
+        <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+          <li>${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+        </#list>
+      </ul>
+      <div class="flex items-stretch space-x-4 mb-4">
+        <@button.kw @click="print" color="secondary" size="small" type="button">
+          ${msg("recovery-codes-print")}
+        </@button.kw>
+        <@button.kw @click="download" color="secondary" size="small" type="button">
+          ${msg("recovery-codes-download")}
+        </@button.kw>
+        <@button.kw @click="copy" color="secondary" size="small" type="button">
+          ${msg("recovery-codes-copy")}
+        </@button.kw>
+      </div>
+      <@form.kw action=url.loginAction method="post">
+        <input
+          name="generatedRecoveryAuthnCodes"
+          type="hidden"
+          value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}"
+        />
+        <input
+          name="generatedAt"
+          type="hidden"
+          value="${recoveryAuthnCodesConfigBean.generatedAt?c}"
+        />
+        <input
+          name="userLabel"
+          type="hidden"
+          value="${msg('recovery-codes-label-default')}"
+        />
+        <@checkbox.kw
+          label=msg("recovery-codes-confirmation-message")
+          name="kcRecoveryCodesConfirmationCheck"
+          required="required"
+          x\-ref="confirmationCheck"
+        />
+        <@buttonGroup.kw>
+          <#if isAppInitiatedAction??>
+            <@button.kw color="primary" type="submit">
+              ${msg("recovery-codes-action-complete")}
+            </@button.kw>
+            <@button.kw
+              @click="$refs.confirmationCheck.required = false"
+              color="secondary"
+              name="cancel-aia"
+              type="submit"
+              value="true"
+            >
+              ${msg("recovery-codes-action-cancel")}
+            </@button.kw>
+          <#else>
+            <@button.kw color="primary" type="submit">
+              ${msg("recovery-codes-action-complete")}
+            </@button.kw>
+          </#if>
+        </@buttonGroup.kw>
+      </@form.kw>
+    </div>
+  </#if>
 </@layout.registrationLayout>
+
+<script>
+  document.addEventListener('alpine:init', () => {
+    Alpine.store('recoveryCodes', {
+      downloadFileDate: '${msg("recovery-codes-download-file-date")}',
+      downloadFileDescription: '${msg("recovery-codes-download-file-description")}',
+      downloadFileHeader: '${msg("recovery-codes-download-file-header")}',
+      downloadFileName: 'kc-download-recovery-codes',
+    })
+  })
+</script>
diff --git a/theme/keywind/login/login-recovery-authn-code-input.ftl b/theme/keywind/login/login-recovery-authn-code-input.ftl
index 3392a8b..a46bcfa 100644
--- a/theme/keywind/login/login-recovery-authn-code-input.ftl
+++ b/theme/keywind/login/login-recovery-authn-code-input.ftl
@@ -1,26 +1,26 @@
 <#import "template.ftl" as layout>
-<#import "components/button/primary.ftl" as buttonPrimary>
-<#import "components/input/primary.ftl" as inputPrimary>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
+<#import "components/atoms/form.ftl" as form>
+<#import "components/atoms/input.ftl" as input>
 
 <@layout.registrationLayout; section>
-<#if section="header">
-    ${kcSanitize(msg("auth-recovery-code-header"))}
-<#elseif section = "form">
-    <form class="m-0 space-y-4" action="${url.loginAction}" method="post">
-        <@inputPrimary.kw
-          autocomplete="off"
-          autofocus=true
-          invalid=["firstName"]
-          name="recoveryCodeInput"
-          type="text"
-          value=(register.formData.firstName)!''
-        >
-          ${msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c)}
-        </@inputPrimary.kw>
-
-        <@buttonPrimary.kw type="submit" name="login">
-          ${kcSanitize(msg("doLogIn"))}
-        </@buttonPrimary.kw>
-    </form>
-</#if>
+  <#if section="header">
+    ${msg("auth-recovery-code-header")}
+  <#elseif section="form">
+    <@form.kw action=url.loginAction method="post">
+      <@input.kw
+        autocomplete="off"
+        autofocus=true
+        label=msg("auth-recovery-code-prompt", recoveryAuthnCodesInputBean.codeNumber?c)
+        name="recoveryCodeInput"
+        type="text"
+      />
+      <@buttonGroup.kw>
+        <@button.kw color="primary" name="login" type="submit">
+          ${msg("doLogIn")}
+        </@button.kw>
+      </@buttonGroup.kw>
+    </@form.kw>
+  </#if>
 </@layout.registrationLayout>
diff --git a/theme/keywind/login/resources/dist/assets/module.esm-90313d2c.js b/theme/keywind/login/resources/dist/assets/module.esm-90313d2c.js
new file mode 100644
index 0000000..c9839ef
--- /dev/null
+++ b/theme/keywind/login/resources/dist/assets/module.esm-90313d2c.js
@@ -0,0 +1,5 @@
+var Ae=!1,Oe=!1,$=[];function Ar(e){Or(e)}function Or(e){$.includes(e)||$.push(e),Cr()}function ft(e){let t=$.indexOf(e);t!==-1&&$.splice(t,1)}function Cr(){!Oe&&!Ae&&(Ae=!0,queueMicrotask(Mr))}function Mr(){Ae=!1,Oe=!0;for(let e=0;e<$.length;e++)$[e]();$.length=0,Oe=!1}var k,Y,ae,dt,Ce=!0;function Tr(e){Ce=!1,e(),Ce=!0}function $r(e){k=e.reactive,ae=e.release,Y=t=>e.effect(t,{scheduler:r=>{Ce?Ar(r):r()}}),dt=e.raw}function it(e){Y=e}function Pr(e){let t=()=>{};return[n=>{let i=Y(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),ae(i))},i},()=>{t()}]}var pt=[],_t=[],ht=[];function Ir(e){ht.push(e)}function gt(e,t){typeof t=="function"?(e._x_cleanups||(e._x_cleanups=[]),e._x_cleanups.push(t)):(t=e,_t.push(t))}function Rr(e){pt.push(e)}function jr(e,t,r){e._x_attributeCleanups||(e._x_attributeCleanups={}),e._x_attributeCleanups[t]||(e._x_attributeCleanups[t]=[]),e._x_attributeCleanups[t].push(r)}function vt(e,t){e._x_attributeCleanups&&Object.entries(e._x_attributeCleanups).forEach(([r,n])=>{(t===void 0||t.includes(r))&&(n.forEach(i=>i()),delete e._x_attributeCleanups[r])})}var Be=new MutationObserver(qe),ze=!1;function xt(){Be.observe(document,{subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0}),ze=!0}function Lr(){Fr(),Be.disconnect(),ze=!1}var W=[],me=!1;function Fr(){W=W.concat(Be.takeRecords()),W.length&&!me&&(me=!0,queueMicrotask(()=>{Nr(),me=!1}))}function Nr(){qe(W),W.length=0}function x(e){if(!ze)return e();Lr();let t=e();return xt(),t}var He=!1,ie=[];function Kr(){He=!0}function Dr(){He=!1,qe(ie),ie=[]}function qe(e){if(He){ie=ie.concat(e);return}let t=[],r=[],n=new Map,i=new Map;for(let o=0;o<e.length;o++)if(!e[o].target._x_ignoreMutationObserver&&(e[o].type==="childList"&&(e[o].addedNodes.forEach(s=>s.nodeType===1&&t.push(s)),e[o].removedNodes.forEach(s=>s.nodeType===1&&r.push(s))),e[o].type==="attributes")){let s=e[o].target,a=e[o].attributeName,u=e[o].oldValue,c=()=>{n.has(s)||n.set(s,[]),n.get(s).push({name:a,value:s.getAttribute(a)})},l=()=>{i.has(s)||i.set(s,[]),i.get(s).push(a)};s.hasAttribute(a)&&u===null?c():s.hasAttribute(a)?(l(),c()):l()}i.forEach((o,s)=>{vt(s,o)}),n.forEach((o,s)=>{pt.forEach(a=>a(s,o))});for(let o of r)if(!t.includes(o)&&(_t.forEach(s=>s(o)),o._x_cleanups))for(;o._x_cleanups.length;)o._x_cleanups.pop()();t.forEach(o=>{o._x_ignoreSelf=!0,o._x_ignore=!0});for(let o of t)r.includes(o)||o.isConnected&&(delete o._x_ignoreSelf,delete o._x_ignore,ht.forEach(s=>s(o)),o._x_ignore=!0,o._x_ignoreSelf=!0);t.forEach(o=>{delete o._x_ignoreSelf,delete o._x_ignore}),t=null,r=null,n=null,i=null}function yt(e){return Q(N(e))}function J(e,t,r){return e._x_dataStack=[t,...N(r||e)],()=>{e._x_dataStack=e._x_dataStack.filter(n=>n!==t)}}function ot(e,t){let r=e._x_dataStack[0];Object.entries(t).forEach(([n,i])=>{r[n]=i})}function N(e){return e._x_dataStack?e._x_dataStack:typeof ShadowRoot=="function"&&e instanceof ShadowRoot?N(e.host):e.parentNode?N(e.parentNode):[]}function Q(e){let t=new Proxy({},{ownKeys:()=>Array.from(new Set(e.flatMap(r=>Object.keys(r)))),has:(r,n)=>e.some(i=>i.hasOwnProperty(n)),get:(r,n)=>(e.find(i=>{if(i.hasOwnProperty(n)){let o=Object.getOwnPropertyDescriptor(i,n);if(o.get&&o.get._x_alreadyBound||o.set&&o.set._x_alreadyBound)return!0;if((o.get||o.set)&&o.enumerable){let s=o.get,a=o.set,u=o;s=s&&s.bind(t),a=a&&a.bind(t),s&&(s._x_alreadyBound=!0),a&&(a._x_alreadyBound=!0),Object.defineProperty(i,n,{...u,get:s,set:a})}return!0}return!1})||{})[n],set:(r,n,i)=>{let o=e.find(s=>s.hasOwnProperty(n));return o?o[n]=i:e[e.length-1][n]=i,!0}});return t}function bt(e){let t=n=>typeof n=="object"&&!Array.isArray(n)&&n!==null,r=(n,i="")=>{Object.entries(Object.getOwnPropertyDescriptors(n)).forEach(([o,{value:s,enumerable:a}])=>{if(a===!1||s===void 0)return;let u=i===""?o:`${i}.${o}`;typeof s=="object"&&s!==null&&s._x_interceptor?n[o]=s.initialize(e,u,o):t(s)&&s!==n&&!(s instanceof Element)&&r(s,u)})};return r(e)}function mt(e,t=()=>{}){let r={initialValue:void 0,_x_interceptor:!0,initialize(n,i,o){return e(this.initialValue,()=>kr(n,i),s=>Me(n,i,s),i,o)}};return t(r),n=>{if(typeof n=="object"&&n!==null&&n._x_interceptor){let i=r.initialize.bind(r);r.initialize=(o,s,a)=>{let u=n.initialize(o,s,a);return r.initialValue=u,i(o,s,a)}}else r.initialValue=n;return r}}function kr(e,t){return t.split(".").reduce((r,n)=>r[n],e)}function Me(e,t,r){if(typeof t=="string"&&(t=t.split(".")),t.length===1)e[t[0]]=r;else{if(t.length===0)throw error;return e[t[0]]||(e[t[0]]={}),Me(e[t[0]],t.slice(1),r)}}var wt={};function E(e,t){wt[e]=t}function Te(e,t){return Object.entries(wt).forEach(([r,n])=>{Object.defineProperty(e,`$${r}`,{get(){let[i,o]=Mt(t);return i={interceptor:mt,...i},gt(t,o),n(t,i)},enumerable:!1})}),e}function Br(e,t,r,...n){try{return r(...n)}catch(i){G(i,e,t)}}function G(e,t,r=void 0){Object.assign(e,{el:t,expression:r}),console.warn(`Alpine Expression Error: ${e.message}
+
+${r?'Expression: "'+r+`"
+
+`:""}`,t),setTimeout(()=>{throw e},0)}var ne=!0;function zr(e){let t=ne;ne=!1,e(),ne=t}function F(e,t,r={}){let n;return b(e,t)(i=>n=i,r),n}function b(...e){return Et(...e)}var Et=St;function Hr(e){Et=e}function St(e,t){let r={};Te(r,e);let n=[r,...N(e)];if(typeof t=="function")return qr(n,t);let i=Ur(n,t,e);return Br.bind(null,e,t,i)}function qr(e,t){return(r=()=>{},{scope:n={},params:i=[]}={})=>{let o=t.apply(Q([n,...e]),i);oe(r,o)}}var we={};function Wr(e,t){if(we[e])return we[e];let r=Object.getPrototypeOf(async function(){}).constructor,n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e,o=(()=>{try{return new r(["__self","scope"],`with (scope) { __self.result = ${n} }; __self.finished = true; return __self.result;`)}catch(s){return G(s,t,e),Promise.resolve()}})();return we[e]=o,o}function Ur(e,t,r){let n=Wr(t,r);return(i=()=>{},{scope:o={},params:s=[]}={})=>{n.result=void 0,n.finished=!1;let a=Q([o,...e]);if(typeof n=="function"){let u=n(n,a).catch(c=>G(c,r,t));n.finished?(oe(i,n.result,a,s,r),n.result=void 0):u.then(c=>{oe(i,c,a,s,r)}).catch(c=>G(c,r,t)).finally(()=>n.result=void 0)}}}function oe(e,t,r,n,i){if(ne&&typeof t=="function"){let o=t.apply(r,n);o instanceof Promise?o.then(s=>oe(e,s,r,n)).catch(s=>G(s,i,t)):e(o)}else e(t)}var We="x-";function B(e=""){return We+e}function Vr(e){We=e}var At={};function g(e,t){At[e]=t}function Ue(e,t,r){if(t=Array.from(t),e._x_virtualDirectives){let o=Object.entries(e._x_virtualDirectives).map(([a,u])=>({name:a,value:u})),s=Ot(o);o=o.map(a=>s.find(u=>u.name===a.name)?{name:`x-bind:${a.name}`,value:`"${a.value}"`}:a),t=t.concat(o)}let n={};return t.map(Pt((o,s)=>n[o]=s)).filter(Rt).map(Jr(n,r)).sort(Qr).map(o=>Yr(e,o))}function Ot(e){return Array.from(e).map(Pt()).filter(t=>!Rt(t))}var $e=!1,q=new Map,Ct=Symbol();function Gr(e){$e=!0;let t=Symbol();Ct=t,q.set(t,[]);let r=()=>{for(;q.get(t).length;)q.get(t).shift()();q.delete(t)},n=()=>{$e=!1,r()};e(r),n()}function Mt(e){let t=[],r=a=>t.push(a),[n,i]=Pr(e);return t.push(i),[{Alpine:Z,effect:n,cleanup:r,evaluateLater:b.bind(b,e),evaluate:F.bind(F,e)},()=>t.forEach(a=>a())]}function Yr(e,t){let r=()=>{},n=At[t.type]||r,[i,o]=Mt(e);jr(e,t.original,o);let s=()=>{e._x_ignore||e._x_ignoreSelf||(n.inline&&n.inline(e,t,i),n=n.bind(n,e,t,i),$e?q.get(Ct).push(n):n())};return s.runCleanups=o,s}var Tt=(e,t)=>({name:r,value:n})=>(r.startsWith(e)&&(r=r.replace(e,t)),{name:r,value:n}),$t=e=>e;function Pt(e=()=>{}){return({name:t,value:r})=>{let{name:n,value:i}=It.reduce((o,s)=>s(o),{name:t,value:r});return n!==t&&e(n,t),{name:n,value:i}}}var It=[];function Ve(e){It.push(e)}function Rt({name:e}){return jt().test(e)}var jt=()=>new RegExp(`^${We}([^:^.]+)\\b`);function Jr(e,t){return({name:r,value:n})=>{let i=r.match(jt()),o=r.match(/:([a-zA-Z0-9\-:]+)/),s=r.match(/\.[^.\]]+(?=[^\]]*$)/g)||[],a=t||e[r]||r;return{type:i?i[1]:null,value:o?o[1]:null,modifiers:s.map(u=>u.replace(".","")),expression:n,original:a}}}var Pe="DEFAULT",te=["ignore","ref","data","id","radio","tabs","switch","disclosure","menu","listbox","list","item","combobox","bind","init","for","mask","model","modelable","transition","show","if",Pe,"teleport"];function Qr(e,t){let r=te.indexOf(e.type)===-1?Pe:e.type,n=te.indexOf(t.type)===-1?Pe:t.type;return te.indexOf(r)-te.indexOf(n)}function U(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}var Ie=[],Ge=!1;function Lt(e=()=>{}){return queueMicrotask(()=>{Ge||setTimeout(()=>{Re()})}),new Promise(t=>{Ie.push(()=>{e(),t()})})}function Re(){for(Ge=!1;Ie.length;)Ie.shift()()}function Zr(){Ge=!0}function R(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>R(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)R(n,t),n=n.nextElementSibling}function K(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}function Xr(){document.body||K("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?"),U(document,"alpine:init"),U(document,"alpine:initializing"),xt(),Ir(t=>C(t,R)),gt(t=>tn(t)),Rr((t,r)=>{Ue(t,r).forEach(n=>n())});let e=t=>!ue(t.parentElement,!0);Array.from(document.querySelectorAll(Kt())).filter(e).forEach(t=>{C(t)}),U(document,"alpine:initialized")}var Ye=[],Ft=[];function Nt(){return Ye.map(e=>e())}function Kt(){return Ye.concat(Ft).map(e=>e())}function Dt(e){Ye.push(e)}function kt(e){Ft.push(e)}function ue(e,t=!1){return ce(e,r=>{if((t?Kt():Nt()).some(i=>r.matches(i)))return!0})}function ce(e,t){if(e){if(t(e))return e;if(e._x_teleportBack&&(e=e._x_teleportBack),!!e.parentElement)return ce(e.parentElement,t)}}function en(e){return Nt().some(t=>e.matches(t))}function C(e,t=R){Gr(()=>{t(e,(r,n)=>{Ue(r,r.attributes).forEach(i=>i()),r._x_ignore&&n()})})}function tn(e){R(e,t=>vt(t))}function Je(e,t){return Array.isArray(t)?st(e,t.join(" ")):typeof t=="object"&&t!==null?rn(e,t):typeof t=="function"?Je(e,t()):st(e,t)}function st(e,t){let r=i=>i.split(" ").filter(o=>!e.classList.contains(o)).filter(Boolean),n=i=>(e.classList.add(...i),()=>{e.classList.remove(...i)});return t=t===!0?t="":t||"",n(r(t))}function rn(e,t){let r=a=>a.split(" ").filter(Boolean),n=Object.entries(t).flatMap(([a,u])=>u?r(a):!1).filter(Boolean),i=Object.entries(t).flatMap(([a,u])=>u?!1:r(a)).filter(Boolean),o=[],s=[];return i.forEach(a=>{e.classList.contains(a)&&(e.classList.remove(a),s.push(a))}),n.forEach(a=>{e.classList.contains(a)||(e.classList.add(a),o.push(a))}),()=>{s.forEach(a=>e.classList.add(a)),o.forEach(a=>e.classList.remove(a))}}function le(e,t){return typeof t=="object"&&t!==null?nn(e,t):on(e,t)}function nn(e,t){let r={};return Object.entries(t).forEach(([n,i])=>{r[n]=e.style[n],n.startsWith("--")||(n=sn(n)),e.style.setProperty(n,i)}),setTimeout(()=>{e.style.length===0&&e.removeAttribute("style")}),()=>{le(e,r)}}function on(e,t){let r=e.getAttribute("style",t);return e.setAttribute("style",t),()=>{e.setAttribute("style",r||"")}}function sn(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function je(e,t=()=>{}){let r=!1;return function(){r?t.apply(this,arguments):(r=!0,e.apply(this,arguments))}}g("transition",(e,{value:t,modifiers:r,expression:n},{evaluate:i})=>{typeof n=="function"&&(n=i(n)),n?an(e,n,t):un(e,r,t)});function an(e,t,r){Bt(e,Je,""),{enter:i=>{e._x_transition.enter.during=i},"enter-start":i=>{e._x_transition.enter.start=i},"enter-end":i=>{e._x_transition.enter.end=i},leave:i=>{e._x_transition.leave.during=i},"leave-start":i=>{e._x_transition.leave.start=i},"leave-end":i=>{e._x_transition.leave.end=i}}[r](t)}function un(e,t,r){Bt(e,le);let n=!t.includes("in")&&!t.includes("out")&&!r,i=n||t.includes("in")||["enter"].includes(r),o=n||t.includes("out")||["leave"].includes(r);t.includes("in")&&!n&&(t=t.filter((p,v)=>v<t.indexOf("out"))),t.includes("out")&&!n&&(t=t.filter((p,v)=>v>t.indexOf("out")));let s=!t.includes("opacity")&&!t.includes("scale"),a=s||t.includes("opacity"),u=s||t.includes("scale"),c=a?0:1,l=u?z(t,"scale",95)/100:1,d=z(t,"delay",0),h=z(t,"origin","center"),A="opacity, transform",j=z(t,"duration",150)/1e3,X=z(t,"duration",75)/1e3,f="cubic-bezier(0.4, 0.0, 0.2, 1)";i&&(e._x_transition.enter.during={transformOrigin:h,transitionDelay:d,transitionProperty:A,transitionDuration:`${j}s`,transitionTimingFunction:f},e._x_transition.enter.start={opacity:c,transform:`scale(${l})`},e._x_transition.enter.end={opacity:1,transform:"scale(1)"}),o&&(e._x_transition.leave.during={transformOrigin:h,transitionDelay:d,transitionProperty:A,transitionDuration:`${X}s`,transitionTimingFunction:f},e._x_transition.leave.start={opacity:1,transform:"scale(1)"},e._x_transition.leave.end={opacity:c,transform:`scale(${l})`})}function Bt(e,t,r={}){e._x_transition||(e._x_transition={enter:{during:r,start:r,end:r},leave:{during:r,start:r,end:r},in(n=()=>{},i=()=>{}){Le(e,t,{during:this.enter.during,start:this.enter.start,end:this.enter.end},n,i)},out(n=()=>{},i=()=>{}){Le(e,t,{during:this.leave.during,start:this.leave.start,end:this.leave.end},n,i)}})}window.Element.prototype._x_toggleAndCascadeWithTransitions=function(e,t,r,n){const i=document.visibilityState==="visible"?requestAnimationFrame:setTimeout;let o=()=>i(r);if(t){e._x_transition&&(e._x_transition.enter||e._x_transition.leave)?e._x_transition.enter&&(Object.entries(e._x_transition.enter.during).length||Object.entries(e._x_transition.enter.start).length||Object.entries(e._x_transition.enter.end).length)?e._x_transition.in(r):o():e._x_transition?e._x_transition.in(r):o();return}e._x_hidePromise=e._x_transition?new Promise((s,a)=>{e._x_transition.out(()=>{},()=>s(n)),e._x_transitioning.beforeCancel(()=>a({isFromCancelledTransition:!0}))}):Promise.resolve(n),queueMicrotask(()=>{let s=zt(e);s?(s._x_hideChildren||(s._x_hideChildren=[]),s._x_hideChildren.push(e)):i(()=>{let a=u=>{let c=Promise.all([u._x_hidePromise,...(u._x_hideChildren||[]).map(a)]).then(([l])=>l());return delete u._x_hidePromise,delete u._x_hideChildren,c};a(e).catch(u=>{if(!u.isFromCancelledTransition)throw u})})})};function zt(e){let t=e.parentNode;if(t)return t._x_hidePromise?t:zt(t)}function Le(e,t,{during:r,start:n,end:i}={},o=()=>{},s=()=>{}){if(e._x_transitioning&&e._x_transitioning.cancel(),Object.keys(r).length===0&&Object.keys(n).length===0&&Object.keys(i).length===0){o(),s();return}let a,u,c;cn(e,{start(){a=t(e,n)},during(){u=t(e,r)},before:o,end(){a(),c=t(e,i)},after:s,cleanup(){u(),c()}})}function cn(e,t){let r,n,i,o=je(()=>{x(()=>{r=!0,n||t.before(),i||(t.end(),Re()),t.after(),e.isConnected&&t.cleanup(),delete e._x_transitioning})});e._x_transitioning={beforeCancels:[],beforeCancel(s){this.beforeCancels.push(s)},cancel:je(function(){for(;this.beforeCancels.length;)this.beforeCancels.shift()();o()}),finish:o},x(()=>{t.start(),t.during()}),Zr(),requestAnimationFrame(()=>{if(r)return;let s=Number(getComputedStyle(e).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,a=Number(getComputedStyle(e).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;s===0&&(s=Number(getComputedStyle(e).animationDuration.replace("s",""))*1e3),x(()=>{t.before()}),n=!0,requestAnimationFrame(()=>{r||(x(()=>{t.end()}),Re(),setTimeout(e._x_transitioning.finish,s+a),i=!0)})})}function z(e,t,r){if(e.indexOf(t)===-1)return r;const n=e[e.indexOf(t)+1];if(!n||t==="scale"&&isNaN(n))return r;if(t==="duration"){let i=n.match(/([0-9]+)ms/);if(i)return i[1]}return t==="origin"&&["top","right","left","center","bottom"].includes(e[e.indexOf(t)+2])?[n,e[e.indexOf(t)+2]].join(" "):n}var Fe=!1;function fe(e,t=()=>{}){return(...r)=>Fe?t(...r):e(...r)}function ln(e,t){t._x_dataStack||(t._x_dataStack=e._x_dataStack),Fe=!0,dn(()=>{fn(t)}),Fe=!1}function fn(e){let t=!1;C(e,(n,i)=>{R(n,(o,s)=>{if(t&&en(o))return s();t=!0,i(o,s)})})}function dn(e){let t=Y;it((r,n)=>{let i=t(r);return ae(i),()=>{}}),e(),it(t)}function Ht(e,t,r,n=[]){switch(e._x_bindings||(e._x_bindings=k({})),e._x_bindings[t]=r,t=n.includes("camel")?yn(t):t,t){case"value":pn(e,r);break;case"style":hn(e,r);break;case"class":_n(e,r);break;default:gn(e,t,r);break}}function pn(e,t){if(e.type==="radio")e.attributes.value===void 0&&(e.value=t),window.fromModel&&(e.checked=at(e.value,t));else if(e.type==="checkbox")Number.isInteger(t)?e.value=t:!Number.isInteger(t)&&!Array.isArray(t)&&typeof t!="boolean"&&![null,void 0].includes(t)?e.value=String(t):Array.isArray(t)?e.checked=t.some(r=>at(r,e.value)):e.checked=!!t;else if(e.tagName==="SELECT")xn(e,t);else{if(e.value===t)return;e.value=t}}function _n(e,t){e._x_undoAddedClasses&&e._x_undoAddedClasses(),e._x_undoAddedClasses=Je(e,t)}function hn(e,t){e._x_undoAddedStyles&&e._x_undoAddedStyles(),e._x_undoAddedStyles=le(e,t)}function gn(e,t,r){[null,void 0,!1].includes(r)&&bn(t)?e.removeAttribute(t):(qt(t)&&(r=t),vn(e,t,r))}function vn(e,t,r){e.getAttribute(t)!=r&&e.setAttribute(t,r)}function xn(e,t){const r=[].concat(t).map(n=>n+"");Array.from(e.options).forEach(n=>{n.selected=r.includes(n.value)})}function yn(e){return e.toLowerCase().replace(/-(\w)/g,(t,r)=>r.toUpperCase())}function at(e,t){return e==t}function qt(e){return["disabled","checked","required","readonly","hidden","open","selected","autofocus","itemscope","multiple","novalidate","allowfullscreen","allowpaymentrequest","formnovalidate","autoplay","controls","loop","muted","playsinline","default","ismap","reversed","async","defer","nomodule"].includes(e)}function bn(e){return!["aria-pressed","aria-checked","aria-expanded","aria-selected"].includes(e)}function mn(e,t,r){if(e._x_bindings&&e._x_bindings[t]!==void 0)return e._x_bindings[t];let n=e.getAttribute(t);return n===null?typeof r=="function"?r():r:n===""?!0:qt(t)?!![t,"true"].includes(n):n}function Wt(e,t){var r;return function(){var n=this,i=arguments,o=function(){r=null,e.apply(n,i)};clearTimeout(r),r=setTimeout(o,t)}}function Ut(e,t){let r;return function(){let n=this,i=arguments;r||(e.apply(n,i),r=!0,setTimeout(()=>r=!1,t))}}function wn(e){e(Z)}var T={},ut=!1;function En(e,t){if(ut||(T=k(T),ut=!0),t===void 0)return T[e];T[e]=t,typeof t=="object"&&t!==null&&t.hasOwnProperty("init")&&typeof t.init=="function"&&T[e].init(),bt(T[e])}function Sn(){return T}var Vt={};function An(e,t){let r=typeof t!="function"?()=>t:t;e instanceof Element?Gt(e,r()):Vt[e]=r}function On(e){return Object.entries(Vt).forEach(([t,r])=>{Object.defineProperty(e,t,{get(){return(...n)=>r(...n)}})}),e}function Gt(e,t,r){let n=[];for(;n.length;)n.pop()();let i=Object.entries(t).map(([s,a])=>({name:s,value:a})),o=Ot(i);i=i.map(s=>o.find(a=>a.name===s.name)?{name:`x-bind:${s.name}`,value:`"${s.value}"`}:s),Ue(e,i,r).map(s=>{n.push(s.runCleanups),s()})}var Yt={};function Cn(e,t){Yt[e]=t}function Mn(e,t){return Object.entries(Yt).forEach(([r,n])=>{Object.defineProperty(e,r,{get(){return(...i)=>n.bind(t)(...i)},enumerable:!1})}),e}var Tn={get reactive(){return k},get release(){return ae},get effect(){return Y},get raw(){return dt},version:"3.10.5",flushAndStopDeferringMutations:Dr,dontAutoEvaluateFunctions:zr,disableEffectScheduling:Tr,setReactivityEngine:$r,closestDataStack:N,skipDuringClone:fe,addRootSelector:Dt,addInitSelector:kt,addScopeToNode:J,deferMutations:Kr,mapAttributes:Ve,evaluateLater:b,setEvaluator:Hr,mergeProxies:Q,findClosest:ce,closestRoot:ue,interceptor:mt,transition:Le,setStyles:le,mutateDom:x,directive:g,throttle:Ut,debounce:Wt,evaluate:F,initTree:C,nextTick:Lt,prefixed:B,prefix:Vr,plugin:wn,magic:E,store:En,start:Xr,clone:ln,bound:mn,$data:yt,data:Cn,bind:An},Z=Tn;function $n(e,t){const r=Object.create(null),n=e.split(",");for(let i=0;i<n.length;i++)r[n[i]]=!0;return t?i=>!!r[i.toLowerCase()]:i=>!!r[i]}var Pn=Object.freeze({}),Jt=Object.assign,In=Object.prototype.hasOwnProperty,de=(e,t)=>In.call(e,t),P=Array.isArray,V=e=>Qt(e)==="[object Map]",Rn=e=>typeof e=="string",Qe=e=>typeof e=="symbol",pe=e=>e!==null&&typeof e=="object",jn=Object.prototype.toString,Qt=e=>jn.call(e),Zt=e=>Qt(e).slice(8,-1),Ze=e=>Rn(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Ln=e=>{const t=Object.create(null);return r=>t[r]||(t[r]=e(r))},Fn=Ln(e=>e.charAt(0).toUpperCase()+e.slice(1)),Xt=(e,t)=>e!==t&&(e===e||t===t),Ne=new WeakMap,H=[],S,I=Symbol("iterate"),Ke=Symbol("Map key iterate");function Nn(e){return e&&e._isEffect===!0}function Kn(e,t=Pn){Nn(e)&&(e=e.raw);const r=Bn(e,t);return t.lazy||r(),r}function Dn(e){e.active&&(er(e),e.options.onStop&&e.options.onStop(),e.active=!1)}var kn=0;function Bn(e,t){const r=function(){if(!r.active)return e();if(!H.includes(r)){er(r);try{return Hn(),H.push(r),S=r,e()}finally{H.pop(),tr(),S=H[H.length-1]}}};return r.id=kn++,r.allowRecurse=!!t.allowRecurse,r._isEffect=!0,r.active=!0,r.raw=e,r.deps=[],r.options=t,r}function er(e){const{deps:t}=e;if(t.length){for(let r=0;r<t.length;r++)t[r].delete(e);t.length=0}}var D=!0,Xe=[];function zn(){Xe.push(D),D=!1}function Hn(){Xe.push(D),D=!0}function tr(){const e=Xe.pop();D=e===void 0?!0:e}function w(e,t,r){if(!D||S===void 0)return;let n=Ne.get(e);n||Ne.set(e,n=new Map);let i=n.get(r);i||n.set(r,i=new Set),i.has(S)||(i.add(S),S.deps.push(i),S.options.onTrack&&S.options.onTrack({effect:S,target:e,type:t,key:r}))}function M(e,t,r,n,i,o){const s=Ne.get(e);if(!s)return;const a=new Set,u=l=>{l&&l.forEach(d=>{(d!==S||d.allowRecurse)&&a.add(d)})};if(t==="clear")s.forEach(u);else if(r==="length"&&P(e))s.forEach((l,d)=>{(d==="length"||d>=n)&&u(l)});else switch(r!==void 0&&u(s.get(r)),t){case"add":P(e)?Ze(r)&&u(s.get("length")):(u(s.get(I)),V(e)&&u(s.get(Ke)));break;case"delete":P(e)||(u(s.get(I)),V(e)&&u(s.get(Ke)));break;case"set":V(e)&&u(s.get(I));break}const c=l=>{l.options.onTrigger&&l.options.onTrigger({effect:l,target:e,key:r,type:t,newValue:n,oldValue:i,oldTarget:o}),l.options.scheduler?l.options.scheduler(l):l()};a.forEach(c)}var qn=$n("__proto__,__v_isRef,__isVue"),rr=new Set(Object.getOwnPropertyNames(Symbol).map(e=>Symbol[e]).filter(Qe)),Wn=_e(),Un=_e(!1,!0),Vn=_e(!0),Gn=_e(!0,!0),se={};["includes","indexOf","lastIndexOf"].forEach(e=>{const t=Array.prototype[e];se[e]=function(...r){const n=_(this);for(let o=0,s=this.length;o<s;o++)w(n,"get",o+"");const i=t.apply(n,r);return i===-1||i===!1?t.apply(n,r.map(_)):i}});["push","pop","shift","unshift","splice"].forEach(e=>{const t=Array.prototype[e];se[e]=function(...r){zn();const n=t.apply(this,r);return tr(),n}});function _e(e=!1,t=!1){return function(n,i,o){if(i==="__v_isReactive")return!e;if(i==="__v_isReadonly")return e;if(i==="__v_raw"&&o===(e?t?ii:vr:t?ni:gr).get(n))return n;const s=P(n);if(!e&&s&&de(se,i))return Reflect.get(se,i,o);const a=Reflect.get(n,i,o);return(Qe(i)?rr.has(i):qn(i))||(e||w(n,"get",i),t)?a:De(a)?!s||!Ze(i)?a.value:a:pe(a)?e?xr(a):nt(a):a}}var Yn=nr(),Jn=nr(!0);function nr(e=!1){return function(r,n,i,o){let s=r[n];if(!e&&(i=_(i),s=_(s),!P(r)&&De(s)&&!De(i)))return s.value=i,!0;const a=P(r)&&Ze(n)?Number(n)<r.length:de(r,n),u=Reflect.set(r,n,i,o);return r===_(o)&&(a?Xt(i,s)&&M(r,"set",n,i,s):M(r,"add",n,i)),u}}function Qn(e,t){const r=de(e,t),n=e[t],i=Reflect.deleteProperty(e,t);return i&&r&&M(e,"delete",t,void 0,n),i}function Zn(e,t){const r=Reflect.has(e,t);return(!Qe(t)||!rr.has(t))&&w(e,"has",t),r}function Xn(e){return w(e,"iterate",P(e)?"length":I),Reflect.ownKeys(e)}var ir={get:Wn,set:Yn,deleteProperty:Qn,has:Zn,ownKeys:Xn},or={get:Vn,set(e,t){return console.warn(`Set operation on key "${String(t)}" failed: target is readonly.`,e),!0},deleteProperty(e,t){return console.warn(`Delete operation on key "${String(t)}" failed: target is readonly.`,e),!0}};Jt({},ir,{get:Un,set:Jn});Jt({},or,{get:Gn});var et=e=>pe(e)?nt(e):e,tt=e=>pe(e)?xr(e):e,rt=e=>e,he=e=>Reflect.getPrototypeOf(e);function ge(e,t,r=!1,n=!1){e=e.__v_raw;const i=_(e),o=_(t);t!==o&&!r&&w(i,"get",t),!r&&w(i,"get",o);const{has:s}=he(i),a=n?rt:r?tt:et;if(s.call(i,t))return a(e.get(t));if(s.call(i,o))return a(e.get(o));e!==i&&e.get(t)}function ve(e,t=!1){const r=this.__v_raw,n=_(r),i=_(e);return e!==i&&!t&&w(n,"has",e),!t&&w(n,"has",i),e===i?r.has(e):r.has(e)||r.has(i)}function xe(e,t=!1){return e=e.__v_raw,!t&&w(_(e),"iterate",I),Reflect.get(e,"size",e)}function sr(e){e=_(e);const t=_(this);return he(t).has.call(t,e)||(t.add(e),M(t,"add",e,e)),this}function ar(e,t){t=_(t);const r=_(this),{has:n,get:i}=he(r);let o=n.call(r,e);o?hr(r,n,e):(e=_(e),o=n.call(r,e));const s=i.call(r,e);return r.set(e,t),o?Xt(t,s)&&M(r,"set",e,t,s):M(r,"add",e,t),this}function ur(e){const t=_(this),{has:r,get:n}=he(t);let i=r.call(t,e);i?hr(t,r,e):(e=_(e),i=r.call(t,e));const o=n?n.call(t,e):void 0,s=t.delete(e);return i&&M(t,"delete",e,void 0,o),s}function cr(){const e=_(this),t=e.size!==0,r=V(e)?new Map(e):new Set(e),n=e.clear();return t&&M(e,"clear",void 0,void 0,r),n}function ye(e,t){return function(n,i){const o=this,s=o.__v_raw,a=_(s),u=t?rt:e?tt:et;return!e&&w(a,"iterate",I),s.forEach((c,l)=>n.call(i,u(c),u(l),o))}}function re(e,t,r){return function(...n){const i=this.__v_raw,o=_(i),s=V(o),a=e==="entries"||e===Symbol.iterator&&s,u=e==="keys"&&s,c=i[e](...n),l=r?rt:t?tt:et;return!t&&w(o,"iterate",u?Ke:I),{next(){const{value:d,done:h}=c.next();return h?{value:d,done:h}:{value:a?[l(d[0]),l(d[1])]:l(d),done:h}},[Symbol.iterator](){return this}}}}function O(e){return function(...t){{const r=t[0]?`on key "${t[0]}" `:"";console.warn(`${Fn(e)} operation ${r}failed: target is readonly.`,_(this))}return e==="delete"?!1:this}}var lr={get(e){return ge(this,e)},get size(){return xe(this)},has:ve,add:sr,set:ar,delete:ur,clear:cr,forEach:ye(!1,!1)},fr={get(e){return ge(this,e,!1,!0)},get size(){return xe(this)},has:ve,add:sr,set:ar,delete:ur,clear:cr,forEach:ye(!1,!0)},dr={get(e){return ge(this,e,!0)},get size(){return xe(this,!0)},has(e){return ve.call(this,e,!0)},add:O("add"),set:O("set"),delete:O("delete"),clear:O("clear"),forEach:ye(!0,!1)},pr={get(e){return ge(this,e,!0,!0)},get size(){return xe(this,!0)},has(e){return ve.call(this,e,!0)},add:O("add"),set:O("set"),delete:O("delete"),clear:O("clear"),forEach:ye(!0,!0)},ei=["keys","values","entries",Symbol.iterator];ei.forEach(e=>{lr[e]=re(e,!1,!1),dr[e]=re(e,!0,!1),fr[e]=re(e,!1,!0),pr[e]=re(e,!0,!0)});function _r(e,t){const r=t?e?pr:fr:e?dr:lr;return(n,i,o)=>i==="__v_isReactive"?!e:i==="__v_isReadonly"?e:i==="__v_raw"?n:Reflect.get(de(r,i)&&i in n?r:n,i,o)}var ti={get:_r(!1,!1)},ri={get:_r(!0,!1)};function hr(e,t,r){const n=_(r);if(n!==r&&t.call(e,n)){const i=Zt(e);console.warn(`Reactive ${i} contains both the raw and reactive versions of the same object${i==="Map"?" as keys":""}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`)}}var gr=new WeakMap,ni=new WeakMap,vr=new WeakMap,ii=new WeakMap;function oi(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function si(e){return e.__v_skip||!Object.isExtensible(e)?0:oi(Zt(e))}function nt(e){return e&&e.__v_isReadonly?e:yr(e,!1,ir,ti,gr)}function xr(e){return yr(e,!0,or,ri,vr)}function yr(e,t,r,n,i){if(!pe(e))return console.warn(`value cannot be made reactive: ${String(e)}`),e;if(e.__v_raw&&!(t&&e.__v_isReactive))return e;const o=i.get(e);if(o)return o;const s=si(e);if(s===0)return e;const a=new Proxy(e,s===2?n:r);return i.set(e,a),a}function _(e){return e&&_(e.__v_raw)||e}function De(e){return Boolean(e&&e.__v_isRef===!0)}E("nextTick",()=>Lt);E("dispatch",e=>U.bind(U,e));E("watch",(e,{evaluateLater:t,effect:r})=>(n,i)=>{let o=t(n),s=!0,a,u=r(()=>o(c=>{JSON.stringify(c),s?a=c:queueMicrotask(()=>{i(c,a),a=c}),s=!1}));e._x_effects.delete(u)});E("store",Sn);E("data",e=>yt(e));E("root",e=>ue(e));E("refs",e=>(e._x_refs_proxy||(e._x_refs_proxy=Q(ai(e))),e._x_refs_proxy));function ai(e){let t=[],r=e;for(;r;)r._x_refs&&t.push(r._x_refs),r=r.parentNode;return t}var Ee={};function br(e){return Ee[e]||(Ee[e]=0),++Ee[e]}function ui(e,t){return ce(e,r=>{if(r._x_ids&&r._x_ids[t])return!0})}function ci(e,t){e._x_ids||(e._x_ids={}),e._x_ids[t]||(e._x_ids[t]=br(t))}E("id",e=>(t,r=null)=>{let n=ui(e,t),i=n?n._x_ids[t]:br(t);return r?`${t}-${i}-${r}`:`${t}-${i}`});E("el",e=>e);mr("Focus","focus","focus");mr("Persist","persist","persist");function mr(e,t,r){E(t,n=>K(`You can't use [$${directiveName}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}g("modelable",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t),o=()=>{let c;return i(l=>c=l),c},s=n(`${t} = __placeholder`),a=c=>s(()=>{},{scope:{__placeholder:c}}),u=o();a(u),queueMicrotask(()=>{if(!e._x_model)return;e._x_removeModelListeners.default();let c=e._x_model.get,l=e._x_model.set;r(()=>a(c())),r(()=>l(o()))})});g("teleport",(e,{expression:t},{cleanup:r})=>{e.tagName.toLowerCase()!=="template"&&K("x-teleport can only be used on a <template> tag",e);let n=document.querySelector(t);n||K(`Cannot find x-teleport element for selector: "${t}"`);let i=e.content.cloneNode(!0).firstElementChild;e._x_teleport=i,i._x_teleportBack=e,e._x_forwardEvents&&e._x_forwardEvents.forEach(o=>{i.addEventListener(o,s=>{s.stopPropagation(),e.dispatchEvent(new s.constructor(s.type,s))})}),J(i,{},e),x(()=>{n.appendChild(i),C(i),i._x_ignore=!0}),r(()=>i.remove())});var wr=()=>{};wr.inline=(e,{modifiers:t},{cleanup:r})=>{t.includes("self")?e._x_ignoreSelf=!0:e._x_ignore=!0,r(()=>{t.includes("self")?delete e._x_ignoreSelf:delete e._x_ignore})};g("ignore",wr);g("effect",(e,{expression:t},{effect:r})=>r(b(e,t)));function Er(e,t,r,n){let i=e,o=u=>n(u),s={},a=(u,c)=>l=>c(u,l);if(r.includes("dot")&&(t=li(t)),r.includes("camel")&&(t=fi(t)),r.includes("passive")&&(s.passive=!0),r.includes("capture")&&(s.capture=!0),r.includes("window")&&(i=window),r.includes("document")&&(i=document),r.includes("prevent")&&(o=a(o,(u,c)=>{c.preventDefault(),u(c)})),r.includes("stop")&&(o=a(o,(u,c)=>{c.stopPropagation(),u(c)})),r.includes("self")&&(o=a(o,(u,c)=>{c.target===e&&u(c)})),(r.includes("away")||r.includes("outside"))&&(i=document,o=a(o,(u,c)=>{e.contains(c.target)||c.target.isConnected!==!1&&(e.offsetWidth<1&&e.offsetHeight<1||e._x_isShown!==!1&&u(c))})),r.includes("once")&&(o=a(o,(u,c)=>{u(c),i.removeEventListener(t,o,s)})),o=a(o,(u,c)=>{pi(t)&&_i(c,r)||u(c)}),r.includes("debounce")){let u=r[r.indexOf("debounce")+1]||"invalid-wait",c=ke(u.split("ms")[0])?Number(u.split("ms")[0]):250;o=Wt(o,c)}if(r.includes("throttle")){let u=r[r.indexOf("throttle")+1]||"invalid-wait",c=ke(u.split("ms")[0])?Number(u.split("ms")[0]):250;o=Ut(o,c)}return i.addEventListener(t,o,s),()=>{i.removeEventListener(t,o,s)}}function li(e){return e.replace(/-/g,".")}function fi(e){return e.toLowerCase().replace(/-(\w)/g,(t,r)=>r.toUpperCase())}function ke(e){return!Array.isArray(e)&&!isNaN(e)}function di(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase()}function pi(e){return["keydown","keyup"].includes(e)}function _i(e,t){let r=t.filter(o=>!["window","document","prevent","stop","once"].includes(o));if(r.includes("debounce")){let o=r.indexOf("debounce");r.splice(o,ke((r[o+1]||"invalid-wait").split("ms")[0])?2:1)}if(r.length===0||r.length===1&&ct(e.key).includes(r[0]))return!1;const i=["ctrl","shift","alt","meta","cmd","super"].filter(o=>r.includes(o));return r=r.filter(o=>!i.includes(o)),!(i.length>0&&i.filter(s=>((s==="cmd"||s==="super")&&(s="meta"),e[`${s}Key`])).length===i.length&&ct(e.key).includes(r[0]))}function ct(e){if(!e)return[];e=di(e);let t={ctrl:"control",slash:"/",space:"-",spacebar:"-",cmd:"meta",esc:"escape",up:"arrow-up",down:"arrow-down",left:"arrow-left",right:"arrow-right",period:".",equal:"="};return t[e]=e,Object.keys(t).map(r=>{if(t[r]===e)return r}).filter(r=>r)}g("model",(e,{modifiers:t,expression:r},{effect:n,cleanup:i})=>{let o=b(e,r),s=`${r} = rightSideOfExpression($event, ${r})`,a=b(e,s);var u=e.tagName.toLowerCase()==="select"||["checkbox","radio"].includes(e.type)||t.includes("lazy")?"change":"input";let c=hi(e,t,r),l=Er(e,u,t,h=>{a(()=>{},{scope:{$event:h,rightSideOfExpression:c}})});e._x_removeModelListeners||(e._x_removeModelListeners={}),e._x_removeModelListeners.default=l,i(()=>e._x_removeModelListeners.default());let d=b(e,`${r} = __placeholder`);e._x_model={get(){let h;return o(A=>h=A),h},set(h){d(()=>{},{scope:{__placeholder:h}})}},e._x_forceModelUpdate=()=>{o(h=>{h===void 0&&r.match(/\./)&&(h=""),window.fromModel=!0,x(()=>Ht(e,"value",h)),delete window.fromModel})},n(()=>{t.includes("unintrusive")&&document.activeElement.isSameNode(e)||e._x_forceModelUpdate()})});function hi(e,t,r){return e.type==="radio"&&x(()=>{e.hasAttribute("name")||e.setAttribute("name",r)}),(n,i)=>x(()=>{if(n instanceof CustomEvent&&n.detail!==void 0)return n.detail||n.target.value;if(e.type==="checkbox")if(Array.isArray(i)){let o=t.includes("number")?Se(n.target.value):n.target.value;return n.target.checked?i.concat([o]):i.filter(s=>!gi(s,o))}else return n.target.checked;else{if(e.tagName.toLowerCase()==="select"&&e.multiple)return t.includes("number")?Array.from(n.target.selectedOptions).map(o=>{let s=o.value||o.text;return Se(s)}):Array.from(n.target.selectedOptions).map(o=>o.value||o.text);{let o=n.target.value;return t.includes("number")?Se(o):t.includes("trim")?o.trim():o}}})}function Se(e){let t=e?parseFloat(e):null;return vi(t)?t:e}function gi(e,t){return e==t}function vi(e){return!Array.isArray(e)&&!isNaN(e)}g("cloak",e=>queueMicrotask(()=>x(()=>e.removeAttribute(B("cloak")))));kt(()=>`[${B("init")}]`);g("init",fe((e,{expression:t},{evaluate:r})=>typeof t=="string"?!!t.trim()&&r(t,{},!1):r(t,{},!1)));g("text",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t);r(()=>{i(o=>{x(()=>{e.textContent=o})})})});g("html",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t);r(()=>{i(o=>{x(()=>{e.innerHTML=o,e._x_ignoreSelf=!0,C(e),delete e._x_ignoreSelf})})})});Ve(Tt(":",$t(B("bind:"))));g("bind",(e,{value:t,modifiers:r,expression:n,original:i},{effect:o})=>{if(!t){let a={};On(a),b(e,n)(c=>{Gt(e,c,i)},{scope:a});return}if(t==="key")return xi(e,n);let s=b(e,n);o(()=>s(a=>{a===void 0&&typeof n=="string"&&n.match(/\./)&&(a=""),x(()=>Ht(e,t,a,r))}))});function xi(e,t){e._x_keyExpression=t}Dt(()=>`[${B("data")}]`);g("data",fe((e,{expression:t},{cleanup:r})=>{t=t===""?"{}":t;let n={};Te(n,e);let i={};Mn(i,n);let o=F(e,t,{scope:i});o===void 0&&(o={}),Te(o,e);let s=k(o);bt(s);let a=J(e,s);s.init&&F(e,s.init),r(()=>{s.destroy&&F(e,s.destroy),a()})}));g("show",(e,{modifiers:t,expression:r},{effect:n})=>{let i=b(e,r);e._x_doHide||(e._x_doHide=()=>{x(()=>{e.style.setProperty("display","none",t.includes("important")?"important":void 0)})}),e._x_doShow||(e._x_doShow=()=>{x(()=>{e.style.length===1&&e.style.display==="none"?e.removeAttribute("style"):e.style.removeProperty("display")})});let o=()=>{e._x_doHide(),e._x_isShown=!1},s=()=>{e._x_doShow(),e._x_isShown=!0},a=()=>setTimeout(s),u=je(d=>d?s():o(),d=>{typeof e._x_toggleAndCascadeWithTransitions=="function"?e._x_toggleAndCascadeWithTransitions(e,d,s,o):d?a():o()}),c,l=!0;n(()=>i(d=>{!l&&d===c||(t.includes("immediate")&&(d?a():o()),u(d),c=d,l=!1)}))});g("for",(e,{expression:t},{effect:r,cleanup:n})=>{let i=bi(t),o=b(e,i.items),s=b(e,e._x_keyExpression||"index");e._x_prevKeys=[],e._x_lookup={},r(()=>yi(e,i,o,s)),n(()=>{Object.values(e._x_lookup).forEach(a=>a.remove()),delete e._x_prevKeys,delete e._x_lookup})});function yi(e,t,r,n){let i=s=>typeof s=="object"&&!Array.isArray(s),o=e;r(s=>{mi(s)&&s>=0&&(s=Array.from(Array(s).keys(),f=>f+1)),s===void 0&&(s=[]);let a=e._x_lookup,u=e._x_prevKeys,c=[],l=[];if(i(s))s=Object.entries(s).map(([f,p])=>{let v=lt(t,p,f,s);n(y=>l.push(y),{scope:{index:f,...v}}),c.push(v)});else for(let f=0;f<s.length;f++){let p=lt(t,s[f],f,s);n(v=>l.push(v),{scope:{index:f,...p}}),c.push(p)}let d=[],h=[],A=[],j=[];for(let f=0;f<u.length;f++){let p=u[f];l.indexOf(p)===-1&&A.push(p)}u=u.filter(f=>!A.includes(f));let X="template";for(let f=0;f<l.length;f++){let p=l[f],v=u.indexOf(p);if(v===-1)u.splice(f,0,p),d.push([X,f]);else if(v!==f){let y=u.splice(f,1)[0],m=u.splice(v-1,1)[0];u.splice(f,0,m),u.splice(v,0,y),h.push([y,m])}else j.push(p);X=p}for(let f=0;f<A.length;f++){let p=A[f];a[p]._x_effects&&a[p]._x_effects.forEach(ft),a[p].remove(),a[p]=null,delete a[p]}for(let f=0;f<h.length;f++){let[p,v]=h[f],y=a[p],m=a[v],L=document.createElement("div");x(()=>{m.after(L),y.after(m),m._x_currentIfEl&&m.after(m._x_currentIfEl),L.before(y),y._x_currentIfEl&&y.after(y._x_currentIfEl),L.remove()}),ot(m,c[l.indexOf(v)])}for(let f=0;f<d.length;f++){let[p,v]=d[f],y=p==="template"?o:a[p];y._x_currentIfEl&&(y=y._x_currentIfEl);let m=c[v],L=l[v],ee=document.importNode(o.content,!0).firstElementChild;J(ee,k(m),o),x(()=>{y.after(ee),C(ee)}),typeof L=="object"&&K("x-for key cannot be an object, it must be a string or an integer",o),a[L]=ee}for(let f=0;f<j.length;f++)ot(a[j[f]],c[l.indexOf(j[f])]);o._x_prevKeys=l})}function bi(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=/^\s*\(|\)\s*$/g,n=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,i=e.match(n);if(!i)return;let o={};o.items=i[2].trim();let s=i[1].replace(r,"").trim(),a=s.match(t);return a?(o.item=s.replace(t,"").trim(),o.index=a[1].trim(),a[2]&&(o.collection=a[2].trim())):o.item=s,o}function lt(e,t,r,n){let i={};return/^\[.*\]$/.test(e.item)&&Array.isArray(t)?e.item.replace("[","").replace("]","").split(",").map(s=>s.trim()).forEach((s,a)=>{i[s]=t[a]}):/^\{.*\}$/.test(e.item)&&!Array.isArray(t)&&typeof t=="object"?e.item.replace("{","").replace("}","").split(",").map(s=>s.trim()).forEach(s=>{i[s]=t[s]}):i[e.item]=t,e.index&&(i[e.index]=r),e.collection&&(i[e.collection]=n),i}function mi(e){return!Array.isArray(e)&&!isNaN(e)}function Sr(){}Sr.inline=(e,{expression:t},{cleanup:r})=>{let n=ue(e);n._x_refs||(n._x_refs={}),n._x_refs[t]=e,r(()=>delete n._x_refs[t])};g("ref",Sr);g("if",(e,{expression:t},{effect:r,cleanup:n})=>{let i=b(e,t),o=()=>{if(e._x_currentIfEl)return e._x_currentIfEl;let a=e.content.cloneNode(!0).firstElementChild;return J(a,{},e),x(()=>{e.after(a),C(a)}),e._x_currentIfEl=a,e._x_undoIf=()=>{R(a,u=>{u._x_effects&&u._x_effects.forEach(ft)}),a.remove(),delete e._x_currentIfEl},a},s=()=>{e._x_undoIf&&(e._x_undoIf(),delete e._x_undoIf)};r(()=>i(a=>{a?o():s()})),n(()=>e._x_undoIf&&e._x_undoIf())});g("id",(e,{expression:t},{evaluate:r})=>{r(t).forEach(i=>ci(e,i))});Ve(Tt("@",$t(B("on:"))));g("on",fe((e,{value:t,modifiers:r,expression:n},{cleanup:i})=>{let o=n?b(e,n):()=>{};e.tagName.toLowerCase()==="template"&&(e._x_forwardEvents||(e._x_forwardEvents=[]),e._x_forwardEvents.includes(t)||e._x_forwardEvents.push(t));let s=Er(e,t,r,a=>{o(()=>{},{scope:{$event:a},params:[a]})});i(()=>s())}));be("Collapse","collapse","collapse");be("Intersect","intersect","intersect");be("Focus","trap","focus");be("Mask","mask","mask");function be(e,t,r){g(t,n=>K(`You can't use [x-${t}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}Z.setEvaluator(St);Z.setReactivityEngine({reactive:nt,effect:Kn,release:Dn,raw:_});var wi=Z,Ei=wi;export{Ei as m};
diff --git a/theme/keywind/login/resources/dist/index.css b/theme/keywind/login/resources/dist/index.css
index baad0bf..32ad116 100644
--- a/theme/keywind/login/resources/dist/index.css
+++ b/theme/keywind/login/resources/dist/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-4{height:1rem}.h-6{height:1.5rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-full{width:100%}.w-4{width:1rem}.w-6{width:1.5rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-4{padding-left:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-4{height:1rem}.h-6{height:1.5rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-full{width:100%}.w-4{width:1rem}.w-6{width:1.5rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.columns-2{-moz-columns:2;columns:2}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-4{padding-left:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-primary-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
diff --git a/theme/keywind/login/resources/dist/index.js b/theme/keywind/login/resources/dist/index.js
index c9a8073..e187b6a 100644
--- a/theme/keywind/login/resources/dist/index.js
+++ b/theme/keywind/login/resources/dist/index.js
@@ -1,5 +1 @@
-var Ae=!1,Oe=!1,$=[];function Or(e){Cr(e)}function Cr(e){$.includes(e)||$.push(e),Mr()}function ft(e){let t=$.indexOf(e);t!==-1&&$.splice(t,1)}function Mr(){!Oe&&!Ae&&(Ae=!0,queueMicrotask(Tr))}function Tr(){Ae=!1,Oe=!0;for(let e=0;e<$.length;e++)$[e]();$.length=0,Oe=!1}var k,Y,ae,dt,Ce=!0;function $r(e){Ce=!1,e(),Ce=!0}function Pr(e){k=e.reactive,ae=e.release,Y=t=>e.effect(t,{scheduler:r=>{Ce?Or(r):r()}}),dt=e.raw}function it(e){Y=e}function Ir(e){let t=()=>{};return[n=>{let i=Y(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),ae(i))},i},()=>{t()}]}var pt=[],_t=[],ht=[];function Rr(e){ht.push(e)}function gt(e,t){typeof t=="function"?(e._x_cleanups||(e._x_cleanups=[]),e._x_cleanups.push(t)):(t=e,_t.push(t))}function jr(e){pt.push(e)}function Lr(e,t,r){e._x_attributeCleanups||(e._x_attributeCleanups={}),e._x_attributeCleanups[t]||(e._x_attributeCleanups[t]=[]),e._x_attributeCleanups[t].push(r)}function vt(e,t){e._x_attributeCleanups&&Object.entries(e._x_attributeCleanups).forEach(([r,n])=>{(t===void 0||t.includes(r))&&(n.forEach(i=>i()),delete e._x_attributeCleanups[r])})}var Be=new MutationObserver(qe),ze=!1;function xt(){Be.observe(document,{subtree:!0,childList:!0,attributes:!0,attributeOldValue:!0}),ze=!0}function Fr(){Nr(),Be.disconnect(),ze=!1}var W=[],me=!1;function Nr(){W=W.concat(Be.takeRecords()),W.length&&!me&&(me=!0,queueMicrotask(()=>{Kr(),me=!1}))}function Kr(){qe(W),W.length=0}function x(e){if(!ze)return e();Fr();let t=e();return xt(),t}var He=!1,ie=[];function Dr(){He=!0}function kr(){He=!1,qe(ie),ie=[]}function qe(e){if(He){ie=ie.concat(e);return}let t=[],r=[],n=new Map,i=new Map;for(let o=0;o<e.length;o++)if(!e[o].target._x_ignoreMutationObserver&&(e[o].type==="childList"&&(e[o].addedNodes.forEach(s=>s.nodeType===1&&t.push(s)),e[o].removedNodes.forEach(s=>s.nodeType===1&&r.push(s))),e[o].type==="attributes")){let s=e[o].target,a=e[o].attributeName,u=e[o].oldValue,c=()=>{n.has(s)||n.set(s,[]),n.get(s).push({name:a,value:s.getAttribute(a)})},l=()=>{i.has(s)||i.set(s,[]),i.get(s).push(a)};s.hasAttribute(a)&&u===null?c():s.hasAttribute(a)?(l(),c()):l()}i.forEach((o,s)=>{vt(s,o)}),n.forEach((o,s)=>{pt.forEach(a=>a(s,o))});for(let o of r)if(!t.includes(o)&&(_t.forEach(s=>s(o)),o._x_cleanups))for(;o._x_cleanups.length;)o._x_cleanups.pop()();t.forEach(o=>{o._x_ignoreSelf=!0,o._x_ignore=!0});for(let o of t)r.includes(o)||o.isConnected&&(delete o._x_ignoreSelf,delete o._x_ignore,ht.forEach(s=>s(o)),o._x_ignore=!0,o._x_ignoreSelf=!0);t.forEach(o=>{delete o._x_ignoreSelf,delete o._x_ignore}),t=null,r=null,n=null,i=null}function yt(e){return Q(N(e))}function J(e,t,r){return e._x_dataStack=[t,...N(r||e)],()=>{e._x_dataStack=e._x_dataStack.filter(n=>n!==t)}}function ot(e,t){let r=e._x_dataStack[0];Object.entries(t).forEach(([n,i])=>{r[n]=i})}function N(e){return e._x_dataStack?e._x_dataStack:typeof ShadowRoot=="function"&&e instanceof ShadowRoot?N(e.host):e.parentNode?N(e.parentNode):[]}function Q(e){let t=new Proxy({},{ownKeys:()=>Array.from(new Set(e.flatMap(r=>Object.keys(r)))),has:(r,n)=>e.some(i=>i.hasOwnProperty(n)),get:(r,n)=>(e.find(i=>{if(i.hasOwnProperty(n)){let o=Object.getOwnPropertyDescriptor(i,n);if(o.get&&o.get._x_alreadyBound||o.set&&o.set._x_alreadyBound)return!0;if((o.get||o.set)&&o.enumerable){let s=o.get,a=o.set,u=o;s=s&&s.bind(t),a=a&&a.bind(t),s&&(s._x_alreadyBound=!0),a&&(a._x_alreadyBound=!0),Object.defineProperty(i,n,{...u,get:s,set:a})}return!0}return!1})||{})[n],set:(r,n,i)=>{let o=e.find(s=>s.hasOwnProperty(n));return o?o[n]=i:e[e.length-1][n]=i,!0}});return t}function bt(e){let t=n=>typeof n=="object"&&!Array.isArray(n)&&n!==null,r=(n,i="")=>{Object.entries(Object.getOwnPropertyDescriptors(n)).forEach(([o,{value:s,enumerable:a}])=>{if(a===!1||s===void 0)return;let u=i===""?o:`${i}.${o}`;typeof s=="object"&&s!==null&&s._x_interceptor?n[o]=s.initialize(e,u,o):t(s)&&s!==n&&!(s instanceof Element)&&r(s,u)})};return r(e)}function mt(e,t=()=>{}){let r={initialValue:void 0,_x_interceptor:!0,initialize(n,i,o){return e(this.initialValue,()=>Br(n,i),s=>Me(n,i,s),i,o)}};return t(r),n=>{if(typeof n=="object"&&n!==null&&n._x_interceptor){let i=r.initialize.bind(r);r.initialize=(o,s,a)=>{let u=n.initialize(o,s,a);return r.initialValue=u,i(o,s,a)}}else r.initialValue=n;return r}}function Br(e,t){return t.split(".").reduce((r,n)=>r[n],e)}function Me(e,t,r){if(typeof t=="string"&&(t=t.split(".")),t.length===1)e[t[0]]=r;else{if(t.length===0)throw error;return e[t[0]]||(e[t[0]]={}),Me(e[t[0]],t.slice(1),r)}}var wt={};function E(e,t){wt[e]=t}function Te(e,t){return Object.entries(wt).forEach(([r,n])=>{Object.defineProperty(e,`$${r}`,{get(){let[i,o]=Mt(t);return i={interceptor:mt,...i},gt(t,o),n(t,i)},enumerable:!1})}),e}function zr(e,t,r,...n){try{return r(...n)}catch(i){G(i,e,t)}}function G(e,t,r=void 0){Object.assign(e,{el:t,expression:r}),console.warn(`Alpine Expression Error: ${e.message}
-
-${r?'Expression: "'+r+`"
-
-`:""}`,t),setTimeout(()=>{throw e},0)}var ne=!0;function Hr(e){let t=ne;ne=!1,e(),ne=t}function F(e,t,r={}){let n;return b(e,t)(i=>n=i,r),n}function b(...e){return Et(...e)}var Et=St;function qr(e){Et=e}function St(e,t){let r={};Te(r,e);let n=[r,...N(e)];if(typeof t=="function")return Wr(n,t);let i=Vr(n,t,e);return zr.bind(null,e,t,i)}function Wr(e,t){return(r=()=>{},{scope:n={},params:i=[]}={})=>{let o=t.apply(Q([n,...e]),i);oe(r,o)}}var we={};function Ur(e,t){if(we[e])return we[e];let r=Object.getPrototypeOf(async function(){}).constructor,n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e,o=(()=>{try{return new r(["__self","scope"],`with (scope) { __self.result = ${n} }; __self.finished = true; return __self.result;`)}catch(s){return G(s,t,e),Promise.resolve()}})();return we[e]=o,o}function Vr(e,t,r){let n=Ur(t,r);return(i=()=>{},{scope:o={},params:s=[]}={})=>{n.result=void 0,n.finished=!1;let a=Q([o,...e]);if(typeof n=="function"){let u=n(n,a).catch(c=>G(c,r,t));n.finished?(oe(i,n.result,a,s,r),n.result=void 0):u.then(c=>{oe(i,c,a,s,r)}).catch(c=>G(c,r,t)).finally(()=>n.result=void 0)}}}function oe(e,t,r,n,i){if(ne&&typeof t=="function"){let o=t.apply(r,n);o instanceof Promise?o.then(s=>oe(e,s,r,n)).catch(s=>G(s,i,t)):e(o)}else e(t)}var We="x-";function B(e=""){return We+e}function Gr(e){We=e}var At={};function g(e,t){At[e]=t}function Ue(e,t,r){if(t=Array.from(t),e._x_virtualDirectives){let o=Object.entries(e._x_virtualDirectives).map(([a,u])=>({name:a,value:u})),s=Ot(o);o=o.map(a=>s.find(u=>u.name===a.name)?{name:`x-bind:${a.name}`,value:`"${a.value}"`}:a),t=t.concat(o)}let n={};return t.map(Pt((o,s)=>n[o]=s)).filter(Rt).map(Qr(n,r)).sort(Zr).map(o=>Jr(e,o))}function Ot(e){return Array.from(e).map(Pt()).filter(t=>!Rt(t))}var $e=!1,q=new Map,Ct=Symbol();function Yr(e){$e=!0;let t=Symbol();Ct=t,q.set(t,[]);let r=()=>{for(;q.get(t).length;)q.get(t).shift()();q.delete(t)},n=()=>{$e=!1,r()};e(r),n()}function Mt(e){let t=[],r=a=>t.push(a),[n,i]=Ir(e);return t.push(i),[{Alpine:Z,effect:n,cleanup:r,evaluateLater:b.bind(b,e),evaluate:F.bind(F,e)},()=>t.forEach(a=>a())]}function Jr(e,t){let r=()=>{},n=At[t.type]||r,[i,o]=Mt(e);Lr(e,t.original,o);let s=()=>{e._x_ignore||e._x_ignoreSelf||(n.inline&&n.inline(e,t,i),n=n.bind(n,e,t,i),$e?q.get(Ct).push(n):n())};return s.runCleanups=o,s}var Tt=(e,t)=>({name:r,value:n})=>(r.startsWith(e)&&(r=r.replace(e,t)),{name:r,value:n}),$t=e=>e;function Pt(e=()=>{}){return({name:t,value:r})=>{let{name:n,value:i}=It.reduce((o,s)=>s(o),{name:t,value:r});return n!==t&&e(n,t),{name:n,value:i}}}var It=[];function Ve(e){It.push(e)}function Rt({name:e}){return jt().test(e)}var jt=()=>new RegExp(`^${We}([^:^.]+)\\b`);function Qr(e,t){return({name:r,value:n})=>{let i=r.match(jt()),o=r.match(/:([a-zA-Z0-9\-:]+)/),s=r.match(/\.[^.\]]+(?=[^\]]*$)/g)||[],a=t||e[r]||r;return{type:i?i[1]:null,value:o?o[1]:null,modifiers:s.map(u=>u.replace(".","")),expression:n,original:a}}}var Pe="DEFAULT",te=["ignore","ref","data","id","radio","tabs","switch","disclosure","menu","listbox","list","item","combobox","bind","init","for","mask","model","modelable","transition","show","if",Pe,"teleport"];function Zr(e,t){let r=te.indexOf(e.type)===-1?Pe:e.type,n=te.indexOf(t.type)===-1?Pe:t.type;return te.indexOf(r)-te.indexOf(n)}function U(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}var Ie=[],Ge=!1;function Lt(e=()=>{}){return queueMicrotask(()=>{Ge||setTimeout(()=>{Re()})}),new Promise(t=>{Ie.push(()=>{e(),t()})})}function Re(){for(Ge=!1;Ie.length;)Ie.shift()()}function Xr(){Ge=!0}function R(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>R(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)R(n,t),n=n.nextElementSibling}function K(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}function en(){document.body||K("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?"),U(document,"alpine:init"),U(document,"alpine:initializing"),xt(),Rr(t=>C(t,R)),gt(t=>rn(t)),jr((t,r)=>{Ue(t,r).forEach(n=>n())});let e=t=>!ue(t.parentElement,!0);Array.from(document.querySelectorAll(Kt())).filter(e).forEach(t=>{C(t)}),U(document,"alpine:initialized")}var Ye=[],Ft=[];function Nt(){return Ye.map(e=>e())}function Kt(){return Ye.concat(Ft).map(e=>e())}function Dt(e){Ye.push(e)}function kt(e){Ft.push(e)}function ue(e,t=!1){return ce(e,r=>{if((t?Kt():Nt()).some(i=>r.matches(i)))return!0})}function ce(e,t){if(e){if(t(e))return e;if(e._x_teleportBack&&(e=e._x_teleportBack),!!e.parentElement)return ce(e.parentElement,t)}}function tn(e){return Nt().some(t=>e.matches(t))}function C(e,t=R){Yr(()=>{t(e,(r,n)=>{Ue(r,r.attributes).forEach(i=>i()),r._x_ignore&&n()})})}function rn(e){R(e,t=>vt(t))}function Je(e,t){return Array.isArray(t)?st(e,t.join(" ")):typeof t=="object"&&t!==null?nn(e,t):typeof t=="function"?Je(e,t()):st(e,t)}function st(e,t){let r=i=>i.split(" ").filter(o=>!e.classList.contains(o)).filter(Boolean),n=i=>(e.classList.add(...i),()=>{e.classList.remove(...i)});return t=t===!0?t="":t||"",n(r(t))}function nn(e,t){let r=a=>a.split(" ").filter(Boolean),n=Object.entries(t).flatMap(([a,u])=>u?r(a):!1).filter(Boolean),i=Object.entries(t).flatMap(([a,u])=>u?!1:r(a)).filter(Boolean),o=[],s=[];return i.forEach(a=>{e.classList.contains(a)&&(e.classList.remove(a),s.push(a))}),n.forEach(a=>{e.classList.contains(a)||(e.classList.add(a),o.push(a))}),()=>{s.forEach(a=>e.classList.add(a)),o.forEach(a=>e.classList.remove(a))}}function le(e,t){return typeof t=="object"&&t!==null?on(e,t):sn(e,t)}function on(e,t){let r={};return Object.entries(t).forEach(([n,i])=>{r[n]=e.style[n],n.startsWith("--")||(n=an(n)),e.style.setProperty(n,i)}),setTimeout(()=>{e.style.length===0&&e.removeAttribute("style")}),()=>{le(e,r)}}function sn(e,t){let r=e.getAttribute("style",t);return e.setAttribute("style",t),()=>{e.setAttribute("style",r||"")}}function an(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function je(e,t=()=>{}){let r=!1;return function(){r?t.apply(this,arguments):(r=!0,e.apply(this,arguments))}}g("transition",(e,{value:t,modifiers:r,expression:n},{evaluate:i})=>{typeof n=="function"&&(n=i(n)),n?un(e,n,t):cn(e,r,t)});function un(e,t,r){Bt(e,Je,""),{enter:i=>{e._x_transition.enter.during=i},"enter-start":i=>{e._x_transition.enter.start=i},"enter-end":i=>{e._x_transition.enter.end=i},leave:i=>{e._x_transition.leave.during=i},"leave-start":i=>{e._x_transition.leave.start=i},"leave-end":i=>{e._x_transition.leave.end=i}}[r](t)}function cn(e,t,r){Bt(e,le);let n=!t.includes("in")&&!t.includes("out")&&!r,i=n||t.includes("in")||["enter"].includes(r),o=n||t.includes("out")||["leave"].includes(r);t.includes("in")&&!n&&(t=t.filter((p,v)=>v<t.indexOf("out"))),t.includes("out")&&!n&&(t=t.filter((p,v)=>v>t.indexOf("out")));let s=!t.includes("opacity")&&!t.includes("scale"),a=s||t.includes("opacity"),u=s||t.includes("scale"),c=a?0:1,l=u?z(t,"scale",95)/100:1,d=z(t,"delay",0),h=z(t,"origin","center"),A="opacity, transform",j=z(t,"duration",150)/1e3,X=z(t,"duration",75)/1e3,f="cubic-bezier(0.4, 0.0, 0.2, 1)";i&&(e._x_transition.enter.during={transformOrigin:h,transitionDelay:d,transitionProperty:A,transitionDuration:`${j}s`,transitionTimingFunction:f},e._x_transition.enter.start={opacity:c,transform:`scale(${l})`},e._x_transition.enter.end={opacity:1,transform:"scale(1)"}),o&&(e._x_transition.leave.during={transformOrigin:h,transitionDelay:d,transitionProperty:A,transitionDuration:`${X}s`,transitionTimingFunction:f},e._x_transition.leave.start={opacity:1,transform:"scale(1)"},e._x_transition.leave.end={opacity:c,transform:`scale(${l})`})}function Bt(e,t,r={}){e._x_transition||(e._x_transition={enter:{during:r,start:r,end:r},leave:{during:r,start:r,end:r},in(n=()=>{},i=()=>{}){Le(e,t,{during:this.enter.during,start:this.enter.start,end:this.enter.end},n,i)},out(n=()=>{},i=()=>{}){Le(e,t,{during:this.leave.during,start:this.leave.start,end:this.leave.end},n,i)}})}window.Element.prototype._x_toggleAndCascadeWithTransitions=function(e,t,r,n){const i=document.visibilityState==="visible"?requestAnimationFrame:setTimeout;let o=()=>i(r);if(t){e._x_transition&&(e._x_transition.enter||e._x_transition.leave)?e._x_transition.enter&&(Object.entries(e._x_transition.enter.during).length||Object.entries(e._x_transition.enter.start).length||Object.entries(e._x_transition.enter.end).length)?e._x_transition.in(r):o():e._x_transition?e._x_transition.in(r):o();return}e._x_hidePromise=e._x_transition?new Promise((s,a)=>{e._x_transition.out(()=>{},()=>s(n)),e._x_transitioning.beforeCancel(()=>a({isFromCancelledTransition:!0}))}):Promise.resolve(n),queueMicrotask(()=>{let s=zt(e);s?(s._x_hideChildren||(s._x_hideChildren=[]),s._x_hideChildren.push(e)):i(()=>{let a=u=>{let c=Promise.all([u._x_hidePromise,...(u._x_hideChildren||[]).map(a)]).then(([l])=>l());return delete u._x_hidePromise,delete u._x_hideChildren,c};a(e).catch(u=>{if(!u.isFromCancelledTransition)throw u})})})};function zt(e){let t=e.parentNode;if(t)return t._x_hidePromise?t:zt(t)}function Le(e,t,{during:r,start:n,end:i}={},o=()=>{},s=()=>{}){if(e._x_transitioning&&e._x_transitioning.cancel(),Object.keys(r).length===0&&Object.keys(n).length===0&&Object.keys(i).length===0){o(),s();return}let a,u,c;ln(e,{start(){a=t(e,n)},during(){u=t(e,r)},before:o,end(){a(),c=t(e,i)},after:s,cleanup(){u(),c()}})}function ln(e,t){let r,n,i,o=je(()=>{x(()=>{r=!0,n||t.before(),i||(t.end(),Re()),t.after(),e.isConnected&&t.cleanup(),delete e._x_transitioning})});e._x_transitioning={beforeCancels:[],beforeCancel(s){this.beforeCancels.push(s)},cancel:je(function(){for(;this.beforeCancels.length;)this.beforeCancels.shift()();o()}),finish:o},x(()=>{t.start(),t.during()}),Xr(),requestAnimationFrame(()=>{if(r)return;let s=Number(getComputedStyle(e).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,a=Number(getComputedStyle(e).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;s===0&&(s=Number(getComputedStyle(e).animationDuration.replace("s",""))*1e3),x(()=>{t.before()}),n=!0,requestAnimationFrame(()=>{r||(x(()=>{t.end()}),Re(),setTimeout(e._x_transitioning.finish,s+a),i=!0)})})}function z(e,t,r){if(e.indexOf(t)===-1)return r;const n=e[e.indexOf(t)+1];if(!n||t==="scale"&&isNaN(n))return r;if(t==="duration"){let i=n.match(/([0-9]+)ms/);if(i)return i[1]}return t==="origin"&&["top","right","left","center","bottom"].includes(e[e.indexOf(t)+2])?[n,e[e.indexOf(t)+2]].join(" "):n}var Fe=!1;function fe(e,t=()=>{}){return(...r)=>Fe?t(...r):e(...r)}function fn(e,t){t._x_dataStack||(t._x_dataStack=e._x_dataStack),Fe=!0,pn(()=>{dn(t)}),Fe=!1}function dn(e){let t=!1;C(e,(n,i)=>{R(n,(o,s)=>{if(t&&tn(o))return s();t=!0,i(o,s)})})}function pn(e){let t=Y;it((r,n)=>{let i=t(r);return ae(i),()=>{}}),e(),it(t)}function Ht(e,t,r,n=[]){switch(e._x_bindings||(e._x_bindings=k({})),e._x_bindings[t]=r,t=n.includes("camel")?bn(t):t,t){case"value":_n(e,r);break;case"style":gn(e,r);break;case"class":hn(e,r);break;default:vn(e,t,r);break}}function _n(e,t){if(e.type==="radio")e.attributes.value===void 0&&(e.value=t),window.fromModel&&(e.checked=at(e.value,t));else if(e.type==="checkbox")Number.isInteger(t)?e.value=t:!Number.isInteger(t)&&!Array.isArray(t)&&typeof t!="boolean"&&![null,void 0].includes(t)?e.value=String(t):Array.isArray(t)?e.checked=t.some(r=>at(r,e.value)):e.checked=!!t;else if(e.tagName==="SELECT")yn(e,t);else{if(e.value===t)return;e.value=t}}function hn(e,t){e._x_undoAddedClasses&&e._x_undoAddedClasses(),e._x_undoAddedClasses=Je(e,t)}function gn(e,t){e._x_undoAddedStyles&&e._x_undoAddedStyles(),e._x_undoAddedStyles=le(e,t)}function vn(e,t,r){[null,void 0,!1].includes(r)&&mn(t)?e.removeAttribute(t):(qt(t)&&(r=t),xn(e,t,r))}function xn(e,t,r){e.getAttribute(t)!=r&&e.setAttribute(t,r)}function yn(e,t){const r=[].concat(t).map(n=>n+"");Array.from(e.options).forEach(n=>{n.selected=r.includes(n.value)})}function bn(e){return e.toLowerCase().replace(/-(\w)/g,(t,r)=>r.toUpperCase())}function at(e,t){return e==t}function qt(e){return["disabled","checked","required","readonly","hidden","open","selected","autofocus","itemscope","multiple","novalidate","allowfullscreen","allowpaymentrequest","formnovalidate","autoplay","controls","loop","muted","playsinline","default","ismap","reversed","async","defer","nomodule"].includes(e)}function mn(e){return!["aria-pressed","aria-checked","aria-expanded","aria-selected"].includes(e)}function wn(e,t,r){if(e._x_bindings&&e._x_bindings[t]!==void 0)return e._x_bindings[t];let n=e.getAttribute(t);return n===null?typeof r=="function"?r():r:n===""?!0:qt(t)?!![t,"true"].includes(n):n}function Wt(e,t){var r;return function(){var n=this,i=arguments,o=function(){r=null,e.apply(n,i)};clearTimeout(r),r=setTimeout(o,t)}}function Ut(e,t){let r;return function(){let n=this,i=arguments;r||(e.apply(n,i),r=!0,setTimeout(()=>r=!1,t))}}function En(e){e(Z)}var T={},ut=!1;function Sn(e,t){if(ut||(T=k(T),ut=!0),t===void 0)return T[e];T[e]=t,typeof t=="object"&&t!==null&&t.hasOwnProperty("init")&&typeof t.init=="function"&&T[e].init(),bt(T[e])}function An(){return T}var Vt={};function On(e,t){let r=typeof t!="function"?()=>t:t;e instanceof Element?Gt(e,r()):Vt[e]=r}function Cn(e){return Object.entries(Vt).forEach(([t,r])=>{Object.defineProperty(e,t,{get(){return(...n)=>r(...n)}})}),e}function Gt(e,t,r){let n=[];for(;n.length;)n.pop()();let i=Object.entries(t).map(([s,a])=>({name:s,value:a})),o=Ot(i);i=i.map(s=>o.find(a=>a.name===s.name)?{name:`x-bind:${s.name}`,value:`"${s.value}"`}:s),Ue(e,i,r).map(s=>{n.push(s.runCleanups),s()})}var Yt={};function Mn(e,t){Yt[e]=t}function Tn(e,t){return Object.entries(Yt).forEach(([r,n])=>{Object.defineProperty(e,r,{get(){return(...i)=>n.bind(t)(...i)},enumerable:!1})}),e}var $n={get reactive(){return k},get release(){return ae},get effect(){return Y},get raw(){return dt},version:"3.10.5",flushAndStopDeferringMutations:kr,dontAutoEvaluateFunctions:Hr,disableEffectScheduling:$r,setReactivityEngine:Pr,closestDataStack:N,skipDuringClone:fe,addRootSelector:Dt,addInitSelector:kt,addScopeToNode:J,deferMutations:Dr,mapAttributes:Ve,evaluateLater:b,setEvaluator:qr,mergeProxies:Q,findClosest:ce,closestRoot:ue,interceptor:mt,transition:Le,setStyles:le,mutateDom:x,directive:g,throttle:Ut,debounce:Wt,evaluate:F,initTree:C,nextTick:Lt,prefixed:B,prefix:Gr,plugin:En,magic:E,store:Sn,start:en,clone:fn,bound:wn,$data:yt,data:Mn,bind:On},Z=$n;function Pn(e,t){const r=Object.create(null),n=e.split(",");for(let i=0;i<n.length;i++)r[n[i]]=!0;return t?i=>!!r[i.toLowerCase()]:i=>!!r[i]}var In=Object.freeze({}),Jt=Object.assign,Rn=Object.prototype.hasOwnProperty,de=(e,t)=>Rn.call(e,t),P=Array.isArray,V=e=>Qt(e)==="[object Map]",jn=e=>typeof e=="string",Qe=e=>typeof e=="symbol",pe=e=>e!==null&&typeof e=="object",Ln=Object.prototype.toString,Qt=e=>Ln.call(e),Zt=e=>Qt(e).slice(8,-1),Ze=e=>jn(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Fn=e=>{const t=Object.create(null);return r=>t[r]||(t[r]=e(r))},Nn=Fn(e=>e.charAt(0).toUpperCase()+e.slice(1)),Xt=(e,t)=>e!==t&&(e===e||t===t),Ne=new WeakMap,H=[],S,I=Symbol("iterate"),Ke=Symbol("Map key iterate");function Kn(e){return e&&e._isEffect===!0}function Dn(e,t=In){Kn(e)&&(e=e.raw);const r=zn(e,t);return t.lazy||r(),r}function kn(e){e.active&&(er(e),e.options.onStop&&e.options.onStop(),e.active=!1)}var Bn=0;function zn(e,t){const r=function(){if(!r.active)return e();if(!H.includes(r)){er(r);try{return qn(),H.push(r),S=r,e()}finally{H.pop(),tr(),S=H[H.length-1]}}};return r.id=Bn++,r.allowRecurse=!!t.allowRecurse,r._isEffect=!0,r.active=!0,r.raw=e,r.deps=[],r.options=t,r}function er(e){const{deps:t}=e;if(t.length){for(let r=0;r<t.length;r++)t[r].delete(e);t.length=0}}var D=!0,Xe=[];function Hn(){Xe.push(D),D=!1}function qn(){Xe.push(D),D=!0}function tr(){const e=Xe.pop();D=e===void 0?!0:e}function w(e,t,r){if(!D||S===void 0)return;let n=Ne.get(e);n||Ne.set(e,n=new Map);let i=n.get(r);i||n.set(r,i=new Set),i.has(S)||(i.add(S),S.deps.push(i),S.options.onTrack&&S.options.onTrack({effect:S,target:e,type:t,key:r}))}function M(e,t,r,n,i,o){const s=Ne.get(e);if(!s)return;const a=new Set,u=l=>{l&&l.forEach(d=>{(d!==S||d.allowRecurse)&&a.add(d)})};if(t==="clear")s.forEach(u);else if(r==="length"&&P(e))s.forEach((l,d)=>{(d==="length"||d>=n)&&u(l)});else switch(r!==void 0&&u(s.get(r)),t){case"add":P(e)?Ze(r)&&u(s.get("length")):(u(s.get(I)),V(e)&&u(s.get(Ke)));break;case"delete":P(e)||(u(s.get(I)),V(e)&&u(s.get(Ke)));break;case"set":V(e)&&u(s.get(I));break}const c=l=>{l.options.onTrigger&&l.options.onTrigger({effect:l,target:e,key:r,type:t,newValue:n,oldValue:i,oldTarget:o}),l.options.scheduler?l.options.scheduler(l):l()};a.forEach(c)}var Wn=Pn("__proto__,__v_isRef,__isVue"),rr=new Set(Object.getOwnPropertyNames(Symbol).map(e=>Symbol[e]).filter(Qe)),Un=_e(),Vn=_e(!1,!0),Gn=_e(!0),Yn=_e(!0,!0),se={};["includes","indexOf","lastIndexOf"].forEach(e=>{const t=Array.prototype[e];se[e]=function(...r){const n=_(this);for(let o=0,s=this.length;o<s;o++)w(n,"get",o+"");const i=t.apply(n,r);return i===-1||i===!1?t.apply(n,r.map(_)):i}});["push","pop","shift","unshift","splice"].forEach(e=>{const t=Array.prototype[e];se[e]=function(...r){Hn();const n=t.apply(this,r);return tr(),n}});function _e(e=!1,t=!1){return function(n,i,o){if(i==="__v_isReactive")return!e;if(i==="__v_isReadonly")return e;if(i==="__v_raw"&&o===(e?t?oi:vr:t?ii:gr).get(n))return n;const s=P(n);if(!e&&s&&de(se,i))return Reflect.get(se,i,o);const a=Reflect.get(n,i,o);return(Qe(i)?rr.has(i):Wn(i))||(e||w(n,"get",i),t)?a:De(a)?!s||!Ze(i)?a.value:a:pe(a)?e?xr(a):nt(a):a}}var Jn=nr(),Qn=nr(!0);function nr(e=!1){return function(r,n,i,o){let s=r[n];if(!e&&(i=_(i),s=_(s),!P(r)&&De(s)&&!De(i)))return s.value=i,!0;const a=P(r)&&Ze(n)?Number(n)<r.length:de(r,n),u=Reflect.set(r,n,i,o);return r===_(o)&&(a?Xt(i,s)&&M(r,"set",n,i,s):M(r,"add",n,i)),u}}function Zn(e,t){const r=de(e,t),n=e[t],i=Reflect.deleteProperty(e,t);return i&&r&&M(e,"delete",t,void 0,n),i}function Xn(e,t){const r=Reflect.has(e,t);return(!Qe(t)||!rr.has(t))&&w(e,"has",t),r}function ei(e){return w(e,"iterate",P(e)?"length":I),Reflect.ownKeys(e)}var ir={get:Un,set:Jn,deleteProperty:Zn,has:Xn,ownKeys:ei},or={get:Gn,set(e,t){return console.warn(`Set operation on key "${String(t)}" failed: target is readonly.`,e),!0},deleteProperty(e,t){return console.warn(`Delete operation on key "${String(t)}" failed: target is readonly.`,e),!0}};Jt({},ir,{get:Vn,set:Qn});Jt({},or,{get:Yn});var et=e=>pe(e)?nt(e):e,tt=e=>pe(e)?xr(e):e,rt=e=>e,he=e=>Reflect.getPrototypeOf(e);function ge(e,t,r=!1,n=!1){e=e.__v_raw;const i=_(e),o=_(t);t!==o&&!r&&w(i,"get",t),!r&&w(i,"get",o);const{has:s}=he(i),a=n?rt:r?tt:et;if(s.call(i,t))return a(e.get(t));if(s.call(i,o))return a(e.get(o));e!==i&&e.get(t)}function ve(e,t=!1){const r=this.__v_raw,n=_(r),i=_(e);return e!==i&&!t&&w(n,"has",e),!t&&w(n,"has",i),e===i?r.has(e):r.has(e)||r.has(i)}function xe(e,t=!1){return e=e.__v_raw,!t&&w(_(e),"iterate",I),Reflect.get(e,"size",e)}function sr(e){e=_(e);const t=_(this);return he(t).has.call(t,e)||(t.add(e),M(t,"add",e,e)),this}function ar(e,t){t=_(t);const r=_(this),{has:n,get:i}=he(r);let o=n.call(r,e);o?hr(r,n,e):(e=_(e),o=n.call(r,e));const s=i.call(r,e);return r.set(e,t),o?Xt(t,s)&&M(r,"set",e,t,s):M(r,"add",e,t),this}function ur(e){const t=_(this),{has:r,get:n}=he(t);let i=r.call(t,e);i?hr(t,r,e):(e=_(e),i=r.call(t,e));const o=n?n.call(t,e):void 0,s=t.delete(e);return i&&M(t,"delete",e,void 0,o),s}function cr(){const e=_(this),t=e.size!==0,r=V(e)?new Map(e):new Set(e),n=e.clear();return t&&M(e,"clear",void 0,void 0,r),n}function ye(e,t){return function(n,i){const o=this,s=o.__v_raw,a=_(s),u=t?rt:e?tt:et;return!e&&w(a,"iterate",I),s.forEach((c,l)=>n.call(i,u(c),u(l),o))}}function re(e,t,r){return function(...n){const i=this.__v_raw,o=_(i),s=V(o),a=e==="entries"||e===Symbol.iterator&&s,u=e==="keys"&&s,c=i[e](...n),l=r?rt:t?tt:et;return!t&&w(o,"iterate",u?Ke:I),{next(){const{value:d,done:h}=c.next();return h?{value:d,done:h}:{value:a?[l(d[0]),l(d[1])]:l(d),done:h}},[Symbol.iterator](){return this}}}}function O(e){return function(...t){{const r=t[0]?`on key "${t[0]}" `:"";console.warn(`${Nn(e)} operation ${r}failed: target is readonly.`,_(this))}return e==="delete"?!1:this}}var lr={get(e){return ge(this,e)},get size(){return xe(this)},has:ve,add:sr,set:ar,delete:ur,clear:cr,forEach:ye(!1,!1)},fr={get(e){return ge(this,e,!1,!0)},get size(){return xe(this)},has:ve,add:sr,set:ar,delete:ur,clear:cr,forEach:ye(!1,!0)},dr={get(e){return ge(this,e,!0)},get size(){return xe(this,!0)},has(e){return ve.call(this,e,!0)},add:O("add"),set:O("set"),delete:O("delete"),clear:O("clear"),forEach:ye(!0,!1)},pr={get(e){return ge(this,e,!0,!0)},get size(){return xe(this,!0)},has(e){return ve.call(this,e,!0)},add:O("add"),set:O("set"),delete:O("delete"),clear:O("clear"),forEach:ye(!0,!0)},ti=["keys","values","entries",Symbol.iterator];ti.forEach(e=>{lr[e]=re(e,!1,!1),dr[e]=re(e,!0,!1),fr[e]=re(e,!1,!0),pr[e]=re(e,!0,!0)});function _r(e,t){const r=t?e?pr:fr:e?dr:lr;return(n,i,o)=>i==="__v_isReactive"?!e:i==="__v_isReadonly"?e:i==="__v_raw"?n:Reflect.get(de(r,i)&&i in n?r:n,i,o)}var ri={get:_r(!1,!1)},ni={get:_r(!0,!1)};function hr(e,t,r){const n=_(r);if(n!==r&&t.call(e,n)){const i=Zt(e);console.warn(`Reactive ${i} contains both the raw and reactive versions of the same object${i==="Map"?" as keys":""}, which can lead to inconsistencies. Avoid differentiating between the raw and reactive versions of an object and only use the reactive version if possible.`)}}var gr=new WeakMap,ii=new WeakMap,vr=new WeakMap,oi=new WeakMap;function si(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function ai(e){return e.__v_skip||!Object.isExtensible(e)?0:si(Zt(e))}function nt(e){return e&&e.__v_isReadonly?e:yr(e,!1,ir,ri,gr)}function xr(e){return yr(e,!0,or,ni,vr)}function yr(e,t,r,n,i){if(!pe(e))return console.warn(`value cannot be made reactive: ${String(e)}`),e;if(e.__v_raw&&!(t&&e.__v_isReactive))return e;const o=i.get(e);if(o)return o;const s=ai(e);if(s===0)return e;const a=new Proxy(e,s===2?n:r);return i.set(e,a),a}function _(e){return e&&_(e.__v_raw)||e}function De(e){return Boolean(e&&e.__v_isRef===!0)}E("nextTick",()=>Lt);E("dispatch",e=>U.bind(U,e));E("watch",(e,{evaluateLater:t,effect:r})=>(n,i)=>{let o=t(n),s=!0,a,u=r(()=>o(c=>{JSON.stringify(c),s?a=c:queueMicrotask(()=>{i(c,a),a=c}),s=!1}));e._x_effects.delete(u)});E("store",An);E("data",e=>yt(e));E("root",e=>ue(e));E("refs",e=>(e._x_refs_proxy||(e._x_refs_proxy=Q(ui(e))),e._x_refs_proxy));function ui(e){let t=[],r=e;for(;r;)r._x_refs&&t.push(r._x_refs),r=r.parentNode;return t}var Ee={};function br(e){return Ee[e]||(Ee[e]=0),++Ee[e]}function ci(e,t){return ce(e,r=>{if(r._x_ids&&r._x_ids[t])return!0})}function li(e,t){e._x_ids||(e._x_ids={}),e._x_ids[t]||(e._x_ids[t]=br(t))}E("id",e=>(t,r=null)=>{let n=ci(e,t),i=n?n._x_ids[t]:br(t);return r?`${t}-${i}-${r}`:`${t}-${i}`});E("el",e=>e);mr("Focus","focus","focus");mr("Persist","persist","persist");function mr(e,t,r){E(t,n=>K(`You can't use [$${directiveName}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}g("modelable",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t),o=()=>{let c;return i(l=>c=l),c},s=n(`${t} = __placeholder`),a=c=>s(()=>{},{scope:{__placeholder:c}}),u=o();a(u),queueMicrotask(()=>{if(!e._x_model)return;e._x_removeModelListeners.default();let c=e._x_model.get,l=e._x_model.set;r(()=>a(c())),r(()=>l(o()))})});g("teleport",(e,{expression:t},{cleanup:r})=>{e.tagName.toLowerCase()!=="template"&&K("x-teleport can only be used on a <template> tag",e);let n=document.querySelector(t);n||K(`Cannot find x-teleport element for selector: "${t}"`);let i=e.content.cloneNode(!0).firstElementChild;e._x_teleport=i,i._x_teleportBack=e,e._x_forwardEvents&&e._x_forwardEvents.forEach(o=>{i.addEventListener(o,s=>{s.stopPropagation(),e.dispatchEvent(new s.constructor(s.type,s))})}),J(i,{},e),x(()=>{n.appendChild(i),C(i),i._x_ignore=!0}),r(()=>i.remove())});var wr=()=>{};wr.inline=(e,{modifiers:t},{cleanup:r})=>{t.includes("self")?e._x_ignoreSelf=!0:e._x_ignore=!0,r(()=>{t.includes("self")?delete e._x_ignoreSelf:delete e._x_ignore})};g("ignore",wr);g("effect",(e,{expression:t},{effect:r})=>r(b(e,t)));function Er(e,t,r,n){let i=e,o=u=>n(u),s={},a=(u,c)=>l=>c(u,l);if(r.includes("dot")&&(t=fi(t)),r.includes("camel")&&(t=di(t)),r.includes("passive")&&(s.passive=!0),r.includes("capture")&&(s.capture=!0),r.includes("window")&&(i=window),r.includes("document")&&(i=document),r.includes("prevent")&&(o=a(o,(u,c)=>{c.preventDefault(),u(c)})),r.includes("stop")&&(o=a(o,(u,c)=>{c.stopPropagation(),u(c)})),r.includes("self")&&(o=a(o,(u,c)=>{c.target===e&&u(c)})),(r.includes("away")||r.includes("outside"))&&(i=document,o=a(o,(u,c)=>{e.contains(c.target)||c.target.isConnected!==!1&&(e.offsetWidth<1&&e.offsetHeight<1||e._x_isShown!==!1&&u(c))})),r.includes("once")&&(o=a(o,(u,c)=>{u(c),i.removeEventListener(t,o,s)})),o=a(o,(u,c)=>{_i(t)&&hi(c,r)||u(c)}),r.includes("debounce")){let u=r[r.indexOf("debounce")+1]||"invalid-wait",c=ke(u.split("ms")[0])?Number(u.split("ms")[0]):250;o=Wt(o,c)}if(r.includes("throttle")){let u=r[r.indexOf("throttle")+1]||"invalid-wait",c=ke(u.split("ms")[0])?Number(u.split("ms")[0]):250;o=Ut(o,c)}return i.addEventListener(t,o,s),()=>{i.removeEventListener(t,o,s)}}function fi(e){return e.replace(/-/g,".")}function di(e){return e.toLowerCase().replace(/-(\w)/g,(t,r)=>r.toUpperCase())}function ke(e){return!Array.isArray(e)&&!isNaN(e)}function pi(e){return e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[_\s]/,"-").toLowerCase()}function _i(e){return["keydown","keyup"].includes(e)}function hi(e,t){let r=t.filter(o=>!["window","document","prevent","stop","once"].includes(o));if(r.includes("debounce")){let o=r.indexOf("debounce");r.splice(o,ke((r[o+1]||"invalid-wait").split("ms")[0])?2:1)}if(r.length===0||r.length===1&&ct(e.key).includes(r[0]))return!1;const i=["ctrl","shift","alt","meta","cmd","super"].filter(o=>r.includes(o));return r=r.filter(o=>!i.includes(o)),!(i.length>0&&i.filter(s=>((s==="cmd"||s==="super")&&(s="meta"),e[`${s}Key`])).length===i.length&&ct(e.key).includes(r[0]))}function ct(e){if(!e)return[];e=pi(e);let t={ctrl:"control",slash:"/",space:"-",spacebar:"-",cmd:"meta",esc:"escape",up:"arrow-up",down:"arrow-down",left:"arrow-left",right:"arrow-right",period:".",equal:"="};return t[e]=e,Object.keys(t).map(r=>{if(t[r]===e)return r}).filter(r=>r)}g("model",(e,{modifiers:t,expression:r},{effect:n,cleanup:i})=>{let o=b(e,r),s=`${r} = rightSideOfExpression($event, ${r})`,a=b(e,s);var u=e.tagName.toLowerCase()==="select"||["checkbox","radio"].includes(e.type)||t.includes("lazy")?"change":"input";let c=gi(e,t,r),l=Er(e,u,t,h=>{a(()=>{},{scope:{$event:h,rightSideOfExpression:c}})});e._x_removeModelListeners||(e._x_removeModelListeners={}),e._x_removeModelListeners.default=l,i(()=>e._x_removeModelListeners.default());let d=b(e,`${r} = __placeholder`);e._x_model={get(){let h;return o(A=>h=A),h},set(h){d(()=>{},{scope:{__placeholder:h}})}},e._x_forceModelUpdate=()=>{o(h=>{h===void 0&&r.match(/\./)&&(h=""),window.fromModel=!0,x(()=>Ht(e,"value",h)),delete window.fromModel})},n(()=>{t.includes("unintrusive")&&document.activeElement.isSameNode(e)||e._x_forceModelUpdate()})});function gi(e,t,r){return e.type==="radio"&&x(()=>{e.hasAttribute("name")||e.setAttribute("name",r)}),(n,i)=>x(()=>{if(n instanceof CustomEvent&&n.detail!==void 0)return n.detail||n.target.value;if(e.type==="checkbox")if(Array.isArray(i)){let o=t.includes("number")?Se(n.target.value):n.target.value;return n.target.checked?i.concat([o]):i.filter(s=>!vi(s,o))}else return n.target.checked;else{if(e.tagName.toLowerCase()==="select"&&e.multiple)return t.includes("number")?Array.from(n.target.selectedOptions).map(o=>{let s=o.value||o.text;return Se(s)}):Array.from(n.target.selectedOptions).map(o=>o.value||o.text);{let o=n.target.value;return t.includes("number")?Se(o):t.includes("trim")?o.trim():o}}})}function Se(e){let t=e?parseFloat(e):null;return xi(t)?t:e}function vi(e,t){return e==t}function xi(e){return!Array.isArray(e)&&!isNaN(e)}g("cloak",e=>queueMicrotask(()=>x(()=>e.removeAttribute(B("cloak")))));kt(()=>`[${B("init")}]`);g("init",fe((e,{expression:t},{evaluate:r})=>typeof t=="string"?!!t.trim()&&r(t,{},!1):r(t,{},!1)));g("text",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t);r(()=>{i(o=>{x(()=>{e.textContent=o})})})});g("html",(e,{expression:t},{effect:r,evaluateLater:n})=>{let i=n(t);r(()=>{i(o=>{x(()=>{e.innerHTML=o,e._x_ignoreSelf=!0,C(e),delete e._x_ignoreSelf})})})});Ve(Tt(":",$t(B("bind:"))));g("bind",(e,{value:t,modifiers:r,expression:n,original:i},{effect:o})=>{if(!t){let a={};Cn(a),b(e,n)(c=>{Gt(e,c,i)},{scope:a});return}if(t==="key")return yi(e,n);let s=b(e,n);o(()=>s(a=>{a===void 0&&typeof n=="string"&&n.match(/\./)&&(a=""),x(()=>Ht(e,t,a,r))}))});function yi(e,t){e._x_keyExpression=t}Dt(()=>`[${B("data")}]`);g("data",fe((e,{expression:t},{cleanup:r})=>{t=t===""?"{}":t;let n={};Te(n,e);let i={};Tn(i,n);let o=F(e,t,{scope:i});o===void 0&&(o={}),Te(o,e);let s=k(o);bt(s);let a=J(e,s);s.init&&F(e,s.init),r(()=>{s.destroy&&F(e,s.destroy),a()})}));g("show",(e,{modifiers:t,expression:r},{effect:n})=>{let i=b(e,r);e._x_doHide||(e._x_doHide=()=>{x(()=>{e.style.setProperty("display","none",t.includes("important")?"important":void 0)})}),e._x_doShow||(e._x_doShow=()=>{x(()=>{e.style.length===1&&e.style.display==="none"?e.removeAttribute("style"):e.style.removeProperty("display")})});let o=()=>{e._x_doHide(),e._x_isShown=!1},s=()=>{e._x_doShow(),e._x_isShown=!0},a=()=>setTimeout(s),u=je(d=>d?s():o(),d=>{typeof e._x_toggleAndCascadeWithTransitions=="function"?e._x_toggleAndCascadeWithTransitions(e,d,s,o):d?a():o()}),c,l=!0;n(()=>i(d=>{!l&&d===c||(t.includes("immediate")&&(d?a():o()),u(d),c=d,l=!1)}))});g("for",(e,{expression:t},{effect:r,cleanup:n})=>{let i=mi(t),o=b(e,i.items),s=b(e,e._x_keyExpression||"index");e._x_prevKeys=[],e._x_lookup={},r(()=>bi(e,i,o,s)),n(()=>{Object.values(e._x_lookup).forEach(a=>a.remove()),delete e._x_prevKeys,delete e._x_lookup})});function bi(e,t,r,n){let i=s=>typeof s=="object"&&!Array.isArray(s),o=e;r(s=>{wi(s)&&s>=0&&(s=Array.from(Array(s).keys(),f=>f+1)),s===void 0&&(s=[]);let a=e._x_lookup,u=e._x_prevKeys,c=[],l=[];if(i(s))s=Object.entries(s).map(([f,p])=>{let v=lt(t,p,f,s);n(y=>l.push(y),{scope:{index:f,...v}}),c.push(v)});else for(let f=0;f<s.length;f++){let p=lt(t,s[f],f,s);n(v=>l.push(v),{scope:{index:f,...p}}),c.push(p)}let d=[],h=[],A=[],j=[];for(let f=0;f<u.length;f++){let p=u[f];l.indexOf(p)===-1&&A.push(p)}u=u.filter(f=>!A.includes(f));let X="template";for(let f=0;f<l.length;f++){let p=l[f],v=u.indexOf(p);if(v===-1)u.splice(f,0,p),d.push([X,f]);else if(v!==f){let y=u.splice(f,1)[0],m=u.splice(v-1,1)[0];u.splice(f,0,m),u.splice(v,0,y),h.push([y,m])}else j.push(p);X=p}for(let f=0;f<A.length;f++){let p=A[f];a[p]._x_effects&&a[p]._x_effects.forEach(ft),a[p].remove(),a[p]=null,delete a[p]}for(let f=0;f<h.length;f++){let[p,v]=h[f],y=a[p],m=a[v],L=document.createElement("div");x(()=>{m.after(L),y.after(m),m._x_currentIfEl&&m.after(m._x_currentIfEl),L.before(y),y._x_currentIfEl&&y.after(y._x_currentIfEl),L.remove()}),ot(m,c[l.indexOf(v)])}for(let f=0;f<d.length;f++){let[p,v]=d[f],y=p==="template"?o:a[p];y._x_currentIfEl&&(y=y._x_currentIfEl);let m=c[v],L=l[v],ee=document.importNode(o.content,!0).firstElementChild;J(ee,k(m),o),x(()=>{y.after(ee),C(ee)}),typeof L=="object"&&K("x-for key cannot be an object, it must be a string or an integer",o),a[L]=ee}for(let f=0;f<j.length;f++)ot(a[j[f]],c[l.indexOf(j[f])]);o._x_prevKeys=l})}function mi(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=/^\s*\(|\)\s*$/g,n=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,i=e.match(n);if(!i)return;let o={};o.items=i[2].trim();let s=i[1].replace(r,"").trim(),a=s.match(t);return a?(o.item=s.replace(t,"").trim(),o.index=a[1].trim(),a[2]&&(o.collection=a[2].trim())):o.item=s,o}function lt(e,t,r,n){let i={};return/^\[.*\]$/.test(e.item)&&Array.isArray(t)?e.item.replace("[","").replace("]","").split(",").map(s=>s.trim()).forEach((s,a)=>{i[s]=t[a]}):/^\{.*\}$/.test(e.item)&&!Array.isArray(t)&&typeof t=="object"?e.item.replace("{","").replace("}","").split(",").map(s=>s.trim()).forEach(s=>{i[s]=t[s]}):i[e.item]=t,e.index&&(i[e.index]=r),e.collection&&(i[e.collection]=n),i}function wi(e){return!Array.isArray(e)&&!isNaN(e)}function Sr(){}Sr.inline=(e,{expression:t},{cleanup:r})=>{let n=ue(e);n._x_refs||(n._x_refs={}),n._x_refs[t]=e,r(()=>delete n._x_refs[t])};g("ref",Sr);g("if",(e,{expression:t},{effect:r,cleanup:n})=>{let i=b(e,t),o=()=>{if(e._x_currentIfEl)return e._x_currentIfEl;let a=e.content.cloneNode(!0).firstElementChild;return J(a,{},e),x(()=>{e.after(a),C(a)}),e._x_currentIfEl=a,e._x_undoIf=()=>{R(a,u=>{u._x_effects&&u._x_effects.forEach(ft)}),a.remove(),delete e._x_currentIfEl},a},s=()=>{e._x_undoIf&&(e._x_undoIf(),delete e._x_undoIf)};r(()=>i(a=>{a?o():s()})),n(()=>e._x_undoIf&&e._x_undoIf())});g("id",(e,{expression:t},{evaluate:r})=>{r(t).forEach(i=>li(e,i))});Ve(Tt("@",$t(B("on:"))));g("on",fe((e,{value:t,modifiers:r,expression:n},{cleanup:i})=>{let o=n?b(e,n):()=>{};e.tagName.toLowerCase()==="template"&&(e._x_forwardEvents||(e._x_forwardEvents=[]),e._x_forwardEvents.includes(t)||e._x_forwardEvents.push(t));let s=Er(e,t,r,a=>{o(()=>{},{scope:{$event:a},params:[a]})});i(()=>s())}));be("Collapse","collapse","collapse");be("Intersect","intersect","intersect");be("Focus","trap","focus");be("Mask","mask","mask");function be(e,t,r){g(t,n=>K(`You can't use [x-${t}] without first installing the "${e}" plugin here: https://alpinejs.dev/plugins/${r}`,n))}Z.setEvaluator(St);Z.setReactivityEngine({reactive:nt,effect:Dn,release:kn,raw:_});var Ei=Z,Ar=Ei;window.Alpine=Ar;Ar.start();
+import{m as o}from"./assets/module.esm-90313d2c.js";window.Alpine=o;o.start();
diff --git a/theme/keywind/login/resources/dist/recoveryCodes.js b/theme/keywind/login/resources/dist/recoveryCodes.js
new file mode 100644
index 0000000..d0d9db8
--- /dev/null
+++ b/theme/keywind/login/resources/dist/recoveryCodes.js
@@ -0,0 +1,8 @@
+import{m as p}from"./assets/module.esm-90313d2c.js";document.addEventListener("alpine:init",()=>{p.data("recoveryCodes",function(){const{codeList:o}=this.$refs,{downloadFileDate:n,downloadFileDescription:i,downloadFileHeader:d,downloadFileName:s}=this.$store.recoveryCodes,a=new Date().toLocaleString(navigator.language),r=o.getElementsByTagName("li"),l=Array.from(r).map(t=>t.innerText).join(`
+`);return{copy:()=>navigator.clipboard.writeText(l),download:()=>{const t=document.createElement("a"),c=`${d}
+
+${l}
+
+${i}
+
+${n} ${a}`;t.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(c)),t.setAttribute("download",`${s}.txt`),t.click()},print:()=>{const t=o.innerHTML,m=`<html><style>div { font-family: monospace; list-style-type: none }</style><body><title>${s}</title><p>${d}</p><div>${t}</div><p>${i}</p><p>${n} ${a}</p></body></html>`,e=window.open();e&&(e.document.write(m),e.print(),e.close())}}})});
diff --git a/vite.config.ts b/vite.config.ts
index b7539ae..c2962d8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   build: {
     rollupOptions: {
-      input: 'src/index.ts',
+      input: ['src/index.ts', 'src/data/recoveryCodes.ts'],
       output: {
         assetFileNames: '[name][extname]',
         dir: 'theme/keywind/login/resources/dist',

From fb53d98e5688441168820430dac3e45709b49bbd Mon Sep 17 00:00:00 2001
From: "@lukin" <anthony@lukin.dev>
Date: Sun, 5 Feb 2023 00:00:00 +0400
Subject: [PATCH 10/10] [pages] Update WebAuthn

---
 README.md                                     |   6 +
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |   6 +
 src/data/webAuthnAuthenticate.ts              | 145 +++++++++++
 src/data/webAuthnRegister.ts                  | 225 +++++++++++++++++
 src/global.d.ts                               |   1 +
 .../login/components/molecules/username.ftl   |   2 +-
 theme/keywind/login/login-config-totp.ftl     |   2 +-
 .../login-recovery-authn-code-config.ftl      |   4 +-
 .../resources/dist/assets/rfc4648-b81320ce.js |   1 +
 theme/keywind/login/resources/dist/index.css  |   2 +-
 .../resources/dist/webAuthnAuthenticate.js    |   1 +
 .../login/resources/dist/webAuthnRegister.js  |   1 +
 theme/keywind/login/select-authenticator.ftl  |  50 ++--
 theme/keywind/login/webauthn-authenticate.ftl | 188 +++++---------
 theme/keywind/login/webauthn-error.ftl        |  58 +++--
 theme/keywind/login/webauthn-register.ftl     | 236 ++++--------------
 vite.config.ts                                |   7 +-
 18 files changed, 568 insertions(+), 370 deletions(-)
 create mode 100644 src/data/webAuthnAuthenticate.ts
 create mode 100644 src/data/webAuthnRegister.ts
 create mode 100644 theme/keywind/login/resources/dist/assets/rfc4648-b81320ce.js
 create mode 100644 theme/keywind/login/resources/dist/webAuthnAuthenticate.js
 create mode 100644 theme/keywind/login/resources/dist/webAuthnRegister.js

diff --git a/README.md b/README.md
index d1bad4b..40ef1ee 100644
--- a/README.md
+++ b/README.md
@@ -11,11 +11,17 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 - Login IDP Link Confirm
 - Login OAuth Grant
 - Login OTP
+- Login Recovery Authn Code Config
+- Login Recovery Authn Code Input
 - Login Reset Password
 - Login Update Password
 - Login Update Profile
 - Logout Confirm
 - Register
+- Select Authenticator
+- WebAuthn Authenticate
+- WebAuthn Error
+- WebAuthn Register
 
 ### Identity Provider Icons
 
diff --git a/package.json b/package.json
index 895aceb..b41a90e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "alpinejs": "^3.10.5"
+    "alpinejs": "^3.10.5",
+    "rfc4648": "^1.5.2"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb9396d..91ac6cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,12 +6,14 @@ specifiers:
   alpinejs: ^3.10.5
   autoprefixer: ^10.4.13
   postcss: ^8.4.20
+  rfc4648: ^1.5.2
   tailwindcss: ^3.2.4
   typescript: ^4.9.4
   vite: ^4.0.1
 
 dependencies:
   alpinejs: 3.10.5
+  rfc4648: 1.5.2
 
 devDependencies:
   '@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
@@ -716,6 +718,10 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: true
 
+  /rfc4648/1.5.2:
+    resolution: {integrity: sha512-tLOizhR6YGovrEBLatX1sdcuhoSCXddw3mqNVAcKxGJ+J0hFeJ+SjeWCv5UPA/WU3YzWPPuCVYgXBKZUPGpKtg==}
+    dev: false
+
   /rollup/3.7.5:
     resolution: {integrity: sha512-z0ZbqHBtS/et2EEUKMrAl2CoSdwN7ZPzL17UMiKN9RjjqHShTlv7F9J6ZJZJNREYjBh3TvBrdfjkFDIXFNeuiQ==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
diff --git a/src/data/webAuthnAuthenticate.ts b/src/data/webAuthnAuthenticate.ts
new file mode 100644
index 0000000..5b95f0a
--- /dev/null
+++ b/src/data/webAuthnAuthenticate.ts
@@ -0,0 +1,145 @@
+import Alpine from 'alpinejs';
+import { base64url } from 'rfc4648';
+
+type DataType = {
+  $refs: RefsType;
+  $store: StoreType;
+};
+
+type RefsType = {
+  authenticatorDataInput: HTMLInputElement;
+  authnSelectForm: HTMLFormElement;
+  clientDataJSONInput: HTMLInputElement;
+  credentialIdInput: HTMLInputElement;
+  errorInput: HTMLInputElement;
+  signatureInput: HTMLInputElement;
+  userHandleInput: HTMLInputElement;
+  webAuthnForm: HTMLFormElement;
+};
+
+type StoreType = {
+  webAuthnAuthenticate: {
+    challenge: string;
+    createTimeout: string;
+    isUserIdentified: string;
+    rpId: string;
+    unsupportedBrowserText: string;
+    userVerification: UserVerificationRequirement | 'not specified';
+  };
+};
+
+document.addEventListener('alpine:init', () => {
+  Alpine.data('webAuthnAuthenticate', function (this: DataType) {
+    const {
+      authenticatorDataInput,
+      authnSelectForm,
+      clientDataJSONInput,
+      credentialIdInput,
+      errorInput,
+      signatureInput,
+      userHandleInput,
+      webAuthnForm,
+    } = this.$refs;
+    const {
+      challenge,
+      createTimeout,
+      isUserIdentified,
+      rpId,
+      unsupportedBrowserText,
+      userVerification,
+    } = this.$store.webAuthnAuthenticate;
+
+    const doAuthenticate = (allowCredentials: PublicKeyCredentialDescriptor[]) => {
+      if (!window.PublicKeyCredential) {
+        errorInput.value = unsupportedBrowserText;
+        webAuthnForm.submit();
+
+        return;
+      }
+
+      const publicKey: PublicKeyCredentialRequestOptions = {
+        challenge: base64url.parse(challenge, { loose: true }),
+        rpId: rpId,
+      };
+
+      if (allowCredentials.length) {
+        publicKey.allowCredentials = allowCredentials;
+      }
+
+      if (parseInt(createTimeout) !== 0) publicKey.timeout = parseInt(createTimeout) * 1000;
+
+      if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
+
+      navigator.credentials
+        .get({ publicKey })
+        .then((result) => {
+          if (
+            result instanceof PublicKeyCredential &&
+            result.response instanceof AuthenticatorAssertionResponse
+          ) {
+            window.result = result;
+
+            authenticatorDataInput.value = base64url.stringify(
+              new Uint8Array(result.response.authenticatorData),
+              { pad: false }
+            );
+
+            clientDataJSONInput.value = base64url.stringify(
+              new Uint8Array(result.response.clientDataJSON),
+              { pad: false }
+            );
+
+            signatureInput.value = base64url.stringify(new Uint8Array(result.response.signature), {
+              pad: false,
+            });
+
+            credentialIdInput.value = result.id;
+
+            if (result.response.userHandle) {
+              userHandleInput.value = base64url.stringify(
+                new Uint8Array(result.response.userHandle),
+                { pad: false }
+              );
+            }
+
+            webAuthnForm.submit();
+          }
+        })
+        .catch((error) => {
+          errorInput.value = error;
+          webAuthnForm.submit();
+        });
+    };
+
+    const checkAllowCredentials = () => {
+      const allowCredentials: PublicKeyCredentialDescriptor[] = [];
+
+      const authnSelectFormElements = Array.from(authnSelectForm.elements);
+
+      if (authnSelectFormElements.length) {
+        authnSelectFormElements.forEach((element) => {
+          if (element instanceof HTMLInputElement) {
+            allowCredentials.push({
+              id: base64url.parse(element.value, { loose: true }),
+              type: 'public-key',
+            });
+          }
+        });
+      }
+
+      doAuthenticate(allowCredentials);
+    };
+
+    return {
+      webAuthnAuthenticate: () => {
+        if (!isUserIdentified) {
+          doAuthenticate([]);
+
+          return;
+        }
+
+        checkAllowCredentials();
+      },
+    };
+  });
+});
diff --git a/src/data/webAuthnRegister.ts b/src/data/webAuthnRegister.ts
new file mode 100644
index 0000000..23744df
--- /dev/null
+++ b/src/data/webAuthnRegister.ts
@@ -0,0 +1,225 @@
+import Alpine from 'alpinejs';
+import { base64url } from 'rfc4648';
+
+type DataType = {
+  $refs: RefsType;
+  $store: StoreType;
+};
+
+type RefsType = {
+  attestationObjectInput: HTMLInputElement;
+  authenticatorLabelInput: HTMLInputElement;
+  clientDataJSONInput: HTMLInputElement;
+  errorInput: HTMLInputElement;
+  publicKeyCredentialIdInput: HTMLInputElement;
+  registerForm: HTMLFormElement;
+  transportsInput: HTMLInputElement;
+};
+
+type StoreType = {
+  webAuthnRegister: {
+    attestationConveyancePreference: AttestationConveyancePreference | 'not specified';
+    authenticatorAttachment: AuthenticatorAttachment | 'not specified';
+    challenge: string;
+    createTimeout: string;
+    excludeCredentialIds: string;
+    requireResidentKey: string;
+    rpEntityName: string;
+    rpId: string;
+    signatureAlgorithms: string;
+    unsupportedBrowserText: string;
+    userId: string;
+    userVerificationRequirement: UserVerificationRequirement | 'not specified';
+    username: string;
+  };
+};
+
+document.addEventListener('alpine:init', () => {
+  Alpine.data('webAuthnRegister', function (this: DataType) {
+    const {
+      attestationObjectInput,
+      authenticatorLabelInput,
+      clientDataJSONInput,
+      errorInput,
+      publicKeyCredentialIdInput,
+      registerForm,
+      transportsInput,
+    } = this.$refs;
+    const {
+      attestationConveyancePreference,
+      authenticatorAttachment,
+      challenge,
+      createTimeout,
+      excludeCredentialIds,
+      requireResidentKey,
+      rpEntityName,
+      rpId,
+      signatureAlgorithms,
+      unsupportedBrowserText,
+      userId,
+      userVerificationRequirement,
+      username,
+    } = this.$store.webAuthnRegister;
+
+    const getPubKeyCredParams = (signatureAlgorithms: string) => {
+      const pubKeyCredParams: PublicKeyCredentialParameters[] = [];
+
+      if (signatureAlgorithms === '') {
+        pubKeyCredParams.push({ alg: -7, type: 'public-key' });
+
+        return pubKeyCredParams;
+      }
+
+      const signatureAlgorithmsList = signatureAlgorithms.split(',');
+
+      signatureAlgorithmsList.forEach((value) => {
+        pubKeyCredParams.push({
+          alg: parseInt(value),
+          type: 'public-key',
+        });
+      });
+
+      return pubKeyCredParams;
+    };
+
+    const getExcludeCredentials = (excludeCredentialIds: string) => {
+      const excludeCredentials: PublicKeyCredentialDescriptor[] = [];
+
+      if (excludeCredentialIds === '') return excludeCredentials;
+
+      const excludeCredentialIdsList = excludeCredentialIds.split(',');
+
+      excludeCredentialIdsList.forEach((value) => {
+        excludeCredentials.push({
+          id: base64url.parse(value, { loose: true }),
+          type: 'public-key',
+        });
+      });
+
+      return excludeCredentials;
+    };
+
+    const getTransportsAsString = (transportsList: string | string[]) => {
+      if (transportsList === '' || transportsList.constructor !== Array) return '';
+
+      let transportsString = '';
+
+      transportsList.forEach((value) => {
+        transportsString += value + ',';
+      });
+
+      return transportsString.slice(0, -1);
+    };
+
+    return {
+      registerSecurityKey: () => {
+        if (!window.PublicKeyCredential) {
+          errorInput.value = unsupportedBrowserText;
+          registerForm.submit();
+
+          return;
+        }
+
+        const publicKey: PublicKeyCredentialCreationOptions = {
+          challenge: base64url.parse(challenge, { loose: true }),
+          pubKeyCredParams: getPubKeyCredParams(signatureAlgorithms),
+          rp: {
+            id: rpId,
+            name: rpEntityName,
+          },
+          user: {
+            displayName: username,
+            id: base64url.parse(userId, { loose: true }),
+            name: username,
+          },
+        };
+
+        if (attestationConveyancePreference !== 'not specified')
+          publicKey.attestation = attestationConveyancePreference;
+
+        const authenticatorSelection: AuthenticatorSelectionCriteria = {};
+        let isAuthenticatorSelectionSpecified = false;
+
+        if (authenticatorAttachment !== 'not specified') {
+          authenticatorSelection.authenticatorAttachment = authenticatorAttachment;
+          isAuthenticatorSelectionSpecified = true;
+        }
+
+        if (requireResidentKey !== 'not specified') {
+          if (requireResidentKey === 'Yes') authenticatorSelection.requireResidentKey = true;
+          else authenticatorSelection.requireResidentKey = false;
+          isAuthenticatorSelectionSpecified = true;
+        }
+
+        if (userVerificationRequirement !== 'not specified') {
+          authenticatorSelection.userVerification = userVerificationRequirement;
+          isAuthenticatorSelectionSpecified = true;
+        }
+
+        if (isAuthenticatorSelectionSpecified)
+          publicKey.authenticatorSelection = authenticatorSelection;
+
+        const excludeCredentials = getExcludeCredentials(excludeCredentialIds);
+        if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials;
+
+        if (parseInt(createTimeout) !== 0) publicKey.timeout = parseInt(createTimeout) * 1000;
+
+        navigator.credentials
+          .create({ publicKey })
+          .then((result) => {
+            if (
+              result instanceof PublicKeyCredential &&
+              result.response instanceof AuthenticatorAttestationResponse
+            ) {
+              const { getTransports } = result.response;
+
+              window.result = result;
+
+              const publicKeyCredentialId = result.rawId;
+
+              attestationObjectInput.value = base64url.stringify(
+                new Uint8Array(result.response.attestationObject),
+                { pad: false }
+              );
+
+              clientDataJSONInput.value = base64url.stringify(
+                new Uint8Array(result.response.clientDataJSON),
+                { pad: false }
+              );
+
+              publicKeyCredentialIdInput.value = base64url.stringify(
+                new Uint8Array(publicKeyCredentialId),
+                { pad: false }
+              );
+
+              if (typeof getTransports === 'function') {
+                const transports = getTransports();
+
+                if (transports) {
+                  transportsInput.value = getTransportsAsString(transports);
+                }
+              } else {
+                console.log(
+                  'Your browser is not able to recognize supported transport media for the authenticator.'
+                );
+              }
+
+              const initLabel = 'WebAuthn Authenticator (Default Label)';
+              let labelResult = window.prompt(
+                "Please input your registered authenticator's label",
+                initLabel
+              );
+              if (labelResult === null) labelResult = initLabel;
+
+              authenticatorLabelInput.value = labelResult;
+              registerForm.submit();
+            }
+          })
+          .catch(function (error) {
+            error.value = error;
+            registerForm.submit();
+          });
+      },
+    };
+  });
+});
diff --git a/src/global.d.ts b/src/global.d.ts
index bbf6664..a858d3e 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -3,5 +3,6 @@ import type { Alpine } from 'alpinejs';
 declare global {
   interface Window {
     Alpine: Alpine;
+    result?: PublicKeyCredential;
   }
 }
diff --git a/theme/keywind/login/components/molecules/username.ftl b/theme/keywind/login/components/molecules/username.ftl
index 0c373cb..ba63393 100644
--- a/theme/keywind/login/components/molecules/username.ftl
+++ b/theme/keywind/login/components/molecules/username.ftl
@@ -3,7 +3,7 @@
 
 <#macro kw linkHref="" linkTitle="" name="">
   <div class="flex items-center justify-center mb-4 space-x-2">
-    <b>${name}</b>
+    <span class="font-medium">${name}</span>
     <@link.kw
       color="primary"
       href=linkHref
diff --git a/theme/keywind/login/login-config-totp.ftl b/theme/keywind/login/login-config-totp.ftl
index 1e57ad7..e0b64c6 100644
--- a/theme/keywind/login/login-config-totp.ftl
+++ b/theme/keywind/login/login-config-totp.ftl
@@ -31,7 +31,7 @@
       <#if mode?? && mode="manual">
         <li>
           <p>${msg("loginTotpManualStep2")}</p>
-          <p class="font-bold text-xl">${totp.totpSecretEncoded}</p>
+          <p class="font-medium text-xl">${totp.totpSecretEncoded}</p>
         </li>
         <li>
           <@link.kw color="primary" href=totp.qrUrl>
diff --git a/theme/keywind/login/login-recovery-authn-code-config.ftl b/theme/keywind/login/login-recovery-authn-code-config.ftl
index a8cfc35..186d710 100644
--- a/theme/keywind/login/login-recovery-authn-code-config.ftl
+++ b/theme/keywind/login/login-recovery-authn-code-config.ftl
@@ -5,14 +5,14 @@
 <#import "components/atoms/checkbox.ftl" as checkbox>
 <#import "components/atoms/form.ftl" as form>
 
-<@layout.registrationLayout script="dist/recoveryCodes.js" ; section>
+<@layout.registrationLayout script="dist/recoveryCodes.js"; section>
   <#if section="header">
     ${msg("recovery-code-config-header")}
   <#elseif section="form">
     <div class="space-y-6" x-data="recoveryCodes">
       <@alert.kw color="warning">
         <div class="space-y-2">
-          <h4 class="font-bold">${msg("recovery-code-config-warning-title")}</h4>
+          <h4 class="font-medium">${msg("recovery-code-config-warning-title")}</h4>
           <p>${msg("recovery-code-config-warning-message")}</p>
         </div>
       </@alert.kw>
diff --git a/theme/keywind/login/resources/dist/assets/rfc4648-b81320ce.js b/theme/keywind/login/resources/dist/assets/rfc4648-b81320ce.js
new file mode 100644
index 0000000..307c47b
--- /dev/null
+++ b/theme/keywind/login/resources/dist/assets/rfc4648-b81320ce.js
@@ -0,0 +1 @@
+function w(f,r,a){var l;if(a===void 0&&(a={}),!r.codes){r.codes={};for(var v=0;v<r.chars.length;++v)r.codes[r.chars[v]]=v}if(!a.loose&&f.length*r.bits&7)throw new SyntaxError("Invalid padding");for(var b=f.length;f[b-1]==="=";)if(--b,!a.loose&&!((f.length-b)*r.bits&7))throw new SyntaxError("Invalid padding");for(var i=new((l=a.out)!=null?l:Uint8Array)(b*r.bits/8|0),t=0,s=0,h=0,e=0;e<b;++e){var u=r.codes[f[e]];if(u===void 0)throw new SyntaxError("Invalid character "+f[e]);s=s<<r.bits|u,t+=r.bits,t>=8&&(t-=8,i[h++]=255&s>>t)}if(t>=r.bits||255&s<<8-t)throw new SyntaxError("Unexpected end of data");return i}function x(f,r,a){a===void 0&&(a={});for(var l=a,v=l.pad,b=v===void 0?!0:v,i=(1<<r.bits)-1,t="",s=0,h=0,e=0;e<f.length;++e)for(h=h<<8|255&f[e],s+=8;s>r.bits;)s-=r.bits,t+=r.chars[i&h>>s];if(s&&(t+=r.chars[i&h<<r.bits-s]),b)for(;t.length*r.bits&7;)t+="=";return t}var o={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_",bits:6},y={parse:function(r,a){return w(r,o,a)},stringify:function(r,a){return x(r,o,a)}};export{y as b};
diff --git a/theme/keywind/login/resources/dist/index.css b/theme/keywind/login/resources/dist/index.css
index 32ad116..e42c981 100644
--- a/theme/keywind/login/resources/dist/index.css
+++ b/theme/keywind/login/resources/dist/index.css
@@ -1 +1 @@
-*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-4{height:1rem}.h-6{height:1.5rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-full{width:100%}.w-4{width:1rem}.w-6{width:1.5rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.columns-2{-moz-columns:2;columns:2}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-4{padding-left:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-primary-50:hover{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]: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='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.shadow-lg{--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000}.focus\:ring-2,.focus\:ring{--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .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}.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}}[x-cloak]{display:none!important}.separate{display:flex;align-items:center;text-align:center}.separate:after,.separate:before{content:"";flex:1 1 0%;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.separate:not(:empty):after{margin-left:.5rem}.separate:not(:empty):before{margin-right:.5rem}.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}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0px}.-left-4{left:-1rem}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mr-1{margin-right:.25rem}.mb-6{margin-bottom:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-4{height:1rem}.h-6{height:1.5rem}.max-h-80{max-height:20rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-full{width:100%}.w-4{width:1rem}.w-6{width:1.5rem}.max-w-md{max-width:28rem}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.columns-2{-moz-columns:2;columns:2}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.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)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-y-scroll{overflow-y:scroll}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-secondary-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-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))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-4{padding:1rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.pl-4{padding-left:1rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:500}.font-bold{font-weight:700}.text-secondary-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-primary-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(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)}.hover\:border-transparent:hover{border-color:transparent}.hover\:bg-primary-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.hover\:bg-secondary-200:hover{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.hover\:bg-provider-bitbucket\/10:hover{background-color:#0052cc1a}.hover\:bg-provider-facebook\/10:hover{background-color:#1877f21a}.hover\:bg-provider-github\/10:hover{background-color:#1817171a}.hover\:bg-provider-gitlab\/10:hover{background-color:#fc6d261a}.hover\:bg-provider-google\/10:hover{background-color:#4285f41a}.hover\:bg-provider-instagram\/10:hover{background-color:#e4405f1a}.hover\:bg-provider-linkedin\/10:hover{background-color:#0a66c21a}.hover\:bg-provider-microsoft\/10:hover{background-color:#5e5e5e1a}.hover\:bg-provider-oidc\/10:hover{background-color:#f78c401a}.hover\:bg-provider-openshift\/10:hover{background-color:#ee00001a}.hover\:bg-provider-paypal\/10:hover{background-color:#00457c1a}.hover\:bg-provider-stackoverflow\/10:hover{background-color:#f580251a}.hover\:bg-provider-twitter\/10:hover{background-color:#1da1f21a}.hover\:bg-secondary-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.hover\:text-secondary-900:hover{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}.focus\:border-primary-300:focus{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-primary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity))}.focus\:ring-secondary-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\:ring-primary-200:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity: .5}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}@media (min-width: 640px){.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
diff --git a/theme/keywind/login/resources/dist/webAuthnAuthenticate.js b/theme/keywind/login/resources/dist/webAuthnAuthenticate.js
new file mode 100644
index 0000000..0be4e9d
--- /dev/null
+++ b/theme/keywind/login/resources/dist/webAuthnAuthenticate.js
@@ -0,0 +1 @@
+import{m as g}from"./assets/module.esm-90313d2c.js";import{b as n}from"./assets/rfc4648-b81320ce.js";document.addEventListener("alpine:init",()=>{g.data("webAuthnAuthenticate",function(){const{authenticatorDataInput:c,authnSelectForm:l,clientDataJSONInput:p,credentialIdInput:f,errorInput:r,signatureInput:d,userHandleInput:h,webAuthnForm:i}=this.$refs,{challenge:m,createTimeout:s,isUserIdentified:A,rpId:w,unsupportedBrowserText:y,userVerification:o}=this.$store.webAuthnAuthenticate,u=a=>{if(!window.PublicKeyCredential){r.value=y,i.submit();return}const t={challenge:n.parse(m,{loose:!0}),rpId:w};a.length&&(t.allowCredentials=a),parseInt(s)!==0&&(t.timeout=parseInt(s)*1e3),o!=="not specified"&&(t.userVerification=o),navigator.credentials.get({publicKey:t}).then(e=>{e instanceof PublicKeyCredential&&e.response instanceof AuthenticatorAssertionResponse&&(window.result=e,c.value=n.stringify(new Uint8Array(e.response.authenticatorData),{pad:!1}),p.value=n.stringify(new Uint8Array(e.response.clientDataJSON),{pad:!1}),d.value=n.stringify(new Uint8Array(e.response.signature),{pad:!1}),f.value=e.id,e.response.userHandle&&(h.value=n.stringify(new Uint8Array(e.response.userHandle),{pad:!1})),i.submit())}).catch(e=>{r.value=e,i.submit()})},b=()=>{const a=[],t=Array.from(l.elements);t.length&&t.forEach(e=>{e instanceof HTMLInputElement&&a.push({id:n.parse(e.value,{loose:!0}),type:"public-key"})}),u(a)};return{webAuthnAuthenticate:()=>{if(!A){u([]);return}b()}}})});
diff --git a/theme/keywind/login/resources/dist/webAuthnRegister.js b/theme/keywind/login/resources/dist/webAuthnRegister.js
new file mode 100644
index 0000000..488f8d7
--- /dev/null
+++ b/theme/keywind/login/resources/dist/webAuthnRegister.js
@@ -0,0 +1 @@
+import{m as T}from"./assets/module.esm-90313d2c.js";import{b as a}from"./assets/rfc4648-b81320ce.js";document.addEventListener("alpine:init",()=>{T.data("webAuthnRegister",function(){const{attestationObjectInput:m,authenticatorLabelInput:g,clientDataJSONInput:A,errorInput:I,publicKeyCredentialIdInput:w,registerForm:s,transportsInput:C}=this.$refs,{attestationConveyancePreference:u,authenticatorAttachment:c,challenge:K,createTimeout:l,excludeCredentialIds:v,requireResidentKey:p,rpEntityName:S,rpId:P,signatureAlgorithms:R,unsupportedBrowserText:x,userId:E,userVerificationRequirement:d,username:f}=this.$store.webAuthnRegister,L=t=>{const e=[];return t===""?(e.push({alg:-7,type:"public-key"}),e):(t.split(",").forEach(r=>{e.push({alg:parseInt(r),type:"public-key"})}),e)},q=t=>{const e=[];return t===""||t.split(",").forEach(r=>{e.push({id:a.parse(r,{loose:!0}),type:"public-key"})}),e},N=t=>{if(t===""||t.constructor!==Array)return"";let e="";return t.forEach(i=>{e+=i+","}),e.slice(0,-1)};return{registerSecurityKey:()=>{if(!window.PublicKeyCredential){I.value=x,s.submit();return}const t={challenge:a.parse(K,{loose:!0}),pubKeyCredParams:L(R),rp:{id:P,name:S},user:{displayName:f,id:a.parse(E,{loose:!0}),name:f}};u!=="not specified"&&(t.attestation=u);const e={};let i=!1;c!=="not specified"&&(e.authenticatorAttachment=c,i=!0),p!=="not specified"&&(p==="Yes"?e.requireResidentKey=!0:e.requireResidentKey=!1,i=!0),d!=="not specified"&&(e.userVerification=d,i=!0),i&&(t.authenticatorSelection=e);const r=q(v);r.length>0&&(t.excludeCredentials=r),parseInt(l)!==0&&(t.timeout=parseInt(l)*1e3),navigator.credentials.create({publicKey:t}).then(n=>{if(n instanceof PublicKeyCredential&&n.response instanceof AuthenticatorAttestationResponse){const{getTransports:h}=n.response;window.result=n;const O=n.rawId;if(m.value=a.stringify(new Uint8Array(n.response.attestationObject),{pad:!1}),A.value=a.stringify(new Uint8Array(n.response.clientDataJSON),{pad:!1}),w.value=a.stringify(new Uint8Array(O),{pad:!1}),typeof h=="function"){const b=h();b&&(C.value=N(b))}else console.log("Your browser is not able to recognize supported transport media for the authenticator.");const y="WebAuthn Authenticator (Default Label)";let o=window.prompt("Please input your registered authenticator's label",y);o===null&&(o=y),g.value=o,s.submit()}}).catch(function(n){n.value=n,s.submit()})}}})});
diff --git a/theme/keywind/login/select-authenticator.ftl b/theme/keywind/login/select-authenticator.ftl
index 7f0f8bb..26a25fe 100644
--- a/theme/keywind/login/select-authenticator.ftl
+++ b/theme/keywind/login/select-authenticator.ftl
@@ -1,28 +1,28 @@
 <#import "template.ftl" as layout>
+<#import "components/atoms/form.ftl" as form>
+<#import "components/atoms/link.ftl" as link>
+
 <@layout.registrationLayout displayInfo=false; section>
-    <#if section = "header">
-        ${kcSanitize(msg("loginChooseAuthenticator-registration-title"))}
-    <#elseif section = "form">
-
-        <script type="text/javascript">
-            function fillAndSubmit(authExecId) {
-                document.getElementById('authexec-hidden-input').value = authExecId;
-                document.getElementById('kc-select-credential-form').submit();
-            }
-        </script>
-
-        <form id="kc-select-credential-form" action="${url.loginAction}" class="m-0 space-y-4" method="post">
-            <div class="flex flex-col space-y-4">
-                <#list auth.authenticationSelections as authenticationSelection>
-                    <div class="px-4 py-2 relative rounded-lg cursor-pointer hover:bg-primary-50" onclick="fillAndSubmit('${authenticationSelection.authExecId}')">
-                        <p class="font-bold text-lg">${msg('${authenticationSelection.displayName}')}</p>
-                        <p>${msg('${authenticationSelection.helpText}')}</p>
-                    </div>
-                </#list>
-            </div>
-            <input type="hidden" id="authexec-hidden-input" name="authenticationExecution" />
-        </form>
-
-    </#if>
+  <#if section="header">
+    ${msg("loginChooseAuthenticator")}
+  <#elseif section="form">
+    <div x-data>
+      <@form.kw action=url.loginAction method="post" x\-ref="selectCredentialForm">
+        <input name="authenticationExecution" type="hidden" x-ref="authExecInput" />
+        <#list auth.authenticationSelections as authenticationSelection>
+          <div>
+            <@link.kw
+              @click="$refs.authExecInput.value = '${authenticationSelection.authExecId}'; $refs.selectCredentialForm.submit()"
+              color="primary"
+              component="button"
+              type="button"
+            >
+              ${msg("${authenticationSelection.displayName}")}
+            </@link.kw>
+            <div class="text-sm">${msg("${authenticationSelection.helpText}")}</div>
+          </div>
+        </#list>
+      </@form.kw>
+    </div>
+  </#if>
 </@layout.registrationLayout>
-
diff --git a/theme/keywind/login/webauthn-authenticate.ftl b/theme/keywind/login/webauthn-authenticate.ftl
index 2d914f6..189de50 100644
--- a/theme/keywind/login/webauthn-authenticate.ftl
+++ b/theme/keywind/login/webauthn-authenticate.ftl
@@ -1,129 +1,71 @@
 <#import "template.ftl" as layout>
-<#import "components/button/primary.ftl" as buttonPrimary>
-<#import "components/button/secondary.ftl" as buttonSecondary>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
 
-<@layout.registrationLayout; section>
-<#if section="header">
-    ${msg("webauthn-login-title")}
-
-<#elseif section = "form">
-    <div class="m-0">
-        <form id="webauth" action="${url.loginAction}" method="post">
-            <input type="hidden" id="clientDataJSON" name="clientDataJSON"/>
-            <input type="hidden" id="authenticatorData" name="authenticatorData"/>
-            <input type="hidden" id="signature" name="signature"/>
-            <input type="hidden" id="credentialId" name="credentialId"/>
-            <input type="hidden" id="userHandle" name="userHandle"/>
-            <input type="hidden" id="error" name="error"/>
+<@layout.registrationLayout script="dist/webAuthnAuthenticate.js"; section>
+  <#if section="title">
+    title
+  <#elseif section="header">
+    ${kcSanitize(msg("webauthn-login-title"))?no_esc}
+  <#elseif section="form">
+    <div x-data="webAuthnAuthenticate">
+      <form action="${url.loginAction}" method="post" x-ref="webAuthnForm">
+        <input name="authenticatorData" type="hidden" x-ref="authenticatorDataInput" />
+        <input name="clientDataJSON" type="hidden" x-ref="clientDataJSONInput" />
+        <input name="credentialId" type="hidden" x-ref="credentialIdInput" />
+        <input name="error" type="hidden" x-ref="errorInput" />
+        <input name="signature" type="hidden" x-ref="signatureInput" />
+        <input name="userHandle" type="hidden" x-ref="userHandleInput" />
+      </form>
+      <#if authenticators??>
+        <form x-ref="authnSelectForm">
+          <#list authenticators.authenticators as authenticator>
+            <input value="${authenticator.credentialId}" type="hidden" />
+          </#list>
         </form>
-
-        <#if authenticators??>
-            <form id="authn_select" class="m-0">
-                <#list authenticators.authenticators as authenticator>
-                    <input type="hidden" name="authn_use_chk" value="${authenticator.credentialId}"/>
-                </#list>
-            </form>
-
-            <#if shouldDisplayAuthenticators?? && shouldDisplayAuthenticators>
-                <#if authenticators.authenticators?size gt 1>
-                    <p class="font-bold py-2 text-xl">${kcSanitize(msg("webauthn-available-authenticators"))?no_esc}</p>
-                </#if>
-
-                <#list authenticators.authenticators as authenticator>
-                    <div class="my-5">
-                        <p><span class="font-bold">${kcSanitize(msg('${authenticator.label}'))?no_esc}</span>
-                        <#--<#if authenticator.transports?? && authenticator.transports.displayNameProperties?has_content>
-                            (<#list authenticator.transports.displayNameProperties as nameProperty>
-                                ${kcSanitize(msg('${nameProperty!}'))?no_esc}
-                                <#if nameProperty?has_next>, </#if>
-                            </#list>)
-                        </#if>-->
-                        </p>
-
-                        <p>${kcSanitize(msg('webauthn-createdAt-label'))?no_esc}: <span class="font-bold">${kcSanitize(authenticator.createdAt)?no_esc}</span></p>
-                    </div>
-                </#list>
-            </#if>
+        <#if shouldDisplayAuthenticators?? && shouldDisplayAuthenticators>
+          <#if authenticators.authenticators?size gt 1>
+            <p>${kcSanitize(msg("webauthn-available-authenticators"))?no_esc}</p>
+          </#if>
+          <#list authenticators.authenticators as authenticator>
+            <div>
+              <div class="font-medium">${kcSanitize(msg("${authenticator.label}"))?no_esc}</div>
+              <#if authenticator.transports?? && authenticator.transports.displayNameProperties?has_content>
+                <div>
+                  <#list authenticator.transports.displayNameProperties as nameProperty>
+                    <span>${kcSanitize(msg("${nameProperty!}"))?no_esc}</span>
+                    <#if nameProperty?has_next>
+                      <span>, </span>
+                    </#if>
+                  </#list>
+                </div>
+              </#if>
+              <div class="text-sm">
+                <span>${kcSanitize(msg("webauthn-createdAt-label"))?no_esc}</span>
+                <span>${kcSanitize(authenticator.createdAt)?no_esc}</span>
+              </div>
+            </div>
+          </#list>
         </#if>
-
-        <@buttonPrimary.kw type="button" onclick="webAuthnAuthenticate()" autofocus="autofocus">
-          ${msg("webauthn-doAuthenticate")}
-        </@buttonPrimary.kw>
+      </#if>
+      <@buttonGroup.kw>
+        <@button.kw @click="webAuthnAuthenticate" color="primary" type="button">
+          ${kcSanitize(msg("webauthn-doAuthenticate"))}
+        </@button.kw>
+      </@buttonGroup.kw>
     </div>
-
-<script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
-<script type="text/javascript">
-    function webAuthnAuthenticate() {
-        let isUserIdentified = ${isUserIdentified};
-        if (!isUserIdentified) {
-            doAuthenticate([]);
-            return;
-        }
-        checkAllowCredentials();
-    }
-    function checkAllowCredentials() {
-        let allowCredentials = [];
-        let authn_use = document.forms['authn_select'].authn_use_chk;
-        if (authn_use !== undefined) {
-            if (authn_use.length === undefined) {
-                allowCredentials.push({
-                    id: base64url.decode(authn_use.value, {loose: true}),
-                    type: 'public-key',
-                });
-            } else {
-                for (let i = 0; i < authn_use.length; i++) {
-                    allowCredentials.push({
-                        id: base64url.decode(authn_use[i].value, {loose: true}),
-                        type: 'public-key',
-                    });
-                }
-            }
-        }
-        doAuthenticate(allowCredentials);
-    }
-function doAuthenticate(allowCredentials) {
-    // Check if WebAuthn is supported by this browser
-    if (!window.PublicKeyCredential) {
-        document.querySelector("#error").value = "${msg("webauthn-unsupported-browser-text")?no_esc}";
-        document.querySelector("#webauth").submit();
-        return;
-    }
-    let challenge = "${challenge}";
-    let userVerification = "${userVerification}";
-    let rpId = "${rpId}";
-    let publicKey = {
-        rpId : rpId,
-        challenge: base64url.decode(challenge, { loose: true })
-    };
-    let createTimeout = ${createTimeout};
-    if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
-    if (allowCredentials.length) {
-        publicKey.allowCredentials = allowCredentials;
-    }
-    if (userVerification !== 'not specified') publicKey.userVerification = userVerification;
-    navigator.credentials.get({publicKey})
-        .then((result) => {
-            window.result = result;
-            let clientDataJSON = result.response.clientDataJSON;
-            let authenticatorData = result.response.authenticatorData;
-            let signature = result.response.signature;
-            document.querySelector("#clientDataJSON").value = base64url.encode(new Uint8Array(clientDataJSON), { pad: false });
-            document.querySelector("#authenticatorData").value = base64url.encode(new Uint8Array(authenticatorData), { pad: false });
-            document.querySelector("#signature").value = base64url.encode(new Uint8Array(signature), { pad: false });
-            document.querySelector("#credentialId").value = result.id;
-            if(result.response.userHandle) {
-                document.querySelector("#userHandle").value = base64url.encode(new Uint8Array(result.response.userHandle), { pad: false });
-            }
-            document.querySelector("#webauth").submit();
-        })
-        .catch((err) => {
-            document.querySelector("#error").value = err;
-            document.querySelector("#webauth").submit();
-        })
-    ;
-}
-</script>
-<#elseif section = "info">
-
-</#if>
+  </#if>
 </@layout.registrationLayout>
+
+<script>
+  document.addEventListener('alpine:init', () => {
+    Alpine.store('webAuthnAuthenticate', {
+      challenge: '${challenge}',
+      createTimeout: '${createTimeout}',
+      isUserIdentified: '${isUserIdentified}',
+      rpId: '${rpId}',
+      unsupportedBrowserText: '${msg("webauthn-unsupported-browser-text")?no_esc}',
+      userVerification: '${userVerification}',
+    })
+  })
+</script>
diff --git a/theme/keywind/login/webauthn-error.ftl b/theme/keywind/login/webauthn-error.ftl
index 8b8e2ad..852d1e3 100644
--- a/theme/keywind/login/webauthn-error.ftl
+++ b/theme/keywind/login/webauthn-error.ftl
@@ -1,36 +1,34 @@
 <#import "template.ftl" as layout>
-<#import "components/button/primary.ftl" as buttonPrimary>
-<#import "components/button/secondary.ftl" as buttonSecondary>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
 
 <@layout.registrationLayout displayMessage=true; section>
-    <#if section = "header">
-        ${kcSanitize(msg("webauthn-error-title"))}
-    <#elseif section = "form">
-
-        <script type="text/javascript">
-            refreshPage = () => {
-                document.getElementById('isSetRetry').value = 'retry';
-                document.getElementById('executionValue').value = '${execution}';
-                document.getElementById('kc-error-credential-form').submit();
-            }
-        </script>
-
-        <form id="kc-error-credential-form" action="${url.loginAction}" method="post" class="m-0">
-            <input type="hidden" id="executionValue" name="authenticationExecution"/>
-            <input type="hidden" id="isSetRetry" name="isSetRetry"/>
-        </form>
-
-        <@buttonPrimary.kw type="button" tabindex="4" onclick="refreshPage()">
-          ${kcSanitize(msg("doTryAgain"))}
-        </@buttonPrimary.kw>
-
+  <#if section="header">
+    ${kcSanitize(msg("webauthn-error-title"))?no_esc}
+  <#elseif section="form">
+    <div x-data>
+      <form action="${url.loginAction}" method="post" x-ref="errorCredentialForm">
+        <input name="authenticationExecution" type="hidden" x-ref="executionValueInput" />
+        <input name="isSetRetry" type="hidden" x-ref="isSetRetryInput" />
+      </form>
+      <@buttonGroup.kw>
+        <@button.kw
+          @click="$refs.executionValueInput.value = '${execution}'; $refs.isSetRetryInput.value = 'retry'; $refs.errorCredentialForm.submit()"
+          color="primary"
+          name="try-again"
+          tabindex="4"
+          type="button"
+        >
+          ${kcSanitize(msg("doTryAgain"))?no_esc}
+        </@button.kw>
         <#if isAppInitiatedAction??>
-            <form action="${url.loginAction}" method="post" class="m-0">
-                <@buttonSecondary.kw name="cancel-aia" type="submit" value="true">
-                  ${kcSanitize(msg("doCancel"))}
-                </@buttonSecondary.kw>
-            </form>
+          <form action="${url.loginAction}" method="post">
+            <@button.kw color="secondary" name="cancel-aia" type="submit" value="true">
+              ${msg("doCancel")}
+            </@button.kw>
+          </form>
         </#if>
-
-    </#if>
+      </@buttonGroup.kw>
+    </div>
+  </#if>
 </@layout.registrationLayout>
diff --git a/theme/keywind/login/webauthn-register.ftl b/theme/keywind/login/webauthn-register.ftl
index 7700c79..57f4dad 100644
--- a/theme/keywind/login/webauthn-register.ftl
+++ b/theme/keywind/login/webauthn-register.ftl
@@ -1,188 +1,54 @@
 <#import "template.ftl" as layout>
-<#import "components/button/primary.ftl" as buttonPrimary>
-<#import "components/button/secondary.ftl" as buttonSecondary>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
 
-<@layout.registrationLayout; section>
-<#if section="header">
-    ${kcSanitize(msg("webauthn-registration-title"))}
-<#elseif section = "form">
-
-    <form id="register" action="${url.loginAction}" class="m-0 space-y-4" method="post">
-        <div class="${properties.kcFormGroupClass!}">
-            <input type="hidden" id="clientDataJSON" name="clientDataJSON"/>
-            <input type="hidden" id="attestationObject" name="attestationObject"/>
-            <input type="hidden" id="publicKeyCredentialId" name="publicKeyCredentialId"/>
-            <input type="hidden" id="authenticatorLabel" name="authenticatorLabel"/>
-            <input type="hidden" id="transports" name="transports"/>
-            <input type="hidden" id="error" name="error"/>
-        </div>
-    </form>
-
-    <script type="text/javascript" src="${url.resourcesPath}/js/base64url.js"></script>
-    <script type="text/javascript">
-
-        function registerSecurityKey() {
-
-            // Check if WebAuthn is supported by this browser
-            if (!window.PublicKeyCredential) {
-                document.querySelector("#error").value = "${msg("webauthn-unsupported-browser-text")?no_esc}";
-                document.querySelector("#register").submit();
-                return;
-            }
-
-            // mandatory parameters
-            let challenge = "${challenge}";
-            let userid = "${userid}";
-            let username = "${username}";
-
-            let signatureAlgorithms = "${signatureAlgorithms}";
-            let pubKeyCredParams = getPubKeyCredParams(signatureAlgorithms);
-
-            let rpEntityName = "${rpEntityName}";
-            let rp = {name: rpEntityName};
-
-            let publicKey = {
-                challenge: base64url.decode(challenge, {loose: true}),
-                rp: rp,
-                user: {
-                    id: base64url.decode(userid, {loose: true}),
-                    name: username,
-                    displayName: username
-                },
-                pubKeyCredParams: pubKeyCredParams,
-            };
-
-            // optional parameters
-            let rpId = "${rpId}";
-            publicKey.rp.id = rpId;
-
-            let attestationConveyancePreference = "${attestationConveyancePreference}";
-            if (attestationConveyancePreference !== 'not specified') publicKey.attestation = attestationConveyancePreference;
-
-            let authenticatorSelection = {};
-            let isAuthenticatorSelectionSpecified = false;
-
-            let authenticatorAttachment = "${authenticatorAttachment}";
-            if (authenticatorAttachment !== 'not specified') {
-                authenticatorSelection.authenticatorAttachment = authenticatorAttachment;
-                isAuthenticatorSelectionSpecified = true;
-            }
-
-            let requireResidentKey = "${requireResidentKey}";
-            if (requireResidentKey !== 'not specified') {
-                if (requireResidentKey === 'Yes')
-                    authenticatorSelection.requireResidentKey = true;
-                else
-                    authenticatorSelection.requireResidentKey = false;
-                isAuthenticatorSelectionSpecified = true;
-            }
-
-            let userVerificationRequirement = "${userVerificationRequirement}";
-            if (userVerificationRequirement !== 'not specified') {
-                authenticatorSelection.userVerification = userVerificationRequirement;
-                isAuthenticatorSelectionSpecified = true;
-            }
-
-            if (isAuthenticatorSelectionSpecified) publicKey.authenticatorSelection = authenticatorSelection;
-
-            let createTimeout = ${createTimeout};
-            if (createTimeout !== 0) publicKey.timeout = createTimeout * 1000;
-
-            let excludeCredentialIds = "${excludeCredentialIds}";
-            let excludeCredentials = getExcludeCredentials(excludeCredentialIds);
-            if (excludeCredentials.length > 0) publicKey.excludeCredentials = excludeCredentials;
-
-            navigator.credentials.create({publicKey})
-                .then(function (result) {
-                    window.result = result;
-                    let clientDataJSON = result.response.clientDataJSON;
-                    let attestationObject = result.response.attestationObject;
-                    let publicKeyCredentialId = result.rawId;
-
-                    document.querySelector("#clientDataJSON").value = base64url.encode(new Uint8Array(clientDataJSON), {pad: false});
-                    document.querySelector("#attestationObject").value = base64url.encode(new Uint8Array(attestationObject), {pad: false});
-                    document.querySelector("#publicKeyCredentialId").value = base64url.encode(new Uint8Array(publicKeyCredentialId), {pad: false});
-
-                    if (typeof result.response.getTransports === "function") {
-                        let transports = result.response.getTransports();
-                        if (transports) {
-                            document.querySelector("#transports").value = getTransportsAsString(transports);
-                        }
-                    } else {
-                        console.log("Your browser is not able to recognize supported transport media for the authenticator.");
-                    }
-
-                    let initLabel = "WebAuthn Authenticator (Default Label)";
-                    let labelResult = window.prompt("Please input your registered authenticator's label", initLabel);
-                    if (labelResult === null) labelResult = initLabel;
-                    document.querySelector("#authenticatorLabel").value = labelResult;
-
-                    document.querySelector("#register").submit();
-
-                })
-                .catch(function (err) {
-                    document.querySelector("#error").value = err;
-                    document.querySelector("#register").submit();
-                });
-        }
-
-        function getPubKeyCredParams(signatureAlgorithms) {
-            let pubKeyCredParams = [];
-            if (signatureAlgorithms === "") {
-                pubKeyCredParams.push({type: "public-key", alg: -7});
-                return pubKeyCredParams;
-            }
-            let signatureAlgorithmsList = signatureAlgorithms.split(',');
-
-            for (let i = 0; i < signatureAlgorithmsList.length; i++) {
-                pubKeyCredParams.push({
-                    type: "public-key",
-                    alg: signatureAlgorithmsList[i]
-                });
-            }
-            return pubKeyCredParams;
-        }
-
-        function getExcludeCredentials(excludeCredentialIds) {
-            let excludeCredentials = [];
-            if (excludeCredentialIds === "") return excludeCredentials;
-
-            let excludeCredentialIdsList = excludeCredentialIds.split(',');
-
-            for (let i = 0; i < excludeCredentialIdsList.length; i++) {
-                excludeCredentials.push({
-                    type: "public-key",
-                    id: base64url.decode(excludeCredentialIdsList[i],
-                    {loose: true})
-                });
-            }
-            return excludeCredentials;
-        }
-
-        function getTransportsAsString(transportsList) {
-            if (transportsList === '' || transportsList.constructor !== Array) return "";
-
-            let transportsString = "";
-
-            for (let i = 0; i < transportsList.length; i++) {
-                transportsString += transportsList[i] + ",";
-            }
-
-            return transportsString.slice(0, -1);
-        }
-    </script>
-
-    <@buttonPrimary.kw type="submit" onclick="registerSecurityKey()">
-      ${kcSanitize(msg("doRegister"))}
-    </@buttonPrimary.kw>
-
-    <#if !isSetRetry?has_content && isAppInitiatedAction?has_content>
-        <form action="${url.loginAction}" method="post" class="m-0">
-            <@buttonSecondary.kw name="cancel-aia" type="submit" value="true">
-              ${kcSanitize(msg("doCancel"))}
-            </@buttonSecondary.kw>
-        </form>
-    </#if>
-
-</#if>
+<@layout.registrationLayout script="dist/webAuthnRegister.js"; section>
+  <#if section="title">
+    title
+  <#elseif section="header">
+    ${kcSanitize(msg("webauthn-registration-title"))?no_esc}
+  <#elseif section="form">
+    <div x-data="webAuthnRegister">
+      <form action="${url.loginAction}" method="post" x-ref="registerForm">
+        <input name="attestationObject" type="hidden" x-ref="attestationObjectInput" />
+        <input name="authenticatorLabel" type="hidden" x-ref="authenticatorLabelInput" />
+        <input name="clientDataJSON" type="hidden" x-ref="clientDataJSONInput" />
+        <input name="error" type="hidden" x-ref="errorInput" />
+        <input name="publicKeyCredentialId" type="hidden" x-ref="publicKeyCredentialIdInput" />
+        <input name="transports" type="hidden" x-ref="transportsInput" />
+      </form>
+      <@buttonGroup.kw>
+        <@button.kw @click="registerSecurityKey" color="primary" type="submit">
+          ${msg("doRegister")}
+        </@button.kw>
+        <#if !isSetRetry?has_content && isAppInitiatedAction?has_content>
+          <form action="${url.loginAction}" method="post">
+            <@button.kw color="secondary" name="cancel-aia" type="submit" value="true">
+              ${msg("doCancel")}
+            </@button.kw>
+          </form>
+        </#if>
+      </@buttonGroup.kw>
+    </div>
+  </#if>
 </@layout.registrationLayout>
+
+<script>
+  document.addEventListener('alpine:init', () => {
+    Alpine.store('webAuthnRegister', {
+      attestationConveyancePreference: '${attestationConveyancePreference}',
+      authenticatorAttachment: '${authenticatorAttachment}',
+      challenge: '${challenge}',
+      createTimeout: '${createTimeout}',
+      excludeCredentialIds: '${excludeCredentialIds}',
+      requireResidentKey: '${requireResidentKey}',
+      rpEntityName: '${rpEntityName}',
+      rpId: '${rpId}',
+      signatureAlgorithms: '${signatureAlgorithms}',
+      unsupportedBrowserText: '${msg("webauthn-unsupported-browser-text")?no_esc}',
+      userId: '${userid}',
+      userVerificationRequirement: '${userVerificationRequirement}',
+      username: '${username}',
+    })
+  })
+</script>
diff --git a/vite.config.ts b/vite.config.ts
index c2962d8..3a18d54 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,12 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   build: {
     rollupOptions: {
-      input: ['src/index.ts', 'src/data/recoveryCodes.ts'],
+      input: [
+        'src/index.ts',
+        'src/data/recoveryCodes.ts',
+        'src/data/webAuthnAuthenticate.ts',
+        'src/data/webAuthnRegister.ts',
+      ],
       output: {
         assetFileNames: '[name][extname]',
         dir: 'theme/keywind/login/resources/dist',