@xplortech/apollo-core 0.5.3 → 1.0.0-beta.1

package/build/style.css

@@ -1167,7 +1167,7 @@ Correct the inability to style clickable types in iOS and Safari.
 [class^="xpl-"] button,
 button[class^="xpl-"] [class^="xpl-"] [type="button"],
 [type="button"][class^="xpl-"] {
-  -webkit-appearance: button;
+  -webkit-appearance: none;
 }
 
 /**
@@ -1199,32 +1199,6 @@ Add the correct display in Chrome and Safari.
   display: list-item;
 }
 
-/**
- * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
- * A thin layer on top of normalize.css that provides a starting point more
- * suitable for web applications.
- */
-
-/**
- * Removes the default spacing and border for appropriate elements.
- */
-
-[class^="xpl-"] blockquote,
-[class^="xpl-"] dl,
-[class^="xpl-"] dd,
-[class^="xpl-"] h1,
-[class^="xpl-"] h2,
-[class^="xpl-"] h3,
-[class^="xpl-"] h4,
-[class^="xpl-"] h5,
-[class^="xpl-"] h6,
-[class^="xpl-"] hr,
-[class^="xpl-"] figure,
-[class^="xpl-"] p,
-[class^="xpl-"] pre {
-  margin: 0;
-}
-
 [class^="xpl-"] button,
 button[class^="xpl-"] {
   background-color: transparent;
@@ -1347,7 +1321,6 @@ optgroup[class^="xpl-"],
 select[class^="xpl-"],
 [class^="xpl-"] textarea,
 textarea[class^="xpl-"] {
-  padding: 0;
   line-height: inherit;
   color: inherit;
 }
@@ -1457,17 +1430,7 @@ textarea[class^="xpl-"] {
 .xpl-application-shell__subnav {
     grid-area: subnav;
     background-color: var(--xpl-color-foreground-lm);
-    border-color: var(--xpl-color-gray-200);
-  }
-
-.xpl-application-shell__subnav nav {
-      border-right: none;
-    }
-
-@media (min-width: 1024px) {
-    .xpl-application-shell__subnav {
-      border-right-width: 1px
-    }
+    border-top: 1px solid var(--xpl-color-stroke-lm);
   }
 
 .xpl-application-shell__utility {
@@ -1479,6 +1442,8 @@ textarea[class^="xpl-"] {
 .xpl-application-shell__content {
     grid-area: content;
     background-color: var(--xpl-color-background-lm);
+    border-left: 1px solid var(--xpl-color-stroke-lm);
+    border-top: 1px solid var(--xpl-color-stroke-lm);
     overflow-y: auto;
   }
 
@@ -1488,11 +1453,18 @@ textarea[class^="xpl-"] {
 
 .dark .xpl-application-shell__subnav {
   background-color: var(--xpl-color-background-2-dm);
-  border-color: var(--xpl-color-gray-600);
+  border-left: 1px solid var(--xpl-color-stroke-dm);
+  border-top: 1px solid var(--xpl-color-stroke-dm);
 }
 
 .dark .xpl-application-shell__content {
   background-color: var(--xpl-color-background-dm);
+  border-left: 1px solid var(--xpl-color-stroke-dm);
+  border-top: 1px solid var(--xpl-color-stroke-dm);
+}
+
+.dark .xpl-application-shell__utility {
+  border-left: 1px solid var(--xpl-color-stroke-dm);
 }
 
 @media (max-width: 1023px) {
@@ -1514,6 +1486,16 @@ textarea[class^="xpl-"] {
     .xpl-application-shell {
     overflow: hidden
   }
+
+  &__subnav {
+    border-top: 0;
+  }
+
+  .dark .xpl-application-shell__subnav,
+  .dark .xpl-application-shell__content,
+  .dark .xpl-application-shell__utility {
+    border-left: 0;
+  }
 }
 
 @media (max-width: 640px) {
@@ -1959,322 +1941,696 @@ button.xpl-badge {
   background-color: rgba(255, 147, 135, var(--tw-bg-opacity));
 }
 
-a.xpl-button,
-button.xpl-button {
-  background-color: var(--xpl-color-secondary-lm);
-  border-radius: var(--xpl-button-radius);
-  height: 40px;
-  padding: 11px 23px;
-  text-decoration: none;
-}
+/* stylelint-disable no-descending-specificity */
 
-a.xpl-button, button.xpl-button {
-  border-color: transparent;
-  border-radius: 9999px;
-  border-width: 1px;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem
-}
+.xpl-button button,
+  .xpl-button a {
+    align-items: center;
+    align-content: center;
+    background-color: var(--xpl-color-secondary-lm);
+    border-radius: var(--xpl-button-radius);
+    display: grid;
+    gap: 6px;
+    grid-auto-flow: column;
+    height: 40px;
+    padding: 10px 18px 10px 20px;
+    text-decoration: none;
+    white-space: nowrap;
+  }
 
-a.xpl-button:focus, button.xpl-button:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-offset-width: 2px
-}
+.xpl-button button svg, .xpl-button a svg {
+      width: 15px;
+      height: 15px;
+    }
 
-a.xpl-button, button.xpl-button {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-  transition-property: background-color, border-color, color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms
-}
+.xpl-button button:hover, .xpl-button a:hover {
+      background-color: var(--xpl-color-secondary-hover-lm);
+      --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    }
 
-.xpl-button i.leading {
-  margin: 0 8px 0 -4px;
-}
+.xpl-button button:active, .xpl-button a:active {
+      --tw-ring-color: var(--xpl-color-purple-500);
+      background-color: var(--xpl-color-secondary-hover-lm);
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      --tw-ring-offset-width: 2px;
+    }
 
-.xpl-button--sm i.leading {
-  margin-right: 6px;
-}
+.xpl-button button:focus, .xpl-button a:focus {
+      --tw-ring-color: var(--xpl-color-purple-500);
+      border-color: var(--xpl-color-secondary-lm);
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      --tw-ring-offset-width: 2px;
+    }
 
-.xpl-button--xs i.leading {
-  margin-right: 4px;
-}
+.xpl-button button:disabled,
+    .xpl-button button:disabled:hover,
+    .xpl-button a:disabled,
+    .xpl-button a:disabled:hover {
+      background-color: var(--xpl-color-action-disabled-lm);
+      border-color: var(--xpl-color-action-disabled-lm);
+      color: var(--xpl-color-text-secondary-lm);
+    }
 
-.xpl-button i.trailing {
-  margin: 0 -4px 0 8px;
-}
+.xpl-button button:disabled, .xpl-button button:disabled:hover, .xpl-button a:disabled, .xpl-button a:disabled:hover {
+      cursor: not-allowed;
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+    }
 
-.xpl-button--sm i.trailing {
-  margin-left: 6px;
-}
+.xpl-button button, .xpl-button a {
+    border-color: transparent;
+    border-radius: 9999px;
+    border-width: 1px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem
+  }
 
-.xpl-button--xs i.trailing {
-  margin-left: 4px;
-}
+.xpl-button button:focus, .xpl-button a:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+  }
 
-.dark a.xpl-button,
-.dark button.xpl-button {
-  --tw-ring-offset-color: #212633; /* gray-900 */
-  background-color: var(--xpl-color-secondary-dm);
-}
+.xpl-button button, .xpl-button a {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+    transition-property: background-color, border-color, color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+  }
 
-.dark a.xpl-button, .dark button.xpl-button {
-  --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity))
-}
+.xpl-button--sm button,
+    .xpl-button--sm a,
+    .xpl-button--xs button,
+    .xpl-button--xs a {
+      font-size: 0.75rem;
+    }
 
-a.xpl-button:hover,
-button.xpl-button:hover {
-  background-color: var(--xpl-color-secondary-hover-lm);
-}
+.xpl-button--sm button svg, .xpl-button--sm a svg, .xpl-button--xs button svg, .xpl-button--xs a svg {
+        width: 12px;
+      }
 
-a.xpl-button:hover, button.xpl-button:hover {
-  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
+.xpl-button--sm button,
+    .xpl-button--sm a {
+      height: 32px;
+      padding: 8px 16px;
+    }
 
-a.xpl-button:focus,
-button.xpl-button:focus {
-  --tw-ring-color: var(--xpl-color-secondary-lm);
-}
+.xpl-button--xs button,
+    .xpl-button--xs a {
+      height: 24px;
+      padding: 4px 10px;
+    }
 
-button.xpl-button:disabled,
-button.xpl-button:disabled:hover {
-  background-color: var(--xpl-color-action-disabled-lm);
-  border-color: var(--xpl-color-action-disabled-lm);
-  color: var(--xpl-color-text-secondary-lm);
-}
+.xpl-button--icon-only button,
+    .xpl-button--icon-only a {
+      display: flex;
+      justify-content: center;
+      padding: 0;
+      width: 40px;
+    }
 
-button.xpl-button:disabled, button.xpl-button:disabled:hover {
-  cursor: not-allowed;
-  --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
+.xpl-button--icon-only button svg, .xpl-button--icon-only a svg {
+        height: 18px;
+        width: 18px;
+      }
 
-.dark a.xpl-button:hover,
-.dark button.xpl-button:hover {
-  background-color: var(--xpl-color-secondary-hover-dm);
-}
+.xpl-button--icon-only.xpl-button--sm a,
+      .xpl-button--icon-only.xpl-button--sm button {
+        height: 32px;
+        width: 32px;
+      }
 
-.dark a.xpl-button:focus,
-.dark button.xpl-button:focus {
-  --tw-ring-color: var(--xpl-color-secondary-dm);
-}
+.xpl-button--icon-only.xpl-button--sm a svg, .xpl-button--icon-only.xpl-button--sm button svg {
+          height: 15px;
+          width: 15px;
+        }
 
-.dark button.xpl-button:disabled,
-.dark button.xpl-button:disabled:hover {
-  background-color: var(--xpl-color-action-disabled-dm);
-  border-color: var(--xpl-color-action-disabled-dm);
-  color: var(--xpl-color-text-secondary-dm);
-}
+.xpl-button--icon-only.xpl-button--xs a,
+      .xpl-button--icon-only.xpl-button--xs button {
+        height: 24px;
+        width: 24px;
+      }
 
-a.xpl-button--secondary, button.xpl-button--secondary {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity))
-}
+.xpl-button--icon-only.xpl-button--xs a svg, .xpl-button--icon-only.xpl-button--xs button svg {
+          height: 12px;
+          width: 12px;
+        }
 
-.dark a.xpl-button--secondary, .dark button.xpl-button--secondary {
-  background-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity))
-}
+.xpl-button--secondary a:hover, .xpl-button--secondary button:hover {
+        border-color: var(--xpl-color-secondary-lm);
+        --tw-bg-opacity: 1;
+        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+      }
+
+.xpl-button--secondary a:active, .xpl-button--secondary button:active {
+        --tw-ring-color: var(--xpl-color-purple-500);
+        border-color: var(--xpl-color-action-primary-lm);
+        --tw-bg-opacity: 1;
+        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+      }
+
+.xpl-button--secondary a:focus, .xpl-button--secondary button:focus {
+        --tw-ring-color: var(--xpl-color-purple-500);
+        --tw-border-opacity: 1;
+        border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+      }
+
+.xpl-button--secondary a, .xpl-button--secondary button {
+      --tw-bg-opacity: 1;
+      background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+      --tw-border-opacity: 1;
+      border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+      --tw-text-opacity: 1;
+      color: rgba(48, 45, 59, var(--tw-text-opacity))
+    }
+
+.xpl-button--subtle a:hover, .xpl-button--subtle button:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+      }
+
+.xpl-button--subtle a:active, .xpl-button--subtle button:active {
+        --tw-ring-color: var(--xpl-color-gray-400);
+        --tw-bg-opacity: 1;
+        background-color: rgba(234, 235, 239, var(--tw-bg-opacity));
+      }
+
+.xpl-button--subtle a:focus, .xpl-button--subtle button:focus {
+        --tw-ring-color: var(--xpl-color-gray-400);
+        border-color: transparent;
+        --tw-bg-opacity: 1;
+        background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+      }
+
+.xpl-button--subtle a, .xpl-button--subtle button {
+      --tw-bg-opacity: 1;
+      background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+      --tw-text-opacity: 1;
+      color: rgba(48, 45, 59, var(--tw-text-opacity))
+    }
+
+.xpl-button--success a:hover, .xpl-button--success button:hover {
+        --tw-bg-opacity: 1;
+        background-color: rgba(29, 97, 75, var(--tw-bg-opacity));
+      }
+
+.xpl-button--success a:active, .xpl-button--success button:active {
+        --tw-ring-color: var(--xpl-color-green-600);
+        --tw-bg-opacity: 1;
+        background-color: rgba(29, 97, 75, var(--tw-bg-opacity));
+      }
+
+.xpl-button--success a:focus, .xpl-button--success button:focus {
+        --tw-ring-color: var(--xpl-color-green-600);
+        border-color: transparent;
+        --tw-bg-opacity: 1;
+        background-color: rgba(36, 120, 93, var(--tw-bg-opacity));
+      }
+
+.xpl-button--success a, .xpl-button--success button {
+      --tw-bg-opacity: 1;
+      background-color: rgba(36, 120, 93, var(--tw-bg-opacity));
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity))
+    }
+
+.xpl-button--success.xpl-button--secondary a,
+      .xpl-button--success.xpl-button--secondary button {
+        background-color: transparent;
+        color: var(--xpl-color-green-600);
+      }
+
+.xpl-button--success.xpl-button--secondary a:hover, .xpl-button--success.xpl-button--secondary button:hover {
+          background-color: transparent;
+          border-color: var(--xpl-color-green-600);
+        }
+
+.xpl-button--success.xpl-button--secondary a:active, .xpl-button--success.xpl-button--secondary button:active {
+          background-color: transparent;
+          border-color: var(--xpl-color-green-600);
+        }
+
+.xpl-button--success.xpl-button--secondary a:focus, .xpl-button--success.xpl-button--secondary button:focus {
+          background-color: transparent;
+          --tw-border-opacity: 1;
+          border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+        }
+
+.xpl-button--success.xpl-button--secondary a:disabled,
+        .xpl-button--success.xpl-button--secondary a:disabled:hover,
+        .xpl-button--success.xpl-button--secondary button:disabled,
+        .xpl-button--success.xpl-button--secondary button:disabled:hover {
+          background-color: var(--xpl-color-action-disabled-lm);
+          border-color: var(--xpl-color-action-disabled-lm);
+          color: var(--xpl-color-text-secondary-lm);
+        }
+
+.xpl-button--success.xpl-button--subtle a:hover, .xpl-button--success.xpl-button--subtle button:hover {
+          --tw-bg-opacity: 1;
+          background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+        }
+
+.xpl-button--success.xpl-button--subtle a:active, .xpl-button--success.xpl-button--subtle button:active {
+          --tw-ring-color: var(--xpl-color-gray-400);
+          --tw-bg-opacity: 1;
+          background-color: rgba(234, 235, 239, var(--tw-bg-opacity));
+        }
+
+.xpl-button--success.xpl-button--subtle a:focus, .xpl-button--success.xpl-button--subtle button:focus {
+          --tw-ring-color: var(--xpl-color-gray-400);
+          border-color: transparent;
+          --tw-bg-opacity: 1;
+          background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+        }
+
+.xpl-button--success.xpl-button--subtle a:disabled,
+        .xpl-button--success.xpl-button--subtle a:disabled:hover,
+        .xpl-button--success.xpl-button--subtle button:disabled,
+        .xpl-button--success.xpl-button--subtle button:disabled:hover {
+          background-color: var(--xpl-color-action-disabled-lm);
+          border-color: var(--xpl-color-action-disabled-lm);
+          color: var(--xpl-color-text-secondary-lm);
+        }
+
+.xpl-button--success.xpl-button--subtle a, .xpl-button--success.xpl-button--subtle button {
+        --tw-bg-opacity: 1;
+        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+        --tw-text-opacity: 1;
+        color: rgba(36, 120, 93, var(--tw-text-opacity))
+      }
+
+.xpl-button--warning a,
+    .xpl-button--warning button {
+      background-color: var(--xpl-color-action-warning-lm);
+    }
+
+.xpl-button--warning a:hover, .xpl-button--warning button:hover {
+        background-color: var(--xpl-color-action-warning-hover-lm);
+      }
+
+.xpl-button--warning a:active, .xpl-button--warning button:active {
+        --tw-ring-color: var(--xpl-color-red-700);
+        background-color: var(--xpl-color-action-warning-hover-lm);
+      }
+
+.xpl-button--warning a:focus, .xpl-button--warning button:focus {
+        --tw-ring-color: var(--xpl-color-action-warning-lm);
+        background-color: var(--xpl-color-action-warning-lm);
+        border-color: transparent;
+      }
+
+.xpl-button--warning a, .xpl-button--warning button {
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity))
+    }
+
+.xpl-button--warning.xpl-button--secondary a,
+      .xpl-button--warning.xpl-button--secondary button {
+        background-color: transparent;
+        color: var(--xpl-color-text-warning-lm);
+      }
+
+.xpl-button--warning.xpl-button--secondary a:hover, .xpl-button--warning.xpl-button--secondary button:hover {
+          background-color: transparent;
+          border-color: var(--xpl-color-text-warning-lm);
+        }
+
+.xpl-button--warning.xpl-button--secondary a:active, .xpl-button--warning.xpl-button--secondary button:active {
+          background-color: transparent;
+          border-color: var(--xpl-color-text-warning-lm);
+        }
+
+.xpl-button--warning.xpl-button--secondary a:focus, .xpl-button--warning.xpl-button--secondary button:focus {
+          background-color: transparent;
+          --tw-border-opacity: 1;
+          border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+        }
+
+.xpl-button--warning.xpl-button--secondary a:disabled,
+        .xpl-button--warning.xpl-button--secondary a:disabled:hover,
+        .xpl-button--warning.xpl-button--secondary button:disabled,
+        .xpl-button--warning.xpl-button--secondary button:disabled:hover {
+          background-color: var(--xpl-color-action-disabled-lm);
+          border-color: var(--xpl-color-action-disabled-lm);
+          color: var(--xpl-color-text-secondary-lm);
+        }
+
+.xpl-button--warning.xpl-button--subtle a,
+      .xpl-button--warning.xpl-button--subtle button {
+        color: var(--xpl-color-text-warning-lm);
+      }
+
+.xpl-button--warning.xpl-button--subtle a:hover, .xpl-button--warning.xpl-button--subtle button:hover {
+          --tw-bg-opacity: 1;
+          background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+        }
+
+.xpl-button--warning.xpl-button--subtle a:active, .xpl-button--warning.xpl-button--subtle button:active {
+          --tw-ring-color: var(--xpl-color-gray-400);
+          --tw-bg-opacity: 1;
+          background-color: rgba(234, 235, 239, var(--tw-bg-opacity));
+        }
+
+.xpl-button--warning.xpl-button--subtle a:focus, .xpl-button--warning.xpl-button--subtle button:focus {
+          --tw-ring-color: var(--xpl-color-gray-400);
+          border-color: transparent;
+          --tw-bg-opacity: 1;
+          background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+        }
+
+.xpl-button--warning.xpl-button--subtle a:disabled,
+        .xpl-button--warning.xpl-button--subtle a:disabled:hover,
+        .xpl-button--warning.xpl-button--subtle button:disabled,
+        .xpl-button--warning.xpl-button--subtle button:disabled:hover {
+          background-color: var(--xpl-color-action-disabled-lm);
+          border-color: var(--xpl-color-action-disabled-lm);
+          color: var(--xpl-color-text-secondary-lm);
+        }
+
+.xpl-button--warning.xpl-button--subtle a, .xpl-button--warning.xpl-button--subtle button {
+        --tw-bg-opacity: 1;
+        background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+      }
+
+.dark .xpl-button a,
+  .dark .xpl-button button {
+    background-color: var(--xpl-color-secondary-dm);
+    color: var(--xpl-color-text-reverse-dm);
+  }
+
+.dark .xpl-button a:hover, .dark .xpl-button button:hover {
+      background-color: var(--xpl-color-secondary-hover-dm);
+      border-color: transparent;
+    }
+
+.dark .xpl-button a:focus, .dark .xpl-button button:focus {
+      --tw-ring-color: var(--xpl-color-purple-500);
+      --tw-ring-offset-color: var(--xpl-color-foreground-dm);
+      border-color: transparent;
+    }
+
+.dark .xpl-button a:active, .dark .xpl-button button:active {
+      --tw-ring-color: var(--xpl-color-purple-500);
+      --tw-ring-offset-color: var(--xpl-color-foreground-dm);
+      background-color: var(--xpl-color-secondary-hover-dm);
+    }
+
+.dark .xpl-button--secondary a,
+    .dark .xpl-button--secondary button {
+      border-color: var(--xpl-color-gray-600);
+      background-color: var(--xpl-color-foreground-dm);
+    }
+
+.dark .xpl-button--secondary a:hover,
+      .dark .xpl-button--secondary a:active,
+      .dark .xpl-button--secondary a:focus,
+      .dark .xpl-button--secondary button:hover,
+      .dark .xpl-button--secondary button:active,
+      .dark .xpl-button--secondary button:focus {
+        background-color: var(--xpl-color-foreground-dm);
+      }
+
+.dark .xpl-button--secondary a:hover, .dark .xpl-button--secondary button:hover {
+        border-color: var(--xpl-color-secondary-dm);
+      }
+
+.dark .xpl-button--secondary a:active, .dark .xpl-button--secondary button:active {
+        border-color: var(--xpl-color-secondary-dm);
+      }
+
+.dark .xpl-button--secondary a:focus, .dark .xpl-button--secondary button:focus {
+        --tw-ring-color: var(--xpl-color-secondary-dm);
+        border-color: var(--xpl-color-gray-600);
+      }
+
+.dark .xpl-button--secondary a, .dark .xpl-button--secondary button {
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity))
+    }
+
+.dark .xpl-button--subtle a:hover, .dark .xpl-button--subtle button:hover {
+        border-color: transparent;
+        --tw-bg-opacity: 1;
+        background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+      }
+
+.dark .xpl-button--subtle a:active, .dark .xpl-button--subtle button:active {
+        --tw-ring-color: var(--xpl-color-gray-700);
+        --tw-bg-opacity: 1;
+        background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
+      }
+
+.dark .xpl-button--subtle a:focus, .dark .xpl-button--subtle button:focus {
+        --tw-ring-color: var(--xpl-color-gray-700);
+        background-color: var(--xpl-color-foreground-dm);
+        border-color: transparent;
+      }
+
+.dark .xpl-button--subtle a, .dark .xpl-button--subtle button {
+      background-color: transparent;
+      --tw-text-opacity: 1;
+      color: rgba(255, 255, 255, var(--tw-text-opacity))
+    }
+
+.dark .xpl-button--success a,
+    .dark .xpl-button--success button {
+      color: var(--xpl-color-reverse-dm);
+    }
+
+.dark .xpl-button--success a:hover, .dark .xpl-button--success button:hover {
+        border-color: transparent;
+        --tw-bg-opacity: 1;
+        background-color: rgba(74, 212, 168, var(--tw-bg-opacity));
+      }
 
-a.xpl-button--secondary:hover,
-button.xpl-button--secondary:hover {
-  border-color: var(--xpl-color-secondary-lm);
-}
+.dark .xpl-button--success a:active, .dark .xpl-button--success button:active {
+        --tw-ring-color: var(--xpl-color-green-200);
+        --tw-bg-opacity: 1;
+        background-color: rgba(74, 212, 168, var(--tw-bg-opacity));
+      }
 
-a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-}
+.dark .xpl-button--success a:focus, .dark .xpl-button--success button:focus {
+        --tw-ring-color: var(--xpl-color-green-200);
+        border-color: transparent;
+        --tw-bg-opacity: 1;
+        background-color: rgba(116, 251, 208, var(--tw-bg-opacity));
+      }
 
-.dark a.xpl-button--secondary:hover,
-.dark button.xpl-button--secondary:hover {
-  border-color: var(--xpl-color-secondary-dm);
-}
+.dark .xpl-button--success a, .dark .xpl-button--success button {
+      --tw-bg-opacity: 1;
+      background-color: rgba(116, 251, 208, var(--tw-bg-opacity))
+    }
 
-.dark a.xpl-button--secondary:hover, .dark button.xpl-button--secondary:hover {
-  background-color: transparent
-}
+.dark .xpl-button--success.xpl-button--secondary a,
+      .dark .xpl-button--success.xpl-button--secondary button {
+        background-color: var(--xpl-color-foreground-dm);
+        color: var(--xpl-color-green-200);
+      }
 
-.dark a.xpl-button--secondary:focus,
-.dark button.xpl-button--secondary:focus {
-  --tw-ring-color: var(--xpl-color-secondary-dm);
-}
+.dark .xpl-button--success.xpl-button--secondary a:hover,
+        .dark .xpl-button--success.xpl-button--secondary a:active,
+        .dark .xpl-button--success.xpl-button--secondary a:focus,
+        .dark .xpl-button--success.xpl-button--secondary button:hover,
+        .dark .xpl-button--success.xpl-button--secondary button:active,
+        .dark .xpl-button--success.xpl-button--secondary button:focus {
+          background-color: var(--xpl-color-foreground-dm);
+        }
 
-.dark a.xpl-button--secondary:active,
-.dark button.xpl-button--secondary:active {
-  --tw-ring-color: var(--xpl-color-secondary-dm);
-}
+.dark .xpl-button--success.xpl-button--secondary a:hover, .dark .xpl-button--success.xpl-button--secondary button:hover {
+          border-color: var(--xpl-color-green-200);
+        }
 
-.dark button.xpl-button--secondary:disabled {
-  background-color: transparent;
-  --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
-}
+.dark .xpl-button--success.xpl-button--secondary a:active, .dark .xpl-button--success.xpl-button--secondary button:active {
+          border-color: var(--xpl-color-green-200);
+        }
 
-a.xpl-button--subtle, button.xpl-button--subtle {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  border-style: none;
-  --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity))
-}
+.dark .xpl-button--success.xpl-button--secondary a:focus, .dark .xpl-button--success.xpl-button--secondary button:focus {
+          border-color: var(--xpl-color-stroke-dm);
+        }
 
-.dark a.xpl-button--subtle, .dark button.xpl-button--subtle {
-  background-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity))
-}
+.dark .xpl-button--success.xpl-button--subtle a:hover, .dark .xpl-button--success.xpl-button--subtle button:hover {
+          --tw-bg-opacity: 1;
+          background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+        }
 
-a.xpl-button--subtle:hover, button.xpl-button--subtle:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
-}
+.dark .xpl-button--success.xpl-button--subtle a:active, .dark .xpl-button--success.xpl-button--subtle button:active {
+          --tw-ring-color: var(--xpl-color-gray-700);
+          --tw-bg-opacity: 1;
+          background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
+        }
 
-a.xpl-button--subtle:focus, button.xpl-button--subtle:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(238, 239, 243, var(--tw-ring-opacity))
-}
+.dark .xpl-button--success.xpl-button--subtle a:focus, .dark .xpl-button--success.xpl-button--subtle button:focus {
+          --tw-ring-color: var(--xpl-color-gray-700);
+          background-color: var(--xpl-color-foreground-dm);
+          border-color: transparent;
+        }
 
-a.xpl-button--subtle:active, button.xpl-button--subtle:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(238, 239, 243, var(--tw-bg-opacity))
-}
+.dark .xpl-button--success.xpl-button--subtle a, .dark .xpl-button--success.xpl-button--subtle button {
+        background-color: transparent;
+        --tw-text-opacity: 1;
+        color: rgba(116, 251, 208, var(--tw-text-opacity))
+      }
 
-.dark a.xpl-button--subtle:hover, .dark button.xpl-button--subtle:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(54, 50, 64, var(--tw-bg-opacity))
-}
+.dark .xpl-button--warning a,
+    .dark .xpl-button--warning button {
+      background-color: var(--xpl-color-action-warning-dm);
+      color: var(--xpl-color-reverse-dm);
+    }
 
-.dark a.xpl-button--subtle:focus, .dark button.xpl-button--subtle:focus {
-  background-color: transparent;
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(54, 50, 64, var(--tw-ring-opacity))
-}
+.dark .xpl-button--warning a:hover, .dark .xpl-button--warning button:hover {
+        border-color: transparent;
+        background-color: var(--xpl-color-action-warning-hover-dm);
+      }
 
-.dark a.xpl-button--subtle:active, .dark button.xpl-button--subtle:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(60, 56, 71, var(--tw-bg-opacity))
-}
+.dark .xpl-button--warning a:active, .dark .xpl-button--warning button:active {
+        --tw-ring-color: var(--xpl-color-red-300);
+        background-color: var(--xpl-color-action-warning-hover-dm);
+      }
 
-a.xpl-button--warning, button.xpl-button--warning {
-  --tw-bg-opacity: 1;
-  background-color: rgba(194, 33, 15, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(194, 33, 15, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity))
-}
+.dark .xpl-button--warning a:focus, .dark .xpl-button--warning button:focus {
+        --tw-ring-color: var(--xpl-color-red-300);
+        background-color: var(--xpl-color-action-warning-dm);
+        border-color: transparent;
+      }
 
-.dark a.xpl-button--warning, .dark button.xpl-button--warning {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 147, 135, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(255, 147, 135, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity))
-}
+.dark .xpl-button--warning.xpl-button--secondary a,
+      .dark .xpl-button--warning.xpl-button--secondary button {
+        background-color: var(--xpl-color-foreground-dm);
+        color: var(--xpl-color-text-warning-dm);
+      }
 
-a.xpl-button--warning:hover, button.xpl-button--warning:hover, a.xpl-button--warning:active, button.xpl-button--warning:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(150, 19, 5, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(150, 19, 5, var(--tw-border-opacity))
-}
+.dark .xpl-button--warning.xpl-button--secondary a:hover,
+        .dark .xpl-button--warning.xpl-button--secondary a:active,
+        .dark .xpl-button--warning.xpl-button--secondary a:focus,
+        .dark .xpl-button--warning.xpl-button--secondary button:hover,
+        .dark .xpl-button--warning.xpl-button--secondary button:active,
+        .dark .xpl-button--warning.xpl-button--secondary button:focus {
+          background-color: var(--xpl-color-foreground-dm);
+        }
 
-a.xpl-button--warning:focus, button.xpl-button--warning:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(194, 33, 15, var(--tw-ring-opacity))
-}
+.dark .xpl-button--warning.xpl-button--secondary a:hover, .dark .xpl-button--warning.xpl-button--secondary button:hover {
+          border-color: var(--xpl-color-text-warning-dm);
+        }
 
-.dark a.xpl-button--warning:hover, .dark button.xpl-button--warning:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 114, 99, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(248, 114, 99, var(--tw-border-opacity))
-}
+.dark .xpl-button--warning.xpl-button--secondary a:active, .dark .xpl-button--warning.xpl-button--secondary button:active {
+          border-color: var(--xpl-color-text-warning-dm);
+        }
 
-.dark a.xpl-button--warning:focus, .dark button.xpl-button--warning:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(255, 147, 135, var(--tw-ring-opacity))
-}
+.dark .xpl-button--warning.xpl-button--secondary a:focus, .dark .xpl-button--warning.xpl-button--secondary button:focus {
+          border-color: var(--xpl-color-stroke-dm);
+        }
 
-.dark a.xpl-button--warning:active, .dark button.xpl-button--warning:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 114, 99, var(--tw-bg-opacity))
-}
+.dark .xpl-button--warning.xpl-button--subtle a,
+      .dark .xpl-button--warning.xpl-button--subtle button {
+        color: var(--xpl-color-text-warning-dm);
+      }
 
-a.xpl-button--sm,
-button.xpl-button--sm {
-  padding: 7px 15px;
-  height: 32px;
-}
+.dark .xpl-button--warning.xpl-button--subtle a:hover, .dark .xpl-button--warning.xpl-button--subtle button:hover {
+          border-color: transparent;
+          --tw-bg-opacity: 1;
+          background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+        }
 
-a.xpl-button--sm, button.xpl-button--sm {
-  font-size: 0.75rem;
-  line-height: 1rem
-}
+.dark .xpl-button--warning.xpl-button--subtle a:active, .dark .xpl-button--warning.xpl-button--subtle button:active {
+          --tw-ring-color: var(--xpl-color-gray-700);
+          --tw-bg-opacity: 1;
+          background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
+        }
 
-a.xpl-button--xs,
-button.xpl-button--xs {
-  padding: 3px 9px;
-  height: 24px;
-}
+.dark .xpl-button--warning.xpl-button--subtle a:focus, .dark .xpl-button--warning.xpl-button--subtle button:focus {
+          --tw-ring-color: var(--xpl-color-gray-700);
+          background-color: var(--xpl-color-foreground-dm);
+          border-color: transparent;
+        }
 
-a.xpl-button--xs, button.xpl-button--xs {
-  font-size: 0.625rem;
-  line-height: 0.875rem
-}
+.dark .xpl-button--warning.xpl-button--subtle a, .dark .xpl-button--warning.xpl-button--subtle button {
+        background-color: transparent
+      }
 
-a.xpl-button--icon-only,
-button.xpl-button--icon-only {
-  width: 44px;
-}
+/* stylelint-disable-next-line no-duplicate-selectors */
 
-a.xpl-button--icon-only, button.xpl-button--icon-only {
-  padding-right: 0px;
-  padding-left: 0px;
-  text-align: center
-}
+.dark .xpl-button a:disabled,
+    .dark .xpl-button a:disabled:hover,
+    .dark .xpl-button button:disabled,
+    .dark .xpl-button button:disabled:hover {
+      background-color: var(--xpl-color-action-disabled-dm);
+      border-color: transparent;
+      color: var(--xpl-color-text-secondary-dm);
+    }
 
-a.xpl-button--sm.xpl-button--icon-only,
-button.xpl-button--sm.xpl-button--icon-only {
-  width: 32px;
-}
+.dark .xpl-button a:disabled, .dark .xpl-button a:disabled:hover, .dark .xpl-button button:disabled, .dark .xpl-button button:disabled:hover {
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+    }
 
-a.xpl-button--xs.xpl-button--icon-only,
-button.xpl-button--xs.xpl-button--icon-only {
-  width: 24px;
-}
+.xpl-button--link-disabled a,
+  .xpl-button--link-disabled a:hover,
+  .xpl-button--link-disabled a:focus,
+  .xpl-button--link-disabled a:active,
+  .xpl-button--link-disabled.xpl-button--success a,
+  .xpl-button--link-disabled.xpl-button--success a:hover,
+  .xpl-button--link-disabled.xpl-button--success a:focus,
+  .xpl-button--link-disabled.xpl-button--success a:active,
+  .xpl-button--link-disabled.xpl-button--warning a,
+  .xpl-button--link-disabled.xpl-button--warning a:hover,
+  .xpl-button--link-disabled.xpl-button--warning a:focus,
+  .xpl-button--link-disabled.xpl-button--warning a:active,
+  .xpl-button--link-disabled.xpl-button--neutral a,
+  .xpl-button--link-disabled.xpl-button--neutral a:hover,
+  .xpl-button--link-disabled.xpl-button--neutral a:focus,
+  .xpl-button--link-disabled.xpl-button--neutral a:active {
+    background-color: var(--xpl-color-action-disabled-lm);
+    border-color: var(--xpl-color-action-disabled-lm);
+    color: var(--xpl-color-text-secondary-lm);
+  }
 
-.xpl-button--icon-only i {
-  transform: scale(1.2);
-  width: 100%;
-}
+.xpl-button--link-disabled a, .xpl-button--link-disabled a:hover, .xpl-button--link-disabled a:focus, .xpl-button--link-disabled a:active, .xpl-button--link-disabled.xpl-button--success a, .xpl-button--link-disabled.xpl-button--success a:hover, .xpl-button--link-disabled.xpl-button--success a:focus, .xpl-button--link-disabled.xpl-button--success a:active, .xpl-button--link-disabled.xpl-button--warning a, .xpl-button--link-disabled.xpl-button--warning a:hover, .xpl-button--link-disabled.xpl-button--warning a:focus, .xpl-button--link-disabled.xpl-button--warning a:active, .xpl-button--link-disabled.xpl-button--neutral a, .xpl-button--link-disabled.xpl-button--neutral a:hover, .xpl-button--link-disabled.xpl-button--neutral a:focus, .xpl-button--link-disabled.xpl-button--neutral a:active {
+    border-width: 0px;
+    cursor: not-allowed;
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+  }
 
-.xpl-button--icon-only.xpl-button--sm i {
-  transform: scale(1.25);
-}
+.dark .xpl-button--link-disabled a,
+    .dark .xpl-button--link-disabled a:hover,
+    .dark .xpl-button--link-disabled a:focus,
+    .dark .xpl-button--link-disabled a:active,
+    .dark .xpl-button--link-disabled.xpl-button--success a,
+    .dark .xpl-button--link-disabled.xpl-button--success a:hover,
+    .dark .xpl-button--link-disabled.xpl-button--success a:focus,
+    .dark .xpl-button--link-disabled.xpl-button--success a:active,
+    .dark .xpl-button--link-disabled.xpl-button--warning a,
+    .dark .xpl-button--link-disabled.xpl-button--warning a:hover,
+    .dark .xpl-button--link-disabled.xpl-button--warning a:focus,
+    .dark .xpl-button--link-disabled.xpl-button--warning a:active,
+    .dark .xpl-button--link-disabled.xpl-button--neutral a,
+    .dark .xpl-button--link-disabled.xpl-button--neutral a:hover,
+    .dark .xpl-button--link-disabled.xpl-button--neutral a:focus,
+    .dark .xpl-button--link-disabled.xpl-button--neutral a:active {
+      background-color: var(--xpl-color-action-disabled-dm);
+      border-color: transparent;
+      color: var(--xpl-color-text-secondary-dm);
+    }
 
-.xpl-button--icon-only.xpl-button--xs i {
-  transform: scale(1);
-}
+.dark .xpl-button--link-disabled a, .dark .xpl-button--link-disabled a:hover, .dark .xpl-button--link-disabled a:focus, .dark .xpl-button--link-disabled a:active, .dark .xpl-button--link-disabled.xpl-button--success a, .dark .xpl-button--link-disabled.xpl-button--success a:hover, .dark .xpl-button--link-disabled.xpl-button--success a:focus, .dark .xpl-button--link-disabled.xpl-button--success a:active, .dark .xpl-button--link-disabled.xpl-button--warning a, .dark .xpl-button--link-disabled.xpl-button--warning a:hover, .dark .xpl-button--link-disabled.xpl-button--warning a:focus, .dark .xpl-button--link-disabled.xpl-button--warning a:active, .dark .xpl-button--link-disabled.xpl-button--neutral a, .dark .xpl-button--link-disabled.xpl-button--neutral a:hover, .dark .xpl-button--link-disabled.xpl-button--neutral a:focus, .dark .xpl-button--link-disabled.xpl-button--neutral a:active {
+      cursor: not-allowed;
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+    }
 
 .xpl-button-row {
   --tw-border-opacity: 1;
@@ -2303,21 +2659,24 @@ button.xpl-button--xs.xpl-button--icon-only {
   display: none;
 }
 
+.xpl-button-row__right {
+  display: flex;
+}
+
 @media screen and (max-width: 640px) {
   .xpl-button-row-inner {
     display: block;
   }
+    .xpl-button-row .xpl-button a, .xpl-button-row .xpl-button button {
+      justify-content: center;
+      margin-bottom: 1rem;
+      width: 100%
+    }
 
   .xpl-button-row xpl-button + xpl-button .xpl-button {
     margin-left: 0px;
   }
 
-  .xpl-button-row button.xpl-button {
-    justify-content: center;
-    margin-bottom: 1rem;
-    width: 100%;
-  }
-
   .xpl-button-row__left .xpl-button--secondary {
     display: none;
   }
@@ -2329,7 +2688,6 @@ button.xpl-button--xs.xpl-button--icon-only {
   /* so that tertiary appears below primary */
 
   .xpl-button-row__right {
-    display: flex;
     flex-direction: column-reverse;
   }
 
@@ -3042,27 +3400,85 @@ button.xpl-button--xs.xpl-button--icon-only {
   transition-duration: 150ms;
 }
 
-.xpl-dropdown ul {
+.dark .xpl-dropdown {
+    --tw-bg-opacity: 1;
+    background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
+    --tw-border-opacity: 1;
+    border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+  }
+
+.xpl-dropdown--open {
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 50;
+    --tw-translate-y: 0.5rem;
+  }
+
+.xpl-dropdown-list {
   max-height: 300px;
   height: 100%;
   overflow-y: auto;
 }
 
-.dark .xpl-dropdown {
-  --tw-bg-opacity: 1;
-  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+.xpl-dropdown-list-item {
+  list-style: none;
 }
 
-.xpl-dropdown.active {
-  opacity: 1;
-  pointer-events: auto;
-  z-index: 50;
-  --tw-translate-y: 0.5rem;
+.dark .xpl-dropdown-option {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+  }
+
+.xpl-dropdown-option:not(.xpl-dropdown-option--disabled):focus {
+      --tw-bg-opacity: 1;
+      background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+
+.xpl-dropdown-option:not(.xpl-dropdown-option--disabled):hover {
+      background-color: var(--xpl-color-secondary-bg-lm);
+    }
+
+.xpl-dropdown-option--disabled,
+    .xpl-dropdown-option--disabled [disabled] {
+      touch-action: none;
+    }
+
+.xpl-dropdown-option--disabled, .xpl-dropdown-option--disabled [disabled] {
+      pointer-events: none
+    }
+
+.xpl-dropdown-option--disabled {
+    cursor: not-allowed;
+    opacity: 0.6
 }
 
-.xpl-dropdown button {
+.xpl-dropdown-option--selected {
+    background-color: var(--xpl-color-secondary-bg-lm);
+    border-right: 4px solid var(--xpl-color-secondary-lm);
+  }
+
+.dark .xpl-dropdown-option:not(.xpl-dropdown-option--disabled):focus {
+      --tw-bg-opacity: 1;
+      background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+
+.dark .xpl-dropdown-option:not(.xpl-dropdown-option--disabled):hover {
+      --tw-bg-opacity: 1;
+      background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
+    }
+
+.dark .xpl-dropdown-option--selected {
+    border-right: 4px solid var(--xpl-color-secondary-dm);
+    --tw-bg-opacity: 1;
+    background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
+  }
+
+.xpl-dropdown-option {
+  cursor: pointer;
   display: block;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -3073,60 +3489,31 @@ button.xpl-button--xs.xpl-button--icon-only {
   text-align: left;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity));
-  width: 100%;
-}
-
-.xpl-dropdown button:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.xpl-dropdown button:hover {
-  background-color: var(--xpl-color-secondary-bg-lm);
-}
-
-.dark .xpl-dropdown button {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-
-.dark .xpl-dropdown button:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.dark .xpl-dropdown button:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
-}
-
-.xpl-dropdown button.selected {
-  background-color: var(--xpl-color-secondary-bg-lm);
-  border-right: 4px solid var(--xpl-color-secondary-lm);
-}
-
-.dark .xpl-dropdown button.selected {
-  border-right: 4px solid var(--xpl-color-secondary-dm);
-  --tw-bg-opacity: 1;
-  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
+  width: 100%
 }
 
-.xpl-dropdown.xpl-dropdown--multi button.selected {
+.xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%236923F4'/%3E%3C/svg%3E%0A");
   background-position: calc(100% - 16px) center;
   background-repeat: no-repeat;
-  border: 0 none;
 }
 
-.dark .xpl-dropdown.xpl-dropdown--multi button.selected {
-  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%23C3ADFF'/%3E%3C/svg%3E%0A");
+.dark .xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%23C3ADFF'/%3E%3C/svg%3E%0A");
+  }
+
+.xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
+  border-width: 0px
 }
 
-.xpl-dropdown span {
+.dark .xpl-dropdown-heading {
+    --tw-border-opacity: 1;
+    border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+    --tw-text-opacity: 1;
+    color: rgba(153, 155, 168, var(--tw-text-opacity));
+  }
+
+.xpl-dropdown-heading {
   --tw-border-opacity: 1;
   border-color: rgba(225, 226, 232, var(--tw-border-opacity));
   border-bottom-width: 1px;
@@ -3139,14 +3526,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 0.75rem;
   --tw-text-opacity: 1;
   color: rgba(106, 109, 125, var(--tw-text-opacity));
-  width: 100%;
-}
-
-.dark .xpl-dropdown span {
-  --tw-border-opacity: 1;
-  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+  width: 100%
 }
 
 /* Flatpickr overrides */
@@ -4282,6 +4662,10 @@ a.xpl-list-item:focus {
           margin-bottom: 0px
         }
 
+.xpl-nav-item a p, .xpl-nav-item button p {
+      margin: 0;
+    }
+
 .xpl-nav-item a svg, .xpl-nav-item button svg {
       height: 2rem;
       margin-right: 0.75rem;
@@ -4304,6 +4688,10 @@ a.xpl-list-item:focus {
       color: rgba(255, 255, 255, var(--tw-text-opacity))
     }
 
+.xpl-nav-item a.active, .xpl-nav-item button.active {
+      border-right: 4px solid var(--xpl-color-primary-dm);
+    }
+
 .xpl-nav-item a.active svg, .xpl-nav-item button.active svg {
         fill: currentColor;
         --tw-text-opacity: 1;
@@ -4311,10 +4699,6 @@ a.xpl-list-item:focus {
       }
 
 .xpl-nav-item a.active, .xpl-nav-item button.active {
-      --tw-border-opacity: 1;
-      border-color: rgba(249, 145, 112, var(--tw-border-opacity));
-      border-style: solid;
-      border-right-width: 4px;
       --tw-text-opacity: 1;
       color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
@@ -4333,8 +4717,6 @@ a.xpl-list-item:focus {
 .xpl-nav-item a, .xpl-nav-item button {
     background-color: transparent;
     border-color: transparent;
-    border-style: solid;
-    border-right-width: 4px;
     align-items: center;
     align-content: center
   }
@@ -4585,38 +4967,12 @@ a.xpl-list-item:focus {
     }
       }
 
-.dark .xpl-secondary-nav nav {
-      --tw-bg-opacity: 1;
-      background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
-      --tw-border-opacity: 1;
-      border-color: rgba(106, 109, 125, var(--tw-border-opacity));
-      border-bottom-width: 1px;
-    }
-
-@media (min-width: 1024px) {
-      .dark .xpl-secondary-nav nav {
-        border-bottom-width: 0px;
-        border-right-width: 1px
-      }
-    }
-
 .xpl-secondary-nav nav {
     --tw-bg-opacity: 1;
     background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-    --tw-border-opacity: 1;
-    border-color: rgba(238, 239, 243, var(--tw-border-opacity));
-    border-right-width: 0px;
-    border-bottom-width: 1px;
     position: relative
 }
 
-@media (min-width: 1024px) {
-    .xpl-secondary-nav nav {
-      border-bottom-width: 0px;
-      border-right-width: 1px
-    }
-  }
-
 .xpl-secondary-nav nav ul::-webkit-scrollbar {
       display: none;
     }
@@ -4646,7 +5002,6 @@ a.xpl-list-item:focus {
       flex-direction: column;
       padding-right: 0px;
       padding-left: 0px;
-      padding-top: 0.5rem;
       white-space: normal
     }
   }
@@ -5414,7 +5769,6 @@ button.xpl-tag__close {
 
 .xpl-utility-bar {
   background-color: var(--xpl-color-gray-0);
-  border-color: var(--xpl-color-gray-300);
   color: var(--xpl-color-gray-500);
 }
 
@@ -5451,7 +5805,6 @@ button.xpl-tag__close {
     }
 
 .xpl-utility-bar {
-  border-bottom-width: 1px;
   display: grid;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -5468,14 +5821,19 @@ button.xpl-tag__close {
 }
 
 .dark .xpl-utility-bar {
-  background-color: var(--xpl-color-gray-900);
-  border-color: var(--xpl-color-gray-700);
+  background-color: var(--xpl-color-background-2-dm);
   color: var(--xpl-color-gray-300);
 }
 
+.xpl-utility-bar__nav-control {
+  align-items: center;
+  display: flex;
+}
+
 .xpl-utility-nav__bars {
-  fill: currentColor;
   color: var(--xpl-color-text-primary-lm);
+  fill: currentColor;
+  height: 16px;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }