npm - @keenthemes/ktui - Versions diffs - 1.1.0 → 1.1.2 - Mend

@keenthemes/ktui 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/styles.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -9,21 +9,18 @@
       "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);
@@ -33,7 +30,6 @@
     --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);
@@ -43,22 +39,18 @@
     --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);
@@ -118,11 +110,9 @@
     --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);
@@ -401,9 +391,6 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-  .mb-10 {
-    margin-bottom: calc(var(--spacing) * 10);
-  }
   .-ml-1 {
     margin-left: calc(var(--spacing) * -1);
   }
@@ -603,9 +590,6 @@
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
-  .gap-1\.5 {
-    gap: calc(var(--spacing) * 1.5);
-  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1142,11 +1126,6 @@
       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;
@@ -1192,11 +1171,6 @@
       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);
@@ -1582,849 +1556,382 @@
   }
 }
 @layer components {
-  .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%;
-    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-container {
-    position: relative;
+  .kt-alert {
     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-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: 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;
+    align-items: stretch;
   }
   .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);
+    flex-grow: 1;
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-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-toolbar {
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--spacing) * 2.5);
   }
   .kt-alert-actions {
-    margin-top: calc(var(--spacing) * 6);
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing) * 3);
+    gap: calc(var(--spacing) * 2);
   }
-  .kt-alert-confirm-button {
-    border-radius: var(--radius);
-    padding-inline: calc(var(--spacing) * 6);
-    padding-block: calc(var(--spacing) * 3);
+  .kt-alert-description {
     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(--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);
-        }
-      }
+    & p {
+      margin-bottom: calc(var(--spacing) * 2);
     }
-    &:focus {
-      background-color: var(--primary);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-      }
+    & p {
+      --tw-leading: var(--leading-relaxed);
+      line-height: var(--leading-relaxed);
     }
-    &: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-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)));
     }
-    &: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-title {
+      --tw-font-weight: var(--font-weight-semibold);
+      font-weight: var(--font-weight-semibold);
     }
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
+  }
+  .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);
     }
-    &: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);
+    > svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      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));
-    --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);
+    &:focus,	&:hover {
+      i,	> svg {
+        color: var(--foreground);
       }
     }
   }
-  .kt-alert-cancel-button {
+  .kt-alert {
+    gap: calc(var(--spacing) * 2.5);
     border-radius: var(--radius);
-    padding-inline: calc(var(--spacing) * 6);
-    padding-block: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 3.5);
     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-icon svg {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
     }
-    &: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-toolbar {
+      padding-top: calc(var(--spacing) * 0.25);
     }
-    &: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-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-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-icon svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
     }
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
+  }
+  .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);
     }
-    &: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-toolbar {
+      padding-top: calc(var(--spacing) * 0.75);
     }
-    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 {
+    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);
     }
   }
-  .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-destructive {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    .kt-alert-close > svg {
+      color: var(--destructive-foreground);
     }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--muted);
-      }
+  }
+  .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);
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
-  .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);
+  .kt-alert-mono {
+    &.kt-alert-primary {
+      .kt-alert-icon {
+        color: var(--primary);
+      }
     }
-    &: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-success {
+      .kt-alert-icon {
+        color: var(--color-green-500);
+      }
     }
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
+    &.kt-alert-destructive {
+      .kt-alert-icon {
+        color: var(--destructive);
+      }
     }
-    &: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-warning {
+      .kt-alert-icon {
+        color: var(--color-yellow-500);
+      }
     }
-    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-info {
+      .kt-alert-icon {
+        color: var(--color-violet-600);
+      }
     }
   }
-  .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);
+  .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);
+        }
+      }
+    }
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--input);
+    border-color: var(--border);
     background-color: var(--background);
-    &:focus-visible {
-      border-color: var(--ring);
+    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);
     }
-    &: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-destructive {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--border);
+      background-color: var(--background);
+      color: var(--destructive);
     }
-    &:focus-visible {
-      --tw-ring-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-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-info {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--border);
+      background-color: var(--background);
+      color: var(--color-violet-600);
     }
-    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-warning {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--border);
+      background-color: var(--background);
+      color: var(--color-yellow-500);
+    }
+    &.kt-alert-mono {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      border-color: var(--border);
+      background-color: var(--background);
+      color: var(--mono);
     }
   }
-  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);
+  .kt-alert-light {
     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);
+    border-color: var(--border);
+    background-color: var(--muted);
+    color: var(--foreground);
+    .kt-alert-icon > svg {
+      color: var(--muted-foreground);
     }
-    &:focus {
-      --tw-ring-color: var(--ring);
+    .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-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);
+    &.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);
+      }
+      background-color: var(--primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+      }
+      color: var(--foreground);
+      .kt-alert-icon > svg {
+        color: var(--primary);
       }
     }
-    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 {
+    &.kt-alert-destructive {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
       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);
-        }
-      }
-      &:focus {
-        background-color: var(--color-green-700);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--destructive) 10%, transparent);
       }
-      &:active {
-        background-color: var(--color-green-800);
+      background-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
       }
-      &:focus-visible {
-        --tw-ring-color: var(--color-green-500);
+      color: var(--foreground);
+      .kt-alert-icon > svg {
+        color: var(--destructive);
       }
     }
-  }
-  [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);
+    &.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);
         }
       }
-      &:focus {
-        background-color: var(--color-red-700);
-      }
-      &:active {
-        background-color: var(--color-red-800);
-      }
-      &:focus-visible {
-        --tw-ring-color: var(--color-red-500);
-      }
-    }
-  }
-  [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);
+      .kt-alert-icon > svg {
+        color: var(--color-green-500);
       }
-      &:active {
-        background-color: var(--color-yellow-800);
-      }
-      &:focus-visible {
-        --tw-ring-color: var(--color-yellow-500);
-      }
-    }
-  }
-  [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);
+    &.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);
         }
       }
-      &:focus {
-        background-color: var(--color-blue-700);
-      }
-      &:active {
-        background-color: var(--color-blue-800);
-      }
-      &:focus-visible {
-        --tw-ring-color: var(--color-blue-500);
-      }
-    }
-  }
-  [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.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-purple-700);
-      }
-      &:active {
-        background-color: var(--color-purple-800);
-      }
-      &:focus-visible {
-        --tw-ring-color: var(--color-purple-500);
-      }
-    }
-  }
-}
-@layer components {
-  [data-kt-alert-position="top"] {
-    align-items: flex-start;
-    justify-content: center;
-  }
-  [data-kt-alert-position="center"] {
-    align-items: center;
-    justify-content: center;
-  }
-  [data-kt-alert-position="bottom"] {
-    align-items: flex-end;
-    justify-content: center;
-  }
-  [data-kt-alert-position="top-start"] {
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
-  [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);
+      .kt-alert-icon > svg {
+        color: var(--color-violet-500);
       }
-      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);
+    &.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);
+        }
       }
-      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);
+      &: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);
+        }
       }
-      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);
+      .kt-alert-icon > svg {
+        color: var(--color-yellow-500);
       }
-      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);
     }
   }
 }
@@ -2845,846 +2352,90 @@
           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-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);
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--accent-foreground);
-      }
-    }
-    &.active {
-      background-color: var(--accent);
-    }
-    &.active {
-      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);
-        }
-      }
-    }
-    &.kt-btn-primary {
-      color: var(--primary);
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--primary);
-        }
-      }
-      &:hover {
-        @media (hover: hover) {
-          color: var(--primary-foreground);
-        }
-      }
-      &.active {
-        background-color: var(--primary);
-      }
-      &.active {
-        color: var(--primary-foreground);
-      }
-    }
-    &.kt-btn-destructive {
-      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);
-      }
-    }
-  }
-  .kt-btn-dim {
-    background-color: transparent;
-    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;
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--foreground);
-      }
-    }
-    &.active {
-      background-color: transparent;
-    }
-    &.active {
-      color: var(--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 {
-    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));
-    }
-    &.kt-btn-icon {
-      width: calc(var(--spacing) * 8.5);
-      height: calc(var(--spacing) * 8.5);
-      padding: calc(var(--spacing) * 0);
-    }
-  }
-  .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);
-    }
-    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);
-    }
-  }
-  .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 {
-      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-btn-icon {
-      width: calc(var(--spacing) * 7);
-      height: calc(var(--spacing) * 7);
-      padding: calc(var(--spacing) * 0);
-    }
-  }
-}
-@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 + & {
-      cursor: not-allowed;
-      opacity: 50%;
-    }
-  }
-  .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-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);
-        }
-      }
-    }
-  }
-  .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);
-          }
-        }
+      &:is(.dark *) {
+        color: var(--color-red-600);
       }
     }
   }
-  .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-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-card-toolbar {
-    display: flex;
+  .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;
-    gap: calc(var(--spacing) * 2.5);
-  }
-  .kt-card-title {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
+    justify-content: center;
+    border-radius: calc(var(--radius) - 2px);
+    padding: calc(var(--spacing) * 0);
     --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;
+    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));
     }
-    .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);
-      }
+    > 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));
     }
-    .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);
+    &:focus,	&:hover {
+      i,	> svg {
+        opacity: 100%;
       }
     }
-    .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);
+  .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-checkbox {
+  .kt-link {
+    display: inline-flex;
     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 {
+    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;
     }
@@ -3693,484 +2444,366 @@
       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);
+      --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);
     }
-    &: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);
-      }
-    }
-    &[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);
+    &:is(.dark *) {
+      &:focus-visible {
+        --tw-ring-color: var(--color-neutral-700);
       }
     }
   }
-  .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);
-    }
-    &:indeterminate {
-      color: var(--primary-foreground);
-    }
-  }
-  .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);
-    }
-  }
-  .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");
-    }
-    &: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-link {
+    color: var(--primary);
   }
-  .kt-checkbox {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
+  .kt-link-inverse {
+    color: var(--background);
   }
-  .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");
-    }
+  .kt-link-mono {
+    color: var(--mono);
   }
-  .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");
+  .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);
     }
-    &: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 {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
-}
-@layer components {
-  .dark .kt-checkbox {
-    &[aria-invalid="true"] {
-      border-color: var(--destructive);
+  .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);
     }
-    &[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);
-      }
+    i {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-}
-@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);
+  .kt-link-lg {
+    gap: calc(var(--spacing) * 1.5);
     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;
+    svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
     }
-    @media (width >= 40rem) {
-      justify-content: space-between;
+    i {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
-  .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);
-      }
-      &.kt-datatable-pagination-prev {
-        color: var(--foreground);
-      }
-      &.kt-datatable-pagination-next {
-        color: var(--foreground);
+  .kt-link-underline {
+    margin-top: calc(var(--spacing) * -0.5);
+    text-decoration-style: solid;
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
       }
-      &:disabled {
-        cursor: default;
-        color: var(--muted-foreground);
+    }
+    &:hover {
+      @media (hover: hover) {
+        text-underline-offset: 4px;
       }
     }
   }
-  .kt-datatable-length {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    white-space: nowrap;
+  .kt-link-underlined {
+    margin-top: calc(var(--spacing) * -0.5);
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-underline-offset: 4px;
   }
-  .kt-datatable-info {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 4);
+  .kt-link-dashed {
+    text-decoration-style: dashed;
+    text-decoration-thickness: 1px;
   }
-  .kt-datatable-loading {
-    display: flex;
+  .kt-link-disabled {
+    pointer-events: none;
+    opacity: 50%;
+  }
+}
+@layer components {
+  .kt-btn {
+    display: inline-flex;
+    cursor: pointer;
     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;
+    justify-content: center;
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--card-foreground);
+    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-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;
+  .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);
+      }
+    }
   }
-}
-@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);
-    --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-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);
+        }
+      }
     }
-    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);
+    &.active {
+      background-color: var(--mono);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--mono) 90%, transparent);
+      }
     }
-    &: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-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);
+        }
+      }
     }
-    &:focus-within {
-      --tw-ring-color: var(--ring);
+    &.active {
+      background-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--ring) 30%, transparent);
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
     }
-    &:focus-within {
-      --tw-outline-style: none;
-      outline-style: none;
+  }
+  .kt-btn-secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--secondary);
+      }
     }
     &: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);
-        }
+        color: var(--foreground);
       }
     }
-    &:disabled {
-      cursor: not-allowed;
+    &.active {
+      background-color: var(--secondary);
     }
-    &:disabled {
-      opacity: 60%;
+    &.active {
+      color: var(--foreground);
     }
-    &[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);
-      }
+    i {
+      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) 10%, transparent);
+    svg {
+      color: var(--muted-foreground);
+    }
+    &:hover,	&.active {
+      i {
+        color: var(--muted-foreground);
+      }
+      svg {
+        color: var(--muted-foreground);
       }
     }
-    padding-left: 10px;
-    padding-right: 10px;
   }
-  [data-kt-datepicker-segmented-input] {
-    display: inline-flex;
-    min-width: calc(var(--spacing) * 0);
-    flex: 1;
-    align-items: center;
+  .kt-btn-outline {
     border-style: var(--tw-border-style);
-    border-width: 0px;
-    background-color: transparent;
-    --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);
-    &: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);
+    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) {
-        border-style: var(--tw-border-style);
-        border-width: 0px;
+        color: var(--accent-foreground);
       }
     }
-    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 {
+    &.active {
       background-color: var(--accent);
     }
-    &:focus {
+    &.active {
       color: var(--accent-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);
+    i {
+      color: var(--muted-foreground);
     }
-    &: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);
+    svg {
+      color: var(--muted-foreground);
+    }
+    &:hover,	&.active {
+      i {
+        color: var(--secondary-foreground);
+      }
+      svg {
+        color: var(--secondary-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);
+    &.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);
         }
       }
     }
-    &:disabled {
-      cursor: not-allowed;
-    }
-    &:disabled {
-      opacity: 50%;
-    }
-    &[aria-invalid="true"] {
+    &.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);
       }
-    }
-    &[aria-invalid="true"] {
       color: var(--destructive);
-    }
-    font-size: 0.875rem;
-    letter-spacing: normal;
-    word-spacing: normal;
-  }
-  [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: 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-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);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-        }
       }
     }
     &:hover {
@@ -4178,139 +2811,75 @@
         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 {
+      background-color: var(--accent);
     }
-    &:focus-visible {
-      --tw-ring-inset: inset;
+    &.active {
+      color: var(--accent-foreground);
     }
-    &:active {
-      background-color: var(--accent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--accent) 70%, transparent);
+    &: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);
+        }
       }
     }
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-    background-color: transparent;
-    cursor: pointer;
-  }
-  [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-primary {
+      color: var(--primary);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--primary);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--primary-foreground);
+        }
+      }
+      &.active {
+        background-color: var(--primary);
+      }
+      &.active {
+        color: var(--primary-foreground);
+      }
     }
-    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);
+    &.kt-btn-destructive {
+      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);
+      }
     }
-    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;
-  }
-  [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);
-  }
-  [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));
-    --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;
   }
-  [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);
-    width: calc(var(--spacing) * 7);
-    cursor: pointer;
-    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));
-    --tw-duration: 150ms;
-    transition-duration: 150ms;
+  .kt-btn-dim {
+    background-color: transparent;
     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: var(--accent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 60%, transparent);
-        }
+        background-color: transparent;
       }
     }
     &:hover {
@@ -4318,609 +2887,539 @@
         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);
+    &.active {
+      background-color: transparent;
     }
-    &: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);
+    &.active {
+      color: var(--foreground);
+    }
+    i {
+      color: var(--muted-foreground);
+    }
+    svg {
+      color: var(--muted-foreground);
+    }
+    &:hover,	&.active {
+      i {
+        color: var(--secondary-foreground);
+      }
+      svg {
+        color: var(--secondary-foreground);
       }
     }
-    &: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);
+  }
+  .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);
     }
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
+    i {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
     }
-    &:active {
-      --tw-scale-x: 95%;
-      --tw-scale-y: 95%;
-      --tw-scale-z: 95%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
+    &.kt-btn-icon {
+      width: calc(var(--spacing) * 8.5);
+      height: calc(var(--spacing) * 8.5);
+      padding: calc(var(--spacing) * 0);
     }
-    &:disabled {
+  }
+  .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);
+    }
+    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);
+    }
+  }
+  .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 {
+      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-btn-icon {
+      width: calc(var(--spacing) * 7);
+      height: calc(var(--spacing) * 7);
+      padding: calc(var(--spacing) * 0);
+    }
+  }
+}
+@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 + & {
       cursor: not-allowed;
-    }
-    &:disabled {
-      opacity: 40%;
-    }
-    &:disabled {
-      &:hover {
-        @media (hover: hover) {
-          background-color: transparent;
-        }
-      }
+      opacity: 50%;
     }
   }
-  [data-kt-datepicker-prev] svg,	[data-kt-datepicker-next] svg {
-    height: calc(var(--spacing) * 3.5);
-    width: calc(var(--spacing) * 3.5);
+  .kt-label-secondary {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
   }
-  [data-kt-datepicker-calendar-table] {
-    width: 100%;
-    border-collapse: collapse;
+}
+@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] thead {
+  .kt-card {
     border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-  [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);
+    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);
+    }
   }
-  [data-kt-datepicker-calendar-body] {
-    border-style: var(--tw-border-style);
-    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-row] {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
+  .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-day] {
-    padding-inline: calc(var(--spacing) * 1);
-    padding-block: calc(var(--spacing) * 0.5);
-    text-align: center;
+  .kt-card-content {
+    flex-grow: 1;
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 5);
   }
-  [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);
-        }
-      }
-    }
-    &: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%;
+  .kt-card-table {
+    display: grid;
+    flex-grow: 1;
+    .kt-table-border {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
     }
-    &:disabled {
-      &:hover {
-        @media (hover: hover) {
-          background-color: transparent;
+    .kt-table {
+      th,	td {
+        &:first-child {
+          padding-inline-start: calc(var(--spacing) * 5);
+        }
+        &:last-child {
+          padding-inline-end: 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-grid {
+    & .kt-card-header,	& .kt-card-footer {
+      padding-inline: 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-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);
+          }
         }
       }
     }
   }
-  [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-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"][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);
+  .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;
     --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);
-        }
-      }
-    }
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-  [data-kt-datepicker-day][data-kt-hover] button {
-    background-color: var(--accent);
-    color: var(--accent-foreground);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
   }
-  [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);
-    }
-    color: var(--primary-foreground);
+  .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-range] button {
-    background-color: var(--accent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--accent) 40%, transparent);
+  .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;
     }
-    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);
+    & + .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][data-kt-hover] button {
-    background-color: var(--accent);
+  .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)) {
-      background-color: color-mix(in oklab, var(--accent) 60%, transparent);
-    }
-    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);
-        }
+      --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);
       }
     }
-    &:hover {
-      @media (hover: hover) {
-        opacity: 70%;
+    .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);
       }
     }
-  }
-  [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);
+    .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);
     }
-    --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);
   }
-  [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;
+  .kt-card-border {
+    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) 40%, transparent);
-    }
   }
-  [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);
+  .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 {
     cursor: pointer;
-    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;
+    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;
+    }
     &: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%;
     }
-  }
-  [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"] {
+      border-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--destructive) 60%, transparent);
       }
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--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) 10%, transparent);
       }
     }
   }
-  [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);
-        }
-      }
+  .kt-checkbox {
+    &:checked {
+      border-color: var(--primary);
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--destructive);
-      }
+    &:checked {
+      background-color: var(--primary);
     }
-  }
-  [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);
-        }
-      }
+    &:checked {
+      color: var(--primary-foreground);
     }
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  }
-  [data-kt-datepicker-multimonth-container] {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing) * 4);
-    @media (width >= 48rem) {
-      flex-direction: row;
+    &:indeterminate {
+      border-color: var(--primary);
     }
-  }
-  [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);
+    &:indeterminate {
+      background-color: var(--primary);
+    }
+    &:indeterminate {
+      color: var(--primary-foreground);
     }
-    padding: calc(var(--spacing) * 2);
-  }
-  [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);
-  }
-  [data-kt-datepicker-time-controls] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--spacing) * 2);
-  }
-  [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);
-      }
+  .kt-checkbox-mono {
+    &:checked {
+      border-color: var(--mono);
     }
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-      }
+    &:checked {
+      background-color: var(--mono);
     }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--accent-foreground);
-      }
+    &:checked {
+      color: var(--mono-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);
+    &:indeterminate {
+      border-color: var(--mono);
     }
-    &: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);
-      }
+    &:indeterminate {
+      background-color: var(--mono);
     }
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
+    &:indeterminate {
+      color: var(--mono-foreground);
     }
-    &:active {
-      --tw-scale-x: 95%;
-      --tw-scale-y: 95%;
-      --tw-scale-z: 95%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .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");
     }
-    &:disabled {
-      cursor: not-allowed;
+    &: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-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");
+    }
+    &: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-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");
+    }
+    &: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");
+    }
+  }
+}
+@layer components {
+  .dark .kt-checkbox {
+    &[aria-invalid="true"] {
+      border-color: var(--destructive);
     }
-    &:disabled {
-      opacity: 50%;
+    &[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-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] {
+}
+@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;
+    }
   }
-  [data-kt-datepicker-ampm-control] {
-    margin-left: calc(var(--spacing) * 2);
+  .kt-datatable-pagination {
     display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing) * 1);
-  }
-  [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);
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
+    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);
-      }
-    }
-    &: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);
+      &.kt-datatable-pagination-prev {
+        color: var(--foreground);
+      }
+      &.kt-datatable-pagination-next {
+        color: var(--foreground);
+      }
+      &:disabled {
+        cursor: default;
+        color: var(--muted-foreground);
       }
-    }
-    &: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%;
     }
   }
-  [data-kt-datepicker-multidate-tag] {
-    display: inline-flex;
+  .kt-datatable-length {
+    display: flex;
     align-items: center;
-    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);
+    gap: calc(var(--spacing) * 2);
+    white-space: nowrap;
   }
-  [data-kt-datepicker-multidate-tag] button {
-    display: inline-flex;
+  .kt-datatable-info {
+    display: flex;
     align-items: center;
-    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;
-    }
+    gap: calc(var(--spacing) * 4);
   }
-  [data-kt-datepicker-empty] {
-    padding-block: calc(var(--spacing) * 8);
-    text-align: center;
+  .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));
-    color: var(--muted-foreground);
+    --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);
+    }
   }
-  [data-kt-datepicker-live] {
+  .kt-datatable-overlay {
     position: absolute;
-    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);
+    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;
   }
-}
-@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] {
+    position: relative;
   }
-  .dark [data-kt-datepicker-dropdown] {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  [data-kt-datatable].loading table {
+    opacity: 0.6;
   }
 }
 @layer components {
@@ -5419,21 +3918,6 @@
     &:disabled {
       opacity: 60%;
     }
-    &[readonly] {
-      cursor: not-allowed;
-    }
-    &[readonly] {
-      background-color: var(--muted);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
-      }
-    }
-    &[readonly] {
-      color: var(--secondary-foreground);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--secondary-foreground) 80%, transparent);
-      }
-    }
     &::file-selector-button {
       height: 100%;
     }
@@ -6085,9 +4569,6 @@
     &:disabled {
       opacity: 60%;
     }
-    &[readonly] {
-      opacity: 70%;
-    }
     &[aria-invalid="true"] {
       border-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
@@ -6767,15 +5248,6 @@
     &:disabled {
       opacity: 60%;
     }
-    &[readonly] {
-      cursor: not-allowed;
-    }
-    &[readonly] {
-      background-color: var(--muted);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
-      }
-    }
     &[aria-invalid="true"] {
       border-color: var(--destructive);
       @supports (color: color-mix(in lab, red, red)) {
@@ -7668,39 +6140,7 @@
   syntax: "*";
   inherits: false;
 }
-@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 {
+@property --tw-tracking {
   syntax: "*";
   inherits: false;
 }
@@ -7723,10 +6163,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   inherits: false;
@@ -7787,20 +6223,11 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: 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-tracking: initial;
       --tw-ease: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-tracking: initial;
       --tw-content: "";
     }
   }