@openviking/react 0.1.4 → 0.1.6

package/dist/components/wiki-dashboard/style.css

@@ -0,0 +1,741 @@
+.ov-directory-tour, .ov-wiki-dashboard, .ov-experience-dashboard, .ov-agent-connect, .ov-console, .ov-divider, .ov-file-browser-entries, .ov-drawer, .ov-file-browser, .ov-file-preview, .ov-file-tree, .ov-module-placeholder, .ov-popover, .ov-scope-switcher, .ov-tooltip, .ov-tui, .ov-viking-bot, .ov-viking-bot__popover, .ov-viking-bot__reference-picker--mention, .ov-viking-bot__interaction {
+  --ov-ui-tour-shadow-default: 0 15px 35px #0000000d, 0 5px 15px #0000000d;
+  --ov-ui-tour-highlight-default: #5252ff14;
+  --ov-ui-primary-default: #5252ff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #3833d2;
+  --ov-ui-primary-disabled-default: #acb4ff;
+  --ov-ui-text-on-primary-default: #fff;
+  --ov-ui-primary-light-default: #f5f7ff;
+  --ov-ui-connect-glow-warm-default: #ff952b0a;
+  --ov-ui-connect-glow-pink-default: #fb4fbc0f;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc0a;
+  --ov-ui-on-primary-default: #fff;
+  --ov-ui-text-1-default: #0b0b0f;
+  --ov-ui-text-2-default: #3f3f51;
+  --ov-ui-text-3-default: #6e718c;
+  --ov-ui-text-description-default: #0006;
+  --ov-ui-text-disabled-default: #a5a7bb;
+  --ov-ui-border-1-default: #f0f2fa;
+  --ov-ui-border-2-default: #e1e4f2;
+  --ov-ui-border-3-default: #d7daea;
+  --ov-ui-bg-1-default: #fff;
+  --ov-ui-bg-3-default: #f7f8fd;
+  --ov-ui-bg-4-default: #f6f7fa;
+  --ov-ui-bg-5-default: #f1f2f9;
+  --ov-ui-code-bg-default: #fbfbfc;
+  --ov-ui-status-success-default: #1f9d55;
+  --ov-ui-shadow-default: #0f172a;
+  --ov-ui-shadow-control-default: #0000000d;
+  --ov-ui-focus-default: #5252ff;
+  --ov-ui-fill-hover-default: #f1f2f9;
+  --ov-ui-status-error-default: #c43838;
+  --ov-ui-warning-default: #b26a00;
+  --ov-ui-warning-light-default: #fff0b3;
+  --ov-ui-overlay-default: #0006;
+  --ov-ui-tooltip-bg-default: #1f2329;
+  --ov-ui-tooltip-text-default: #fff;
+  --ov-ui-library-swatch-1-default: linear-gradient(145deg,
+    #ffd8ec 8%,
+    #ffabc8 46%,
+    #d8cbff 100%);
+  --ov-ui-library-swatch-2-default: linear-gradient(145deg,
+    #d9e8ff 8%,
+    #b8a6ff 52%,
+    #f3d6ff 100%);
+  --ov-ui-library-swatch-3-default: linear-gradient(145deg,
+    #ffe6bc 8%,
+    #ffaf96 48%,
+    #ff8bc5 100%);
+  --ov-ui-library-swatch-4-default: linear-gradient(145deg,
+    #eaf7ba 8%,
+    #b5efb8 52%,
+    #73d9c6 100%);
+  --ov-ui-library-swatch-5-default: linear-gradient(145deg,
+    #fff1ba 8%,
+    #ffc776 52%,
+    #bd9cff 100%);
+}
+
+.dark .ov-directory-tour, html.dark .ov-wiki-dashboard, html.dark .ov-experience-dashboard, .dark .ov-agent-connect, .dark .ov-console, .dark .ov-divider, .dark .ov-file-browser-entries, .dark .ov-drawer, .dark .ov-file-browser, .dark .ov-file-preview, .dark .ov-file-tree, .dark .ov-module-placeholder, .dark .ov-popover, .dark .ov-scope-switcher, .dark .ov-tooltip, .dark .ov-tui, .dark .ov-viking-bot, .dark .ov-viking-bot__popover, .dark .ov-viking-bot__reference-picker--mention, .dark .ov-viking-bot__interaction {
+  --ov-ui-primary-default: #5f5fff;
+  --ov-ui-primary-hover-default: #7075ff;
+  --ov-ui-primary-active-default: #4242ba;
+  --ov-ui-primary-light-default: #1a1632;
+  --ov-ui-connect-glow-warm-default: #ff952b05;
+  --ov-ui-connect-glow-pink-default: #fb4fbc08;
+  --ov-ui-connect-glow-pink-soft-default: #fb4fbc05;
+  --ov-ui-text-1-default: #c7ccd6;
+  --ov-ui-text-2-default: #9da3af;
+  --ov-ui-text-3-default: #737a87;
+  --ov-ui-text-description-default: #fff6;
+  --ov-ui-text-disabled-default: #42464e;
+  --ov-ui-border-1-default: #23252a;
+  --ov-ui-border-2-default: #2e3138;
+  --ov-ui-border-3-default: #3a3d45;
+  --ov-ui-bg-1-default: #131416;
+  --ov-ui-bg-3-default: #1b1d21;
+  --ov-ui-bg-4-default: #202227;
+  --ov-ui-bg-5-default: #23252a;
+  --ov-ui-focus-default: #5f5fff;
+  --ov-ui-fill-hover-default: #23252a;
+  --ov-ui-status-error-default: #ff9595;
+  --ov-ui-warning-default: #e0a04a;
+  --ov-ui-warning-light-default: #3a2f14;
+  --ov-ui-tooltip-bg-default: #2a2d33;
+  --ov-ui-overlay-default: #000000a3;
+  --ov-ui-tooltip-text-default: #f0f1f3;
+}
+
+.dark .ov-viking-bot {
+  --ov-ui-code-bg-default: var(--ov-ui-bg-3-default);
+}
+
+.ov-agent-connect {
+  --ov-ui-connect-card-default: #fbfbfc;
+  --ov-ui-connect-tabs-default: #f7f7f9;
+  --ov-ui-connect-selected-default: #f3f4f7;
+  --ov-ui-connect-border-default: #edeef2;
+  --ov-ui-connect-outline-default: #e1e3ea;
+  --ov-ui-connect-muted-default: #787c91;
+  --ov-ui-connect-notice-default: #2e2984;
+}
+
+.dark .ov-agent-connect {
+  --ov-ui-connect-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-tabs-default: var(--ov-ui-bg-3-default);
+  --ov-ui-connect-selected-default: var(--ov-ui-bg-4-default);
+  --ov-ui-connect-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-connect-outline-default: var(--ov-ui-border-2-default);
+  --ov-ui-connect-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-connect-notice-default: var(--ov-ui-text-2-default);
+}
+
+.ov-wiki-dashboard, .ov-experience-dashboard, .ov-file-browser {
+  --ov-ui-dashboard-surface-default: #f8f8f8;
+  --ov-ui-dashboard-card-default: #fafafa;
+  --ov-ui-dashboard-muted-default: #787c91;
+  --ov-ui-dashboard-border-default: #edeef2;
+  --ov-ui-dashboard-warning-default: #eb7d00;
+  --ov-ui-dashboard-warning-light-default: #fff0e5;
+  --ov-ui-dashboard-danger-default: #d92d54;
+  --ov-ui-dashboard-danger-light-default: #ffecee;
+  --ov-ui-dashboard-success-default: #4f9c70;
+}
+
+html.dark .ov-wiki-dashboard, html.dark .ov-experience-dashboard, html.dark .ov-file-browser {
+  --ov-ui-dashboard-surface-default: var(--ov-ui-bg-3-default);
+  --ov-ui-dashboard-card-default: var(--ov-ui-bg-3-default);
+  --ov-ui-dashboard-muted-default: var(--ov-ui-text-3-default);
+  --ov-ui-dashboard-border-default: var(--ov-ui-border-1-default);
+  --ov-ui-dashboard-warning-default: var(--ov-ui-warning-default);
+  --ov-ui-dashboard-warning-light-default: var(--ov-ui-warning-light-default);
+  --ov-ui-dashboard-danger-default: var(--ov-ui-status-error-default);
+  --ov-ui-dashboard-danger-light-default: var(--ov-ui-bg-5-default);
+  --ov-ui-dashboard-success-default: var(--ov-ui-status-success-default);
+}
+
+.ov-dashboard-state {
+  text-align: center;
+  min-height: 120px;
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  font-size: 13px;
+  display: flex;
+}
+
+.ov-dashboard-state p {
+  overflow-wrap: anywhere;
+  margin: 4px 0;
+}
+
+.ov-dashboard-state button {
+  color: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 4px 8px;
+}
+
+.ov-dashboard-tabs {
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  flex: none;
+  gap: 24px;
+  padding: 0 12px;
+  display: flex;
+  overflow: auto;
+}
+
+.ov-dashboard-tabs button {
+  min-height: 42px;
+  color: var(--ov-ui-color-text-2, var(--ov-ui-text-2-default));
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  flex: none;
+  padding: 8px 0;
+  position: relative;
+}
+
+.ov-dashboard-tabs button[aria-selected="true"] {
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  font-weight: 500;
+}
+
+.ov-dashboard-tabs button[aria-selected="true"]:after {
+  content: "";
+  background: currentColor;
+  width: 14px;
+  height: 2px;
+  position: absolute;
+  inset-block-end: 2px;
+  inset-inline-start: calc(50% - 7px);
+}
+
+.ov-dashboard-tabpanel {
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.ov-wiki-dashboard__body, .ov-experience-dashboard__body {
+  isolation: isolate;
+  position: relative;
+}
+
+.ov-wiki-dashboard__body:before, .ov-experience-dashboard__body:before {
+  content: "";
+  opacity: .08;
+  pointer-events: none;
+  z-index: -1;
+  background-image: url(../../static/image/dashboard-background.png);
+  background-size: 20px 20px;
+  position: absolute;
+  inset: 0;
+}
+
+.ov-popover {
+  --ov-ui-popover-bg: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default, #fff));
+  --ov-ui-popover-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-popover-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  z-index: 1000;
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-popover-border);
+  background: var(--ov-ui-popover-bg);
+  max-width: 320px;
+  color: var(--ov-ui-popover-text);
+  overflow-wrap: break-word;
+  border-radius: 8px;
+  padding: 12px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  animation: .12s ease-out ov-popover-enter;
+  position: fixed;
+  box-shadow: 0 15px 35px -2px #0000000d, 0 5px 15px #0000000d;
+}
+
+@keyframes ov-popover-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-popover {
+    animation: none;
+  }
+}
+
+.ov-tooltip {
+  --ov-ui-tooltip-bg: var(--ov-ui-color-tooltip-bg, var(--ov-ui-tooltip-bg-default, #1f2329));
+  --ov-ui-tooltip-text: var(--ov-ui-color-tooltip-text, var(--ov-ui-tooltip-text-default, #fff));
+  --ov-ui-tooltip-border: transparent;
+  --ov-ui-tooltip-radius: var(--ov-ui-radius, 6px);
+  --ov-ui-tooltip-offset: 6px;
+  z-index: 1000;
+  box-sizing: border-box;
+  border: 1px solid var(--ov-ui-tooltip-border);
+  border-radius: var(--ov-ui-tooltip-radius);
+  background: var(--ov-ui-tooltip-bg);
+  max-width: 320px;
+  color: var(--ov-ui-tooltip-text);
+  overflow-wrap: break-word;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  animation: .12s ease-out ov-tooltip-enter;
+  position: fixed;
+  box-shadow: 0 4px 12px #0000001f;
+}
+
+.ov-tooltip[role="dialog"] {
+  --ov-ui-tooltip-bg: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default, #fff));
+  --ov-ui-tooltip-text: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default, #0b0b0f));
+  --ov-ui-tooltip-border: var(--ov-ui-color-border-2, var(--ov-ui-border-2-default, #e1e4f2));
+  min-width: 120px;
+  max-width: 360px;
+  padding: 4px;
+  box-shadow: 0 6px 16px #0000001f;
+}
+
+@keyframes ov-tooltip-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ov-tooltip {
+    animation: none;
+  }
+}
+
+.ov-wiki-dashboard {
+  min-width: 0;
+  height: 100%;
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  flex-direction: column;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 22px;
+  display: flex;
+}
+
+.ov-wiki-dashboard__header {
+  background: var(--ov-ui-color-bg-1, var(--ov-ui-bg-1-default));
+  padding: 4px 16px 0;
+}
+
+.ov-wiki-dashboard__header h2 {
+  align-items: center;
+  min-height: 34px;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  display: inline-flex;
+  position: relative;
+}
+
+.ov-wiki-dashboard__header h2:after {
+  content: "";
+  background: currentColor;
+  width: 14px;
+  height: 2px;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: calc(50% - 7px);
+}
+
+.ov-wiki-dashboard__body {
+  background: var(--ov-ui-color-dashboard-surface, var(--ov-ui-dashboard-surface-default));
+  flex: 1;
+  min-height: 0;
+  padding: 12px;
+  overflow: auto;
+}
+
+.ov-wiki-dashboard__statistics {
+  border: 1px solid
+    var(--ov-ui-color-dashboard-border, var(--ov-ui-dashboard-border-default));
+  border-radius: 12px;
+  margin: 0 0 24px;
+  padding: 15px;
+  display: flex;
+}
+
+.ov-wiki-dashboard__statistics svg {
+  color: var(--ov-ui-color-dashboard-warning, var(--ov-ui-dashboard-warning-default));
+  margin-bottom: 12px;
+  display: block;
+}
+
+.ov-wiki-dashboard__statistics dd {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.ov-wiki-dashboard__statistics dt {
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.ov-wiki-dashboard__toolbar {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  display: flex;
+}
+
+.ov-wiki-dashboard__toolbar h3 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.ov-wiki-dashboard button {
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.ov-wiki-dashboard button:disabled {
+  cursor: default;
+}
+
+.ov-wiki-dashboard__conflicts {
+  flex-direction: column;
+  gap: 12px;
+  display: flex;
+  overflow-x: auto;
+}
+
+.ov-wiki-dashboard__conflict {
+  border: 1px solid
+    var(--ov-ui-color-dashboard-border, var(--ov-ui-dashboard-border-default));
+  border-radius: 12px;
+  min-width: 690px;
+}
+
+.ov-wiki-dashboard__conflict-row {
+  grid-template-columns: 78px minmax(140px, 1fr) 200px 74px 100px;
+  align-items: center;
+  display: grid;
+}
+
+.ov-wiki-dashboard__conflict-row--without-path {
+  grid-template-columns: 78px minmax(140px, 1fr) 74px 100px;
+}
+
+.ov-wiki-dashboard__severity {
+  border-radius: 62px;
+  justify-self: start;
+  margin-inline-start: 0;
+  padding: 0 8px;
+  font-size: 12px;
+  line-height: 22px;
+}
+
+.ov-wiki-dashboard__severity--high {
+  color: var(--ov-ui-color-dashboard-danger, var(--ov-ui-dashboard-danger-default));
+  background: var(--ov-ui-color-dashboard-danger-light, var(--ov-ui-dashboard-danger-light-default));
+}
+
+.ov-wiki-dashboard__severity--medium {
+  color: var(--ov-ui-color-dashboard-warning, var(--ov-ui-dashboard-warning-default));
+  background: var(--ov-ui-color-dashboard-warning-light, var(--ov-ui-dashboard-warning-light-default));
+}
+
+.ov-wiki-dashboard__severity--low {
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+}
+
+.ov-wiki-dashboard__issue {
+  min-width: 0;
+  padding: 11px 16px;
+}
+
+.ov-wiki-dashboard__issue strong {
+  font-weight: 400;
+}
+
+.ov-wiki-dashboard__issue p {
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  margin: 0;
+  font-size: 12px;
+}
+
+.ov-wiki-dashboard__solution {
+  color: var(--ov-ui-color-status-success, var(--ov-ui-status-success-default));
+  margin-top: 6px;
+  padding: 0;
+  display: inline-block;
+}
+
+.ov-wiki-dashboard__path {
+  text-align: start;
+  overflow-wrap: anywhere;
+  background: none;
+  border: 0;
+  padding: 6px 16px;
+}
+
+.ov-wiki-dashboard__status {
+  font-size: 12px;
+}
+
+.ov-wiki-dashboard__status--unfixed {
+  color: var(--ov-ui-color-dashboard-warning, var(--ov-ui-dashboard-warning-default));
+}
+
+.ov-wiki-dashboard__status--fixed {
+  color: var(--ov-ui-color-status-success, var(--ov-ui-status-success-default));
+}
+
+.ov-wiki-dashboard__action {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  border: 0;
+  border-radius: 6px;
+  margin: 6px 16px;
+  padding: 4px;
+}
+
+.ov-wiki-dashboard__evidence {
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  padding: 8px 16px;
+  font-size: 12px;
+}
+
+.ov-wiki-dashboard__evidence summary {
+  cursor: pointer;
+}
+
+.ov-wiki-dashboard__files {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ov-wiki-dashboard__files li {
+  border-bottom: 1px solid
+    var(--ov-ui-color-dashboard-border, var(--ov-ui-dashboard-border-default));
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.ov-wiki-dashboard__files button {
+  text-align: start;
+  background: none;
+  border: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+.ov-wiki-dashboard__files button:first-child {
+  flex-direction: column;
+  flex: 1;
+  align-items: stretch;
+  display: flex;
+}
+
+.ov-wiki-dashboard__file-uri, .ov-wiki-dashboard__limited {
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  overflow-wrap: anywhere;
+  font-size: 12px;
+}
+
+.ov-wiki-dashboard :is(button, summary):focus-visible {
+  outline: 2px solid var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  outline-offset: 2px;
+}
+
+.ov-wiki-dashboard, .ov-wiki-dashboard *, .ov-wiki-dashboard :before, .ov-wiki-dashboard :after {
+  box-sizing: border-box;
+}
+
+.ov-wiki-dashboard__files li > svg {
+  flex: none;
+}
+
+.ov-wiki-dashboard__files button:first-of-type {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-wiki-dashboard__status {
+  white-space: nowrap;
+  align-items: center;
+  gap: 4px;
+  padding-inline-start: 16px;
+  display: inline-flex;
+}
+
+.ov-wiki-dashboard__status svg {
+  flex: none;
+}
+
+.ov-wiki-dashboard__issue > button, .ov-wiki-dashboard__path > button {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  background: none;
+  border: 0;
+  width: 100%;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.ov-wiki-dashboard__issue p {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ov-wiki-dashboard__path {
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+.ov-wiki-dashboard__actions {
+  gap: 8px;
+  padding: 0 16px;
+  display: flex;
+}
+
+.ov-wiki-dashboard__actions button {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+  border: 0;
+  border-radius: 6px;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: inline-flex;
+}
+
+.ov-wiki-dashboard__actions button[aria-disabled="true"] {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
+.ov-wiki-dashboard__actions button:hover:not([aria-disabled="true"]) {
+  background: var(--ov-ui-color-fill-hover, var(--ov-ui-fill-hover-default));
+}
+
+.ov-wiki-dashboard .ov-wiki-dashboard__link {
+  color: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.ov-wiki-dashboard .ov-wiki-dashboard__link:hover:not(:disabled) {
+  color: var(--ov-ui-color-primary-hover, var(--ov-ui-primary-hover-default));
+}
+
+.ov-wiki-dashboard .ov-wiki-dashboard__link:disabled {
+  color: var(--ov-ui-color-text-disabled, var(--ov-ui-text-disabled-default));
+}
+
+.ov-wiki-dashboard__file-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--ov-ui-wiki-icon-light, currentColor);
+  flex: none;
+}
+
+html.dark .ov-wiki-dashboard__file-icon {
+  color: var(--ov-ui-wiki-icon-dark, currentColor);
+}
+
+.ov-wiki-dashboard__evidence dl {
+  grid-template-columns: 84px minmax(0, 1fr);
+  gap: 8px 16px;
+  margin: 0;
+  display: grid;
+}
+
+.ov-wiki-dashboard__evidence dd {
+  overflow-wrap: anywhere;
+  margin: 0;
+}
+
+.ov-wiki-dashboard .ov-wiki-dashboard__severity-filter {
+  min-height: 28px;
+  color: var(--ov-ui-color-dashboard-muted, var(--ov-ui-dashboard-muted-default));
+  background: none;
+  border: 0;
+  border-radius: 16px;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  font-size: 13px;
+  line-height: 22px;
+  display: inline-flex;
+}
+
+.ov-wiki-dashboard__severity-filter:hover, .ov-wiki-dashboard__severity-filter[aria-expanded="true"] {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+}
+
+.ov-wiki-dashboard__severity-filter svg {
+  flex: none;
+  width: 14px;
+  height: 14px;
+}
+
+.ov-wiki-dashboard__filter-value {
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+}
+
+.ov-wiki-dashboard__severity-popover {
+  min-width: 160px;
+  padding: 4px;
+}
+
+.ov-wiki-dashboard__severity-menu {
+  flex-direction: column;
+  gap: 2px;
+  display: flex;
+}
+
+.ov-wiki-dashboard__severity-menu button {
+  min-height: 32px;
+  color: var(--ov-ui-color-text-1, var(--ov-ui-text-1-default));
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 4px;
+  padding: 4px 12px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ov-wiki-dashboard__severity-menu button[aria-selected="true"] {
+  color: var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  background: var(--ov-ui-color-primary-light, var(--ov-ui-primary-light-default));
+}
+
+.ov-wiki-dashboard__severity-menu button:hover {
+  background: var(--ov-ui-color-bg-5, var(--ov-ui-bg-5-default));
+}
+
+.ov-wiki-dashboard__severity-menu button:focus-visible {
+  outline: 2px solid var(--ov-ui-color-primary, var(--ov-ui-primary-default));
+  outline-offset: -2px;
+}
+
+
+