fluency-v8-components 1.3.5 → 1.3.6

package/dist/{index-q2NbjdVo.mjs → index-BBxccHNP.mjs}

@@ -45,7 +45,7 @@ function M$(e, t, n, r, i, a) {
       K("input", ps({
         type: n.type,
         class: [
-          "flex-1 border-0 text-sm bg-transparent p-0.5 focus:ring-0",
+          "flex-1 border-0 text-sm bg-transparent p-0.5 focus:ring-0 focus:outline-none",
           n.readonly ? "disabled" : ""
         ],
         value: e.$attrs.modelValue
@@ -3664,7 +3664,7 @@ function ZH(e, t, n, r, i, a) {
     K("input", ps({
       type: "text",
       class: [
-        "input-block pr-8",
+        "pl-3 input-block pr-8",
         n.error ? "ring-red-600 " : "",
         n.readonly ? "disabled" : ""
       ],
@@ -3740,7 +3740,7 @@ function nj(e, t, n, r, i, a) {
     Di(K("input", ps({
       type: "text",
       class: [
-        "input-block pr-8",
+        "pl-3 input-block pr-8",
         n.error ? "ring-red-600 " : "",
         n.readonly ? "disabled" : ""
       ],
@@ -18557,7 +18557,7 @@ const EU = {
       }, null, 8, ["tooltip", "showingTooltip", "direction"])
     ], 42, jX));
   }
-}, qX = { class: "circle-btn std-white outline-2 outline-slate-200 p-3 m-2 dark:std-dark" }, KX = ["src"], RSe = /* @__PURE__ */ xt({
+}, qX = { class: "circle-btn std-white outline outline-2 outline-slate-200 p-3 m-2 dark:std-dark" }, KX = ["src"], RSe = /* @__PURE__ */ xt({
   __name: "ImageButton",
   props: {
     src: {
@@ -42349,7 +42349,7 @@ const Uke = /* @__PURE__ */ xr(bye, [["render", Sye]]), kye = { class: "w-full s
     const t = e, n = _e(0);
     t.obj.table.rows[0] && (n.value = t.obj.table.rows[0][t.config.field] || 0);
     function r(i, a) {
-      return a === "Data" ? si(i) + "B" : a === "Readable Numbers" ? ai(i.toPrecision(3)) : a === "comma" ? i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : i;
+      return a === "Data" ? si(i) + "B" : a === "Readable Numbers" ? ai(i.toPrecision(3)) : a === "comma" ? i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : a === "comma_data" ? i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "B" : i;
     }
     return (i, a) => (q(), de("div", fbe, [
       K("span", {
@@ -45226,6 +45226,7 @@ const Wwe = /* @__PURE__ */ xr(Gwe, [["render", Ywe]]), Zwe = {
       { label: "Default", value: "default" },
       { label: "Compact", value: "Readable Numbers" },
       { label: "Thousands Seperated", value: "comma" },
+      { label: "Thousands Seperated (Data)", value: "comma_data" },
       { label: "Data", value: "Data" }
     ];
     return (i, a) => (q(), de(gt, null, [
@@ -62707,7 +62708,7 @@ function(e) {
   var A = l.getContext("2d");
   A.fillStyle = "#fff", A.fillRect(0, 0, l.width, l.height);
   var u = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, d = this;
-  return (Bn.canvg ? Promise.resolve(Bn.canvg) : import("./index.es-PAPL4E6Y.mjs")).catch(function(f) {
+  return (Bn.canvg ? Promise.resolve(Bn.canvg) : import("./index.es-D_XhLSeH.mjs")).catch(function(f) {
     return Promise.reject(new Error("Could not load canvg: " + f));
   }).then(function(f) {
     return f.default ? f.default : f;

package/dist/{index.es-PAPL4E6Y.mjs → index.es-D_XhLSeH.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-q2NbjdVo.mjs";
+import { c as Da, _ as Va, g as il } from "./index-BBxccHNP.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "vite build",

package/src/assets/images/ai.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>ai</title> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="icon" fill="#0097f5" transform="translate(64.000000, 64.000000)"> <path d="M320,64 L320,320 L64,320 L64,64 L320,64 Z M171.749388,128 L146.817842,128 L99.4840387,256 L121.976629,256 L130.913039,230.977 L187.575039,230.977 L196.319607,256 L220.167172,256 L171.749388,128 Z M260.093778,128 L237.691519,128 L237.691519,256 L260.093778,256 L260.093778,128 Z M159.094727,149.47526 L181.409039,213.333 L137.135039,213.333 L159.094727,149.47526 Z M341.333333,256 L384,256 L384,298.666667 L341.333333,298.666667 L341.333333,256 Z M85.3333333,341.333333 L128,341.333333 L128,384 L85.3333333,384 L85.3333333,341.333333 Z M170.666667,341.333333 L213.333333,341.333333 L213.333333,384 L170.666667,384 L170.666667,341.333333 Z M85.3333333,0 L128,0 L128,42.6666667 L85.3333333,42.6666667 L85.3333333,0 Z M256,341.333333 L298.666667,341.333333 L298.666667,384 L256,384 L256,341.333333 Z M170.666667,0 L213.333333,0 L213.333333,42.6666667 L170.666667,42.6666667 L170.666667,0 Z M256,0 L298.666667,0 L298.666667,42.6666667 L256,42.6666667 L256,0 Z M341.333333,170.666667 L384,170.666667 L384,213.333333 L341.333333,213.333333 L341.333333,170.666667 Z M0,256 L42.6666667,256 L42.6666667,298.666667 L0,298.666667 L0,256 Z M341.333333,85.3333333 L384,85.3333333 L384,128 L341.333333,128 L341.333333,85.3333333 Z M0,170.666667 L42.6666667,170.666667 L42.6666667,213.333333 L0,213.333333 L0,170.666667 Z M0,85.3333333 L42.6666667,85.3333333 L42.6666667,128 L0,128 L0,85.3333333 Z" id="Combined-Shape"> </path> </g> </g> </g></svg>

package/src/assets/images/github-dark.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m8.20003216 0c-4.5281696 0-8.20003216 3.67233045-8.20003216 8.2025137 0 3.6241466 2.34955472 6.6987785 5.60770169 7.7833978.40979259.0759104.5602814-.1779394.5602814-.3946059 0-.195566-.00765306-.84177-.01112588-1.5271516-2.28132027.4961843-2.76269151-.9677944-2.76269151-.9677944-.37300645-.948109-.91045728-1.2001576-.91045728-1.2001576-.74395492-.5091149.05607959-.4986933.05607959-.4986933.82344388.0578979 1.25703171.8453083 1.25703171.8453083.73134987 1.2540026 1.9182821.8914335 2.38621225.6819077.07357231-.5302154.28612167-.8920125.52060124-1.0968421-1.82130043-.2074672-3.73598109-.9107972-3.73598109-4.05374848 0-.89548638.32033536-1.62725057.84492391-2.20166134-.08514837-.20663091-.36580356-1.04087425.07942464-2.17071817 0 0 .68858276-.22046205 2.25559569.8408051.6540475-.18179917 1.35555686-.27289175 2.0524358-.27597964.69687893.00308789 1.39890278.09418047 2.05423654.27597964 1.5651479-1.06126715 2.252766-.8408051 2.252766-.8408051.4463215 1.12984392.1655376 1.96408726.0803893 2.17071817.5257461.57441077.8438949 1.30611063.8438949 2.20166134 0 3.15041368-1.9182821 3.84415838-3.74421295 4.04718668.29409628.2545575.55616545.7537654.55616545 1.5189817 0 1.0974854-.0095181 1.9808133-.0095181 2.2510031 0 .2182748.1475948.4740546.5633041.3935122 3.2563462-1.0858415 5.6029426-4.1593798 5.6029426-7.7823041 0-4.53018325-3.6713481-8.2025137-8.19996784-8.2025137"/><path d="m3.07518929 11.6824029c-.01787762.0408541-.08159856.0531168-.13950928.0251063-.05905999-.0268489-.09226129-.0826118-.07310669-.1236596.01755837-.0420803.08127932-.0538267.14021161-.025558.05918769.0267843.09289978.0830636.07240436.1241113m.40045868.3611685c-.03881997.0364008-.11473601.0194912-.16626186-.0380143-.05324977-.0573765-.06321015-.1340506-.02381554-.1710323.0400331-.0363363.11365058-.0193621.16702804.0380789.05324977.0580219.06359325.1342442.02298552.1710322m.27480455.4620452c-.04992964.0350455-.1315282.0021944-.18190478-.0709945-.04986579-.0731243-.04986579-.1608994.00108543-.1960739.05056812-.0351746.13088971-.0035497.18196863.0690583.04980194.0744151.04980194.1621902-.00121313.1980747m.46462657.5351695c-.0446302.0496962-.13963698.0364009-.209232-.0314957-.07112739-.0663476-.09098432-.1605121-.04622642-.2102728.04514099-.0498253.14072241-.03582.21082822.0314957.07068044.0662185.09226128.161093.04469405.2102728m.60036877.1807134c-.01960153.0644113-.11116048.0937127-.20335792.0663476-.09206974-.0282042-.15234286-.1037166-.1337629-.1688379.01915459-.0648632.11109663-.0953908.20399641-.0660894.09194204.0280751.15234286.1030065.13318826.1685797m.68337202.0766095c.00229855.0678966-.07591604.1241759-.17271058.1254021-.09736918.0021299-.17609455-.0527941-.17711613-.1195289 0-.068542.07642682-.124305.17373215-.1259185.09679454-.0019362.17609456.0526005.17609456.1200453m.67130462-.0260098c.01162045.0662185-.05567602.1342442-.15176823.1523155-.09449599.0174259-.18196862-.0234282-.19403602-.0890659-.01174815-.0678965.05682529-.1358576.15112974-.1534772.09628375-.0169096.18241557.0229119.19467451.0902276" fill-rule="nonzero"/></g></svg>

package/src/assets/images/github.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/src/assets/images/high-priority.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#C10015"><path d="M480-120q-33 0-56.5-23.5T400-200q0-33 23.5-56.5T480-280q33 0 56.5 23.5T560-200q0 33-23.5 56.5T480-120Zm-80-240v-480h160v480H400Z"/></svg>

package/src/assets/images/power-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#C10015"><path d="M380-120v-120L240-380v-220q0-24 11-45t32-32l77 77h-40v186l140 140v74h40v-74l37-37L56-792l56-56 736 736-56 56-198-198-14 14v120H380Zm306-268-46-46v-166H474L320-754v-86h80v160h160v-160h80v200l-40-40h40q33 0 56.5 23.5T720-600v178l-34 34ZM558-516Zm-130 97Z"/></svg>

package/src/assets/images/save.svg

@@ -0,0 +1 @@
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5.75C3 4.23122 4.23122 3 5.75 3H15.7145C16.5764 3 17.4031 3.34241 18.0126 3.9519L20.0481 5.98744C20.6576 6.59693 21 7.42358 21 8.28553V18.25C21 19.7688 19.7688 21 18.25 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75ZM5.75 4.5C5.05964 4.5 4.5 5.05964 4.5 5.75V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H6V14.25C6 13.0074 7.00736 12 8.25 12H15.75C16.9926 12 18 13.0074 18 14.25V19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25V8.28553C19.5 7.8214 19.3156 7.37629 18.9874 7.0481L16.9519 5.01256C16.6918 4.75246 16.3582 4.58269 16 4.52344V7.25C16 8.49264 14.9926 9.5 13.75 9.5H9.25C8.00736 9.5 7 8.49264 7 7.25V4.5H5.75ZM16.5 19.5V14.25C16.5 13.8358 16.1642 13.5 15.75 13.5H8.25C7.83579 13.5 7.5 13.8358 7.5 14.25V19.5H16.5ZM8.5 4.5V7.25C8.5 7.66421 8.83579 8 9.25 8H13.75C14.1642 8 14.5 7.66421 14.5 7.25V4.5H8.5Z" fill="#FFFFFF"/></svg>

package/src/assets/index.ts

@@ -0,0 +1,15 @@
+import ai from './images/ai.svg';
+import githubDark from './images/github-dark.svg';
+import github from './images/github.svg';
+import highPriority from './images/high-priority.svg';
+import powerOff from './images/power-off.svg';
+import save from './images/save.svg';
+
+export {
+  ai,
+  githubDark,
+  github,
+  highPriority,
+  powerOff,
+  save,
+};

package/src/assets/main.css

@@ -0,0 +1,505 @@
+.dark {
+  background: #121212;
+  color: #cbd5e1;
+}
+
+@utility editor-style {
+  scrollbar-color: #e0e7ff #303030;
+  background: #303030;
+  color: #FFFFFF;
+  font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+  padding: 10px 5px 10px 5px;
+}
+
+@utility report-container {
+  min-height: calc(100vh - 425px);
+  min-width: 80rem;
+}
+
+@utility top-left {
+  align-items: left;
+  justify-content: left;
+}
+
+@utility top-center {
+  align-items: left;
+  justify-content: center;
+}
+
+@utility top-right {
+  align-items: left;
+  justify-content: right;
+}
+
+@utility center-left {
+  align-items: center;
+  justify-content: left;
+}
+
+@utility center-center {
+  align-items: center;
+  justify-content: center;
+}
+
+@utility center-right {
+  align-items: center;
+  justify-content: right;
+}
+
+@utility bottom-left {
+  align-items: end;
+  justify-content: left;
+}
+
+@utility bottom-center {
+  align-items: end;
+  justify-content: center;
+}
+
+@utility bottom-right {
+  align-items: end;
+  justify-content: right;
+}
+
+@utility row {
+  display: flex;
+  flex-direction: row;
+}
+
+@utility col {
+  display: flex;
+  flex-direction: column;
+}
+
+@utility white-bg {
+  @apply bg-white text-gray-900 dark:bg-neutral-800 dark:text-slate-300;
+}
+
+@utility dark-bg {
+  @apply bg-neutral-800 text-slate-300;
+}
+
+@utility std-dark {
+  @apply bg-neutral-800 hover:bg-gray-700 focus-visible:outline-sky-50;
+}
+
+@utility white-bg-hover {
+  @apply cursor-pointer bg-gray-300 focus-visible:outline-gray-300;
+}
+
+@utility dark-bg-hover {
+  @apply cursor-pointer bg-gray-700 focus-visible:outline-gray-700;
+}
+
+@utility input-icon {
+  @apply absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("/OpenSans-VariableFont_wdth,wght.ttf");
+}
+
+@layer utilities {
+  .status-dot {
+    @apply inline-flex items-center rounded-sm mx-2 my-0.5 px-2 py-0.5 font-medium
+  }
+
+  .status-positive {
+    @apply text-green-600 bg-green-600/20 dark:text-green-400 dark:bg-green-400/10
+  }
+
+  .status-negative {
+    @apply text-rose-600 bg-rose-600/20 dark:text-rose-400 dark:bg-rose-400/10
+  }
+
+  .status-warning {
+    @apply text-yellow-600 bg-yellow-600/20 dark:text-yellow-400 dark:bg-yellow-400/10
+  }
+
+  .status-neutral {
+    @apply text-gray-400 bg-gray-400/20 dark:text-gray-200 dark:bg-gray-200/10
+  }
+
+  .page-height {
+    height: calc(100vh - 200px);
+  }
+  .page-height-facet {
+    height: calc(100vh - 330px);
+  }
+  .page-height-search {
+    height: calc(100vh - 255px);
+  }
+}
+
+@layer components {
+  .screen-size {
+    @apply max-w-[1600px];
+  }
+
+  .loading {
+    @apply text-lg font-medium text-teal-700 relative -top-3 dark:text-teal-400
+  }
+
+  .std-btn {
+    @apply inline-flex items-center rounded-lg px-5 py-3 text-sm font-normal text-white;
+  }
+
+  .std-btn:disabled {
+    @apply disabled:opacity-30 disabled:cursor-not-allowed;
+  }
+
+  .action-btn {
+    @apply relative inline-flex items-center px-2 py-2 ring-1 ring-gray-500 dark:ring-gray-300 text-white;
+  }
+
+  .action-btn:disabled {
+    @apply disabled:opacity-30 disabled:cursor-not-allowed;
+  }
+
+  .circle-btn {
+    @apply rounded-full p-2 text-white;
+  }
+
+  .circle-btn:disabled {
+    @apply disabled:opacity-30 disabled:cursor-not-allowed;
+  }
+
+  .std-white {
+    @apply bg-white hover:bg-sky-50 focus-visible:outline-sky-50;
+  }
+
+  .std-blue {
+    @apply bg-sky-700 hover:bg-sky-500 focus-visible:outline-sky-500;
+  }
+
+  .std-green {
+    @apply bg-green-700 hover:bg-green-500 focus-visible:outline-green-500;
+  }
+
+  .std-red {
+    @apply bg-red-600 hover:bg-red-400 focus-visible:outline-red-400;
+  }
+
+  .checkboxInput {
+    @apply w-4 h-4 rounded-sm border-gray-300 text-sky-600 focus:ring-sky-600;
+  }
+
+  .card {
+    @apply relative flex flex-col gap-x-4 border-b bg-white dark:bg-neutral-800 dark:text-slate-300 border-gray-200 dark:border-neutral-600 p-8 rounded-lg
+  }
+  .card-base {
+    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg;
+  }
+
+  .card-title {
+    @apply text-base font-normal leading-6 text-gray-900;
+  }
+  
+  .card-subtitle {
+    @apply mt-1 max-w-2xl text-sm text-gray-500;
+  }
+
+  .section-title {
+    @apply text-base font-normal leading-6 text-gray-900;
+  }
+
+  .section-subtitle {
+    @apply mt-2 text-sm text-gray-700;
+  }
+
+  .title2 {
+    @apply text-base font-normal leading-6 text-gray-900;
+  }
+
+  .text {
+    @apply mt-2 text-sm text-gray-700;
+  }
+
+  .dotted-item {
+    @apply my-2 px-5 py-1 rounded-lg border-2 border-dotted flex flex-row justify-center items-center text-sm hover:opacity-75;
+  }
+
+  .input-block {
+    @apply text-sm bg-neutral-100 dark:bg-neutral-700 block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-slate-300 shadow-xs ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-300 sm:leading-6;
+  }
+
+  .disabled {
+    @apply text-slate-500 dark:text-slate-400 shadow-none cursor-not-allowed focus:ring-gray-300 focus:ring-1;
+  }
+
+  .input-label {
+    @apply absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900;
+  }
+
+  .table-desktop {
+    @apply hidden md:block;
+  }
+  .settings-table-desktop {
+    @apply hidden lg:block;
+  }
+
+  .card-mobile {
+    @apply grid grid-cols-1 gap-x-6 gap-y-4 pt-3 md:hidden;
+  }
+  .settings-card-mobile {
+    @apply grid grid-cols-1 gap-x-6 gap-y-4 pt-3 lg:hidden;
+  }
+
+  .std-table {
+    @apply min-w-full divide-y divide-gray-200 bg-gray-50 dark:divide-gray-600 dark:bg-neutral-800 dark:text-slate-300;
+  }
+
+  .std-table-header {
+    @apply py-2 pl-2 pr-3 sm:pl-6 font-medium;
+  }
+
+  .std-table-body {
+    @apply divide-y divide-gray-200 bg-white dark:divide-gray-600 dark:bg-neutral-900;
+  }
+
+  .table-frame1 {
+    @apply my-3 flow-root;
+  }
+
+  .table-frame3 {
+    @apply inline-block min-w-full align-middle;
+  }
+
+  .table-shadow {
+    @apply overflow-hidden shadow-sm ring-1 ring-black/5 sm:rounded-lg;
+  }
+
+  .table-font {
+    @apply py-2 text-sm font-normal text-gray-900 pl-3 pr-2 dark:text-slate-300;
+  }
+
+  .table-font-first-col {
+    @apply py-2 pl-2 pr-3 text-xs font-medium text-gray-900 sm:pl-6;
+  }
+
+  .table-font-other-cols {
+    @apply px-3 py-2 pl-6 text-xs text-gray-500;
+  }
+
+  .box {
+    @apply border-2 inline-flex rounded-lg m-1 px-4 py-2 text-sm items-center cursor-pointer;
+  }
+
+  .disabled-box {
+    @apply border-slate-300 bg-neutral-200 text-gray-500 cursor-not-allowed dark:bg-neutral-700 dark:text-gray-400 dark:border-neutral-600;
+  }
+
+  .blue-box {
+    @apply border-sky-400 bg-sky-200 text-sky-700 transition ease-in-out hover:scale-105 duration-200 hover:bg-sky-100 hover:font-normal dark:border-slate-500 dark:bg-slate-700 dark:text-sky-100 dark:hover:bg-sky-700;
+  }
+
+  .green-box {
+    @apply border-green-600 bg-green-300 text-emerald-800 transition ease-in-out hover:scale-105 duration-200 hover:bg-emerald-200 hover:font-normal dark:border-green-500 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700;
+  }
+
+  .selected-blue-box {
+    @apply border-sky-300 text-sky-700 bg-cyan-100 font-normal dark:border-sky-600 dark:bg-sky-900 dark:text-sky-200;
+  }
+
+  .selected-green-box {
+    @apply border-emerald-500 bg-emerald-100 text-green-900 font-normal cursor-pointer dark:border-emerald-500 dark:bg-emerald-700 dark:text-green-100;
+  }
+
+  .button-toggle {
+    @apply relative inline-flex items-center px-3 py-1 text-sm font-normal ring-1 ring-inset ring-gray-300 hover:bg-slate-300 focus:z-10;
+  }
+
+  .chip {
+    @apply text-sm font-medium px-2 py-1 rounded-full flex flex-row;
+  }
+
+  .select-chip {
+    @apply px-1 text-sm font-medium rounded-full bg-sky-200 dark:bg-sky-700;
+  }
+
+  .green-chip {
+    @apply bg-green-200 text-green-700 dark:bg-green-800 dark:text-green-300;
+  }
+
+  .red-chip {
+    @apply bg-red-200 text-red-600 dark:bg-red-800 dark:text-red-300;
+  }
+
+  .yellow-chip {
+    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
+  }
+
+  .blue-chip {
+    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
+  }
+
+  .image-position-box {
+    @apply border border-gray-400 p-1 m-1 dark:border-white;
+  }
+
+  .tooltip {
+    @apply isolate absolute z-50 inline-block px-3 py-2 text-xs text-black bg-gray-100 border border-gray-200 rounded-lg shadow-xs opacity-0 dark:bg-gray-800 dark:text-white
+  }
+
+  .spinner {
+    @apply w-5 h-5 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]
+  }
+
+  .icon-xs {
+    @apply w-3 h-3;
+  }
+
+  .icon {
+    @apply w-4 h-4;
+  }
+
+  .icon-md {
+    @apply w-5 h-5;
+  }
+
+  .icon-lg {
+    @apply w-6 h-6;
+  }
+
+  .icon-xl {
+    @apply w-8 h-8;
+  }
+
+  .icon-2xl {
+    @apply w-10 h-10;
+  }
+
+  .icon-yellow {
+    @apply text-yellow-600;
+  }
+
+  .icon-green {
+    @apply text-green-600;
+  }
+
+  .icon-red {
+    @apply text-red-600;
+  }
+
+  .icon-blue {
+    @apply text-blue-600;
+  }
+
+  .icon-skyblue {
+    @apply text-sky-600;
+  }
+
+  .icon-gray {
+    @apply text-gray-500 dark:text-gray-300;
+  }
+
+  .report-bold {
+    @apply font-semibold text-gray-800 dark:text-gray-100
+  }
+  .report-light {
+    @apply text-gray-500 dark:text-gray-400 font-light text-sm
+  }
+  .report-arrow {
+    @apply -m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-800 dark:text-gray-100 dark:hover:text-gray-400 hover:text-gray-400 mx-0.5
+  }
+  .report-card-field {
+    @apply text-xs text-gray-500 dark:text-gray-100 leading-6
+  }
+  .report-card-grid {
+    @apply grid grid-cols-10 gap-x-4 dark:border-neutral-600 px-6
+  }
+  .report-panel {
+    @apply bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700
+  }
+
+  .score-none {
+    @apply text-gray-400
+  }
+  .score-none-bg {
+    @apply bg-gray-400 text-white
+  }
+  .score-low {
+    @apply text-sky-600
+  }
+  .score-low-bg {
+    @apply bg-sky-600 text-white
+  }
+  .score-medium {
+    @apply text-amber-400
+  }
+  .score-medium-bg {
+    @apply bg-amber-400 text-white
+  }
+  .score-serious {
+    @apply text-orange-500
+  }
+  .score-serious-bg {
+    @apply bg-orange-500 text-white
+  }
+  .score-high {
+    @apply text-red-600 dark:text-red-500
+  }
+  .score-high-bg {
+    @apply bg-red-600 dark:bg-red-500 text-white
+  }
+  .score-critical {
+    @apply text-red-900 dark:text-rose-700
+  }
+  .score-critical-bg {
+    @apply bg-red-900 dark:bg-rose-700 text-white
+  }
+  .score-warn {
+    @apply text-violet-700 dark:text-violet-500
+  }
+  .score-warn-bg {
+    @apply bg-violet-700 dark:bg-violet-500 text-white
+  }
+  .calendar-spectrum {
+    @apply w-1/6 px-3 py-2 text-sm font-semibold text-white shadow-sm
+  }
+
+  .tab-selected {
+    @apply bg-sky-100 dark:bg-slate-800 text-sky-700 dark:text-sky-100;
+  }
+  .tab-unselected {
+    @apply text-slate-500 dark:text-slate-200 opacity-50;
+  }
+
+  .report-completed {
+    @apply border-green-500 bg-green-200 dark:border-green-400 dark:bg-green-800
+  }
+  .report-error {
+    @apply border-red-500 bg-red-300 dark:border-red-400 dark:bg-red-800
+  }
+  .report-running {
+    @apply border-gray-500 bg-gray-300 dark:border-gray-400 dark:bg-gray-600
+  }
+
+  .menu {
+    @apply relative ml-auto my-2
+  }
+  .menu-button {
+    @apply flex items-center gap-x-1 text-sm font-semibold leading-6
+  }
+  .menu-icon {
+    @apply h-6 shrink-0 hover:font-bold
+  }
+
+  .chat-sender {
+    @apply text-gray-50 bg-[#0084FF] dark:bg-[#1B74E4]
+  }
+  .chat-response {
+    @apply bg-gray-200 dark:bg-slate-700
+  }
+  .chat-bars {
+    @apply relative bg-gray-300 dark:bg-black
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}