@xplortech/apollo-core 0.0.7 → 0.1.0

package/build/style.css

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity  */
+
 /*! tailwindcss v2.1.4 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
@@ -8,8 +10,30 @@ Document
 */
 
 /**
-Use a better box model (opinionated).
-*/
+ * 1. Prevent padding and border from affecting element width.
+ *
+ *    We used to set this in the html element and inherit from
+ *    the parent element for everything else. This caused issues
+ *    in shadow-dom-enhanced elements like <details> where the content
+ *    is wrapped by a div with box-sizing set to `content-box`.
+ *
+ *    https://github.com/mozdevs/cssremedy/issues/4
+ *
+ *
+ * 2. Allow adding a border to an element by just adding a border-width.
+ *
+ *    By default, the way the browser specifies that an element should have no
+ *    border is by setting it's border-style to `none` in the user-agent
+ *    stylesheet.
+ *
+ *    In order to easily add borders to elements by just setting the `border-width`
+ *    property, we change the default border-style for all elements to `solid`, and
+ *    use border-width to hide them instead. This way our `border` utilities only
+ *    need to set the `border-width` property instead of the entire `border`
+ *    shorthand, making our border utilities much more straightforward to compose.
+ *
+ *    https://github.com/tailwindcss/tailwindcss/pull/116
+ */
 
 [class^="xpl-"],
 [class^="xpl-"] *,
@@ -17,25 +41,25 @@ Use a better box model (opinionated).
 [class^="xpl-"] *::before,
 [class^="xpl-"]::after,
 [class^="xpl-"] *::after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
 }
 
 /**
 Use a more readable tab size (opinionated).
 */
 
-[class^="xpl-"] {
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-}
-
 /**
 1. Correct the line height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 
 [class^="xpl-"] {
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
@@ -49,9 +73,21 @@ Sections
 Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 */
 
+/**
+ * Tailwind custom reset styles
+ */
+
+/**
+ * 1. Use the user's configured `sans` font-family (with Tailwind's default
+ *    sans-serif font stack as a fallback) as a sane default.
+ * 2. Use Tailwind's default "normal" line-height so the user isn't forced
+ *    to override it to ensure consistency even when using the default theme.
+ */
+
 [class^="xpl-"],
 [class^="xpl-"] * {
   font-family: var(--xpl-font-family);
+  line-height: 1.5; /* 2 */
 }
 
 /*
@@ -62,11 +98,13 @@ Grouping content
 /**
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default
 */
 
 [class^="xpl-"] hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
 }
 
 /*
@@ -97,11 +135,25 @@ Add the correct font weight in Edge and Safari.
 2. Correct the odd 'em' font sizing in all browsers.
 */
 
+/**
+ * Use the configured 'mono' font family for elements that
+ * are expected to be rendered with a monospace font, falling
+ * back to the system monospace stack if there is no configured
+ * 'mono' font family.
+ */
+
+[class^="xpl-"] pre,
 [class^="xpl-"] code,
 [class^="xpl-"] kbd,
-[class^="xpl-"] samp,
-[class^="xpl-"] pre {
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
+[class^="xpl-"] samp {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
     monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
@@ -148,6 +200,7 @@ Tabular data
 table[class^="xpl-"] {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
+  border-collapse: collapse;
 }
 
 /*
@@ -257,6 +310,7 @@ Add the correct display in Chrome and Safari.
 button[class^="xpl-"] {
   background-color: transparent;
   background-image: none;
+  cursor: pointer;
 }
 
 /**
@@ -284,69 +338,6 @@ ul[class^="xpl-"] {
   padding: 0;
 }
 
-/**
- * Tailwind custom reset styles
- */
-
-/**
- * 1. Use the user's configured `sans` font-family (with Tailwind's default
- *    sans-serif font stack as a fallback) as a sane default.
- * 2. Use Tailwind's default "normal" line-height so the user isn't forced
- *    to override it to ensure consistency even when using the default theme.
- */
-
-[class^="xpl-"],
-[class^="xpl-"] * {
-  font-family: var(--xpl-font-family);
-  line-height: 1.5; /* 2 */
-}
-
-/**
- * 1. Prevent padding and border from affecting element width.
- *
- *    We used to set this in the html element and inherit from
- *    the parent element for everything else. This caused issues
- *    in shadow-dom-enhanced elements like <details> where the content
- *    is wrapped by a div with box-sizing set to `content-box`.
- *
- *    https://github.com/mozdevs/cssremedy/issues/4
- *
- *
- * 2. Allow adding a border to an element by just adding a border-width.
- *
- *    By default, the way the browser specifies that an element should have no
- *    border is by setting it's border-style to `none` in the user-agent
- *    stylesheet.
- *
- *    In order to easily add borders to elements by just setting the `border-width`
- *    property, we change the default border-style for all elements to `solid`, and
- *    use border-width to hide them instead. This way our `border` utilities only
- *    need to set the `border-width` property instead of the entire `border`
- *    shorthand, making our border utilities much more straightforward to compose.
- *
- *    https://github.com/tailwindcss/tailwindcss/pull/116
- */
-
-[class^="xpl-"],
-[class^="xpl-"] *,
-[class^="xpl-"]::before,
-[class^="xpl-"] *::before,
-[class^="xpl-"]::after,
-[class^="xpl-"] *::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: #e5e7eb; /* 2 */
-}
-
-/*
- * Ensure horizontal rules are visible by default
- */
-
-[class^="xpl-"] hr {
-  border-top-width: 1px;
-}
-
 /**
  * Undo the `border-style: none` reset that Normalize applies to images so that
  * our `border-{width}` utilities have the expected effect.
@@ -399,16 +390,6 @@ textarea[class^="xpl-"]::placeholder {
   color: #9ca3af;
 }
 
-[class^="xpl-"] button,
-button[class^="xpl-"] {
-  cursor: pointer;
-}
-
-[class^="xpl-"] table,
-table[class^="xpl-"] {
-  border-collapse: collapse;
-}
-
 [class^="xpl-"] h1,
 [class^="xpl-"] h2,
 [class^="xpl-"] h3,
@@ -452,21 +433,6 @@ textarea[class^="xpl-"] {
   color: inherit;
 }
 
-/**
- * Use the configured 'mono' font family for elements that
- * are expected to be rendered with a monospace font, falling
- * back to the system monospace stack if there is no configured
- * 'mono' font family.
- */
-
-[class^="xpl-"] pre,
-[class^="xpl-"] code,
-[class^="xpl-"] kbd,
-[class^="xpl-"] samp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-}
-
 /**
  * Make replaced elements `display: block` by default as that's
  * the behavior you want almost all of the time.
@@ -482,7 +448,6 @@ textarea[class^="xpl-"] {
 [class^="xpl-"] embed,
 [class^="xpl-"] object {
   display: block;
-  vertical-align: middle;
 }
 
 /**
@@ -500,11 +465,8 @@ textarea[class^="xpl-"] {
 
 * {
   --tw-shadow: 0 0 #0000;
-}
-
-* {
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-width: 0;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgba(59, 130, 246, 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
@@ -513,160 +475,290 @@ textarea[class^="xpl-"] {
 
 :root {
   /* Typography */
-  --xpl-font-family: apple-system, system-ui, "Segoe UI", Arial, Helvetica,
-    Roboto, sans-serif;
+  --xpl-font-family:
+    apple-system,
+    system-ui,
+    "Segoe UI",
+    "Arial",
+    "Helvetica",
+    "Roboto",
+    sans-serif;
   /* Colors */
   --xpl-primary: #f44e27;
+  --xpl-darkmode-primary: #f99170;
+  --xpl-text-primary: #212633;
+  --xpl-darkmode-text-primary: #fff;
   --xpl-secondary: #6923f4;
   --xpl-secondary-dark: #4d1ab2;
   --xpl-secondary-extra-dark: #330d80;
   --xpl-secondary-light: #8857fa;
   --xpl-secondary-extra-light: #ebe5ff;
-  --xpl-darkmode-primary: #f99170;
   --xpl-darkmode-secondary: #c3adff;
   --xpl-darkmode-secondary-dark: #a480ff;
   --xpl-darkmode-secondary-extra-dark: #8857fa;
   --xpl-darkmode-secondary-light: #ddd1ff;
-  --xpl-darkmode-secondary-extra-light: #ebe5ff;
+  --xpl-text-secondary: #666d7d;
+  --xpl-darkmode-text-secondary: #ced3db;
   /* Component */
   --xpl-button-radius: 9999px;
 }
 
 .xpl-avatar {
+  border-radius: 9999px;
   display: inline-block;
   position: relative;
+  text-transform: uppercase;
+  vertical-align: middle;
 }
 
-.xpl-avatar img {
-  border-radius: 9999px;
-  height: 2.5rem;
-  width: 2.5rem;
+a.xpl-avatar {
+  text-decoration: none;
 }
 
-.xpl-avatar-dot {
-  --tw-bg-opacity: 1;
-  background-color: rgba(249, 145, 112, var(--tw-bg-opacity));
-  border-radius: 9999px;
-  display: block;
-  height: 0.625rem;
-  position: absolute;
-  top: 0px;
-  right: 0px;
+a.xpl-avatar: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-opacity: 1;
-  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
-  width: 0.625rem;
+  --tw-ring-offset-width: 2px;
 }
 
-.xpl-avatar-dot--bottom {
-  bottom: 0px;
-  top: auto;
+a.xpl-avatar {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
-.xpl-avatar--s img {
-  height: 2rem;
-  width: 2rem;
+.dark a.xpl-avatar {
+  --tw-ring-offset-color: #212633; /* gray-900 */
 }
 
-.xpl-avatar--s .xpl-avatar-dot {
-  height: 0.5rem;
-  width: 0.5rem;
+a.xpl-avatar:focus {
+  --tw-ring-color: var(--xpl-secondary-light);
 }
 
-.xpl-avatar--xs img {
-  height: 1.5rem;
-  width: 1.5rem;
+.dark a.xpl-avatar:focus {
+  --tw-ring-color: var(--xpl-darkmode-secondary);
 }
 
-.xpl-avatar--xs .xpl-avatar-dot {
-  height: 0.375rem;
-  width: 0.375rem;
+a.xpl-avatar::after {
+  content: '';
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+  border-radius: 9999px;
+  display: block;
+  height: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }
 
-.xpl-avatar--l img {
-  height: 3rem;
-  width: 3rem;
+a.xpl-avatar:hover::after, a.xpl-avatar:active::after {
+  opacity: 0.2;
 }
 
-.xpl-avatar--l .xpl-avatar-dot {
-  height: 0.875rem;
-  width: 0.875rem;
+.xpl-avatar--disabled {
+  cursor: not-allowed;
 }
 
-.xpl-avatar--xl img {
-  height: 3.5rem;
-  width: 3.5rem;
+.xpl-avatar img, .xpl-avatar__placeholder {
+  border-radius: 9999px;
+  height: 2.5rem;
+  width: 2.5rem;
 }
 
-.xpl-avatar--xl .xpl-avatar-dot {
-  height: 1rem;
-  width: 1rem;
+.xpl-avatar__placeholder {
+  background-color: var(--xpl-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.xpl-avatar--rounded img {
-  border-radius: 0.375rem;
+.dark .xpl-avatar__placeholder {
+  background-color: var(--xpl-darkmode-secondary);
+  --tw-text-opacity: 1;
+  color: rgba(33, 38, 51, var(--tw-text-opacity));
 }
 
-.xpl-avatar--rounded .xpl-avatar-dot {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  --tw-translate-x: 50%;
-  --tw-translate-y: -50%;
+.xpl-avatar--green .xpl-avatar__placeholder {
+  --tw-bg-opacity: 1;
+  background-color: rgba(116, 251, 208, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(33, 38, 51, var(--tw-text-opacity));
 }
 
-.xpl-avatar--rounded .xpl-avatar-dot--bottom {
-  --tw-translate-y: 50%;
+a.xpl-avatar--green:focus,
+.dark a.xpl-avatar--green:focus {
+  --tw-ring-color: #74fbd0; /* green accent */
 }
 
-.xpl-avatar-group > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+.xpl-avatar--yellow .xpl-avatar__placeholder {
+  --tw-bg-opacity: 1;
+  background-color: rgba(236, 253, 145, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(33, 38, 51, var(--tw-text-opacity));
 }
 
-.xpl-avatar-group {
-  display: flex;
-  overflow: hidden;
+a.xpl-avatar--yellow:focus,
+.dark a.xpl-avatar--yellow:focus {
+  --tw-ring-color: #ecfd91; /* yellow accent */
 }
 
-.xpl-avatar-group img {
-  border-radius: 9999px;
-  display: inline-block;
-  height: 2rem;
-  --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-opacity: 1;
-  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
-  width: 2rem;
+.xpl-avatar--pink .xpl-avatar__placeholder {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 158, 246, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(33, 38, 51, var(--tw-text-opacity));
 }
 
-.xpl-avatar-group--s > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
+a.xpl-avatar--pink:focus,
+.dark a.xpl-avatar--pink:focus {
+  --tw-ring-color: #ff9ef6; /* pink accent */
 }
 
-.xpl-avatar-group--s img {
+.xpl-avatar--primary .xpl-avatar__placeholder {
+  background-color: var(--xpl-primary);
+}
+
+.xpl-avatar--sm img, .xpl-avatar--sm .xpl-avatar__placeholder {
   height: 1.5rem;
+  font-size: 0.625rem;
+  line-height: 0.875rem;
   width: 1.5rem;
 }
 
-.xpl-avatar-group--l img {
-  height: 2.5rem;
-  width: 2.5rem;
+.xpl-avatar--md img, .xpl-avatar--md .xpl-avatar__placeholder {
+  height: 2rem;
+  font-size: 0.625rem;
+  line-height: 0.875rem;
+  width: 2rem;
 }
 
-.xpl-avatar-group--reverse {
-  position: relative;
+.dark .xpl-avatar--primary .xpl-avatar__placeholder {
+  background-color: var(--xpl-darkmode-primary);
+  --tw-text-opacity: 1;
+  color: rgba(33, 38, 51, var(--tw-text-opacity));
+}
+
+a.xpl-avatar--primary:focus {
+  --tw-ring-color: var(--xpl-primary);
+}
+
+.dark a.xpl-avatar--primary:focus {
+  --tw-ring-color: var(--xpl-darkmode-primary);
+}
+
+[class^='xpl-avatar__dot'] {
+  border-radius: 9999px;
+  display: block;
+  height: 0.625rem;
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  --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-opacity: 1;
+  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
+  width: 0.625rem;
+}
+
+.dark [class^='xpl-avatar__dot'] {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(33, 38, 51, var(--tw-ring-opacity));
+}
+
+.xpl-avatar__dot--active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(55, 184, 143, var(--tw-bg-opacity));
+}
+
+.dark .xpl-avatar__dot--active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(82, 235, 186, var(--tw-bg-opacity));
+}
+
+.xpl-avatar__dot--warning {
+  --tw-bg-opacity: 1;
+  background-color: rgba(242, 79, 61, var(--tw-bg-opacity));
+}
+
+.dark .xpl-avatar__dot--warning {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 147, 135, var(--tw-bg-opacity));
+}
+
+.xpl-avatar__dot--inactive {
+  --tw-bg-opacity: 1;
+  background-color: rgba(157, 163, 175, var(--tw-bg-opacity));
+}
+
+.xpl-avatar--md [class^='xpl-avatar__dot'] {
+  height: 0.5rem;
+  width: 0.5rem;
+}
+
+.xpl-avatar--sm [class^='xpl-avatar__dot'] {
+  height: 0.375rem;
+  width: 0.375rem;
+}
+
+.xpl-avatar--rounded img {
+  border-radius: 0.375rem;
+}
+
+.xpl-avatar-group > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.xpl-avatar-group {
+  display: flex;
+  overflow: hidden;
+}
+
+.xpl-avatar-group img {
+  border-radius: 9999px;
+  display: inline-block;
+  height: 2rem;
+  --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-opacity: 1;
+  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
+  width: 2rem;
+}
+
+.xpl-avatar-group--s > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.xpl-avatar-group--s img {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.xpl-avatar-group--l img {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.xpl-avatar-group--reverse {
+  position: relative;
   z-index: 0;
 }
 
@@ -696,51 +788,124 @@ textarea[class^="xpl-"] {
 }
 
 .xpl-badge {
+  padding: 4px 12px;
   --tw-bg-opacity: 1;
-  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
+  background-color: rgba(235, 229, 255, var(--tw-bg-opacity));
   border-radius: 9999px;
   display: inline-flex;
   align-items: center;
-  font-weight: 500;
-  font-size: 10px;
-  line-height: 0.875rem;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  --tw-text-opacity: 1;
-  color: rgba(55, 62, 78, var(--tw-text-opacity));
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
-.xpl-badge.xpl-badge--error {
+.xpl-badge--dot::before {
+  content: "";
+  height: 8px;
+  margin: 0 4px 0 -4px;
+  width: 8px;
   --tw-bg-opacity: 1;
-  background-color: rgba(255, 233, 229, var(--tw-bg-opacity));
+  background-color: rgba(136, 87, 250, var(--tw-bg-opacity));
+  border-radius: 9999px;
+  display: inline-block;
+}
+
+.dark .xpl-badge {
+  padding: 3px 11px;
+  background-color: transparent;
+  --tw-border-opacity: 1;
+  border-color: rgba(195, 173, 255, var(--tw-border-opacity));
+  border-width: 1px;
   --tw-text-opacity: 1;
-  color: rgba(168, 36, 16, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.xpl-badge.xpl-badge--warning {
+.dark .xpl-badge::before {
   --tw-bg-opacity: 1;
-  background-color: rgba(244, 253, 197, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(102, 102, 0, var(--tw-text-opacity));
+  background-color: rgba(195, 173, 255, var(--tw-bg-opacity));
 }
 
-.xpl-badge.xpl-badge--success {
+.xpl-badge--success {
   --tw-bg-opacity: 1;
   background-color: rgba(196, 255, 237, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(29, 97, 75, var(--tw-text-opacity));
 }
 
-.xpl-badge.xpl-badge--large {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 1rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.xpl-badge--success::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(55, 184, 143, var(--tw-bg-opacity));
+}
+
+.dark .xpl-badge--success {
+  --tw-border-opacity: 1;
+  border-color: rgba(82, 235, 186, var(--tw-border-opacity));
+}
+
+.dark .xpl-badge--success::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(82, 235, 186, var(--tw-bg-opacity));
+}
+
+.xpl-badge--warning {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 253, 197, var(--tw-bg-opacity));
+}
+
+.xpl-badge--warning::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(190, 204, 35, var(--tw-bg-opacity));
+}
+
+.dark .xpl-badge--warning {
+  --tw-border-opacity: 1;
+  border-color: rgba(223, 240, 96, var(--tw-border-opacity));
+}
+
+.dark .xpl-badge--warning::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(223, 240, 96, var(--tw-bg-opacity));
+}
+
+.xpl-badge--inactive {
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+}
+
+.xpl-badge--inactive::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(157, 163, 175, var(--tw-bg-opacity));
+}
+
+.dark .xpl-badge--inactive {
+  --tw-border-opacity: 1;
+  border-color: rgba(157, 163, 175, var(--tw-border-opacity));
+}
+
+.xpl-badge--error {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 217, 213, var(--tw-bg-opacity));
+}
+
+.xpl-badge--error::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(242, 79, 61, var(--tw-bg-opacity));
+}
+
+.dark .xpl-badge--error {
+  --tw-border-opacity: 1;
+  border-color: rgba(255, 147, 135, var(--tw-border-opacity));
+}
+
+.dark .xpl-badge--error::before {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 147, 135, var(--tw-bg-opacity));
+}
+
+a.xpl-button,
+button.xpl-button {
+  background-color: var(--xpl-secondary);
+  border-radius: var(--xpl-button-radius);
+  height: 40px;
+  padding: 11px 23px;
+  text-decoration: none;
 }
 
 a.xpl-button, button.xpl-button {
@@ -750,7 +915,7 @@ a.xpl-button, button.xpl-button {
   display: inline-flex;
   align-items: center;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
@@ -771,15 +936,6 @@ a.xpl-button, button.xpl-button {
   transition-duration: 150ms;
 }
 
-a.xpl-button,
-button.xpl-button {
-  background-color: var(--xpl-secondary);
-  border-radius: var(--xpl-button-radius);
-  height: 44px;
-  padding: 11px 23px;
-  text-decoration: none;
-}
-
 .xpl-button i.leading {
   margin: 0 8px 0 -4px;
 }
@@ -806,7 +962,8 @@ button.xpl-button {
 
 .dark a.xpl-button,
 .dark button.xpl-button {
-  --tw-ring-offset-color: #212633;
+  --tw-ring-offset-color: #212633; /* gray-900 */
+  background-color: var(--xpl-darkmode-secondary);
 }
 
 .dark a.xpl-button, .dark button.xpl-button {
@@ -814,24 +971,14 @@ button.xpl-button {
   color: rgba(33, 38, 51, var(--tw-text-opacity));
 }
 
-.dark a.xpl-button,
-.dark button.xpl-button {
-  background-color: var(--xpl-darkmode-secondary);
-}
-
-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);
-}
-
 a.xpl-button:hover,
 button.xpl-button:hover {
   background-color: var(--xpl-secondary-dark);
 }
 
-.dark a.xpl-button:hover,
-.dark button.xpl-button:hover {
-  background-color: var(--xpl-darkmode-secondary-dark);
+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);
 }
 
 a.xpl-button:focus,
@@ -849,6 +996,11 @@ button.xpl-button:disabled {
   color: rgba(102, 109, 125, var(--tw-text-opacity));
 }
 
+.dark a.xpl-button:hover,
+.dark button.xpl-button:hover {
+  background-color: var(--xpl-darkmode-secondary-dark);
+}
+
 .dark button.xpl-button:disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
@@ -871,18 +1023,21 @@ a.xpl-button--secondary, button.xpl-button--secondary {
   color: rgba(255, 255, 255, var(--tw-text-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));
-}
-
 a.xpl-button--secondary:hover,
 button.xpl-button--secondary:hover {
   border-color: var(--xpl-secondary);
 }
 
-.dark a.xpl-button--secondary:hover, .dark button.xpl-button--secondary:hover {
-  background-color: transparent;
+a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+button.xpl-button--secondary:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
 }
 
 .dark a.xpl-button--secondary:hover,
@@ -890,6 +1045,10 @@ button.xpl-button--secondary:hover {
   border-color: var(--xpl-darkmode-secondary);
 }
 
+.dark a.xpl-button--secondary:hover, .dark button.xpl-button--secondary:hover {
+  background-color: transparent;
+}
+
 .dark a.xpl-button--secondary:focus,
 .dark button.xpl-button--secondary:focus {
   --tw-ring-color: var(--xpl-darkmode-secondary);
@@ -900,13 +1059,6 @@ button.xpl-button--secondary:hover {
   --tw-ring-color: var(--xpl-darkmode-secondary-extra-dark);
 }
 
-button.xpl-button--secondary:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
-}
-
 .dark button.xpl-button--secondary:disabled {
   background-color: transparent;
   --tw-border-opacity: 1;
@@ -932,11 +1084,6 @@ a.xpl-button--subtle:hover, button.xpl-button--subtle:hover {
   background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
 }
 
-.dark a.xpl-button--subtle:hover, .dark button.xpl-button--subtle:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(55, 62, 78, var(--tw-bg-opacity));
-}
-
 a.xpl-button--subtle:focus, button.xpl-button--subtle:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
@@ -944,22 +1091,11 @@ a.xpl-button--subtle:focus, button.xpl-button--subtle:focus {
   --tw-ring-color: rgba(228, 230, 235, var(--tw-ring-opacity));
 }
 
-.dark a.xpl-button--subtle:focus, .dark button.xpl-button--subtle:focus {
-  background-color: transparent;
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(55, 62, 78, var(--tw-ring-opacity));
-}
-
 a.xpl-button--subtle:active, button.xpl-button--subtle:active {
   --tw-bg-opacity: 1;
   background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
 }
 
-.dark a.xpl-button--subtle:active, .dark button.xpl-button--subtle:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
-}
-
 button.xpl-button--subtle:disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
@@ -967,6 +1103,22 @@ button.xpl-button--subtle:disabled {
   color: rgba(102, 109, 125, var(--tw-text-opacity));
 }
 
+.dark a.xpl-button--subtle:hover, .dark button.xpl-button--subtle:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(55, 62, 78, var(--tw-bg-opacity));
+}
+
+.dark a.xpl-button--subtle:focus, .dark button.xpl-button--subtle:focus {
+  background-color: transparent;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(55, 62, 78, var(--tw-ring-opacity));
+}
+
+.dark a.xpl-button--subtle:active, .dark button.xpl-button--subtle:active {
+  --tw-bg-opacity: 1;
+  background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
+}
+
 .dark button.xpl-button--subtle:disabled {
   background-color: transparent;
   --tw-text-opacity: 1;
@@ -998,6 +1150,20 @@ a.xpl-button--warning:hover, button.xpl-button--warning:hover, a.xpl-button--war
   border-color: rgba(150, 19, 5, var(--tw-border-opacity));
 }
 
+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));
+}
+
+button.xpl-button--warning:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(102, 109, 125, var(--tw-text-opacity));
+}
+
 .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));
@@ -1005,11 +1171,6 @@ a.xpl-button--warning:hover, button.xpl-button--warning:hover, a.xpl-button--war
   border-color: rgba(248, 114, 99, var(--tw-border-opacity));
 }
 
-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 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));
@@ -1020,15 +1181,6 @@ a.xpl-button--warning:focus, button.xpl-button--warning:focus {
   background-color: rgba(248, 114, 99, var(--tw-bg-opacity));
 }
 
-button.xpl-button--warning:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
-}
-
 .dark button.xpl-button--warning:disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(68, 75, 92, var(--tw-bg-opacity));
@@ -1038,20 +1190,15 @@ button.xpl-button--warning:disabled {
   color: rgba(157, 163, 175, var(--tw-text-opacity));
 }
 
-a.xpl-button--sm, button.xpl-button--sm {
-  font-size: 12px;
-  line-height: 1rem;
-}
-
 a.xpl-button--sm,
 button.xpl-button--sm {
   padding: 7px 15px;
   height: 32px;
 }
 
-a.xpl-button--xs, button.xpl-button--xs {
-  font-size: 10px;
-  line-height: 0.875rem;
+a.xpl-button--sm, button.xpl-button--sm {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 a.xpl-button--xs,
@@ -1060,38 +1207,220 @@ button.xpl-button--xs {
   height: 24px;
 }
 
+a.xpl-button--xs, button.xpl-button--xs {
+  font-size: 0.625rem;
+  line-height: 0.875rem;
+}
+
+a.xpl-button--icon-only,
+button.xpl-button--icon-only {
+  width: 44px;
+}
+
 a.xpl-button--icon-only, button.xpl-button--icon-only {
   padding-right: 0px;
   padding-left: 0px;
   text-align: center;
 }
 
-a.xpl-button--icon-only,
-button.xpl-button--icon-only {
-  width: 44px;
+a.xpl-button--sm.xpl-button--icon-only,
+button.xpl-button--sm.xpl-button--icon-only {
+  width: 32px;
+}
+
+a.xpl-button--xs.xpl-button--icon-only,
+button.xpl-button--xs.xpl-button--icon-only {
+  width: 24px;
+}
+
+.xpl-button--icon-only i {
+  transform: scale(1.2);
+  width: 100%;
+}
+
+.xpl-button--icon-only.xpl-button--sm i {
+  transform: scale(1.25);
+}
+
+.xpl-button--icon-only.xpl-button--xs i {
+  transform: scale(1);
+}
+
+/**
+ * TODO: A lot of this is copied and pasted from radio.css
+ * (especially container, label, description). Could probably condense
+ * both into a single helper/utility class for layout, type, etc.
+ */
+
+.xpl-checkbox-container {
+  display: flex;
+  margin-bottom: 1.5rem;
+}
+
+.xpl-checkbox {
+  border-radius: 4px;
+  border-color: #d1d5db;
+  height: 16px;
+  top: 2px;
+  transition-property: border background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 16px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  border-width: 1px;
+  cursor: pointer;
+}
+
+.xpl-checkbox:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.xpl-checkbox {
+  position: relative;
+}
+
+.xpl-checkbox:focus {
+  --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-checkbox::after {
+  background-position: calc(50% - 2px) calc(50% - 1px);
+  content: "";
+  height: 16px;
+  width: 16px;
+  background-repeat: no-repeat;
+  display: block;
+  opacity: 0;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dark .xpl-checkbox {
+  --tw-ring-offset-color: #212633;
+  background-color: #212633;
+  border-color: #d1d5db;
+}
+
+.xpl-checkbox:hover {
+  background-color: #ced2db;
+}
+
+.xpl-checkbox:checked {
+  background-color: var(--xpl-secondary);
+}
+
+.xpl-checkbox:indeterminate {
+  background-color: var(--xpl-secondary);
+  border-color: var(--xpl-secondary);
+}
+
+.xpl-checkbox:indeterminate::after {
+  background-position: calc(50% - 1px) calc(50% - 1px);
+  background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5L11 2.5L11 4.5L0 4.5Z' fill='white'/%3E%3C/svg%3E%0A");
+  opacity: 1;
+}
+
+.xpl-checkbox:active,
+.xpl-checkbox:checked {
+  border-color: var(--xpl-secondary);
+}
+
+.xpl-checkbox:disabled {
+  border-color: #e4e6eb; /* gray 200 */
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+  cursor: not-allowed;
+}
+
+.xpl-checkbox:focus {
+  --tw-ring-color: var(--xpl-secondary-light);
+}
+
+.xpl-checkbox:hover::after,
+.xpl-checkbox:checked::after {
+  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.37866 7.6145C4.57397 7.80981 4.90601 7.80981 5.10132 7.6145L10.8435 1.87231C11.0388 1.677 11.0388 1.34497 10.8435 1.14966L10.1404 0.446533C9.94507 0.251221 9.63257 0.251221 9.43726 0.446533L4.74976 5.13403L2.54272 2.94653C2.34741 2.75122 2.03491 2.75122 1.8396 2.94653L1.13647 3.64966C0.941162 3.84497 0.941162 4.177 1.13647 4.37231L4.37866 7.6145Z' fill='white'/%3E%3C/svg%3E%0A");
+}
+
+.xpl-checkbox:hover::after, .xpl-checkbox:checked::after {
+  opacity: 1;
+}
+
+.dark .xpl-checkbox:hover {
+  background-color: #545d6e;
+  border-color: #545d6e;
+}
+
+.dark .xpl-checkbox:checked {
+  background-color: var(--xpl-darkmode-secondary);
+}
+
+.dark .xpl-checkbox:checked::after {
+  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.37866 7.6145C4.57397 7.80981 4.90601 7.80981 5.10132 7.6145L10.8435 1.87231C11.0388 1.677 11.0388 1.34497 10.8435 1.14966L10.1404 0.446533C9.94507 0.251221 9.63257 0.251221 9.43726 0.446533L4.74976 5.13403L2.54272 2.94653C2.34741 2.75122 2.03491 2.75122 1.8396 2.94653L1.13647 3.64966C0.941162 3.84497 0.941162 4.177 1.13647 4.37231L4.37866 7.6145Z' fill='%23212633'/%3E%3C/svg%3E%0A");
+}
+
+.dark .xpl-checkbox:indeterminate {
+  background-color: var(--xpl-darkmode-secondary);
+  border-color: var(--xpl-darkmode-secondary);
+}
+
+.dark .xpl-checkbox:active,
+.dark .xpl-checkbox:checked {
+  border-color: var(--xpl-darkmode-secondary);
+}
+
+.dark .xpl-checkbox:disabled {
+  background-color: #666d7d;
+  border-color: #666d7d;
+}
+
+.dark .xpl-checkbox:focus {
+  --tw-ring-color: var(--xpl-darkmode-secondary-light);
+}
+
+.xpl-checkbox + label {
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  vertical-align: middle;
 }
 
-a.xpl-button--sm.xpl-button--icon-only,
-button.xpl-button--sm.xpl-button--icon-only {
-  width: 32px;
+.xpl-checkbox:disabled + label {
+  color: #666d7d;
+  cursor: not-allowed;
 }
 
-a.xpl-button--xs.xpl-button--icon-only,
-button.xpl-button--xs.xpl-button--icon-only {
-  width: 24px;
+.dark .xpl-checkbox + label {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.xpl-button--icon-only i {
-  width: 100%;
-  transform: scale(1.2);
+.dark .xpl-checkbox:disabled + label {
+  color: #ced3db;
 }
 
-.xpl-button--icon-only.xpl-button--sm i {
-  transform: scale(1.25);
+.xpl-checkbox + label small {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(102, 109, 125, var(--tw-text-opacity));
 }
 
-.xpl-button--icon-only.xpl-button--xs i {
-  transform: scale(1);
+.dark .xpl-checkbox + label small {
+  color: #ced3db;
 }
 
 .xpl-pagination {
@@ -1110,7 +1439,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 }
 
 .xpl-pagination p {
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1rem;
   padding-bottom: 0.5rem;
   --tw-text-opacity: 1;
@@ -1167,7 +1496,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   display: inline-flex;
   align-items: center;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1197,7 +1526,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   display: inline-flex;
   align-items: center;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1237,7 +1566,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   display: inline-flex;
   align-items: center;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1257,7 +1586,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   display: inline-flex;
   align-items: center;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1293,15 +1622,135 @@ button.xpl-button--xs.xpl-button--icon-only {
   }
 }
 
+.xpl-radio-container {
+  display: flex;
+  margin-bottom: 1.5rem;
+}
+
+.xpl-radio {
+  border-color: #d1d5db;
+  height: 16px;
+  top: 2px;
+  transition-property: border;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 16px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 9999px;
+  border-width: 1px;
+  cursor: pointer;
+}
+
+.xpl-radio:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.xpl-radio {
+  position: relative;
+}
+
+.xpl-radio:focus {
+  --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;
+}
+
+.dark .xpl-radio {
+  --tw-ring-offset-color: #212633;
+  border-color: #ced3db;
+}
+
+.xpl-radio:hover,
+.xpl-radio:checked {
+  border-width: 4px;
+}
+
+.xpl-radio:active,
+.xpl-radio:checked {
+  border-color: var(--xpl-secondary);
+}
+
+.xpl-radio:disabled {
+  border-color: #e4e6eb; /* gray 200 */
+  --tw-bg-opacity: 1;
+  background-color: rgba(228, 230, 235, var(--tw-bg-opacity));
+  cursor: not-allowed;
+}
+
+.xpl-radio:focus {
+  --tw-ring-color: var(--xpl-secondary-light);
+}
+
+.dark .xpl-radio:active,
+.dark .xpl-radio:checked {
+  border-color: var(--xpl-darkmode-secondary);
+}
+
+.dark .xpl-radio:disabled {
+  background-color: #666d7d;
+  border-color: #666d7d;
+}
+
+.dark .xpl-radio:focus {
+  --tw-ring-color: var(--xpl-darkmode-secondary-light);
+}
+
+.xpl-radio + label {
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  vertical-align: middle;
+}
+
+.xpl-radio:disabled + label {
+  color: #666d7d;
+  cursor: not-allowed;
+}
+
+.dark .xpl-radio + label {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .xpl-radio:disabled + label {
+  color: #ced3db;
+}
+
+.xpl-radio + label small {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(102, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-radio + label small {
+  color: #ced3db;
+}
+
 .xpl-table-container {
   --tw-border-opacity: 1;
   border-color: rgba(228, 230, 235, var(--tw-border-opacity));
-  border-bottom-width: 1px;
+  border-radius: 0.375rem;
+  border-width: 1px;
   overflow: auto;
   --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.dark .xpl-table-container {
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 38, 51, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(55, 62, 78, var(--tw-border-opacity));
+}
+
 .xpl-table > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1314,19 +1763,117 @@ button.xpl-button--xs.xpl-button--icon-only {
   min-width: 100%;
 }
 
+.dark .xpl-table > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgba(55, 62, 78, var(--tw-divide-opacity));
+}
+
 .xpl-table--abs {
   position: absolute;
 }
 
+.xpl-table thead th {
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  text-align: left;
+  --tw-text-opacity: 1;
+  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  white-space: nowrap;
+}
+
+.xpl-table-row-selected td {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgba(244, 242, 255, var(--tw-bg-opacity)) !important;
+}
+
+.xpl-table tbody tr td {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  white-space: nowrap;
+}
+
+.dark .xpl-table-row-selected td {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgba(55, 62, 78, var(--tw-bg-opacity)) !important;
+}
+
+.xpl-table--freeze thead th:first-child,
+.xpl-table--freeze tbody td:first-child {
+  border-right-width: 1px;
+}
+
 .xpl-table--freeze thead th:first-child, .xpl-table--freeze tbody td:first-child {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(228, 230, 235, var(--tw-border-opacity));
   position: sticky;
   left: 0px;
   z-index: 10;
 }
 
-.xpl-table--freeze thead th:first-child:after, .xpl-table--freeze tbody td:first-child:after {
+.xpl-table--freeze thead th:first-child {
+  --tw-bg-opacity: 1;
+  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+}
+
+.xpl-table tbody tr td:first-child, .xpl-table p {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(33, 38, 51, var(--tw-text-opacity));
+}
+
+.dark .xpl-table thead th {
+  --tw-text-opacity: 1;
+  color: rgba(206, 211, 219, var(--tw-text-opacity));
+}
+
+.dark .xpl-table tbody tr td {
+  --tw-text-opacity: 1;
+  color: rgba(206, 211, 219, var(--tw-text-opacity));
+}
+
+.dark .xpl-table--freeze thead th:first-child {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(55, 62, 78, var(--tw-border-opacity));
+}
+
+.dark .xpl-table--freeze tbody td:first-child {
+  --tw-bg-opacity: 1;
+  background-color: rgba(33, 38, 51, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(55, 62, 78, var(--tw-border-opacity));
+}
+
+.xpl-table--freeze thead th:first-child::after,
+.xpl-table--freeze tbody td:first-child::after {
+  background:
+    linear-gradient(
+      90deg,
+      #e4e6eb 0%,
+      #e4e6eb 0.01%,
+      rgba(228, 230, 235, 0) 100%
+    );
+  content: "";
+  width: 24px;
+}
+
+.xpl-table--freeze thead th:first-child::after, .xpl-table--freeze tbody td:first-child::after {
   display: block;
   height: 100%;
   opacity: 0;
@@ -1338,25 +1885,18 @@ button.xpl-button--xs.xpl-button--icon-only {
   transition-duration: 150ms;
 }
 
-.xpl-table--freeze thead th:first-child:after,
-.xpl-table--freeze tbody td:first-child:after {
-  background: linear-gradient(
-    90deg,
-    #e4e6eb 0%,
-    #e4e6eb 0.01%,
-    rgba(228, 230, 235, 0) 100%
-  );
-  content: "";
-  width: 24px;
-}
-
-.xpl-table--has-scrolled thead th:first-child:after, .xpl-table--has-scrolled tbody td:first-child:after {
+.xpl-table--has-scrolled thead th:first-child::after, .xpl-table--has-scrolled tbody td:first-child::after {
   opacity: 1;
 }
 
-.xpl-table--freeze thead th:first-child {
-  --tw-bg-opacity: 1;
-  background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
+.dark .xpl-table--freeze thead th:first-child::after,
+.dark .xpl-table--freeze tbody td:first-child::after {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
 }
 
 .xpl-table thead {
@@ -1364,18 +1904,9 @@ button.xpl-button--xs.xpl-button--icon-only {
   background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
 }
 
-.xpl-table thead th {
-  font-weight: 500;
-  font-size: 10px;
-  line-height: 0.875rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  text-align: left;
-  --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
-  white-space: nowrap;
+.dark .xpl-table thead {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
 }
 
 .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
@@ -1391,29 +1922,28 @@ button.xpl-button--xs.xpl-button--icon-only {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
+.dark .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgba(68, 75, 92, var(--tw-divide-opacity));
+}
+
+.dark .xpl-table tbody {
+  background-color: transparent;
+}
+
 .xpl-table.xpl-table--striped tbody tr:nth-child(2n) td {
   --tw-bg-opacity: 1;
   background-color: rgba(250, 251, 252, var(--tw-bg-opacity));
 }
 
-.xpl-table tbody tr td {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 1rem;
+.dark .xpl-table tbody tr td:first-child, .dark .xpl-table p {
   --tw-text-opacity: 1;
-  color: rgba(102, 109, 125, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
-.xpl-table tbody tr td:first-child, .xpl-table p {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 1rem;
-  --tw-text-opacity: 1;
-  color: rgba(33, 38, 51, var(--tw-text-opacity));
+.dark .xpl-table.xpl-table--striped tbody tr:nth-child(2n) td {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
 }
 
 .xpl-table .wrap {
@@ -1432,17 +1962,13 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-table label {
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
 .xpl-table input[type="checkbox"] {
   cursor: pointer;
   margin-right: 1.5rem;
-  vertical-align: middle;
-}
-
-.xpl-table-row-selected td {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgba(244, 242, 255, var(--tw-bg-opacity)) !important;
 }
 
 .xpl-tabs {
@@ -1477,7 +2003,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-bottom-width: 2px;
   display: flex;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1rem;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1501,7 +2027,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   background-color: rgba(245, 247, 250, var(--tw-bg-opacity));
   border-radius: 9999px;
   font-weight: 500;
-  font-size: 10px;
+  font-size: 0.625rem;
   line-height: 0.875rem;
   margin-left: 0.75rem;
   padding-top: 0.125rem;
@@ -1525,3 +2051,77 @@ button.xpl-button--xs.xpl-button--icon-only {
   --tw-text-opacity: 1;
   color: rgba(79, 70, 229, var(--tw-text-opacity));
 }
+
+.xpl-utility-bar ul > * {
+      display: grid;
+      align-content: center;
+    }
+
+.xpl-utility-bar ul:nth-child(2) > * {
+        margin-left: 0.5rem;
+      }
+
+.xpl-utility-bar ul:nth-child(2) {
+      justify-self: end;
+}
+
+.xpl-utility-bar ul:first-child > * {
+        margin-right: 0.5rem;
+      }
+
+.xpl-utility-bar ul:first-child {
+      justify-self: start;
+}
+
+.xpl-utility-bar ul {
+    display: grid;
+    align-content: center;
+    grid-auto-flow: column;
+}
+
+.xpl-utility-bar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
+.dark .xpl-utility-bar {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 43, 57, var(--tw-bg-opacity));
+}
+
+.xpl-utility-bar {
+  --tw-border-opacity: 1;
+  border-color: rgba(206, 211, 219, var(--tw-border-opacity));
+}
+
+.dark .xpl-utility-bar {
+  --tw-border-opacity: 1;
+  border-color: rgba(68, 75, 92, var(--tw-border-opacity));
+}
+
+.xpl-utility-bar {
+  border-bottom-width: 1px;
+  display: grid;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(102, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-utility-bar {
+  --tw-text-opacity: 1;
+  color: rgba(206, 211, 219, var(--tw-text-opacity));
+}
+
+.xpl-utility-bar {
+  grid-auto-flow: column;
+}
+
+@media (min-width: 640px) {
+  .xpl-utility-bar {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}