avo 4.0.0.beta.37 → 4.0.0.beta.38

data/app/assets/builds/avo/application.css

@@ -784,6 +784,421 @@
   .me-4 {
     margin-inline-end: calc(var(--spacing) * 4);
   }
+  .prose {
+    color: var(--tw-prose-body);
+    max-width: 65ch;
+    :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+    }
+    :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-lead);
+      font-size: 1.25em;
+      line-height: 1.6;
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+    }
+    :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-links);
+      text-decoration: underline;
+      font-weight: 500;
+    }
+    :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-bold);
+      font-weight: 600;
+    }
+    :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: decimal;
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+      padding-inline-start: 1.625em;
+    }
+    :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: upper-alpha;
+    }
+    :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: lower-alpha;
+    }
+    :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: upper-alpha;
+    }
+    :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: lower-alpha;
+    }
+    :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: upper-roman;
+    }
+    :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: lower-roman;
+    }
+    :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: upper-roman;
+    }
+    :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: lower-roman;
+    }
+    :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: decimal;
+    }
+    :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      list-style-type: disc;
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+      padding-inline-start: 1.625em;
+    }
+    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+      font-weight: 400;
+      color: var(--tw-prose-counters);
+    }
+    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+      color: var(--tw-prose-bullets);
+    }
+    :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-headings);
+      font-weight: 600;
+      margin-top: 1.25em;
+    }
+    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border-color: var(--tw-prose-hr);
+      border-top-width: 1px;
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
+    :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-weight: 500;
+      font-style: italic;
+      color: var(--tw-prose-quotes);
+      border-inline-start-width: 0.25rem;
+      border-inline-start-color: var(--tw-prose-quote-borders);
+      quotes: "\201C""\201D""\2018""\2019";
+      margin-top: 1.6em;
+      margin-bottom: 1.6em;
+      padding-inline-start: 1em;
+    }
+    :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+      content: open-quote;
+    }
+    :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+      content: close-quote;
+    }
+    :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-headings);
+      font-weight: 800;
+      font-size: 2.25em;
+      margin-top: 0;
+      margin-bottom: 0.8888889em;
+      line-height: 1.1111111;
+    }
+    :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-weight: 900;
+      color: inherit;
+    }
+    :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-headings);
+      font-weight: 700;
+      font-size: 1.5em;
+      margin-top: 2em;
+      margin-bottom: 1em;
+      line-height: 1.3333333;
+    }
+    :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-weight: 800;
+      color: inherit;
+    }
+    :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-headings);
+      font-weight: 600;
+      font-size: 1.25em;
+      margin-top: 1.6em;
+      margin-bottom: 0.6em;
+      line-height: 1.6;
+    }
+    :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-weight: 700;
+      color: inherit;
+    }
+    :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-headings);
+      font-weight: 600;
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+      line-height: 1.5;
+    }
+    :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-weight: 700;
+      color: inherit;
+    }
+    :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      display: block;
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      font-weight: 500;
+      font-family: inherit;
+      color: var(--tw-prose-kbd);
+      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
+      font-size: 0.875em;
+      border-radius: 0.3125rem;
+      padding-top: 0.1875em;
+      padding-inline-end: 0.375em;
+      padding-bottom: 0.1875em;
+      padding-inline-start: 0.375em;
+    }
+    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-code);
+      font-weight: 600;
+      font-size: 0.875em;
+    }
+    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+      content: "`";
+    }
+    :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+      content: "`";
+    }
+    :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+      font-size: 0.875em;
+    }
+    :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+      font-size: 0.9em;
+    }
+    :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: inherit;
+    }
+    :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-pre-code);
+      background-color: var(--tw-prose-pre-bg);
+      overflow-x: auto;
+      font-weight: 400;
+      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;
+    }
+    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      background-color: transparent;
+      border-width: 0;
+      border-radius: 0;
+      padding: 0;
+      font-weight: inherit;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+    }
+    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+      content: none;
+    }
+    :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+      content: none;
+    }
+    :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      width: 100%;
+      table-layout: auto;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      font-size: 0.875em;
+      line-height: 1.7142857;
+    }
+    :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border-bottom-width: 1px;
+      border-bottom-color: var(--tw-prose-th-borders);
+    }
+    :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      color: var(--tw-prose-headings);
+      font-weight: 600;
+      vertical-align: bottom;
+      padding-inline-end: 0.5714286em;
+      padding-bottom: 0.5714286em;
+      padding-inline-start: 0.5714286em;
+    }
+    :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border-bottom-width: 1px;
+      border-bottom-color: var(--tw-prose-td-borders);
+    }
+    :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border-bottom-width: 0;
+    }
+    :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      vertical-align: baseline;
+    }
+    :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      border-top-width: 1px;
+      border-top-color: var(--tw-prose-th-borders);
+    }
+    :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      vertical-align: top;
+    }
+    :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      text-align: start;
+    }
+    :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"] *)) {
+      color: var(--tw-prose-captions);
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
+    }
+    --tw-prose-body: oklch(37.3% 0.034 259.733);
+    --tw-prose-headings: oklch(21% 0.034 264.665);
+    --tw-prose-lead: oklch(44.6% 0.03 256.802);
+    --tw-prose-links: oklch(21% 0.034 264.665);
+    --tw-prose-bold: oklch(21% 0.034 264.665);
+    --tw-prose-counters: oklch(55.1% 0.027 264.364);
+    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
+    --tw-prose-hr: oklch(92.8% 0.006 264.531);
+    --tw-prose-quotes: oklch(21% 0.034 264.665);
+    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
+    --tw-prose-captions: oklch(55.1% 0.027 264.364);
+    --tw-prose-kbd: oklch(21% 0.034 264.665);
+    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
+    --tw-prose-code: oklch(21% 0.034 264.665);
+    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
+    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
+    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
+    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
+    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
+    --tw-prose-invert-headings: #fff;
+    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
+    --tw-prose-invert-links: #fff;
+    --tw-prose-invert-bold: #fff;
+    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
+    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
+    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
+    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
+    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
+    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
+    --tw-prose-invert-kbd: #fff;
+    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
+    --tw-prose-invert-code: #fff;
+    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
+    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
+    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
+    font-size: 1rem;
+    line-height: 1.75;
+    :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+    :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0.375em;
+    }
+    :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0.375em;
+    }
+    :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+    :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.25em;
+    }
+    :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.25em;
+    }
+    :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.25em;
+    }
+    :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 1.25em;
+    }
+    :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;
+    }
+    :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+    }
+    :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0.5em;
+      padding-inline-start: 1.625em;
+    }
+    :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0;
+    }
+    :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      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;
+    }
+    :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-start: 0;
+    }
+    :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      padding-inline-end: 0;
+    }
+    :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+    :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-top: 0;
+    }
+    :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+      margin-bottom: 0;
+    }
+  }
   .-mt-1 {
     margin-top: calc(var(--spacing) * -1);
   }
@@ -4148,14 +4563,14 @@
       width: auto;
     }
   }
-  .sm\:min-w-48 {
+  .sm\:w-full {
     @media (width >= 40rem) {
-      min-width: calc(var(--spacing) * 48);
+      width: 100%;
     }
   }
-  .sm\:min-w-\[16rem\] {
+  .sm\:min-w-48 {
     @media (width >= 40rem) {
-      min-width: 16rem;
+      min-width: calc(var(--spacing) * 48);
     }
   }
   .sm\:grid-flow-col {
@@ -4426,7 +4841,7 @@
   }
 }
 @layer base {
-  input[type=checkbox] {
+  input[type="checkbox"] {
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
     cursor: pointer;
@@ -4438,27 +4853,30 @@
     background-color: var(--color-primary);
     box-shadow: var(--box-shadow);
   }
-  input[type=checkbox]:checked {
+  input[type="checkbox"]:checked {
     background-size: 70%;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10.1953%200.195262C10.4556%20-0.0650874%2010.8776%20-0.0650874%2011.138%200.195262C11.3983%200.455612%2011.3983%200.877621%2011.138%201.13797L4.4713%207.80464C4.21095%208.06499%203.78895%208.06499%203.5286%207.80464L0.195262%204.4713C-0.0650874%204.21095%20-0.0650874%203.78894%200.195262%203.5286C0.455612%203.26825%200.877621%203.26825%201.13797%203.5286L3.99995%206.39057L10.1953%200.195262Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
   }
-  input[type=checkbox]:indeterminate {
+  input[type="checkbox"]:indeterminate {
     background-size: 70%;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%222%22%20viewBox%3D%220%200%2011%202%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10%200C10.3682%200%2010.6667%200.298477%2010.6667%200.666667C10.6667%201.03486%2010.3682%201.33333%2010%201.33333H0.666667C0.298477%201.33333%200%201.03486%200%200.666667C0%200.298477%200.298477%200%200.666667%200H10Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
   }
-  input[type=checkbox]:checked, input[type=checkbox]:indeterminate {
+  input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate {
     border-color: var(--color-accent-content);
     background-color: var(--color-accent-content);
   }
-  input[type=checkbox]:checked:focus-visible, input[type=checkbox]:checked:hover:not(:disabled), input[type=checkbox]:indeterminate:focus-visible, input[type=checkbox]:indeterminate:hover:not(:disabled) {
+  input[type="checkbox"]:checked:focus-visible, input[type="checkbox"]:checked:hover:not(:disabled), input[type="checkbox"]:indeterminate:focus-visible, input[type="checkbox"]:indeterminate:hover:not(:disabled) {
     border-color: var(--color-accent-content);
     background-color: var(--color-accent-content);
   }
-  input[type=checkbox]:disabled {
+  html:not([class*="accent-theme-"]) input[type="checkbox"]:checked, html:not([class*="accent-theme-"]) input[type="checkbox"]:checked:focus-visible, html:not([class*="accent-theme-"]) input[type="checkbox"]:checked:hover:not(:disabled), html:not([class*="accent-theme-"]) input[type="checkbox"]:indeterminate, html:not([class*="accent-theme-"]) input[type="checkbox"]:indeterminate:focus-visible, html:not([class*="accent-theme-"]) input[type="checkbox"]:indeterminate:hover:not(:disabled) {
+    background-blend-mode: difference;
+  }
+  input[type="checkbox"]:disabled {
     cursor: not-allowed;
     opacity: 60%;
   }
@@ -5445,6 +5863,8 @@
     display: flex;
     width: var(--content-width);
     flex-direction: column;
+    border-start-start-radius: var(--navbar-notch-radius);
+    border-start-end-radius: var(--navbar-notch-radius);
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
     border-color: var(--border-color);
@@ -5560,6 +5980,15 @@
     min-width: calc(var(--spacing) * 0);
     align-items: center;
     justify-content: center;
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 80);
+    }
+    @media (width >= 64rem) {
+      width: calc(var(--spacing) * 96);
+    }
+    @media (width >= 80rem) {
+      width: calc(var(--spacing) * 120);
+    }
     .search-input__input {
       background-color: var(--color-avo-neutral-800);
       border-color: var(--color-avo-neutral-700);
@@ -5648,6 +6077,12 @@
     html[dir="rtl"] .sidebar-open .avo-sidebar {
       transform: translateX(0);
     }
+    .sidebar-open .main-content {
+      border-start-start-radius: 0;
+    }
+    .main:not(.sidebar-open) .main-content {
+      margin-inline-start: calc(var(--spacing) * 0);
+    }
   }
   @media (width < 64rem) {
     .sidebar-mobile-open .avo-sidebar {
@@ -5954,31 +6389,46 @@
   [data-component="avo/fields/common/progress_bar_component"] {
     & progress {
       height: calc(var(--spacing) * 2);
+      overflow: hidden;
       border-radius: var(--radius-sm);
       border-style: var(--tw-border-style);
       border-width: 1px;
-      border-color: var(--color-slate-400);
-      background-color: var(--color-white);
-      --tw-shadow: inset 0 2px 4px 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);
+      border-color: color-mix(in srgb, oklch(53.48% 0 89.88) 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-content-secondary) 15%, transparent);
+      }
+      background-color: var(--color-tertiary);
+      box-shadow: inset 0 1px 2px 0 color-mix(in srgb, #000 14%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--color-black) 14%, transparent);
+      }
     }
     & progress[value]::-webkit-progress-bar {
       border-radius: var(--radius-sm);
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      border-color: var(--color-gray-500);
-      background-color: var(--color-white);
-      --tw-shadow: inset 0 2px 4px 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);
+      background-color: var(--color-tertiary);
+      box-shadow: inset 0 1px 2px 0 color-mix(in srgb, #000 14%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: inset 0 1px 2px 0 color-mix(in oklab, var(--color-black) 14%, transparent);
+      }
     }
     & progress[value]::-webkit-progress-value {
       border-radius: var(--radius-sm);
-      background-color: var(--color-primary-500);
+      background: linear-gradient( 180deg, color-mix(in srgb, oklch(39.04% 0 89.88), #fff 22%) 0%, var(--color-accent) 55%, color-mix(in srgb, oklch(39.04% 0 89.88), #000 12%) 100% );
+      @supports (color: color-mix(in lab, red, red)) {
+        background: linear-gradient( 180deg, color-mix(in oklab, var(--color-accent), var(--color-white) 22%) 0%, var(--color-accent) 55%, color-mix(in oklab, var(--color-accent), var(--color-black) 12%) 100% );
+      }
+      box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 35%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, #000 18%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--color-white) 35%, transparent), inset 0 -1px 1px 0 color-mix(in oklab, var(--color-black) 18%, transparent);
+      }
     }
     & progress[value]::-moz-progress-bar {
       appearance: none;
       border-radius: var(--radius-sm);
-      background-color: var(--color-primary-500);
+      background: linear-gradient( 180deg, color-mix(in srgb, oklch(39.04% 0 89.88), #fff 22%) 0%, var(--color-accent) 55%, color-mix(in srgb, oklch(39.04% 0 89.88), #000 12%) 100% );
+      @supports (color: color-mix(in lab, red, red)) {
+        background: linear-gradient( 180deg, color-mix(in oklab, var(--color-accent), var(--color-white) 22%) 0%, var(--color-accent) 55%, color-mix(in oklab, var(--color-accent), var(--color-black) 12%) 100% );
+      }
     }
   }
   .key-value {
@@ -6497,7 +6947,9 @@
     align-items: flex-start;
     align-self: stretch;
     padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
     &:has(select), &:has(.button) {
       padding-inline-end: calc(var(--spacing) * 0);
     }
@@ -6697,12 +7149,9 @@
     width: 100%;
     flex-wrap: wrap;
     align-items: flex-start;
-    justify-content: center;
+    justify-content: flex-start;
     column-gap: calc(var(--spacing) * 2.5);
     row-gap: calc(var(--spacing) * 1);
-    @media (width >= 40rem) {
-      justify-content: flex-start;
-    }
   }
   .description-list {
     display: flex;
@@ -7581,6 +8030,21 @@
     border-color: var(--color-tertiary);
     background-color: var(--color-primary);
   }
+  .dropdown-card__footer, .dropdown-card__header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .dropdown-card__title {
+    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(--color-content);
+    color: var(--color-content-secondary);
+  }
   .popover-menu {
     display: inline-flex;
   }
@@ -7641,6 +8105,118 @@
       }
     }
   }
+  .checkbox-list-field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 2);
+  }
+  .checkbox-list__search {
+    width: 100%;
+  }
+  .checkbox-list {
+    --checkbox-list-max-height: 22rem;
+    display: flex;
+    max-height: var(--checkbox-list-max-height);
+    flex-direction: column;
+    overflow-y: auto;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-primary);
+    padding: calc(var(--spacing) * 1);
+    box-shadow: var(--box-shadow);
+  }
+  .checkbox-list__row {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-lg);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-content);
+    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));
+  }
+  .checkbox-list__row:hover {
+    background-color: var(--color-secondary);
+  }
+  .checkbox-list__row:focus-within {
+    background-color: var(--color-secondary);
+    --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(--color-accent-content);
+    --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);
+    --tw-ring-offset-color: var(--color-primary);
+  }
+  .checkbox-list__row input[type="checkbox"] {
+    flex-shrink: 0;
+  }
+  .checkbox-list .search-item-image {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    flex-shrink: 0;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-background);
+    object-fit: cover;
+  }
+  .checkbox-list .search-item-body {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .checkbox-list .search-item-title {
+    overflow: hidden;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    color: var(--color-content);
+  }
+  .checkbox-list .search-item-description {
+    overflow: hidden;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    text-overflow: ellipsis;
+    color: var(--color-content-secondary);
+  }
+  .checkbox-list__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-content-secondary);
+  }
+  .checkbox-list__hint, .checkbox-list__hidden-selections {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-tertiary);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-content-secondary);
+  }
   :root {
     --input-py: calc(var(--spacing) * 1);
     --input-font-size: calc(var(--spacing) * 3.5);
@@ -8306,7 +8882,7 @@
     width: 100%;
     background-color: var(--color-primary);
     top: calc(var(--top-navbar-height) + var(--spacing) * 2);
-    margin-top: calc(var(--spacing) * -2 + 1px);
+    margin-top: calc(var(--spacing) * -2);
     &::before {
       content: "";
       position: absolute;
@@ -8448,7 +9024,7 @@
       @supports (color: color-mix(in lab, red, red)) {
         --btn-text-color: color-mix(in oklab, var(--btn-color-accent), var(--color-content) 20%);
       }
-      &:active:not(:disabled) {
+      &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)):active {
         --tw-translate-y: 1px;
         translate: var(--tw-translate-x) var(--tw-translate-y);
       }
@@ -8458,6 +9034,10 @@
         outline-style: none;
         box-shadow: var(--box-shadow-focus);
       }
+      &.button--disabled, &:disabled, &[disabled], &[data-disabled='true'] {
+        pointer-events: none;
+        opacity: 60%;
+      }
       --btn-color-accent: var(--color-avo-neutral-50);
       --btn-color-accent-content: var(--color-avo-neutral-100);
       --btn-color-accent-foreground: var(--color-avo-neutral-950);
@@ -8595,23 +9175,27 @@
       color: var(--btn-color-accent-foreground);
       background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%);
       &:not([class*="button--color-"]) {
-        &.button--hover, &:hover {
-          background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%);
-          @supports (color: color-mix(in lab, red, red)) {
-            background: linear-gradient(180deg, color-mix(in oklab, var(--btn-color-accent-content) 96%, var(--color-black)) 0%, color-mix(in oklab, var(--btn-color-accent) 96%, var(--color-black)) 100%);
+        &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)) {
+          &.button--hover, &:hover {
+            background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%);
+            @supports (color: color-mix(in lab, red, red)) {
+              background: linear-gradient(180deg, color-mix(in oklab, var(--btn-color-accent-content) 96%, var(--color-black)) 0%, color-mix(in oklab, var(--btn-color-accent) 96%, var(--color-black)) 100%);
+            }
           }
         }
       }
       box-shadow: inset 0px -1.4px 0px 0.1px var(--btn-color-accent-content), inset 0px 0.8px 0px 0.4px color-mix(in oklch, white 45%, transparent);
-      &.button--hover, &:hover {
-        color: var(--btn-color-accent-foreground);
-        background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%), var(--color-primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background: linear-gradient(180deg, color-mix(in oklab, var(--btn-color-accent-content) 90%, var(--color-black)) 0%, color-mix(in oklab, var(--btn-color-accent) 90%, var(--color-black)) 100%), var(--color-primary);
-        }
-        box-shadow: 0 -1.4px 0 0.1px var(--btn-color-accent-content) inset, 0 0.8px 0 0.4px color-mix(in srgb, #fff 45%, transparent) inset;
-        @supports (color: color-mix(in lab, red, red)) {
-          box-shadow: 0 -1.4px 0 0.1px var(--btn-color-accent-content) inset, 0 0.8px 0 0.4px color-mix(in oklab, var(--color-white) 45%, transparent) inset;
+      &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)) {
+        &.button--hover, &:hover {
+          color: var(--btn-color-accent-foreground);
+          background: linear-gradient(180deg, var(--btn-color-accent-content) 0%, var(--btn-color-accent) 100%), var(--color-primary);
+          @supports (color: color-mix(in lab, red, red)) {
+            background: linear-gradient(180deg, color-mix(in oklab, var(--btn-color-accent-content) 90%, var(--color-black)) 0%, color-mix(in oklab, var(--btn-color-accent) 90%, var(--color-black)) 100%), var(--color-primary);
+          }
+          box-shadow: 0 -1.4px 0 0.1px var(--btn-color-accent-content) inset, 0 0.8px 0 0.4px color-mix(in srgb, #fff 45%, transparent) inset;
+          @supports (color: color-mix(in lab, red, red)) {
+            box-shadow: 0 -1.4px 0 0.1px var(--btn-color-accent-content) inset, 0 0.8px 0 0.4px color-mix(in oklab, var(--color-white) 45%, transparent) inset;
+          }
         }
       }
       &.button--active, &:active {
@@ -8636,13 +9220,15 @@
         @supports (color: color-mix(in lab, red, red)) {
           --btn-box-shadow-color: color-mix(in oklab, var(--color-content), transparent 65%);
         }
-        &.button--hover, &:hover {
-          --btn-box-shadow-color: color-mix(in srgb, oklch(20.46% 0 89.88), transparent 55%);
-          @supports (color: color-mix(in lab, red, red)) {
-            --btn-box-shadow-color: color-mix(in oklab, var(--color-content), transparent 55%);
+        &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)) {
+          &.button--hover, &:hover {
+            --btn-box-shadow-color: color-mix(in srgb, oklch(20.46% 0 89.88), transparent 55%);
+            @supports (color: color-mix(in lab, red, red)) {
+              --btn-box-shadow-color: color-mix(in oklab, var(--color-content), transparent 55%);
+            }
+            background-color: var(--color-tertiary);
+            color: var(--color-content);
           }
-          background-color: var(--color-tertiary);
-          color: var(--color-content);
         }
         &.button--disabled, &:disabled, &[disabled], &[data-disabled='true'] {
           border-color: var(--color-content-secondary);
@@ -8656,15 +9242,17 @@
       border-color: var(--btn-color-accent);
       background: var(--color-primary);
       box-shadow: 0 -1.4px 0 0.1px var(--btn-box-shadow-color) inset, 0 0.8px 0 0.4px var(--color-primary) inset;
-      &.button--hover, &:hover {
-        color: var(--btn-text-color);
-        --btn-box-shadow-color: var(--btn-color-accent);
-        @supports (color: color-mix(in lab, red, red)) {
-          --btn-box-shadow-color: color-mix(in oklab, var(--btn-color-accent), transparent 55%);
-        }
-        background: var(--btn-color-accent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background: color-mix(in oklab, var(--btn-color-accent), var(--color-primary) 85%);
+      &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)) {
+        &.button--hover, &:hover {
+          color: var(--btn-text-color);
+          --btn-box-shadow-color: var(--btn-color-accent);
+          @supports (color: color-mix(in lab, red, red)) {
+            --btn-box-shadow-color: color-mix(in oklab, var(--btn-color-accent), transparent 55%);
+          }
+          background: var(--btn-color-accent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background: color-mix(in oklab, var(--btn-color-accent), var(--color-primary) 85%);
+          }
         }
       }
       &.button--active:not(:disabled), &:active:not(:disabled) {
@@ -8697,15 +9285,19 @@
         --btn-color-accent-content: var(--color-avo-neutral-950);
         --btn-color-accent-foreground: var(--color-white);
       }
-      &.button--hover, &:hover {
-        background: var(--btn-color-accent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background: color-mix(in oklab, var(--btn-color-accent), var(--color-primary) 85%);
+      &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)) {
+        &.button--hover, &:hover {
+          background: var(--btn-color-accent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background: color-mix(in oklab, var(--btn-color-accent), var(--color-primary) 85%);
+          }
+          color: var(--btn-text-color);
         }
-        color: var(--btn-text-color);
       }
-      &.button--active, &:active {
-        background-color: var(--color-secondary);
+      &:where(:not(:disabled, [disabled], [data-disabled='true'], .button--disabled)) {
+        &.button--active, &:active {
+          background-color: var(--color-secondary);
+        }
       }
       &.button--disabled, &:disabled, &[disabled], &[data-disabled='true'] {
         color: var(--color-content);
@@ -9472,6 +10064,12 @@
     --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);
   }
+  body:not(.hotkeys-hide-badges) .color-scheme-switcher__scheme-button[data-key-badges="show"], body.hotkeys-hide-badges .color-scheme-switcher__scheme-button[data-key-badges="hide"] {
+    background-color: var(--color-primary);
+    color: var(--color-content);
+    --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);
+  }
   .color-scheme-switcher__scheme-label {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -10332,42 +10930,6 @@
       overflow-y: auto;
     }
   }
-  .filters-card__header {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 1.5);
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .filters-card__title {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-content);
-  }
-  .filters-card__reset {
-    font-size: 10px;
-    --tw-leading: calc(var(--spacing) * 3.5);
-    line-height: calc(var(--spacing) * 3.5);
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-content-secondary);
-    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));
-    &:hover {
-      color: var(--color-content);
-    }
-  }
-  .filters-card__reset--disabled {
-    cursor: not-allowed;
-    color: var(--color-content-secondary);
-    &:hover {
-      color: var(--color-content-secondary);
-    }
-  }
   .filters-card__content {
     overflow: hidden;
     padding: calc(var(--spacing) * 1);