@keenthemes/ktui 1.0.28 → 1.1.0

package/dist/styles.css

@@ -9,18 +9,21 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
     --color-red-950: oklch(25.8% 0.092 26.042);
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
-    --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-700: oklch(55.4% 0.135 66.442);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
+    --color-yellow-900: oklch(42.1% 0.095 57.708);
     --color-yellow-950: oklch(28.6% 0.066 53.813);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
@@ -30,28 +33,32 @@
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-green-900: oklch(39.3% 0.095 152.535);
     --color-green-950: oklch(26.6% 0.065 152.934);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
-    --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-blue-950: oklch(28.2% 0.091 267.935);
     --color-violet-50: oklch(96.9% 0.016 293.756);
     --color-violet-100: oklch(94.3% 0.029 294.588);
-    --color-violet-200: oklch(89.4% 0.057 293.283);
     --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-violet-700: oklch(49.1% 0.27 292.581);
     --color-violet-800: oklch(43.2% 0.232 292.759);
     --color-violet-950: oklch(28.3% 0.141 291.089);
+    --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-400: oklch(71.4% 0.203 305.504);
     --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
     --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-purple-900: oklch(38.1% 0.176 304.987);
     --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -111,9 +118,11 @@
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --blur-sm: 8px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -296,17 +305,6 @@
   .visible {
     visibility: visible;
   }
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border-width: 0;
-  }
   .absolute {
     position: absolute;
   }
@@ -328,9 +326,6 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -355,12 +350,6 @@
       max-width: 96rem;
     }
   }
-  .mx-0\.5 {
-    margin-inline: calc(var(--spacing) * 0.5);
-  }
-  .mx-1 {
-    margin-inline: calc(var(--spacing) * 1);
-  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -397,9 +386,6 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
-  .mr-1 {
-    margin-right: calc(var(--spacing) * 1);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -415,12 +401,12 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
   .-ml-1 {
     margin-left: calc(var(--spacing) * -1);
   }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -477,9 +463,6 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
-  .h-8 {
-    height: calc(var(--spacing) * 8);
-  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -513,12 +496,6 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
-  .w-10 {
-    width: calc(var(--spacing) * 10);
-  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -570,15 +547,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
   .grow {
     flex-grow: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -587,26 +558,12 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-y-0 {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-2 {
-    --tw-translate-y: calc(var(--spacing) * 2);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
   .animate-spin {
     animation: var(--animate-spin);
   }
-  .cursor-not-allowed {
-    cursor: not-allowed;
-  }
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .resize {
     resize: both;
   }
@@ -622,12 +579,6 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -652,8 +603,8 @@
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
   }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
@@ -743,9 +694,6 @@
   .overflow-auto {
     overflow: auto;
   }
-  .overflow-hidden {
-    overflow: hidden;
-  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -764,17 +712,6 @@
   .rounded-md {
     border-radius: calc(var(--radius) - 2px);
   }
-  .rounded-sm {
-    border-radius: calc(var(--radius) - 4px);
-  }
-  .rounded-t {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-  }
-  .rounded-b {
-    border-bottom-right-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -795,16 +732,9 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .border-blue-200 {
     border-color: var(--color-blue-200);
   }
-  .border-blue-500 {
-    border-color: var(--color-blue-500);
-  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -826,9 +756,6 @@
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
-  .bg-blue-100 {
-    background-color: var(--color-blue-100);
-  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -871,18 +798,9 @@
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
-  .bg-transparent {
-    background-color: transparent;
-  }
   .bg-white {
     background-color: var(--color-white);
   }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -928,9 +846,6 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
-  .py-3 {
-    padding-block: calc(var(--spacing) * 3);
-  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -943,15 +858,9 @@
   .ps-5 {
     padding-inline-start: calc(var(--spacing) * 5);
   }
-  .pt-3 {
-    padding-top: calc(var(--spacing) * 3);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
@@ -1021,15 +930,9 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
-  .text-blue-800 {
-    color: var(--color-blue-800);
-  }
   .text-foreground {
     color: var(--foreground);
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -1072,16 +975,10 @@
   .text-white {
     color: var(--color-white);
   }
-  .uppercase {
-    text-transform: uppercase;
-  }
   .antialiased {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  .opacity-0 {
-    opacity: 0%;
-  }
   .opacity-25 {
     opacity: 25%;
   }
@@ -1107,17 +1004,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-blue-300 {
-    --tw-ring-color: var(--color-blue-300);
-  }
   .ring-gray-400 {
     --tw-ring-color: var(--color-gray-400);
   }
@@ -1150,20 +1040,6 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .hover\:bg-blue-50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-50);
-      }
-    }
-  }
-  .hover\:bg-blue-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-200);
-      }
-    }
-  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -1185,20 +1061,6 @@
       }
     }
   }
-  .hover\:bg-gray-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-100);
-      }
-    }
-  }
-  .hover\:bg-gray-200 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-200);
-      }
-    }
-  }
   .hover\:bg-gray-300 {
     &:hover {
       @media (hover: hover) {
@@ -1248,20 +1110,6 @@
       }
     }
   }
-  .hover\:text-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-blue-600);
-      }
-    }
-  }
-  .hover\:text-gray-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-gray-600);
-      }
-    }
-  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1294,6 +1142,11 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
   .rtl\:rotate-180 {
     &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
       rotate: 180deg;
@@ -1339,6 +1192,11 @@
       color: var(--color-gray-200);
     }
   }
+  .dark\:text-gray-400 {
+    &:is(.dark *) {
+      color: var(--color-gray-400);
+    }
+  }
   .dark\:text-white {
     &:is(.dark *) {
       color: var(--color-white);
@@ -1724,417 +1582,884 @@
   }
 }
 @layer components {
-  .kt-alert {
+  .kt-alert-overlay {
+    position: fixed;
+    inset: calc(var(--spacing) * 0);
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--spacing) * 4);
+    background-color: color-mix(in srgb, #000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .kt-alert-modal {
+    position: relative;
+    margin-inline: auto;
     display: flex;
     width: 100%;
-    align-items: stretch;
+    max-width: var(--container-md);
+    flex-direction: column;
+    border-radius: calc(var(--radius) + 4px);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--border);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+    animation: fadeIn 0.3s ease-out, zoomIn 0.3s ease-out;
   }
-  .kt-alert-title {
-    flex-grow: 1;
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
+  .kt-alert-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    border-radius: calc(var(--radius) + 4px);
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--border);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+    animation: fadeIn 0.3s ease-out, zoomIn 0.3s ease-out;
+  }
+  .kt-alert-modal > *:not(.kt-alert-close-button),	.kt-alert-container > *:not(.kt-alert-close-button) {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .kt-alert-modal > *:first-child:not(.kt-alert-close-button),	.kt-alert-container > *:first-child:not(.kt-alert-close-button) {
+    padding-top: calc(var(--spacing) * 5);
   }
-  .kt-alert-toolbar {
+  .kt-alert-modal > *:last-child:not(.kt-alert-close-button),	.kt-alert-container > *:last-child:not(.kt-alert-close-button) {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
+  .kt-alert-icon {
+    margin-inline: auto;
+    margin-bottom: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+    flex-shrink: 0;
     display: flex;
-    align-items: baseline;
-    gap: calc(var(--spacing) * 2.5);
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    transition-delay: 100ms;
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+    animation: fadeIn 0.3s ease-out 0.1s both, zoomInSmall 0.3s ease-out 0.1s both;
+  }
+  .kt-alert-title {
+    margin-bottom: calc(var(--spacing) * 3);
+    text-align: center;
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--popover-foreground);
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+  .kt-alert-message {
+    margin-bottom: calc(var(--spacing) * 6);
+    text-align: center;
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    color: var(--muted-foreground);
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
   }
   .kt-alert-actions {
+    margin-top: calc(var(--spacing) * 6);
     display: flex;
     align-items: center;
-    gap: calc(var(--spacing) * 2);
+    justify-content: center;
+    gap: calc(var(--spacing) * 3);
   }
-  .kt-alert-description {
+  .kt-alert-confirm-button {
+    border-radius: var(--radius);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    & p {
-      margin-bottom: calc(var(--spacing) * 2);
-    }
-    & p {
-      --tw-leading: var(--leading-relaxed);
-      line-height: var(--leading-relaxed);
-    }
-  }
-  .kt-alert-content {
-    width: 100%;
-    flex-grow: 1;
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
-    .kt-alert-title {
-      --tw-font-weight: var(--font-weight-semibold);
-      font-weight: var(--font-weight-semibold);
-    }
-  }
-  .kt-alert-icon {
-    flex-shrink: 0;
-  }
-  .kt-alert-close {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
-    flex-shrink: 0;
-    cursor: pointer;
-    i {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-      color: var(--muted-foreground);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        }
+      }
     }
-    > svg {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-      color: var(--muted-foreground);
+    &:focus {
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
     }
-    &:focus,	&:hover {
-      i,	> svg {
-        color: var(--foreground);
+    &:active {
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
       }
     }
-  }
-  .kt-alert {
-    gap: calc(var(--spacing) * 2.5);
-    border-radius: var(--radius);
-    padding: calc(var(--spacing) * 3.5);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    .kt-alert-icon svg {
-      width: calc(var(--spacing) * 5);
-      height: calc(var(--spacing) * 5);
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    .kt-alert-toolbar {
-      padding-top: calc(var(--spacing) * 0.25);
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
     }
-  }
-  .kt-alert-sm {
-    gap: calc(var(--spacing) * 1.5);
-    border-radius: calc(var(--radius) - 2px);
-    padding-inline: calc(var(--spacing) * 2.5);
-    padding-block: calc(var(--spacing) * 2);
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-    .kt-alert-close {
-      width: calc(var(--spacing) * 3.5);
-      height: calc(var(--spacing) * 3.5);
-      > svg {
-        width: calc(var(--spacing) * 3.5);
-        height: calc(var(--spacing) * 3.5);
-      }
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
-    .kt-alert-icon svg {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
     }
   }
-  .kt-alert-lg {
-    gap: calc(var(--spacing) * 2.5);
-    border-radius: calc(var(--radius) - 2px);
-    padding: calc(var(--spacing) * 4);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    .kt-alert-icon svg {
-      width: calc(var(--spacing) * 6);
-      height: calc(var(--spacing) * 6);
-    }
-    .kt-alert-toolbar {
-      padding-top: calc(var(--spacing) * 0.75);
+  .kt-alert-cancel-button {
+    border-radius: var(--radius);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+        }
+      }
     }
-  }
-  .kt-alert {
-    background-color: var(--muted);
-    color: var(--foreground);
-  }
-  .kt-alert-primary {
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    .kt-alert-close > svg {
-      color: var(--primary-foreground);
+    &:focus {
+      background-color: var(--secondary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
     }
-  }
-  .kt-alert-destructive {
-    background-color: var(--destructive);
-    color: var(--destructive-foreground);
-    .kt-alert-close > svg {
-      color: var(--destructive-foreground);
+    &:active {
+      background-color: var(--secondary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--secondary) 70%, transparent);
+      }
     }
-  }
-  .kt-alert-success {
-    background-color: var(--color-green-500);
-    color: var(--color-white);
-    .kt-alert-close > svg {
-      color: var(--color-white);
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-  }
-  .kt-alert-info {
-    background-color: var(--color-violet-600);
-    color: var(--color-white);
-    .kt-alert-close > svg {
-      color: var(--color-white);
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
     }
-  }
-  .kt-alert-warning {
-    background-color: var(--color-yellow-500);
-    color: var(--color-white);
-    .kt-alert-close > svg {
-      color: var(--color-white);
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
-  }
-  .kt-alert-mono {
-    background-color: var(--mono);
-    color: var(--mono-foreground);
-    .kt-alert-close > svg {
-      color: var(--mono-foreground);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
     }
   }
-  .kt-alert-mono {
-    &.kt-alert-primary {
-      .kt-alert-icon {
-        color: var(--primary);
+  .kt-alert-close-button {
+    position: absolute;
+    top: calc(var(--spacing) * 4);
+    right: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: var(--radius);
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--popover-foreground);
       }
     }
-    &.kt-alert-success {
-      .kt-alert-icon {
-        color: var(--color-green-500);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
       }
     }
-    &.kt-alert-destructive {
-      .kt-alert-icon {
-        color: var(--destructive);
-      }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    &.kt-alert-warning {
-      .kt-alert-icon {
-        color: var(--color-yellow-500);
-      }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
     }
-    &.kt-alert-info {
-      .kt-alert-icon {
-        color: var(--color-violet-600);
-      }
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-  .kt-alert-outline {
-    .kt-alert-close {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-      flex-shrink: 0;
-      cursor: pointer;
-      > svg {
-        width: calc(var(--spacing) * 4);
-        height: calc(var(--spacing) * 4);
-        color: var(--muted-foreground);
-      }
-      &:focus,	&:hover {
-        > svg {
-          color: var(--foreground);
-        }
-      }
-    }
+  .kt-alert-input {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    border-radius: var(--radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--border);
+    border-color: var(--input);
     background-color: var(--background);
-    color: var(--foreground);
-    &.kt-alert-primary {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--border);
-      background-color: var(--background);
-      color: var(--primary);
-    }
-    &.kt-alert-destructive {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--border);
-      background-color: var(--background);
-      color: var(--destructive);
+    &:focus-visible {
+      border-color: var(--ring);
     }
-    &.kt-alert-success {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--border);
-      background-color: var(--background);
-      color: var(--color-green-500);
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    &.kt-alert-info {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--border);
-      background-color: var(--background);
-      color: var(--color-violet-600);
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
     }
-    &.kt-alert-warning {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--border);
-      background-color: var(--background);
-      color: var(--color-yellow-500);
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
-    &.kt-alert-mono {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--border);
-      background-color: var(--background);
-      color: var(--mono);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    &::placeholder {
+      color: var(--muted-foreground);
     }
   }
-  .kt-alert-light {
+  .kt-alert-input-label {
+    margin-bottom: calc(var(--spacing) * 3);
+    display: block;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--popover-foreground);
+  }
+  .kt-alert-custom-content {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .kt-alert-loader {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    animation: var(--animate-spin);
+  }
+  .kt-alert-loader::before {
+    content: '';
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--muted);
+    border-top-color: var(--primary);
+    animation: var(--animate-spin);
+  }
+  .kt-alert-confirm-button:disabled {
+    cursor: not-allowed;
+    opacity: 75%;
+    position: relative;
+  }
+  .kt-alert-confirm-button:disabled::after {
+    content: '';
+    position: absolute;
+    inset: calc(var(--spacing) * 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--primary-foreground);
+    border-top-color: transparent;
+    animation: var(--animate-spin);
+  }
+}
+@layer components {
+  .kt-alert-input[type="text"],	.kt-alert-input[type="email"],	.kt-alert-input[type="password"],	.kt-alert-input[type="number"],	.kt-alert-input[type="url"],	textarea.kt-alert-input {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    border-radius: var(--radius);
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--border);
-    background-color: var(--muted);
-    color: var(--foreground);
-    .kt-alert-icon > svg {
+    border-color: var(--input);
+    background-color: var(--background);
+    &:focus-visible {
+      border-color: var(--ring);
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    &::placeholder {
       color: var(--muted-foreground);
     }
-    .kt-alert-close {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-      flex-shrink: 0;
-      cursor: pointer;
-      > svg {
-        width: calc(var(--spacing) * 4);
-        height: calc(var(--spacing) * 4);
-        color: var(--muted-foreground);
+  }
+  select.kt-alert-input {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    border-radius: var(--radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--input);
+    background-color: var(--background);
+    &:focus-visible {
+      border-color: var(--ring);
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    padding-right: 2.5rem;
+  }
+  .kt-alert-input-label input[type="radio"],	.kt-alert-input-label input[type="checkbox"] {
+    margin-right: calc(var(--spacing) * 3);
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    border-radius: 0.25rem;
+    border-color: var(--input);
+    color: var(--primary);
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus {
+      --tw-ring-color: var(--ring);
+    }
+  }
+  .kt-alert-input-label label {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    color: var(--popover-foreground);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    &:hover {
+      @media (hover: hover) {
+        color: var(--popover-foreground);
       }
-      &:focus,	&:hover {
-        > svg {
-          color: var(--foreground);
+    }
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .kt-alert-input-label fieldset {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .kt-alert-input-label legend {
+    margin-bottom: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--popover-foreground);
+  }
+  .kt-alert-input-error {
+    margin-top: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--destructive);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    animation: fadeIn 0.2s ease-out;
+  }
+  .kt-alert-input-error::before {
+    content: '⚠';
+    color: var(--destructive);
+  }
+  .kt-alert-input-error + .kt-alert-input-label .kt-alert-input,	.kt-alert-input-label .kt-alert-input[aria-invalid="true"] {
+    border-color: var(--destructive);
+    &:focus-visible {
+      border-color: var(--destructive);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--destructive);
+    }
+  }
+}
+@layer components {
+  [data-kt-alert-type="success"] {
+    .kt-alert-icon {
+      background-color: var(--color-green-100);
+      color: var(--color-green-600);
+    }
+    .kt-alert-confirm-button {
+      background-color: var(--color-green-600);
+      color: var(--color-white);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-green-700);
         }
       }
-    }
-    &.kt-alert-primary {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--primary) 10%, transparent);
+      &:focus {
+        background-color: var(--color-green-700);
       }
-      background-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+      &:active {
+        background-color: var(--color-green-800);
       }
-      color: var(--foreground);
-      .kt-alert-icon > svg {
-        color: var(--primary);
+      &:focus-visible {
+        --tw-ring-color: var(--color-green-500);
       }
     }
-    &.kt-alert-destructive {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+  }
+  [data-kt-alert-type="error"] {
+    .kt-alert-icon {
+      background-color: var(--color-red-100);
+      color: var(--color-red-600);
+    }
+    .kt-alert-confirm-button {
+      background-color: var(--color-red-600);
+      color: var(--color-white);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-red-700);
+        }
       }
-      background-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
+      &:focus {
+        background-color: var(--color-red-700);
       }
-      color: var(--foreground);
-      .kt-alert-icon > svg {
-        color: var(--destructive);
+      &:active {
+        background-color: var(--color-red-800);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-red-500);
       }
     }
-    &.kt-alert-success {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--color-green-200);
-      background-color: var(--color-green-50);
-      color: var(--foreground);
-      &:is(.dark *) {
-        border-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-green-950) 50%, transparent);
+  }
+  [data-kt-alert-type="warning"] {
+    .kt-alert-icon {
+      background-color: var(--color-yellow-100);
+      color: var(--color-yellow-600);
+    }
+    .kt-alert-confirm-button {
+      background-color: var(--color-yellow-600);
+      color: var(--color-white);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-yellow-700);
         }
       }
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-green-950) 30%, transparent);
-        }
+      &:focus {
+        background-color: var(--color-yellow-700);
+      }
+      &:active {
+        background-color: var(--color-yellow-800);
       }
-      .kt-alert-icon > svg {
-        color: var(--color-green-500);
+      &:focus-visible {
+        --tw-ring-color: var(--color-yellow-500);
       }
     }
-    &.kt-alert-info {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--color-violet-200);
-      background-color: var(--color-violet-50);
-      color: var(--foreground);
-      &:is(.dark *) {
-        border-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-violet-950) 50%, transparent);
+  }
+  [data-kt-alert-type="info"] {
+    .kt-alert-icon {
+      background-color: var(--color-blue-100);
+      color: var(--color-blue-600);
+    }
+    .kt-alert-confirm-button {
+      background-color: var(--color-blue-600);
+      color: var(--color-white);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-blue-700);
         }
       }
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-violet-950) 30%, transparent);
-        }
+      &:focus {
+        background-color: var(--color-blue-700);
       }
-      .kt-alert-icon > svg {
-        color: var(--color-violet-500);
+      &:active {
+        background-color: var(--color-blue-800);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-blue-500);
       }
     }
-    &.kt-alert-warning {
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--color-yellow-200);
-      background-color: var(--color-yellow-50);
-      color: var(--foreground);
-      &:is(.dark *) {
-        border-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-yellow-950) 50%, transparent);
+  }
+  [data-kt-alert-type="question"] {
+    .kt-alert-icon {
+      background-color: var(--color-purple-100);
+      color: var(--color-purple-600);
+    }
+    .kt-alert-confirm-button {
+      background-color: var(--color-purple-600);
+      color: var(--color-white);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-purple-700);
         }
       }
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 30%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-yellow-950) 30%, transparent);
-        }
+      &:focus {
+        background-color: var(--color-purple-700);
+      }
+      &:active {
+        background-color: var(--color-purple-800);
       }
-      .kt-alert-icon > svg {
-        color: var(--color-yellow-500);
+      &:focus-visible {
+        --tw-ring-color: var(--color-purple-500);
       }
     }
   }
 }
 @layer components {
-  .kt-form {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  [data-kt-alert-position="top"] {
+    align-items: flex-start;
+    justify-content: center;
   }
-  .kt-form-item {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing) * 2.5);
+  [data-kt-alert-position="center"] {
+    align-items: center;
+    justify-content: center;
   }
-  .kt-form-control {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  [data-kt-alert-position="bottom"] {
+    align-items: flex-end;
+    justify-content: center;
   }
-  .kt-form-control-inline {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 2.5);
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  [data-kt-alert-position="top-start"] {
+    align-items: flex-start;
+    justify-content: flex-start;
   }
-  .kt-form-label {
-    display: flex;
+  [data-kt-alert-position="top-end"] {
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+  [data-kt-alert-position="bottom-start"] {
+    align-items: flex-end;
+    justify-content: flex-start;
+  }
+  [data-kt-alert-position="bottom-end"] {
+    align-items: flex-end;
+    justify-content: flex-end;
+  }
+}
+@layer components {
+  .kt-alert-modal:focus-within,	.kt-alert-container:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--ring);
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
+  .kt-alert-confirm-button:disabled,	.kt-alert-cancel-button:disabled {
+    cursor: not-allowed;
+    opacity: 75%;
+  }
+  .kt-alert-input:disabled {
+    cursor: not-allowed;
+    background-color: var(--muted);
+    opacity: 75%;
+  }
+  .kt-alert-confirm-button,	.kt-alert-cancel-button {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .kt-alert-confirm-button:hover,	.kt-alert-cancel-button:hover {
+    --tw-scale-x: 105%;
+    --tw-scale-y: 105%;
+    --tw-scale-z: 105%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .kt-alert-confirm-button:active,	.kt-alert-cancel-button:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .kt-alert-close-button {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .kt-alert-close-button:hover {
+    --tw-scale-x: 110%;
+    --tw-scale-y: 110%;
+    --tw-scale-z: 110%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .kt-alert-modal:focus-visible,	.kt-alert-container:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .kt-alert-input:focus {
+    scale: 1.02;
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+}
+@layer components {
+  [dir='rtl'] {
+    .kt-alert-close-button {
+      right: auto;
+      left: calc(var(--spacing) * 4);
+    }
+    .kt-alert-actions {
+      justify-content: center;
+    }
+    select.kt-alert-input {
+      background-position: left 0.75rem center;
+      padding-left: 2.5rem;
+      padding-right: 1rem;
+    }
+    .kt-alert-input-label input[type="radio"],	.kt-alert-input-label input[type="checkbox"] {
+      margin-right: calc(var(--spacing) * 0);
+      margin-left: calc(var(--spacing) * 3);
+    }
+  }
+}
+@layer components {
+  .dark {
+    .kt-alert-overlay {
+      background-color: color-mix(in srgb, #000 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+      }
+    }
+    .kt-alert-modal,	.kt-alert-container {
+      background-color: var(--popover);
+      color: var(--popover-foreground);
+    }
+    .kt-alert-input {
+      border-color: var(--input);
+      background-color: var(--background);
+    }
+    select.kt-alert-input {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
+    }
+    [data-kt-alert-type="success"] .kt-alert-icon {
+      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
+      }
+      color: var(--color-green-400);
+    }
+    [data-kt-alert-type="error"] .kt-alert-icon {
+      background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
+      }
+      color: var(--color-red-400);
+    }
+    [data-kt-alert-type="warning"] .kt-alert-icon {
+      background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent);
+      }
+      color: var(--color-yellow-400);
+    }
+    [data-kt-alert-type="info"] .kt-alert-icon {
+      background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
+      }
+      color: var(--color-blue-400);
+    }
+    [data-kt-alert-type="question"] .kt-alert-icon {
+      background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent);
+      }
+      color: var(--color-purple-400);
+    }
+  }
+}
+@layer utilities {
+  .animate-in {
+    animation-fill-mode: both;
+  }
+  .fade-in-0 {
+    animation-name: fadeIn;
+  }
+  .zoom-in-95 {
+    animation-name: zoomIn;
+  }
+  .zoom-in-50 {
+    animation-name: zoomInSmall;
+  }
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes zoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes zoomInSmall {
+    from {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+@layer components {
+  .kt-form {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .kt-form-item {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 2.5);
+  }
+  .kt-form-control {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .kt-form-control-inline {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2.5);
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .kt-form-label {
+    display: flex;
     width: 100%;
     align-items: center;
     gap: calc(var(--spacing) * 2);
@@ -2436,208 +2761,675 @@
           background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);
         }
       }
-      &:is(.dark *) {
-        color: var(--color-red-600);
-      }
+      &:is(.dark *) {
+        color: var(--color-red-600);
+      }
+    }
+  }
+  .kt-badge-light {
+    &.kt-badge-primary {
+      background-color: var(--color-blue-100);
+      color: var(--color-blue-800);
+      &:is(.dark *) {
+        background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-blue-950) 50%, transparent);
+        }
+      }
+      &:is(.dark *) {
+        color: var(--color-blue-600);
+      }
+    }
+    &.kt-badge-secondary {
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+      &:is(.dark *) {
+        background-color: var(--secondary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
+        }
+      }
+    }
+    &.kt-badge-success {
+      background-color: var(--color-green-100);
+      color: var(--color-green-800);
+      &:is(.dark *) {
+        background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-green-950) 50%, transparent);
+        }
+      }
+      &:is(.dark *) {
+        color: var(--color-green-600);
+      }
+    }
+    &.kt-badge-warning {
+      background-color: var(--color-yellow-100);
+      color: var(--color-yellow-800);
+      &:is(.dark *) {
+        background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-yellow-950) 50%, transparent);
+        }
+      }
+      &:is(.dark *) {
+        color: var(--color-yellow-600);
+      }
+    }
+    &.kt-badge-info {
+      background-color: var(--color-violet-100);
+      color: var(--color-violet-800);
+      &:is(.dark *) {
+        background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-violet-950) 50%, transparent);
+        }
+      }
+      &:is(.dark *) {
+        color: var(--color-violet-600);
+      }
+    }
+    &.kt-badge-mono {
+      background-color: var(--mono);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--mono) 10%, transparent);
+      }
+      color: var(--mono);
+    }
+    &.kt-badge-destructive {
+      background-color: var(--color-red-100);
+      color: var(--color-red-800);
+      &:is(.dark *) {
+        background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);
+        }
+      }
+      &:is(.dark *) {
+        color: var(--color-red-600);
+      }
+    }
+  }
+  .kt-badge-ghost {
+    background-color: transparent;
+    padding-inline: calc(var(--spacing) * 0);
+    &.kt-badge-primary {
+      color: var(--primary);
+    }
+    &.kt-badge-secondary {
+      color: var(--secondary-foreground);
+    }
+    &.kt-badge-destructive {
+      color: var(--destructive);
+    }
+    &.kt-badge-success {
+      color: var(--color-green-500);
+    }
+    &.kt-badge-warning {
+      color: var(--color-yellow-500);
+    }
+    &.kt-badge-info {
+      color: var(--color-violet-500);
+    }
+    &.kt-badge-mono {
+      color: var(--mono);
+    }
+  }
+  .kt-badge-btn {
+    margin-inline-end: calc(var(--spacing) * -0.5);
+    display: inline-flex;
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(var(--radius) - 2px);
+    padding: calc(var(--spacing) * 0);
+    --tw-leading: 1;
+    line-height: 1;
+    i {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      opacity: 70%;
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+    > svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+      opacity: 70%;
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+    &:focus,	&:hover {
+      i,	> svg {
+        opacity: 100%;
+      }
+    }
+  }
+  .kt-badge-dot {
+    width: calc(var(--spacing) * 1.5);
+    height: calc(var(--spacing) * 1.5);
+    border-radius: calc(infinity * 1px);
+    background-color: currentcolor;
+    opacity: 75%;
+  }
+}
+@layer components {
+  .kt-link {
+    display: inline-flex;
+    cursor: pointer;
+    align-items: center;
+    border-radius: calc(var(--radius) - 2px);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--color-neutral-200);
+    }
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+    &:is(.dark *) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-neutral-700);
+      }
+    }
+  }
+  .kt-link {
+    color: var(--primary);
+  }
+  .kt-link-inverse {
+    color: var(--background);
+  }
+  .kt-link-mono {
+    color: var(--mono);
+  }
+  .kt-link {
+    gap: calc(var(--spacing) * 1);
+    font-size: 0.8125rem;
+    --tw-leading: var(--text-sm--line-height);
+    line-height: var(--text-sm--line-height);
+    svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+    i {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .kt-link-sm {
+    gap: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+    i {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .kt-link-lg {
+    gap: calc(var(--spacing) * 1.5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+    i {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .kt-link-underline {
+    margin-top: calc(var(--spacing) * -0.5);
+    text-decoration-style: solid;
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        text-underline-offset: 4px;
+      }
+    }
+  }
+  .kt-link-underlined {
+    margin-top: calc(var(--spacing) * -0.5);
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-underline-offset: 4px;
+  }
+  .kt-link-dashed {
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
+  }
+  .kt-link-disabled {
+    pointer-events: none;
+    opacity: 50%;
+  }
+}
+@layer components {
+  .kt-btn {
+    display: inline-flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    --tw-ring-offset-color: var(--background);
+    transition-property: color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+    &:disabled {
+      pointer-events: none;
+    }
+    &:disabled {
+      opacity: 50%;
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+    flex-shrink: 0;
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow-color: rgba(0,0,0,0.05);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
+    }
+    svg {
+      flex-shrink: 0;
+    }
+  }
+  .kt-btn {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        }
+      }
+    }
+    &.active {
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+  }
+  .kt-btn-mono {
+    background-color: var(--mono);
+    color: var(--mono-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--mono);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--mono) 90%, transparent);
+        }
+      }
+    }
+    &.active {
+      background-color: var(--mono);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--mono) 90%, transparent);
+      }
+    }
+  }
+  .kt-btn-destructive {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+        }
+      }
+    }
+    &.active {
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+  }
+  .kt-btn-secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
+    }
+    &.active {
+      background-color: var(--secondary);
+    }
+    &.active {
+      color: var(--foreground);
+    }
+    i {
+      color: var(--muted-foreground);
+    }
+    svg {
+      color: var(--muted-foreground);
+    }
+    &:hover,	&.active {
+      i {
+        color: var(--muted-foreground);
+      }
+      svg {
+        color: var(--muted-foreground);
+      }
+    }
+  }
+  .kt-btn-outline {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--input);
+    background-color: var(--background);
+    color: var(--secondary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+    &.active {
+      background-color: var(--accent);
+    }
+    &.active {
+      color: var(--accent-foreground);
+    }
+    i {
+      color: var(--muted-foreground);
+    }
+    svg {
+      color: var(--muted-foreground);
+    }
+    &:hover,	&.active {
+      i {
+        color: var(--secondary-foreground);
+      }
+      svg {
+        color: var(--secondary-foreground);
+      }
+    }
+    &.kt-btn-primary {
+      border-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--primary) 10%, transparent);
+      }
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+      }
+      color: var(--primary);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--primary);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--primary-foreground);
+        }
+      }
+      &.active {
+        border-color: var(--primary);
+      }
+      &.active {
+        background-color: var(--primary);
+      }
+      &.active {
+        color: var(--primary-foreground);
+      }
+      i {
+        color: var(--primary);
+      }
+      svg {
+        color: var(--primary);
+      }
+      &:hover,	&.active {
+        i {
+          color: var(--primary-foreground);
+        }
+        svg {
+          color: var(--primary-foreground);
+        }
+      }
+    }
+    &.kt-btn-destructive {
+      border-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+      }
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+      }
+      color: var(--destructive);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--destructive);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--destructive-foreground);
+        }
+      }
+      &.active {
+        border-color: var(--destructive);
+      }
+      &.active {
+        background-color: var(--destructive);
+      }
+      &.active {
+        color: var(--destructive-foreground);
+      }
+      i {
+        color: var(--destructive);
+      }
+      svg {
+        color: var(--destructive);
+      }
+      &:hover,	&.active {
+        i {
+          color: var(--destructive-foreground);
+        }
+        svg {
+          color: var(--destructive-foreground);
+        }
+      }
     }
   }
-  .kt-badge-light {
-    &.kt-badge-primary {
-      background-color: var(--color-blue-100);
-      color: var(--color-blue-800);
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-blue-950) 50%, transparent);
-        }
-      }
-      &:is(.dark *) {
-        color: var(--color-blue-600);
+  .kt-btn-ghost {
+    background-color: transparent;
+    color: var(--accent-foreground);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
       }
     }
-    &.kt-badge-secondary {
-      background-color: var(--secondary);
-      color: var(--secondary-foreground);
-      &:is(.dark *) {
-        background-color: var(--secondary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
-        }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
       }
     }
-    &.kt-badge-success {
-      background-color: var(--color-green-100);
-      color: var(--color-green-800);
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-green-950) 50%, transparent);
-        }
+    &.active {
+      background-color: var(--accent);
+    }
+    &.active {
+      color: var(--accent-foreground);
+    }
+    &:not(.kt-btn-primary):not(.kt-btn-destructive) {
+      i {
+        color: var(--muted-foreground);
       }
-      &:is(.dark *) {
-        color: var(--color-green-600);
+      svg {
+        color: var(--muted-foreground);
       }
-    }
-    &.kt-badge-warning {
-      background-color: var(--color-yellow-100);
-      color: var(--color-yellow-800);
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-yellow-950) 50%, transparent);
+      &:hover,	&.active {
+        i {
+          color: var(--secondary-foreground);
+        }
+        svg {
+          color: var(--secondary-foreground);
         }
-      }
-      &:is(.dark *) {
-        color: var(--color-yellow-600);
       }
     }
-    &.kt-badge-info {
-      background-color: var(--color-violet-100);
-      color: var(--color-violet-800);
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-violet-950) 50%, transparent);
+    &.kt-btn-primary {
+      color: var(--primary);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--primary);
         }
       }
-      &:is(.dark *) {
-        color: var(--color-violet-600);
+      &:hover {
+        @media (hover: hover) {
+          color: var(--primary-foreground);
+        }
       }
-    }
-    &.kt-badge-mono {
-      background-color: var(--mono);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--mono) 10%, transparent);
+      &.active {
+        background-color: var(--primary);
+      }
+      &.active {
+        color: var(--primary-foreground);
       }
-      color: var(--mono);
     }
-    &.kt-badge-destructive {
-      background-color: var(--color-red-100);
-      color: var(--color-red-800);
-      &:is(.dark *) {
-        background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-red-950) 50%, transparent);
+    &.kt-btn-destructive {
+      color: var(--destructive);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--destructive);
         }
       }
-      &:is(.dark *) {
-        color: var(--color-red-600);
+      &:hover {
+        @media (hover: hover) {
+          color: var(--destructive-foreground);
+        }
+      }
+      &.active {
+        background-color: var(--destructive);
+      }
+      &.active {
+        color: var(--destructive-foreground);
       }
     }
   }
-  .kt-badge-ghost {
+  .kt-btn-dim {
     background-color: transparent;
-    padding-inline: calc(var(--spacing) * 0);
-    &.kt-badge-primary {
-      color: var(--primary);
-    }
-    &.kt-badge-secondary {
-      color: var(--secondary-foreground);
-    }
-    &.kt-badge-destructive {
-      color: var(--destructive);
-    }
-    &.kt-badge-success {
-      color: var(--color-green-500);
+    color: var(--muted-foreground);
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
     }
-    &.kt-badge-warning {
-      color: var(--color-yellow-500);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
     }
-    &.kt-badge-info {
-      color: var(--color-violet-500);
+    &.active {
+      background-color: transparent;
     }
-    &.kt-badge-mono {
-      color: var(--mono);
+    &.active {
+      color: var(--foreground);
     }
-  }
-  .kt-badge-btn {
-    margin-inline-end: calc(var(--spacing) * -0.5);
-    display: inline-flex;
-    width: calc(var(--spacing) * 3.5);
-    height: calc(var(--spacing) * 3.5);
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-radius: calc(var(--radius) - 2px);
-    padding: calc(var(--spacing) * 0);
-    --tw-leading: 1;
-    line-height: 1;
     i {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-      opacity: 70%;
-      transition-property: opacity;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      color: var(--muted-foreground);
     }
-    > svg {
-      width: calc(var(--spacing) * 3.5);
-      height: calc(var(--spacing) * 3.5);
-      opacity: 70%;
-      transition-property: opacity;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    svg {
+      color: var(--muted-foreground);
     }
-    &:focus,	&:hover {
-      i,	> svg {
-        opacity: 100%;
+    &:hover,	&.active {
+      i {
+        color: var(--secondary-foreground);
+      }
+      svg {
+        color: var(--secondary-foreground);
       }
     }
   }
-  .kt-badge-dot {
-    width: calc(var(--spacing) * 1.5);
-    height: calc(var(--spacing) * 1.5);
-    border-radius: calc(infinity * 1px);
-    background-color: currentcolor;
-    opacity: 75%;
-  }
-}
-@layer components {
-  .kt-link {
-    display: inline-flex;
-    cursor: pointer;
-    align-items: center;
+  .kt-btn {
+    height: calc(var(--spacing) * 8.5);
+    gap: calc(var(--spacing) * 1.5);
     border-radius: calc(var(--radius) - 2px);
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-    &:focus-visible {
-      --tw-ring-color: var(--color-neutral-200);
-    }
-    &:focus-visible {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    padding-inline: calc(var(--spacing) * 3);
+    font-size: 0.8125rem;
+    --tw-leading: var(--text-sm--line-height);
+    line-height: var(--text-sm--line-height);
+    svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
     }
-    &:is(.dark *) {
-      &:focus-visible {
-        --tw-ring-color: var(--color-neutral-700);
-      }
+    i {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+    &.kt-btn-icon {
+      width: calc(var(--spacing) * 8.5);
+      height: calc(var(--spacing) * 8.5);
+      padding: calc(var(--spacing) * 0);
     }
   }
-  .kt-link {
-    color: var(--primary);
-  }
-  .kt-link-inverse {
-    color: var(--background);
-  }
-  .kt-link-mono {
-    color: var(--mono);
-  }
-  .kt-link {
-    gap: calc(var(--spacing) * 1);
-    font-size: 0.8125rem;
-    --tw-leading: var(--text-sm--line-height);
-    line-height: var(--text-sm--line-height);
+  .kt-btn-lg {
+    height: calc(var(--spacing) * 10);
+    gap: calc(var(--spacing) * 1.5);
+    border-radius: calc(var(--radius) - 2px);
+    padding-inline: calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
     svg {
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
@@ -2646,9 +3438,17 @@
       font-size: var(--text-base);
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
+    &.kt-btn-icon {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+      padding: calc(var(--spacing) * 0);
+    }
   }
-  .kt-link-sm {
-    gap: calc(var(--spacing) * 1);
+  .kt-btn-sm {
+    height: calc(var(--spacing) * 7);
+    gap: calc(var(--spacing) * 1.25);
+    border-radius: calc(var(--radius) - 2px);
+    padding-inline: calc(var(--spacing) * 2.5);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
     svg {
@@ -2659,75 +3459,234 @@
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
+    &.kt-btn-icon {
+      width: calc(var(--spacing) * 7);
+      height: calc(var(--spacing) * 7);
+      padding: calc(var(--spacing) * 0);
+    }
   }
-  .kt-link-lg {
-    gap: calc(var(--spacing) * 1.5);
+}
+@layer components {
+  .kt-label {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    svg {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+    .kt-switch:disabled + &,	.kt-checkbox:disabled + &,	.kt-radio:disabled + & {
+      cursor: not-allowed;
+      opacity: 50%;
     }
-    i {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .kt-label-secondary {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+}
+@layer components {
+  .kt-card {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    border-radius: calc(var(--radius) + 4px);
+    color: var(--card-foreground);
+  }
+  .kt-card {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--border);
+    background-color: var(--card);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow-color: rgba(0,0,0,0.05);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
     }
   }
-  .kt-link-underline {
-    margin-top: calc(var(--spacing) * -0.5);
-    text-decoration-style: solid;
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
+  .kt-card-header {
+    display: flex;
+    min-height: calc(var(--spacing) * 14);
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 2.5);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--border);
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .kt-card-footer {
+    display: flex;
+    align-items: center;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--border);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .kt-card-content {
+    flex-grow: 1;
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .kt-card-table {
+    display: grid;
+    flex-grow: 1;
+    .kt-table-border {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    .kt-table {
+      th,	td {
+        &:first-child {
+          padding-inline-start: calc(var(--spacing) * 5);
+        }
+        &:last-child {
+          padding-inline-end: calc(var(--spacing) * 5);
+        }
       }
     }
-    &:hover {
-      @media (hover: hover) {
-        text-underline-offset: 4px;
+  }
+  .kt-card-grid {
+    & .kt-card-header,	& .kt-card-footer {
+      padding-inline: calc(var(--spacing) * 5);
+    }
+    .kt-card-content {
+      padding: 0;
+      .kt-table {
+        border: 0;
+        th:first-child,	td:first-child {
+          padding-inline-start: calc(var(--spacing) * 5);
+          &.kt-table-cell-center {
+            padding-inline-end: calc(var(--spacing) * 5);
+          }
+        }
+        th:last-child,	td:last-child {
+          padding-inline-end: calc(var(--spacing) * 5);
+          &.table-cell-center {
+            padding-inline-start: calc(var(--spacing) * 5);
+          }
+        }
       }
     }
   }
-  .kt-link-underlined {
-    margin-top: calc(var(--spacing) * -0.5);
-    text-decoration-line: underline;
-    text-decoration-style: solid;
-    text-underline-offset: 4px;
+  .kt-card-heading {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
   }
-  .kt-link-dashed {
-    text-decoration-style: dashed;
-    text-decoration-thickness: 1px;
+  .kt-card-toolbar {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2.5);
   }
-  .kt-link-disabled {
-    pointer-events: none;
-    opacity: 50%;
+  .kt-card-title {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .kt-card-description {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--muted-foreground);
+  }
+  .kt-card-group {
+    flex-grow: 1;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--border);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 5);
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+    & + .kt-card-footer {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+    }
+  }
+  .kt-card-accent {
+    background-color: var(--muted);
+    padding: calc(var(--spacing) * 1);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow-color: rgba(0,0,0,0.05);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
+    }
+    .kt-card-header {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+    .kt-card-content {
+      border-top-left-radius: calc(var(--radius) + 4px);
+      border-top-right-radius: calc(var(--radius) + 4px);
+      background-color: var(--card);
+      &:last-child {
+        border-bottom-right-radius: calc(var(--radius) + 4px);
+        border-bottom-left-radius: calc(var(--radius) + 4px);
+      }
+    }
+    .kt-card-table {
+      border-radius: calc(var(--radius) + 4px);
+      background-color: var(--card);
+      &:last-child {
+        border-bottom-right-radius: calc(var(--radius) + 4px);
+        border-bottom-left-radius: calc(var(--radius) + 4px);
+      }
+    }
+    .kt-card-footer {
+      margin-top: 2px;
+      border-bottom-right-radius: calc(var(--radius) + 4px);
+      border-bottom-left-radius: calc(var(--radius) + 4px);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+      background-color: var(--card);
+    }
+  }
+  .kt-card-border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--border);
+  }
+  .kt-card-rounded-t {
+    border-top-left-radius: calc(var(--radius) + 4px);
+    border-top-right-radius: calc(var(--radius) + 4px);
+  }
+  .kt-card-rounded-b {
+    border-bottom-right-radius: calc(var(--radius) + 4px);
+    border-bottom-left-radius: calc(var(--radius) + 4px);
   }
 }
 @layer components {
-  .kt-btn {
-    display: inline-flex;
+  .kt-checkbox {
     cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    white-space: nowrap;
+    appearance: none;
+    background-position: center;
+    background-repeat: no-repeat;
+    flex-shrink: 0;
+    border-radius: calc(var(--radius) - 4px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--input);
+    background-color: var(--background);
     --tw-ring-offset-color: var(--background);
-    transition-property: color,box-shadow;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:focus-visible {
       --tw-outline-style: none;
       outline-style: none;
-      @media (forced-colors: active) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-    }
-    &:disabled {
-      pointer-events: none;
-    }
-    &:disabled {
-      opacity: 50%;
     }
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2740,857 +3699,1230 @@
       --tw-ring-offset-width: 2px;
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
-    flex-shrink: 0;
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-shadow-color: rgba(0,0,0,0.05);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
+    &:disabled {
+      cursor: not-allowed;
     }
-    svg {
-      flex-shrink: 0;
+    &:disabled {
+      opacity: 50%;
     }
-  }
-  .kt-btn {
-    background-color: var(--primary);
-    color: var(--primary-foreground);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-        }
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
     }
-    &.active {
-      background-color: var(--primary);
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
     }
   }
-  .kt-btn-mono {
-    background-color: var(--mono);
-    color: var(--mono-foreground);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--mono);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--mono) 90%, transparent);
-        }
-      }
+  .kt-checkbox {
+    &:checked {
+      border-color: var(--primary);
     }
-    &.active {
+    &:checked {
+      background-color: var(--primary);
+    }
+    &:checked {
+      color: var(--primary-foreground);
+    }
+    &:indeterminate {
+      border-color: var(--primary);
+    }
+    &:indeterminate {
+      background-color: var(--primary);
+    }
+    &:indeterminate {
+      color: var(--primary-foreground);
+    }
+  }
+  .kt-checkbox-mono {
+    &:checked {
+      border-color: var(--mono);
+    }
+    &:checked {
       background-color: var(--mono);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--mono) 90%, transparent);
-      }
+    }
+    &:checked {
+      color: var(--mono-foreground);
+    }
+    &:indeterminate {
+      border-color: var(--mono);
+    }
+    &:indeterminate {
+      background-color: var(--mono);
+    }
+    &:indeterminate {
+      color: var(--mono-foreground);
     }
   }
-  .kt-btn-destructive {
-    background-color: var(--destructive);
-    color: var(--destructive-foreground);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--destructive);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-        }
-      }
+  .kt-checkbox {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+    &:checked,	&[aria-checked='true'] {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z' fill='white'/%3E%3C/svg%3E");
     }
-    &.active {
-      background-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-      }
+    &:indeterminate {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
     }
   }
-  .kt-btn-secondary {
-    background-color: var(--secondary);
-    color: var(--secondary-foreground);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--secondary);
-      }
+  .kt-checkbox {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .kt-checkbox-sm {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+    &:checked,	&[aria-checked='true'] {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M8.4932 0.233321L4.03986 4.68665L1.4532 2.09999C1.32829 1.97582 1.15932 1.90613 0.983198 1.90613C0.807074 1.90613 0.638106 1.97582 0.513198 2.09999C0.38903 2.2249 0.319336 2.39386 0.319336 2.56999C0.319336 2.74611 0.38903 2.91508 0.513198 3.03999L3.5732 6.09999C3.69811 6.22415 3.86707 6.29385 4.0432 6.29385C4.21932 6.29385 4.38829 6.22415 4.5132 6.09999L9.4332 1.17999C9.49568 1.11801 9.54528 1.04428 9.57912 0.963038C9.61297 0.881799 9.6304 0.794662 9.6304 0.706655C9.6304 0.618647 9.61297 0.53151 9.57912 0.45027C9.54528 0.369031 9.49568 0.295296 9.4332 0.233321C9.30829 0.109154 9.13932 0.0394592 8.9632 0.0394592C8.78707 0.0394592 8.61811 0.109154 8.4932 0.233321Z' fill='white'/%3E%3C/svg%3E");
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--foreground);
-      }
+    &:indeterminate {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
     }
-    &.active {
-      background-color: var(--secondary);
+  }
+  .kt-checkbox-lg {
+    width: calc(var(--spacing) * 5.5);
+    height: calc(var(--spacing) * 5.5);
+    &:checked,	&[aria-checked='true'] {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M11.8035 1.19582L5.68018 7.31915L2.12351 3.76249C1.95176 3.59176 1.71943 3.49593 1.47726 3.49593C1.23509 3.49593 1.00276 3.59176 0.831013 3.76249C0.660283 3.93424 0.564453 4.16657 0.564453 4.40874C0.564453 4.65091 0.660283 4.88324 0.831013 5.05499L5.03851 9.26249C5.21026 9.43322 5.44259 9.52905 5.68476 9.52905C5.92693 9.52905 6.15926 9.43322 6.33101 9.26249L13.096 2.49749C13.1819 2.41227 13.2501 2.31089 13.2967 2.19918C13.3432 2.08748 13.3672 1.96766 13.3672 1.84665C13.3672 1.72564 13.3432 1.60583 13.2967 1.49413C13.2501 1.38242 13.1819 1.28104 13.096 1.19582C12.9243 1.02509 12.6919 0.92926 12.4498 0.92926C12.2076 0.92926 11.9753 1.02509 11.8035 1.19582Z' fill='white'/%3E%3C/svg%3E");
     }
-    &.active {
-      color: var(--foreground);
+    &:indeterminate {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
     }
-    i {
-      color: var(--muted-foreground);
+  }
+}
+@layer components {
+  .dark .kt-checkbox {
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
     }
-    svg {
-      color: var(--muted-foreground);
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
     }
-    &:hover,	&.active {
-      i {
-        color: var(--muted-foreground);
+  }
+}
+@layer components {
+  .kt-datatable-toolbar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: calc(var(--spacing) * 3);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--border);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--muted-foreground);
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+    @media (width >= 40rem) {
+      justify-content: space-between;
+    }
+  }
+  .kt-datatable-pagination {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    .kt-datatable-pagination-button {
+      display: inline-flex;
+      height: calc(var(--spacing) * 7);
+      min-width: calc(var(--spacing) * 7);
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      border-radius: calc(var(--radius) - 2px);
+      background-color: transparent;
+      padding-inline: calc(var(--spacing) * 0.5);
+      color: var(--muted-foreground);
+      &.active,	&:hover:not(:disabled) {
+        background-color: var(--accent);
+        color: var(--accent-foreground);
       }
-      svg {
+      &.kt-datatable-pagination-prev {
+        color: var(--foreground);
+      }
+      &.kt-datatable-pagination-next {
+        color: var(--foreground);
+      }
+      &:disabled {
+        cursor: default;
         color: var(--muted-foreground);
       }
     }
   }
-  .kt-btn-outline {
+  .kt-datatable-length {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    white-space: nowrap;
+  }
+  .kt-datatable-info {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 4);
+  }
+  .kt-datatable-loading {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: calc(var(--radius) - 2px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--border);
+    background-color: var(--card);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--card-foreground);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow-color: rgba(0,0,0,0.05);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .kt-datatable-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+  [data-kt-datatable] {
+    position: relative;
+  }
+  [data-kt-datatable].loading table {
+    opacity: 0.6;
+  }
+}
+@layer utilities {
+  [data-kt-datepicker-input-wrapper] {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    cursor: pointer;
+    align-items: center;
+    height: calc(var(--spacing) * 8.5);
+    border-radius: calc(var(--radius) - 2px);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--input);
     background-color: var(--background);
-    color: var(--secondary-foreground);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--accent-foreground);
-      }
-    }
-    &.active {
-      background-color: var(--accent);
-    }
-    &.active {
-      color: var(--accent-foreground);
-    }
-    i {
-      color: var(--muted-foreground);
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-shadow-color: rgba(0,0,0,0.05);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
     }
-    svg {
-      color: var(--muted-foreground);
+    transition-property: color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:focus-within {
+      border-color: var(--ring);
     }
-    &:hover,	&.active {
-      i {
-        color: var(--secondary-foreground);
-      }
-      svg {
-        color: var(--secondary-foreground);
-      }
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    &.kt-btn-primary {
-      border-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--primary) 10%, transparent);
-      }
-      background-color: var(--primary);
+    &:focus-within {
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-      }
-      color: var(--primary);
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--primary);
-        }
-      }
-      &:hover {
-        @media (hover: hover) {
-          color: var(--primary-foreground);
-        }
-      }
-      &.active {
-        border-color: var(--primary);
-      }
-      &.active {
-        background-color: var(--primary);
-      }
-      &.active {
-        color: var(--primary-foreground);
-      }
-      i {
-        color: var(--primary);
-      }
-      svg {
-        color: var(--primary);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
       }
-      &:hover,	&.active {
-        i {
-          color: var(--primary-foreground);
-        }
-        svg {
-          color: var(--primary-foreground);
+    }
+    &:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--ring) 50%, transparent);
         }
       }
     }
-    &.kt-btn-destructive {
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &:disabled {
+      opacity: 60%;
+    }
+    &[aria-invalid="true"] {
       border-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+        border-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
-      background-color: var(--destructive);
+    }
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
-      }
-      color: var(--destructive);
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--destructive);
-        }
-      }
-      &:hover {
-        @media (hover: hover) {
-          color: var(--destructive-foreground);
-        }
-      }
-      &.active {
-        border-color: var(--destructive);
-      }
-      &.active {
-        background-color: var(--destructive);
-      }
-      &.active {
-        color: var(--destructive-foreground);
-      }
-      i {
-        color: var(--destructive);
-      }
-      svg {
-        color: var(--destructive);
-      }
-      &:hover,	&.active {
-        i {
-          color: var(--destructive-foreground);
-        }
-        svg {
-          color: var(--destructive-foreground);
-        }
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
     }
+    padding-left: 10px;
+    padding-right: 10px;
   }
-  .kt-btn-ghost {
+  [data-kt-datepicker-segmented-input] {
+    display: inline-flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    align-items: center;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
     background-color: transparent;
-    color: var(--accent-foreground);
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-      }
+    &:focus-within {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+    &:focus-within {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:hover {
       @media (hover: hover) {
-        color: var(--accent-foreground);
+        border-style: var(--tw-border-style);
+        border-width: 0px;
       }
     }
-    &.active {
+    font-size: 0.8125rem;
+    --tw-leading: var(--text-sm--line-height);
+    line-height: var(--text-sm--line-height);
+    font-size: 0;
+    letter-spacing: 0;
+    word-spacing: 0;
+  }
+  [data-kt-datepicker-segmented-range-input] {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  [data-segment] {
+    display: inline-flex;
+    min-width: 2rem;
+    align-items: center;
+    justify-content: center;
+    padding-inline: calc(var(--spacing) * 0);
+    padding-block: calc(var(--spacing) * 0);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+    border-radius: calc(var(--radius) - 4px);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-outline-style: none;
+    outline-style: none;
+    &:focus {
       background-color: var(--accent);
     }
-    &.active {
+    &:focus {
       color: var(--accent-foreground);
     }
-    &:not(.kt-btn-primary):not(.kt-btn-destructive) {
-      i {
-        color: var(--muted-foreground);
-      }
-      svg {
-        color: var(--muted-foreground);
-      }
-      &:hover,	&.active {
-        i {
-          color: var(--secondary-foreground);
-        }
-        svg {
-          color: var(--secondary-foreground);
-        }
-      }
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    &.kt-btn-primary {
-      color: var(--primary);
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--primary);
-        }
+    &:focus {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
-      &:hover {
-        @media (hover: hover) {
-          color: var(--primary-foreground);
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
-      &.active {
-        background-color: var(--primary);
-      }
-      &.active {
-        color: var(--primary-foreground);
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &:disabled {
+      opacity: 50%;
+    }
+    &[aria-invalid="true"] {
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
     }
-    &.kt-btn-destructive {
+    &[aria-invalid="true"] {
       color: var(--destructive);
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--destructive);
-        }
-      }
-      &:hover {
-        @media (hover: hover) {
-          color: var(--destructive-foreground);
-        }
-      }
-      &.active {
-        background-color: var(--destructive);
-      }
-      &.active {
-        color: var(--destructive-foreground);
-      }
     }
+    font-size: 0.875rem;
+    letter-spacing: normal;
+    word-spacing: normal;
   }
-  .kt-btn-dim {
-    background-color: transparent;
-    color: var(--muted-foreground);
-    --tw-shadow: 0 0 #0000;
+  [data-segment][contenteditable="true"] {
+    cursor: text;
+    padding: 0 !important;
+    margin: 0 !important;
+    line-height: 1.5;
+    white-space: nowrap !important;
+    overflow: hidden;
+    -webkit-user-modify: read-write-plaintext-only;
+    user-modify: read-write-plaintext-only;
+    outline: none;
+    outline-offset: 0;
+    text-indent: 0;
+    align-items: center;
+    justify-content: flex-start;
+    -webkit-tap-highlight-color: transparent;
+    word-spacing: 0;
+    letter-spacing: normal;
+    min-height: 1em;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
+    min-width: fit-content;
+    width: fit-content;
+  }
+  [data-segment][contenteditable="true"] * {
+    margin: 0;
+    padding: 0;
+    display: inline;
+  }
+  [data-segment][contenteditable="true"]:empty::before {
+    content: "\200B";
+    display: inline-block;
+  }
+  [data-segment][contenteditable="true"]:focus {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+  [data-segment-separator] + [data-segment="hour"] {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  [data-kt-datepicker-segmented-input] > [data-segment="hour"]:first-child {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  [data-segment-separator] + [data-segment="ampm"] {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  [data-segment-separator] {
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+    color: var(--muted-foreground);
+    -webkit-user-select: none;
+    user-select: none;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    font-size: 0.875rem;
+    letter-spacing: normal;
+    word-spacing: normal;
+    white-space: pre;
+    min-width: 0.25rem;
+  }
+  [data-kt-datepicker-calendar-btn] {
+    position: absolute;
+    top: calc(var(--spacing) * 0);
+    right: calc(var(--spacing) * 0);
+    bottom: calc(var(--spacing) * 0);
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: calc(var(--spacing) * 10);
+    border-top-right-radius: calc(var(--radius) - 2px);
+    border-bottom-right-radius: calc(var(--radius) - 2px);
+    color: var(--muted-foreground);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:hover {
       @media (hover: hover) {
-        background-color: transparent;
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+        }
       }
     }
     &:hover {
       @media (hover: hover) {
-        color: var(--foreground);
+        color: var(--accent-foreground);
       }
     }
-    &.active {
-      background-color: transparent;
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    &.active {
-      color: var(--foreground);
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
     }
-    i {
-      color: var(--muted-foreground);
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
     }
-    svg {
-      color: var(--muted-foreground);
+    &:focus-visible {
+      --tw-ring-inset: inset;
     }
-    &:hover,	&.active {
-      i {
-        color: var(--secondary-foreground);
-      }
-      svg {
-        color: var(--secondary-foreground);
+    &:active {
+      background-color: var(--accent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--accent) 70%, transparent);
       }
     }
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    cursor: pointer;
   }
-  .kt-btn {
-    height: calc(var(--spacing) * 8.5);
-    gap: calc(var(--spacing) * 1.5);
-    border-radius: calc(var(--radius) - 2px);
-    padding-inline: calc(var(--spacing) * 3);
-    font-size: 0.8125rem;
-    --tw-leading: var(--text-sm--line-height);
-    line-height: var(--text-sm--line-height);
-    svg {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-    }
-    i {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
+  [data-kt-datepicker-calendar-btn] svg {
+    height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 4);
+  }
+  [data-kt-datepicker-calendar-btn][aria-expanded="true"] {
+    background-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
     }
-    &.kt-btn-icon {
-      width: calc(var(--spacing) * 8.5);
-      height: calc(var(--spacing) * 8.5);
-      padding: calc(var(--spacing) * 0);
+    color: var(--accent-foreground);
+  }
+  [data-kt-datepicker-placeholder] {
+    pointer-events: none;
+    color: var(--muted-foreground);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  [data-kt-datepicker-display-wrapper] {
+    display: inline-flex;
+    min-height: 2rem;
+    align-items: center;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--foreground);
+  }
+  [data-kt-datepicker-display-element] {
+    color: var(--foreground);
+  }
+}
+@layer utilities {
+  [data-kt-datepicker-dropdown] {
+    position: absolute;
+    z-index: 50;
+    margin-top: calc(var(--spacing) * 1.5);
+    border-radius: calc(var(--radius) - 2px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 60%, transparent);
     }
+    background-color: var(--popover);
+    color: var(--popover-foreground);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    width: 20rem;
+    min-width: 20rem;
   }
-  .kt-btn-lg {
-    height: calc(var(--spacing) * 10);
+  [data-kt-datepicker-dropdown].hidden {
+    display: none;
+  }
+  [data-kt-datepicker-dropdown].open {
+    display: block;
+  }
+  [data-kt-datepicker-panel] {
+    display: flex;
+    flex-direction: column;
     gap: calc(var(--spacing) * 1.5);
-    border-radius: calc(var(--radius) - 2px);
-    padding-inline: calc(var(--spacing) * 4);
+  }
+  [data-kt-datepicker-header] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 0.5);
+    padding-bottom: calc(var(--spacing) * 1.5);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    height: 34px;
+  }
+  [data-kt-datepicker-month-year] {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    svg {
-      width: calc(var(--spacing) * 4);
-      height: calc(var(--spacing) * 4);
-    }
-    i {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
-    }
-    &.kt-btn-icon {
-      width: calc(var(--spacing) * 10);
-      height: calc(var(--spacing) * 10);
-      padding: calc(var(--spacing) * 0);
-    }
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+    -webkit-user-select: none;
+    user-select: none;
+    flex: 1;
+    text-align: center;
   }
-  .kt-btn-sm {
+  [data-kt-datepicker-prev],	[data-kt-datepicker-next] {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     height: calc(var(--spacing) * 7);
-    gap: calc(var(--spacing) * 1.25);
+    width: calc(var(--spacing) * 7);
+    cursor: pointer;
     border-radius: calc(var(--radius) - 2px);
-    padding-inline: calc(var(--spacing) * 2.5);
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-    svg {
-      width: calc(var(--spacing) * 3.5);
-      height: calc(var(--spacing) * 3.5);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 60%, transparent);
+        }
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+    &:focus-visible {
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
-    i {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
     }
-    &.kt-btn-icon {
-      width: calc(var(--spacing) * 7);
-      height: calc(var(--spacing) * 7);
-      padding: calc(var(--spacing) * 0);
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
-  }
-}
-@layer components {
-  .kt-label {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-leading: 1;
-    line-height: 1;
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--foreground);
-    .kt-switch:disabled + &,	.kt-checkbox:disabled + &,	.kt-radio:disabled + & {
+    &:disabled {
       cursor: not-allowed;
-      opacity: 50%;
+    }
+    &:disabled {
+      opacity: 40%;
+    }
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
+        }
+      }
     }
   }
-  .kt-label-secondary {
-    --tw-font-weight: var(--font-weight-normal);
-    font-weight: var(--font-weight-normal);
+  [data-kt-datepicker-prev] svg,	[data-kt-datepicker-next] svg {
+    height: calc(var(--spacing) * 3.5);
+    width: calc(var(--spacing) * 3.5);
   }
-}
-@layer components {
-  .kt-card {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    border-radius: calc(var(--radius) + 4px);
-    color: var(--card-foreground);
+  [data-kt-datepicker-calendar-table] {
+    width: 100%;
+    border-collapse: collapse;
   }
-  .kt-card {
+  [data-kt-datepicker-calendar-table] thead {
     border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--border);
-    background-color: var(--card);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-shadow-color: rgba(0,0,0,0.05);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
-    }
+    border-width: 0px;
   }
-  .kt-card-header {
-    display: flex;
-    min-height: calc(var(--spacing) * 14);
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: calc(var(--spacing) * 2.5);
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-    border-color: var(--border);
-    padding-inline: calc(var(--spacing) * 5);
+  [data-kt-datepicker-calendar-table] th {
+    padding-inline: calc(var(--spacing) * 0.5);
+    padding-block: calc(var(--spacing) * 1);
+    text-align: center;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    width: calc(100% / 7);
   }
-  .kt-card-footer {
-    display: flex;
-    align-items: center;
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-    border-color: var(--border);
-    padding-inline: calc(var(--spacing) * 5);
-    padding-block: calc(var(--spacing) * 4);
+  [data-kt-datepicker-calendar-body] {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
   }
-  .kt-card-content {
-    flex-grow: 1;
-    padding-inline: calc(var(--spacing) * 5);
-    padding-block: calc(var(--spacing) * 5);
+  [data-kt-datepicker-calendar-row] {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
   }
-  .kt-card-table {
-    display: grid;
-    flex-grow: 1;
-    .kt-table-border {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
-    }
-    .kt-table {
-      th,	td {
-        &:first-child {
-          padding-inline-start: calc(var(--spacing) * 5);
+  [data-kt-datepicker-day] {
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: calc(var(--spacing) * 0.5);
+    text-align: center;
+  }
+  [data-kt-datepicker-day] button {
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    border-radius: calc(var(--radius) - 2px);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+    cursor: pointer;
+    color: var(--foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 60%, transparent);
         }
-        &:last-child {
-          padding-inline-end: calc(var(--spacing) * 5);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
+    }
+    &:focus-visible {
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:active {
+      scale: 0.97;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &:disabled {
+      opacity: 40%;
+    }
+    &:disabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: transparent;
         }
       }
     }
   }
-  .kt-card-grid {
-    & .kt-card-header,	& .kt-card-footer {
-      padding-inline: calc(var(--spacing) * 5);
+  [data-kt-datepicker-day][data-today="true"] button {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 8%, transparent);
     }
-    .kt-card-content {
-      padding: 0;
-      .kt-table {
-        border: 0;
-        th:first-child,	td:first-child {
-          padding-inline-start: calc(var(--spacing) * 5);
-          &.kt-table-cell-center {
-            padding-inline-end: calc(var(--spacing) * 5);
-          }
-        }
-        th:last-child,	td:last-child {
-          padding-inline-end: calc(var(--spacing) * 5);
-          &.table-cell-center {
-            padding-inline-start: calc(var(--spacing) * 5);
-          }
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--primary);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 15%, transparent);
         }
       }
     }
   }
-  .kt-card-heading {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  [data-kt-datepicker-day][data-kt-selected="true"] button,	[data-kt-datepicker-day].active button,	[data-kt-datepicker-day][aria-selected="true"] button {
+    background-color: var(--primary);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--primary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        }
+      }
     }
   }
-  .kt-card-toolbar {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 2.5);
-  }
-  .kt-card-title {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-leading: 1;
-    line-height: 1;
+  [data-kt-datepicker-day][data-kt-selected="true"][data-today="true"] button,	[data-kt-datepicker-day].active[data-today="true"] button,	[data-kt-datepicker-day][aria-selected="true"][data-today="true"] button {
+    background-color: var(--primary);
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
+    color: var(--primary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+        }
+      }
+    }
+    border-style: var(--tw-border-style);
+    border-width: 0px;
   }
-  .kt-card-description {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--muted-foreground);
+  [data-kt-datepicker-day][data-kt-hover] button {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
   }
-  .kt-card-group {
-    flex-grow: 1;
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-    border-color: var(--border);
-    padding-inline: calc(var(--spacing) * 5);
-    padding-block: calc(var(--spacing) * 5);
-    &:last-child {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 0px;
+  [data-kt-datepicker-day][data-kt-selected="true"][data-kt-hover] button {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 90%, transparent);
     }
-    & + .kt-card-footer {
-      border-top-style: var(--tw-border-style);
-      border-top-width: 0px;
+    color: var(--primary-foreground);
+  }
+  [data-kt-datepicker-day][data-kt-hover-range] button {
+    background-color: var(--accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--accent) 40%, transparent);
+    }
+    color: var(--accent-foreground);
+  }
+  [data-kt-datepicker-day][data-kt-selected="true"][data-kt-hover-range] button {
+    background-color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--primary) 80%, transparent);
     }
+    color: var(--primary-foreground);
   }
-  .kt-card-accent {
-    background-color: var(--muted);
-    padding: calc(var(--spacing) * 1);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-shadow-color: rgba(0,0,0,0.05);
+  [data-kt-datepicker-day][data-kt-hover-range][data-kt-hover] button {
+    background-color: var(--accent);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
-    }
-    .kt-card-header {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 0px;
+      background-color: color-mix(in oklab, var(--accent) 60%, transparent);
     }
-    .kt-card-content {
-      border-top-left-radius: calc(var(--radius) + 4px);
-      border-top-right-radius: calc(var(--radius) + 4px);
-      background-color: var(--card);
-      &:last-child {
-        border-bottom-right-radius: calc(var(--radius) + 4px);
-        border-bottom-left-radius: calc(var(--radius) + 4px);
+    color: var(--accent-foreground);
+  }
+  [data-kt-datepicker-day][data-outside="true"] button {
+    cursor: default;
+    color: var(--muted-foreground);
+    opacity: 50%;
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 40%, transparent);
+        }
       }
     }
-    .kt-card-table {
-      border-radius: calc(var(--radius) + 4px);
-      background-color: var(--card);
-      &:last-child {
-        border-bottom-right-radius: calc(var(--radius) + 4px);
-        border-bottom-left-radius: calc(var(--radius) + 4px);
+    &:hover {
+      @media (hover: hover) {
+        opacity: 70%;
       }
     }
-    .kt-card-footer {
-      margin-top: 2px;
-      border-bottom-right-radius: calc(var(--radius) + 4px);
-      border-bottom-left-radius: calc(var(--radius) + 4px);
-      border-top-style: var(--tw-border-style);
-      border-top-width: 0px;
-      background-color: var(--card);
+  }
+  [data-kt-datepicker-day][tabindex="0"] button {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
-  .kt-card-border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
+  [data-kt-datepicker-footer] {
+    margin-top: calc(var(--spacing) * 1.5);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(var(--spacing) * 2);
+    padding-top: calc(var(--spacing) * 1.5);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
     border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 40%, transparent);
+    }
   }
-  .kt-card-rounded-t {
-    border-top-left-radius: calc(var(--radius) + 4px);
-    border-top-right-radius: calc(var(--radius) + 4px);
-  }
-  .kt-card-rounded-b {
-    border-bottom-right-radius: calc(var(--radius) + 4px);
-    border-bottom-left-radius: calc(var(--radius) + 4px);
-  }
-}
-@layer components {
-  .kt-checkbox {
+  [data-kt-datepicker-today],	[data-kt-datepicker-clear],	[data-kt-datepicker-apply] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--spacing) * 7);
     cursor: pointer;
-    appearance: none;
-    background-position: center;
-    background-repeat: no-repeat;
-    flex-shrink: 0;
-    border-radius: calc(var(--radius) - 4px);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--input);
-    background-color: var(--background);
-    --tw-ring-offset-color: var(--background);
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
+    border-radius: calc(var(--radius) - 2px);
+    padding-inline: calc(var(--spacing) * 3);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     &:focus-visible {
       --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+      }
     }
     &:focus-visible {
       --tw-ring-offset-width: 2px;
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:active {
+      scale: 0.97;
+    }
     &:disabled {
       cursor: not-allowed;
     }
     &:disabled {
       opacity: 50%;
     }
-    &[aria-invalid="true"] {
-      border-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+  }
+  [data-kt-datepicker-today] {
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--accent) 70%, transparent);
+        }
       }
     }
-    &[aria-invalid="true"] {
-      --tw-ring-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
       }
     }
   }
-  .kt-checkbox {
-    &:checked {
-      border-color: var(--primary);
-    }
-    &:checked {
-      background-color: var(--primary);
-    }
-    &:checked {
-      color: var(--primary-foreground);
-    }
-    &:indeterminate {
-      border-color: var(--primary);
-    }
-    &:indeterminate {
-      background-color: var(--primary);
+  [data-kt-datepicker-clear] {
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+        }
+      }
     }
-    &:indeterminate {
-      color: var(--primary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--destructive);
+      }
     }
   }
-  .kt-checkbox-mono {
-    &:checked {
-      border-color: var(--mono);
-    }
-    &:checked {
-      background-color: var(--mono);
-    }
-    &:checked {
-      color: var(--mono-foreground);
-    }
-    &:indeterminate {
-      border-color: var(--mono);
-    }
-    &:indeterminate {
-      background-color: var(--mono);
-    }
-    &:indeterminate {
-      color: var(--mono-foreground);
+  [data-kt-datepicker-apply] {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 95%, transparent);
+        }
+      }
     }
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
-  .kt-checkbox {
-    width: calc(var(--spacing) * 4.5);
-    height: calc(var(--spacing) * 4.5);
-    &:checked,	&[aria-checked='true'] {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.3667 0.541643L4.80007 6.10831L1.56674 2.87498C1.41061 2.71977 1.1994 2.63265 0.979241 2.63265C0.759086 2.63265 0.547876 2.71977 0.391741 2.87498C0.236532 3.03111 0.149414 3.24232 0.149414 3.46248C0.149414 3.68263 0.236532 3.89384 0.391741 4.04998L4.21674 7.87498C4.37288 8.03019 4.58409 8.1173 4.80424 8.1173C5.0244 8.1173 5.23561 8.03019 5.39174 7.87498L11.5417 1.72498C11.6198 1.64751 11.6818 1.55534 11.7241 1.45379C11.7665 1.35224 11.7882 1.24332 11.7882 1.13331C11.7882 1.0233 11.7665 0.914379 11.7241 0.81283C11.6818 0.711281 11.6198 0.619113 11.5417 0.541643C11.3856 0.386434 11.1744 0.299316 10.9542 0.299316C10.7341 0.299316 10.5229 0.386434 10.3667 0.541643Z' fill='white'/%3E%3C/svg%3E");
+  [data-kt-datepicker-multimonth-container] {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 4);
+    @media (width >= 48rem) {
+      flex-direction: row;
     }
-    &:indeterminate {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
+  }
+  [data-kt-datepicker-time-picker] {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1.5);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 40%, transparent);
     }
+    padding: calc(var(--spacing) * 2);
   }
-  .kt-checkbox {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
+  [data-kt-datepicker-time-display] {
+    text-align: center;
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--foreground);
   }
-  .kt-checkbox-sm {
-    width: calc(var(--spacing) * 4.5);
-    height: calc(var(--spacing) * 4.5);
-    &:checked,	&[aria-checked='true'] {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M8.4932 0.233321L4.03986 4.68665L1.4532 2.09999C1.32829 1.97582 1.15932 1.90613 0.983198 1.90613C0.807074 1.90613 0.638106 1.97582 0.513198 2.09999C0.38903 2.2249 0.319336 2.39386 0.319336 2.56999C0.319336 2.74611 0.38903 2.91508 0.513198 3.03999L3.5732 6.09999C3.69811 6.22415 3.86707 6.29385 4.0432 6.29385C4.21932 6.29385 4.38829 6.22415 4.5132 6.09999L9.4332 1.17999C9.49568 1.11801 9.54528 1.04428 9.57912 0.963038C9.61297 0.881799 9.6304 0.794662 9.6304 0.706655C9.6304 0.618647 9.61297 0.53151 9.57912 0.45027C9.54528 0.369031 9.49568 0.295296 9.4332 0.233321C9.30829 0.109154 9.13932 0.0394592 8.9632 0.0394592C8.78707 0.0394592 8.61811 0.109154 8.4932 0.233321Z' fill='white'/%3E%3C/svg%3E");
-    }
-    &:indeterminate {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
-    }
+  [data-kt-datepicker-time-controls] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
   }
-  .kt-checkbox-lg {
-    width: calc(var(--spacing) * 5.5);
-    height: calc(var(--spacing) * 5.5);
-    &:checked,	&[aria-checked='true'] {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M11.8035 1.19582L5.68018 7.31915L2.12351 3.76249C1.95176 3.59176 1.71943 3.49593 1.47726 3.49593C1.23509 3.49593 1.00276 3.59176 0.831013 3.76249C0.660283 3.93424 0.564453 4.16657 0.564453 4.40874C0.564453 4.65091 0.660283 4.88324 0.831013 5.05499L5.03851 9.26249C5.21026 9.43322 5.44259 9.52905 5.68476 9.52905C5.92693 9.52905 6.15926 9.43322 6.33101 9.26249L13.096 2.49749C13.1819 2.41227 13.2501 2.31089 13.2967 2.19918C13.3432 2.08748 13.3672 1.96766 13.3672 1.84665C13.3672 1.72564 13.3432 1.60583 13.2967 1.49413C13.2501 1.38242 13.1819 1.28104 13.096 1.19582C12.9243 1.02509 12.6919 0.92926 12.4498 0.92926C12.2076 0.92926 11.9753 1.02509 11.8035 1.19582Z' fill='white'/%3E%3C/svg%3E");
+  [data-kt-datepicker-time-unit] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+  }
+  [data-kt-datepicker-time-up],	[data-kt-datepicker-time-down] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--spacing) * 6);
+    width: calc(var(--spacing) * 8);
+    border-radius: calc(var(--radius) - 2px);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground);
+      }
     }
-    &:indeterminate {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3E%3C/svg%3E");
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
+      }
     }
-  }
-}
-@layer components {
-  .dark .kt-checkbox {
-    &[aria-invalid="true"] {
-      border-color: var(--destructive);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
     }
-    &[aria-invalid="true"] {
-      --tw-ring-color: var(--destructive);
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &:disabled {
+      opacity: 50%;
+    }
   }
-}
-@layer components {
-  .kt-datatable-toolbar {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: calc(var(--spacing) * 3);
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-    border-color: var(--border);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 3);
+  [data-kt-datepicker-time-value] {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--foreground);
+  }
+  [data-kt-datepicker-time-separator] {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
     color: var(--muted-foreground);
-    @media (width >= 40rem) {
-      flex-direction: row;
-    }
-    @media (width >= 40rem) {
-      justify-content: space-between;
-    }
   }
-  .kt-datatable-pagination {
+  [data-kt-datepicker-ampm-control] {
+    margin-left: calc(var(--spacing) * 2);
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: calc(var(--spacing) * 1);
-    .kt-datatable-pagination-button {
-      display: inline-flex;
-      height: calc(var(--spacing) * 7);
-      min-width: calc(var(--spacing) * 7);
-      cursor: pointer;
-      align-items: center;
-      justify-content: center;
-      border-radius: calc(var(--radius) - 2px);
-      background-color: transparent;
-      padding-inline: calc(var(--spacing) * 0.5);
-      color: var(--muted-foreground);
-      &.active,	&:hover:not(:disabled) {
-        background-color: var(--accent);
-        color: var(--accent-foreground);
-      }
-      &.kt-datatable-pagination-prev {
+  }
+  [data-kt-datepicker-ampm-button] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--spacing) * 6);
+    width: calc(var(--spacing) * 10);
+    border-radius: calc(var(--radius) - 2px);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
         color: var(--foreground);
       }
-      &.kt-datatable-pagination-next {
-        color: var(--foreground);
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--accent);
       }
-      &:disabled {
-        cursor: default;
-        color: var(--muted-foreground);
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--accent-foreground);
+      }
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &:disabled {
+      opacity: 50%;
+    }
   }
-  .kt-datatable-length {
-    display: flex;
+  [data-kt-datepicker-multidate-tag] {
+    display: inline-flex;
     align-items: center;
-    gap: calc(var(--spacing) * 2);
-    white-space: nowrap;
+    gap: calc(var(--spacing) * 1.5);
+    border-radius: calc(var(--radius) - 2px);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    background-color: var(--accent);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--accent-foreground);
   }
-  .kt-datatable-info {
-    display: flex;
+  [data-kt-datepicker-multidate-tag] button {
+    display: inline-flex;
     align-items: center;
-    gap: calc(var(--spacing) * 4);
+    justify-content: center;
+    height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 4);
+    border-radius: calc(var(--radius) - 4px);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    color: var(--muted-foreground);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--destructive);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+        }
+      }
+    }
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    &:focus-visible {
+      --tw-ring-color: var(--ring);
+    }
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
   }
-  .kt-datatable-loading {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    border-radius: calc(var(--radius) - 2px);
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--border);
-    background-color: var(--card);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 2);
+  [data-kt-datepicker-empty] {
+    padding-block: calc(var(--spacing) * 8);
+    text-align: center;
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-leading: 1;
-    line-height: 1;
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--card-foreground);
-    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-shadow-color: rgba(0,0,0,0.05);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, rgba(0,0,0,0.05) var(--tw-shadow-alpha), transparent);
-    }
+    color: var(--muted-foreground);
   }
-  .kt-datatable-overlay {
+  [data-kt-datepicker-live] {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
+    margin: -1px;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    padding: calc(var(--spacing) * 0);
+    white-space: nowrap;
+    clip: rect(0, 0, 0, 0);
   }
-  [data-kt-datatable] {
-    position: relative;
+}
+@layer utilities {
+  .dark [data-kt-datepicker-input-wrapper] {
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
+    }
+    &[aria-invalid="true"] {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+      }
+    }
   }
-  [data-kt-datatable].loading table {
-    opacity: 0.6;
+  .dark [data-kt-datepicker-dropdown] {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   }
 }
-@layer components;
 @layer components {
   .kt-drawer {
     position: fixed;
@@ -6336,7 +7668,39 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-tracking {
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
   syntax: "*";
   inherits: false;
 }
@@ -6359,6 +7723,10 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-content {
   syntax: "*";
   inherits: false;
@@ -6419,11 +7787,20 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-tracking: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-ease: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-tracking: initial;
       --tw-content: "";
     }
   }