uibee 2.14.0 → 2.16.0

package/dist/src/globals.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -13,12 +13,21 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-amber-200: oklch(92.4% 0.12 95.746);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
     --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-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-sky-200: oklch(90.1% 0.058 230.902);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
+    --color-sky-500: oklch(68.5% 0.169 237.323);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -71,6 +80,7 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-login: #fd8738;
+    --color-login-950: #0e0e0e;
     --color-login-900: #121212;
     --color-login-800: #181818;
     --color-login-700: #1a1a1a;
@@ -826,145 +836,145 @@
     font-size: 1.2rem;
     font-weight: 500;
   }
-  .prose-base {
-    font-size: 1rem;
-    line-height: 1.75;
+  .prose-sm {
+    font-size: 0.875rem;
+    line-height: 1.7142857;
     :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
     }
     :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 1.25em;
-      line-height: 1.6;
-      margin-top: 1.2em;
-      margin-bottom: 1.2em;
+      font-size: 1.2857143em;
+      line-height: 1.5555556;
+      margin-top: 0.8888889em;
+      margin-bottom: 0.8888889em;
     }
     :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.6em;
-      margin-bottom: 1.6em;
-      padding-inline-start: 1em;
+      margin-top: 1.3333333em;
+      margin-bottom: 1.3333333em;
+      padding-inline-start: 1.1111111em;
     }
     :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 2.25em;
+      font-size: 2.1428571em;
       margin-top: 0;
-      margin-bottom: 0.8888889em;
-      line-height: 1.1111111;
+      margin-bottom: 0.8em;
+      line-height: 1.2;
     }
     :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 1.5em;
-      margin-top: 2em;
-      margin-bottom: 1em;
-      line-height: 1.3333333;
+      font-size: 1.4285714em;
+      margin-top: 1.6em;
+      margin-bottom: 0.8em;
+      line-height: 1.4;
     }
     :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 1.25em;
-      margin-top: 1.6em;
-      margin-bottom: 0.6em;
-      line-height: 1.6;
+      font-size: 1.2857143em;
+      margin-top: 1.5555556em;
+      margin-bottom: 0.4444444em;
+      line-height: 1.5555556;
     }
     :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.5em;
-      margin-bottom: 0.5em;
-      line-height: 1.5;
+      margin-top: 1.4285714em;
+      margin-bottom: 0.5714286em;
+      line-height: 1.4285714;
     }
     :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
       margin-bottom: 0;
     }
     :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
+      font-size: 0.8571429em;
       border-radius: 0.3125rem;
-      padding-top: 0.1875em;
-      padding-inline-end: 0.375em;
-      padding-bottom: 0.1875em;
-      padding-inline-start: 0.375em;
+      padding-top: 0.1428571em;
+      padding-inline-end: 0.3571429em;
+      padding-bottom: 0.1428571em;
+      padding-inline-start: 0.3571429em;
     }
     :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
+      font-size: 0.8571429em;
     }
     :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
+      font-size: 0.9em;
     }
     :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.9em;
+      font-size: 0.8888889em;
     }
     :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.7142857;
-      margin-top: 1.7142857em;
-      margin-bottom: 1.7142857em;
-      border-radius: 0.375rem;
-      padding-top: 0.8571429em;
-      padding-inline-end: 1.1428571em;
-      padding-bottom: 0.8571429em;
-      padding-inline-start: 1.1428571em;
+      font-size: 0.8571429em;
+      line-height: 1.6666667;
+      margin-top: 1.6666667em;
+      margin-bottom: 1.6666667em;
+      border-radius: 0.25rem;
+      padding-top: 0.6666667em;
+      padding-inline-end: 1em;
+      padding-bottom: 0.6666667em;
+      padding-inline-start: 1em;
     }
     :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
-      padding-inline-start: 1.625em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
+      padding-inline-start: 1.5714286em;
     }
     :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
-      padding-inline-start: 1.625em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
+      padding-inline-start: 1.5714286em;
     }
     :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.5em;
-      margin-bottom: 0.5em;
+      margin-top: 0.2857143em;
+      margin-bottom: 0.2857143em;
     }
     :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-inline-start: 0.375em;
+      padding-inline-start: 0.4285714em;
     }
     :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-inline-start: 0.375em;
+      padding-inline-start: 0.4285714em;
     }
-    :where(.prose-base > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.75em;
-      margin-bottom: 0.75em;
+    :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.5714286em;
+      margin-bottom: 0.5714286em;
     }
-    :where(.prose-base > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
+    :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.1428571em;
     }
-    :where(.prose-base > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-bottom: 1.25em;
+    :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.1428571em;
     }
-    :where(.prose-base > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
+    :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.1428571em;
     }
-    :where(.prose-base > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-bottom: 1.25em;
+    :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.1428571em;
     }
     :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.75em;
-      margin-bottom: 0.75em;
+      margin-top: 0.5714286em;
+      margin-bottom: 0.5714286em;
     }
     :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
-      margin-bottom: 1.25em;
+      margin-top: 1.1428571em;
+      margin-bottom: 1.1428571em;
     }
     :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 1.25em;
+      margin-top: 1.1428571em;
     }
     :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 0.5em;
-      padding-inline-start: 1.625em;
+      margin-top: 0.2857143em;
+      padding-inline-start: 1.5714286em;
     }
     :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 3em;
-      margin-bottom: 3em;
+      margin-top: 2.8571429em;
+      margin-bottom: 2.8571429em;
     }
     :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
@@ -979,13 +989,13 @@
       margin-top: 0;
     }
     :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.7142857;
+      font-size: 0.8571429em;
+      line-height: 1.5;
     }
     :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-inline-end: 0.5714286em;
-      padding-bottom: 0.5714286em;
-      padding-inline-start: 0.5714286em;
+      padding-inline-end: 1em;
+      padding-bottom: 0.6666667em;
+      padding-inline-start: 1em;
     }
     :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       padding-inline-start: 0;
@@ -994,10 +1004,10 @@
       padding-inline-end: 0;
     }
     :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      padding-top: 0.5714286em;
-      padding-inline-end: 0.5714286em;
-      padding-bottom: 0.5714286em;
-      padding-inline-start: 0.5714286em;
+      padding-top: 0.6666667em;
+      padding-inline-end: 1em;
+      padding-bottom: 0.6666667em;
+      padding-inline-start: 1em;
     }
     :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       padding-inline-start: 0;
@@ -1006,22 +1016,22 @@
       padding-inline-end: 0;
     }
     :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      margin-top: 2em;
-      margin-bottom: 2em;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
     }
     :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
       margin-bottom: 0;
     }
     :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
-      font-size: 0.875em;
-      line-height: 1.4285714;
-      margin-top: 0.8571429em;
+      font-size: 0.8571429em;
+      line-height: 1.3333333;
+      margin-top: 0.6666667em;
     }
-    :where(.prose-base > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-top: 0;
     }
-    :where(.prose-base > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
       margin-bottom: 0;
     }
   }
@@ -1119,6 +1129,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -1509,12 +1522,24 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .border-amber-400\/25 {
+    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-400) 25%, transparent);
+    }
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
   .border-login-50 {
     border-color: var(--color-login-50);
   }
+  .border-login-100\/10 {
+    border-color: color-mix(in srgb, #b0b0b0 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-login-100) 10%, transparent);
+    }
+  }
   .border-login-200 {
     border-color: var(--color-login-200);
   }
@@ -1539,9 +1564,27 @@
       border-color: color-mix(in oklab, var(--color-login-600) 50%, transparent);
     }
   }
+  .border-orange-400\/25 {
+    border-color: color-mix(in srgb, oklch(75% 0.183 55.934) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-orange-400) 25%, transparent);
+    }
+  }
+  .border-red-400\/25 {
+    border-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-400) 25%, transparent);
+    }
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .border-sky-400\/25 {
+    border-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-sky-400) 25%, transparent);
+    }
+  }
   .border-white {
     border-color: var(--color-white);
   }
@@ -1551,6 +1594,12 @@
   .bg-\[\#18181899\] {
     background-color: #18181899;
   }
+  .bg-amber-500\/10 {
+    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
+    }
+  }
   .bg-black\/60 {
     background-color: color-mix(in srgb, #000 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1614,6 +1663,9 @@
       background-color: color-mix(in oklab, var(--color-login-50) 5%, transparent);
     }
   }
+  .bg-login-200 {
+    background-color: var(--color-login-200);
+  }
   .bg-login-400 {
     background-color: var(--color-login-400);
   }
@@ -1668,6 +1720,18 @@
       background-color: color-mix(in oklab, var(--color-login) 70%, transparent);
     }
   }
+  .bg-orange-500\/10 {
+    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+    }
+  }
+  .bg-red-500\/10 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+  }
   .bg-red-500\/20 {
     background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1689,6 +1753,12 @@
   .bg-red-900 {
     background-color: var(--color-red-900);
   }
+  .bg-sky-500\/10 {
+    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
+    }
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1931,6 +2001,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -1975,6 +2048,10 @@
     --tw-tracking: 0.05em;
     letter-spacing: 0.05em;
   }
+  .tracking-\[0\.18em\] {
+    --tw-tracking: 0.18em;
+    letter-spacing: 0.18em;
+  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -1986,6 +2063,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-amber-200 {
+    color: var(--color-amber-200);
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -2022,18 +2102,30 @@
   .text-login-800 {
     color: var(--color-login-800);
   }
+  .text-login-950 {
+    color: var(--color-login-950);
+  }
   .text-login-text {
     color: var(--color-login-text);
   }
   .text-login-text\! {
     color: var(--color-login-text) !important;
   }
+  .text-orange-200 {
+    color: var(--color-orange-200);
+  }
+  .text-red-200 {
+    color: var(--color-red-200);
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-sky-200 {
+    color: var(--color-sky-200);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -2218,25 +2310,23 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .prose-invert {
-    --tw-prose-body: var(--tw-prose-invert-body);
-    --tw-prose-headings: var(--tw-prose-invert-headings);
-    --tw-prose-lead: var(--tw-prose-invert-lead);
-    --tw-prose-links: var(--tw-prose-invert-links);
-    --tw-prose-bold: var(--tw-prose-invert-bold);
-    --tw-prose-counters: var(--tw-prose-invert-counters);
-    --tw-prose-bullets: var(--tw-prose-invert-bullets);
-    --tw-prose-hr: var(--tw-prose-invert-hr);
-    --tw-prose-quotes: var(--tw-prose-invert-quotes);
-    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
-    --tw-prose-captions: var(--tw-prose-invert-captions);
-    --tw-prose-kbd: var(--tw-prose-invert-kbd);
-    --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
-    --tw-prose-code: var(--tw-prose-invert-code);
-    --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
-    --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
-    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
-    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+  .prose-custom {
+    --tw-prose-body: var(--color-login-text);
+    --tw-prose-headings: var(--color-login-text);
+    --tw-prose-lead: var(--color-login-300);
+    --tw-prose-links: var(--color-login);
+    --tw-prose-bold: var(--color-login-text);
+    --tw-prose-counters: var(--color-login-400);
+    --tw-prose-bullets: var(--color-login-400);
+    --tw-prose-hr: var(--color-login-300);
+    --tw-prose-quotes: var(--color-login-text);
+    --tw-prose-quote-borders: var(--color-login-300);
+    --tw-prose-captions: var(--color-login-300);
+    --tw-prose-code: var(--color-login-text);
+    --tw-prose-pre-code: var(--color-login-text);
+    --tw-prose-pre-bg: var(--color-login-800);
+    --tw-prose-th-borders: var(--color-login-500);
+    --tw-prose-td-borders: var(--color-login-500);
   }
   .outline-none {
     --tw-outline-style: none;
@@ -2249,6 +2339,12 @@
   .ring-inset {
     --tw-ring-inset: inset;
   }
+  .\*\*\:text-xs\! {
+    :is(& *) {
+      font-size: var(--text-xs) !important;
+      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
+    }
+  }
   .group-hover\:opacity-100 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2493,6 +2589,16 @@
       }
     }
   }
+  .hover\:bg-login-50\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #ededed 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-login-50) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-login-300\/20 {
     &:hover {
       @media (hover: hover) {
@@ -2618,6 +2724,13 @@
       }
     }
   }
+  .hover\:text-login-50 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-login-50);
+      }
+    }
+  }
   .hover\:text-login-100 {
     &:hover {
       @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "build:clean": "rm -rf dist",
-    "build:css": "node --loader ts-node/esm src/scripts/buildCss.ts",
+    "build:css": "node src/scripts/buildCss.ts",
     "build:rewrite": "node dist/src/scripts/rewriteAlias.js",
     "build:ts": "tsc --declaration",
     "build": "npm run build:clean && npm run build:css && npm run build:ts && npm run build:rewrite",
@@ -32,28 +32,29 @@
     "lint:fix": "eslint --fix ./src"
   },
   "peerDependencies": {
-    "next": "^16.1.6",
+    "next": "^16.2.1",
     "react": "^19.2.4"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.10.0",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "^19.2.3",
-    "eslint": "^10.0.3",
+    "eslint": "^10.2.0",
     "glob": "^13.0.6",
-    "postcss": "^8.5.8",
-    "tailwindcss": "^4.2.1",
+    "postcss": "^8.5.10",
+    "tailwindcss": "^4.2.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.2"
   },
   "dependencies": {
-    "lucide-react": "^0.577.0",
-    "react-dom": "19.2.4",
+    "lucide-react": "^1.8.0",
+    "react-dom": "19.2.5",
     "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "utilbee": "^1.4.1"
   }
 }

package/src/components/index.ts

@@ -44,5 +44,14 @@ export { MenuButton } from './table/menu'
 export { default as Table } from './table/table'
 export { default as Pagination } from './table/pagination'
 
+// Markdown
+export { default as MarkdownRender } from './markdownrender/markdownRender'
+
 // Confirm
-export { default as ConfirmPopup } from './confirm/confirmPopup'
+export { default as ConfirmPopup } from './confirm/confirmPopup'
+
+// Vulnerability
+export { default as SeverityPill } from './vulnerability/severityPill'
+
+// Layout
+export { default as Toggle } from './layout/toggle'

package/src/components/inputs/shared/fieldWrapper.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import InputLabel from './inputLabel'
 import InputInfo from './inputInfo'
 import InputError from './inputError'
-import ReactMarkdown from 'react-markdown'
+import MarkdownRender from '@components/markdownrender/markdownRender'
 
 interface FieldWrapperProps {
     label?: string
@@ -43,9 +43,9 @@ export default function FieldWrapper({
                 </div>
             )}
             {description && (
-                <p className='text-sm text-login-100 ml-1 mb-1'>
-                    <ReactMarkdown>{String(description || '')}</ReactMarkdown>
-                </p>
+                <div className='text-login-100 **:text-xs! ml-1 mb-1'>
+                    <MarkdownRender MDstr={String(description || '')} />
+                </div>
             )}
             {children}
             <InputError error={error} id={`${name}-error`} />