@xplortech/apollo-core 1.0.0-beta.10 → 1.0.0-beta.12

package/build/style.css

@@ -917,6 +917,377 @@ span.flatpickr-weekday{
   }
 }
 
+/* Add tailwind utilities available in 3.x, this file can be remove when we upgrade tailwindcss to 3.x */
+
+/* ! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+/**
+Use a more readable tab size (opinionated).
+*/
+
+/**
+1. Correct the line height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+*/
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+/**
+Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+*/
+
+/*
+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)
+*/
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+/**
+Add the correct font size in all browsers.
+*/
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+/*
+Tabular data
+============
+*/
+
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+1. Remove the inheritance of text transform in Firefox.
+*/
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+/**
+Remove the inner border and padding in Firefox.
+*/
+
+/**
+Restore the focus styles unset by the previous rule.
+*/
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+/**
+ * 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.
+ */
+
+/**
+ * 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.
+ */
+
+/**
+ * Inherit font-family and line-height from `html` so users can set them as
+ * a class directly on the `html` element.
+ */
+
+/**
+ * 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
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+/*
+ * Ensure horizontal rules are visible by default
+ */
+
+/**
+ * Undo the `border-style: none` reset that Normalize applies to images so that
+ * our `border-{width}` utilities have the expected effect.
+ *
+ * The Normalize reset is unnecessary for us since we default the border-width
+ * to 0 on all elements.
+ *
+ * https://github.com/tailwindcss/tailwindcss/issues/362
+ */
+
+/**
+ * Override legacy focus reset from Normalize with modern Firefox focus styles.
+ *
+ * This is actually an improvement over the new defaults in Firefox in our testing,
+ * as it triggers the better focus styles even for links, which still use a dotted
+ * outline in Firefox by default.
+ */
+
+/**
+ * Reset links to optimize for opt-in styling instead of
+ * opt-out.
+ */
+
+/**
+ * Reset form element properties that are easy to forget to
+ * style explicitly so you don't inadvertently introduce
+ * styles that deviate from your design system. These styles
+ * supplement a partial reset that is already applied by
+ * normalize.css.
+ */
+
+/**
+ * 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.
+ */
+
+/**
+ * 1. Make replaced elements `display: block` by default as that's
+ *    the behavior you want almost all of the time. Inspired by
+ *    CSS Remedy, with `svg` added as well.
+ *
+ *    https://github.com/mozdevs/cssremedy/issues/14
+ * 
+ * 2. Add `vertical-align: middle` to align replaced elements more
+ *    sensibly by default when overriding `display` by adding a
+ *    utility like `inline`.
+ *
+ *    This can trigger a poorly considered linting error in some
+ *    tools but is included by design.
+ * 
+ *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
+ */
+
+/**
+ * Constrain images and videos to the parent width and preserve
+ * their intrinsic aspect ratio.
+ *
+ * https://github.com/mozdevs/cssremedy/issues/14
+ */
+
+/**
+ * Ensure the default browser behavior of the `hidden` attribute.
+ */
+
+*, ::before, ::after {
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity))
+}
+
+@-webkit-keyframes spin {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg)
+  }
+}
+
+@-webkit-keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0
+  }
+}
+
+@-webkit-keyframes pulse {
+  50% {
+    opacity: .5
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5
+  }
+}
+
+@-webkit-keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1)
+  }
+
+  50% {
+    transform: none;
+    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1)
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1)
+  }
+
+  50% {
+    transform: none;
+    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1)
+  }
+}
+
+*, ::before, ::after {
+  --tw-shadow: 0 0 #0000
+}
+
+*, ::before, ::after {
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000
+}
+
 /* stylelint-disable no-descending-specificity  */
 
 /*! tailwindcss v2.1.4 | MIT License | https://tailwindcss.com */
@@ -1503,11 +1874,11 @@ textarea[class^="xpl-"] {
 }
 
 .xpl-avatar {
-  border-radius: 9999px;
-  display: inline-block;
   position: relative;
-  text-transform: uppercase;
+  display: inline-block;
+  border-radius: 9999px;
   vertical-align: middle;
+  text-transform: uppercase;
 }
 
 a.xpl-avatar {
@@ -1543,16 +1914,16 @@ a.xpl-avatar:focus {
 
 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;
+  display: block;
+  height: 100%;
   width: 100%;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+  opacity: 0;
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -1567,9 +1938,9 @@ a.xpl-avatar:hover::after, a.xpl-avatar:active::after {
 }
 
 .xpl-avatar img, .xpl-avatar__placeholder {
-  border-radius: 9999px;
   height: 2.5rem;
-  width: 2.5rem
+  width: 2.5rem;
+  border-radius: 9999px
 }
 
 .xpl-avatar__placeholder {
@@ -1577,9 +1948,9 @@ a.xpl-avatar:hover::after, a.xpl-avatar:active::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
@@ -1632,16 +2003,16 @@ a.xpl-avatar--pink:focus,
 
 .xpl-avatar--sm img, .xpl-avatar--sm .xpl-avatar__placeholder {
   height: 1.5rem;
+  width: 1.5rem;
   font-size: 0.625rem;
-  line-height: 0.875rem;
-  width: 1.5rem
+  line-height: 0.875rem
 }
 
 .xpl-avatar--md img, .xpl-avatar--md .xpl-avatar__placeholder {
   height: 2rem;
+  width: 2rem;
   font-size: 0.625rem;
-  line-height: 0.875rem;
-  width: 2rem
+  line-height: 0.875rem
 }
 
 .dark .xpl-avatar--primary .xpl-avatar__placeholder {
@@ -1659,18 +2030,18 @@ a.xpl-avatar--primary:focus {
 }
 
 [class^='xpl-avatar__dot'] {
-  border-radius: 9999px;
-  display: block;
-  height: 0.625rem;
   position: absolute;
   right: 0px;
   bottom: 0px;
+  display: block;
+  height: 0.625rem;
+  width: 0.625rem;
+  border-radius: 9999px;
   --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'] {
@@ -1717,6 +2088,10 @@ a.xpl-avatar--primary:focus {
   border-radius: 0.375rem;
 }
 
+.xpl-avatar-group {
+  display: flex;
+}
+
 .xpl-avatar-group > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
@@ -1724,16 +2099,15 @@ a.xpl-avatar--primary:focus {
 }
 
 .xpl-avatar-group {
-  display: flex;
   overflow: hidden
 }
 
 .xpl-avatar-group img {
   box-shadow: 0 0 0 2px #fff;
-  border-radius: 9999px;
   display: inline-block;
   height: 2rem;
   width: 2rem;
+  border-radius: 9999px;
 }
 
 .xpl-avatar-group--s img {
@@ -1817,11 +2191,11 @@ button.xpl-badge {
 }
 
 .xpl-badge, button.xpl-badge {
-  --tw-bg-opacity: 1;
-  background-color: rgba(235, 229, 255, var(--tw-bg-opacity));
-  border-radius: 9999px;
   display: inline-flex;
   align-items: center;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(235, 229, 255, var(--tw-bg-opacity));
   font-size: 0.75rem;
   line-height: 1rem
 }
@@ -1831,10 +2205,10 @@ button.xpl-badge {
   height: 8px;
   margin: 0 4px 0 -4px;
   width: 8px;
+  display: inline-block;
+  border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgba(136, 87, 250, var(--tw-bg-opacity));
-  border-radius: 9999px;
-  display: inline-block;
 }
 
 .dark .xpl-badge,
@@ -1843,10 +2217,10 @@ button.xpl-badge {
 }
 
 .dark .xpl-badge, .dark button.xpl-badge {
-  background-color: transparent;
+  border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(195, 173, 255, var(--tw-border-opacity));
-  border-width: 1px;
+  background-color: transparent;
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
@@ -1995,13 +2369,18 @@ button.xpl-badge {
     }
 
 .xpl-button button, .xpl-button a {
-    border-color: transparent;
+    cursor: pointer;
     border-radius: 9999px;
     border-width: 1px;
-    cursor: pointer;
-    font-weight: 500;
+    border-color: transparent;
     font-size: 0.875rem;
-    line-height: 1.25rem
+    line-height: 1.25rem;
+    font-weight: 500
+  }
+
+.xpl-button button, .xpl-button a {
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity))
   }
 
 .xpl-button button:focus, .xpl-button a:focus {
@@ -2010,8 +2389,6 @@ button.xpl-badge {
   }
 
 .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
@@ -2095,10 +2472,10 @@ button.xpl-badge {
       }
 
 .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-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))
     }
@@ -2585,8 +2962,8 @@ button.xpl-badge {
   }
 
 .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;
+    border-width: 0px;
     --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);
@@ -2630,12 +3007,12 @@ button.xpl-badge {
   }
 
 .xpl-button-row {
+  display: block;
+  width: 100%;
+  border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  border-top-width: 1px;
-  display: block;
   padding-top: 1.25rem;
-  width: 100%;
 }
 
 .dark .xpl-button-row {
@@ -2665,9 +3042,9 @@ button.xpl-badge {
     display: block;
   }
     .xpl-button-row .xpl-button a, .xpl-button-row .xpl-button button {
-      justify-content: center;
       margin-bottom: 1rem;
-      width: 100%
+      width: 100%;
+      justify-content: center
     }
 
   .xpl-button-row xpl-button + xpl-button .xpl-button {
@@ -2726,8 +3103,12 @@ button.xpl-badge {
         padding-right: 0.5rem
       }
 
+.flatpickr-day.xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3){
+        visibility:hidden
+      }
+
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
-        display: none;
+        display: none
       }
 
 @media (min-width: 768px) {
@@ -2736,10 +3117,6 @@ button.xpl-badge {
         }
       }
 
-.flatpickr-day.xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3){
-        visibility:hidden
-      }
-
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
         color: var(--xpl-color-text-primary-lm);
       }
@@ -2748,17 +3125,17 @@ button.xpl-badge {
           color: var(--xpl-color-action-primary-lm);
         }
 
-.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child span {
-          display: none;
-        }
-
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child .flatpickr-dayspan{
           visibility:hidden
         }
 
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child span {
+          display: none
+        }
+
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
-        cursor: default;
         pointer-events: none;
+        cursor: default;
         text-decoration: none
 }
 
@@ -2802,17 +3179,17 @@ button.xpl-badge {
  */
 
 .xpl-checkbox-radio-container {
-  display: flex;
   margin-bottom: 1.5rem;
+  display: flex;
 }
 
 .xpl-checkbox-radio-container.styled {
-  --tw-border-opacity: 1;
-  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  position: relative;
+  overflow: hidden;
   border-radius: 0.375rem;
   border-width: 1px;
-  overflow: hidden;
-  position: relative;
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -2850,27 +3227,21 @@ button.xpl-badge {
   height: 16px;
   top: 2px;
   width: 16px;
+  position: relative;
+  cursor: pointer;
   -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;
   --tw-border-opacity: 1;
   border-color: rgba(153, 155, 168, var(--tw-border-opacity));
-  border-width: 1px;
-  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
 .xpl-checkbox:focus {
   outline: 2px solid transparent;
-  outline-offset: 2px
-}
-
-.xpl-checkbox {
-  position: relative
-}
-
-.xpl-checkbox:focus {
+  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);
@@ -2885,10 +3256,10 @@ button.xpl-badge {
 
 .dark .xpl-checkbox {
   --tw-ring-offset-color: var(--xpl-color-gray-1200);
-  --tw-bg-opacity: 1;
-  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(153, 155, 168, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
 }
 
 .xpl-checkbox:hover,
@@ -2903,11 +3274,11 @@ button.xpl-badge {
 }
 
 .xpl-checkbox:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
+  cursor: not-allowed;
   --tw-border-opacity: 1;
   border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
 }
 
 .xpl-checkbox:focus {
@@ -2917,12 +3288,12 @@ button.xpl-badge {
 .xpl-checkbox-radio-container.styled input {
   --tw-ring-color: transparent;
   --tw-ring-offset-color: transparent;
+  position: absolute;
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-left: 1rem;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  position: absolute;
 }
 
 .xpl-checkbox-radio-container input + label {
@@ -2934,11 +3305,11 @@ button.xpl-badge {
 
 .xpl-checkbox-radio-container.styled label {
   display: block;
+  width: 100%;
   padding-top: 1rem;
   padding-right: 1rem;
   padding-bottom: 1rem;
   padding-left: 3rem;
-  width: 100%;
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -2973,11 +3344,11 @@ button.xpl-badge {
   content: "";
   height: 16px;
   width: 16px;
-  background-repeat: no-repeat;
   display: block;
-  opacity: 0;
+  background-repeat: no-repeat;
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
+  opacity: 0;
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -2999,17 +3370,17 @@ button.xpl-badge {
 }
 
 .dark .xpl-checkbox:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(106, 109, 125, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(106, 109, 125, var(--tw-bg-opacity));
 }
 
 .xpl-checkbox:disabled:checked, .xpl-checkbox:disabled:indeterminate, .dark .xpl-checkbox:disabled:checked, .dark .xpl-checkbox:disabled:indeterminate {
-  --tw-bg-opacity: 1;
-  background-color: rgba(153, 155, 168, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(153, 155, 168, var(--tw-border-opacity))
+  border-color: rgba(153, 155, 168, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 155, 168, var(--tw-bg-opacity))
 }
 
 .xpl-checkbox-radio-container.styled .xpl-checkbox:focus {
@@ -3049,26 +3420,20 @@ button.xpl-badge {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   width: 16px;
+  position: relative;
+  cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  --tw-border-opacity: 1;
-  border-color: rgba(153, 155, 168, var(--tw-border-opacity));
   border-radius: 9999px;
   border-width: 1px;
-  cursor: pointer;
+  --tw-border-opacity: 1;
+  border-color: rgba(153, 155, 168, var(--tw-border-opacity));
 }
 
 .xpl-radio:focus {
   outline: 2px solid transparent;
-  outline-offset: 2px
-}
-
-.xpl-radio {
-  position: relative
-}
-
-.xpl-radio:focus {
+  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);
@@ -3094,18 +3459,18 @@ button.xpl-badge {
 }
 
 .xpl-radio:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
+  cursor: not-allowed;
   --tw-border-opacity: 1;
   border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
 }
 
 .xpl-radio:disabled:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(153, 155, 168, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
 .dark .xpl-radio:hover,
@@ -3115,10 +3480,10 @@ button.xpl-badge {
 }
 
 .dark .xpl-radio:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgba(106, 109, 125, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(106, 109, 125, var(--tw-bg-opacity));
 }
 
 .dark .xpl-radio:focus {
@@ -3126,10 +3491,10 @@ button.xpl-badge {
 }
 
 .dark .xpl-radio:disabled:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(153, 155, 168, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
 }
 
 .xpl-choicelist-heading {
@@ -3161,8 +3526,8 @@ button.xpl-badge {
 }
 
 .xpl-choicelist {
-  display: block;
   margin: 0px;
+  display: block;
   padding: 0px;
 }
 
@@ -3177,11 +3542,11 @@ button.xpl-badge {
 }
 
 .xpl-choicelist--styled {
-  --tw-border-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  overflow: hidden;
   border-radius: 0.375rem;
   border-width: 1px;
-  overflow: hidden;
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
 }
 
 .dark .xpl-choicelist--styled {
@@ -3194,15 +3559,15 @@ button.xpl-badge {
 }
 
 .xpl-choicelist--styled li {
-  --tw-border-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  position: relative;
+  margin-bottom: 0px;
+  display: block;
   border-width: 1px;
   border-top-width: 0px;
   border-right-width: 0px;
   border-left-width: 0px;
-  display: block;
-  margin-bottom: 0px;
-  position: relative;
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -3228,18 +3593,18 @@ button.xpl-badge {
 }
 
 .xpl-choicelist--styled input {
+  position: absolute;
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-left: 1rem;
-  position: absolute;
 }
 
 .xpl-choicelist--styled label {
   display: block;
+  width: 100%;
   padding-top: 1rem;
   padding-right: 1rem;
   padding-bottom: 1rem;
-  width: 100%;
 }
 
 .xpl-choicelist--styled .xpl-checkbox + label, .xpl-choicelist--styled .xpl-radio + label {
@@ -3268,36 +3633,36 @@ button.xpl-badge {
   }
 
 .xpl-content-area-wrapper__narrow .xpl-content-area {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
       grid-column: span 1 / span 1;
       grid-column-start: 2;
+      padding-top: 5rem;
+      padding-bottom: 5rem;
     }
 
 @media (max-width: 1023px) {
 
 .xpl-content-area-wrapper__narrow .xpl-content-area {
-        padding: 0px;
+        grid-template-columns: none;
 
-        grid-template-columns: none
+        padding: 0px
     }
       }
 
 @media (max-width: 1023px) {
 
 .xpl-content-area-wrapper__narrow {
-      padding: 1.5rem;
-
       grid-template-columns: none;
 
       grid-template-rows: none;
+
+      padding: 1.5rem;
   }
     }
 
 .xpl-content-area-wrapper__narrow {
     display: grid;
-    justify-items: center;
-    grid-auto-flow: column
+    grid-auto-flow: column;
+    justify-items: center
 }
 
 .xpl-content-area-wrapper__full {
@@ -3322,6 +3687,145 @@ button.xpl-badge {
   color: var(--xpl-color-text-primary-dm);
 }
 
+.xpl-dashboard {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.xpl-data-card {
+  background-color: var(--xpl-color-foreground-lm);
+  border-color: var(--xpl-color-stroke-lm);
+  color: var(--xpl-color-text-primary-lm);
+  container-name: card;
+  container-type: inline-size;
+  flex-basis: 21%;
+}
+
+.xpl-data-card__anchor {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: block;
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+  }
+
+.xpl-data-card__anchor span {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+
+.xpl-data-card__link:focus,
+    .xpl-data-card__link:active {
+      border-color: var(--xpl-color-secondary-lm);
+    }
+
+.xpl-data-card__link:hover {
+      cursor: pointer;
+      --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px 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);
+    }
+
+.xpl-data-card__header {
+    margin-bottom: 0.25rem;
+    display: flex;
+    max-height: 2rem;
+    justify-content: space-between;
+  }
+
+.xpl-data-card__header--primary {
+      /* sets the icon color */
+      color: var(--xpl-color-primary-lm);
+    }
+
+.xpl-data-card__header--secondary {
+      color: var(--xpl-color-secondary-lm);
+    }
+
+.xpl-data-card__header__arrow {
+      color: var(--xpl-color-text-primary-lm);
+    }
+
+.xpl-data-card__header--no-icon {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+.xpl-data-card dt {
+    font-size: var(--xpl-size-font-title-5);
+  }
+
+.xpl-data-card dd {
+    font-size: var(--xpl-size-font-title-1);
+    font-weight: var(--xpl-font-weight-bold);
+    -webkit-margin-start: 0;
+            margin-inline-start: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+.xpl-data-card {
+  position: relative;
+  display: flex;
+  max-width: 50%;
+  flex-direction: column-reverse;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  padding: 1rem;
+  flex-grow: 1;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content
+}
+
+.dark .xpl-data-card {
+  background-color: var(--xpl-color-foreground-dm);
+  border-color: var(--xpl-color-stroke-dm);
+  color: var(--xpl-color-text-primary-dm);
+}
+
+.dark .xpl-data-card__header--primary {
+  color: var(--xpl-color-primary-dm);
+}
+
+.dark .xpl-data-card__header--secondary {
+  color: var(--xpl-color-secondary-dm);
+}
+
+.dark .xpl-data-card__header__arrow {
+  color: var(--xpl-color-text-primary-dm);
+}
+
+.dark .xpl-data-card__link:focus,
+.dark .xpl-data-card__link:active {
+  border-color: var(--xpl-color-secondary-dm);
+}
+
+@media (max-width: 640px) {
+  .xpl-data-card {
+    flex-basis: 42%;
+  }
+}
+
+@container card (max-width: 212px) {
+  .xpl-data-card dd {
+    font-size: var(--xpl-size-font-title-2);
+  }
+}
+
 .dark .xpl-divider {
     --tw-border-opacity: 1;
     border-color: rgba(106, 109, 125, var(--tw-border-opacity));
@@ -3330,22 +3834,22 @@ button.xpl-badge {
   }
 
 .xpl-divider {
+  margin-bottom: 1rem;
+  display: block;
+  border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  border-bottom-width: 1px;
-  display: block;
+  padding-bottom: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  margin-bottom: 1rem;
-  padding-bottom: 0.25rem;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 .xpl-divider--3 {
-  font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.75rem;
+  font-weight: 700;
 }
 
 .xpl-divider--2 {
@@ -3375,18 +3879,8 @@ button.xpl-badge {
 }
 
 .xpl-dropdown {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  border-radius: 0.375rem;
-  border-width: 1px;
-  opacity: 0;
-  overflow: hidden;
   pointer-events: none;
   position: absolute;
-  --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);
   width: 100%;
   --tw-translate-x: 0;
   --tw-translate-y: 0;
@@ -3397,23 +3891,33 @@ button.xpl-badge {
   --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-y: -0.5rem;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  opacity: 0;
+  --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);
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
 .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));
+    --tw-bg-opacity: 1;
+    background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
   }
 
 .xpl-dropdown--open {
-    opacity: 1;
     pointer-events: auto;
     z-index: 50;
     --tw-translate-y: 0.5rem;
+    opacity: 1;
   }
 
 .xpl-dropdown-list {
@@ -3480,18 +3984,18 @@ button.xpl-badge {
   }
 
 .xpl-dropdown-option {
-  cursor: pointer;
   display: block;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  width: 100%;
+  cursor: pointer;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
   text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
-  width: 100%
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 .xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
@@ -3516,19 +4020,19 @@ button.xpl-badge {
   }
 
 .xpl-dropdown-heading {
+  display: block;
+  width: 100%;
+  border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  border-bottom-width: 1px;
-  display: block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(106, 109, 125, var(--tw-text-opacity));
-  width: 100%
+  color: rgba(106, 109, 125, var(--tw-text-opacity))
 }
 
 /* Flatpickr overrides */
@@ -3627,8 +4131,8 @@ button.xpl-badge {
 }
 
 .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
-  padding-top: 0.75rem;
-  top: 0.5rem
+  top: 0.5rem;
+  padding-top: 0.75rem
 }
 
 .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
@@ -3678,20 +4182,20 @@ button.xpl-badge {
 .flatpickr-current-month {
   font-size: 100%;
   height: 40px;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  padding: 0px;
   left: 0px;
+  padding: 0px;
   text-align: left;
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .flatpickr-current-month .flatpickr-monthDropdown-months {
   font-weight: 500;
   height: 40px;
+  margin: 0px;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  margin: 0px;
   padding: 0.5rem;
 }
 
@@ -3863,9 +4367,9 @@ button.xpl-badge {
 }
 
 span.flatpickr-weekday {
-  font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  font-weight: 400;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity));
 }
@@ -3877,14 +4381,14 @@ span.flatpickr-weekday {
 
 .xpl-grid {
   display: flex;
-  flex-wrap: wrap;
   width: 100%;
+  flex-wrap: wrap;
 }
 
 .xpl-grid-item {
-  flex-shrink: 0;
   margin-right: 1.5rem;
   margin-bottom: 1.5rem;
+  flex-shrink: 0;
 }
 
 @media screen and (max-width: 639px) {
@@ -3986,43 +4490,104 @@ span.flatpickr-weekday {
     flex: 0 0 calc(33.333% - 16px);
   }
 
-  .xpl-grid-item-lg-3 {
-    flex: 0 0 calc(50% - 12px);
-  }
+  .xpl-grid-item-lg-3 {
+    flex: 0 0 calc(50% - 12px);
+  }
+
+  .xpl-grid-item-lg-4 {
+    flex: 0 0 calc(66.667% - 8px);
+  }
+
+  .xpl-grid-item-lg-5 {
+    flex: 0 0 calc(83.333% - 4px);
+  }
+
+  .xpl-grid-item-lg-6 {
+    flex: 0 0 100%;
+  }
+
+  .xpl-grid-item-lg-last {
+    margin-right: 0px;
+  }
+}
+
+.xpl-icon__wrapper {
+  margin: 0px;
+}
+
+.xpl-icon__wrapper--with-background--orange {
+      background-color: var(--xpl-color-orange-50);
+    }
+
+.xpl-icon__wrapper--with-background--purple {
+      background-color: var(--xpl-color-purple-50);
+    }
+
+.xpl-icon__wrapper--with-background--red {
+      background-color: var(--xpl-color-red-50);
+    }
+
+.xpl-icon__wrapper--with-background--yellow {
+      background-color: var(--xpl-color-yellow-50);
+    }
+
+.xpl-icon__wrapper--with-background--gray {
+      background-color: var(--xpl-color-gray-50);
+    }
+
+.xpl-icon__wrapper--with-background {
+    border-radius: 0.375rem;
+    padding: 0.25rem
+}
+
+.xpl-icon__wrapper figcaption {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+.dark .xpl-icon__wrapper--with-background--orange {
+  background-color: var(--xpl-color-orange-900);
+}
 
-  .xpl-grid-item-lg-4 {
-    flex: 0 0 calc(66.667% - 8px);
-  }
+.dark .xpl-icon__wrapper--with-background--purple {
+  background-color: var(--xpl-color-purple-900);
+}
 
-  .xpl-grid-item-lg-5 {
-    flex: 0 0 calc(83.333% - 4px);
-  }
+.dark .xpl-icon__wrapper--with-background--red {
+  background-color: var(--xpl-color-red-900);
+}
 
-  .xpl-grid-item-lg-6 {
-    flex: 0 0 100%;
-  }
+.dark .xpl-icon__wrapper--with-background--yellow {
+  background-color: var(--xpl-color-yellow-900);
+}
 
-  .xpl-grid-item-lg-last {
-    margin-right: 0px;
-  }
+.dark .xpl-icon__wrapper--with-background--gray {
+  background-color: var(--xpl-color-gray-900);
 }
 
 .xpl-input {
-  display: block;
   position: relative;
+  display: block;
 }
 
 .xpl-input input {
   height: 44px;
-  background-color: transparent;
   display: block;
+  width: 100%;
+  overflow: hidden;
+  background-color: transparent;
+  padding-right: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  overflow: hidden;
-  padding-right: 0.5rem;
-  width: 100%;
 }
 
 .xpl-input-calendar {
@@ -4032,13 +4597,13 @@ span.flatpickr-weekday {
 }
 
 button[class^="xpl-input-password"] {
-  cursor: pointer;
-  height: 100%;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
   position: absolute;
   top: 0px;
   right: 0px;
+  height: 100%;
+  cursor: pointer;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
 }
 
 .xpl-input-calendar path,
@@ -4058,16 +4623,16 @@ button[class^="xpl-input-password"] {
 .xpl-input textarea {
   min-height: 44px;
   height: 98px;
-  background-color: transparent;
   display: block;
+  width: 100%;
+  overflow: hidden;
+  background-color: transparent;
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   outline: 2px solid transparent;
   outline-offset: 2px;
-  overflow: hidden;
-  padding-bottom: 0.5rem;
-  padding-top: 0.75rem;
-  width: 100%;
 }
 
 .dark .xpl-input input, .dark .xpl-input textarea {
@@ -4076,17 +4641,17 @@ button[class^="xpl-input-password"] {
 }
 
 .xpl-input input:-moz-read-only, .xpl-input textarea:-moz-read-only {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(248, 249, 250, var(--tw-border-opacity))
+  border-color: rgba(248, 249, 250, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
 }
 
 .xpl-input input:read-only, .xpl-input textarea:read-only {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(248, 249, 250, var(--tw-border-opacity))
+  border-color: rgba(248, 249, 250, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
 }
 
 .xpl-input input:read-only:not(:disabled)::-moz-placeholder, .xpl-input textarea:read-only:not(:disabled)::-moz-placeholder {
@@ -4107,16 +4672,16 @@ button[class^="xpl-input-password"] {
 }
 
 .xpl-input input:disabled, .xpl-input textarea:disabled {
-  background-color: transparent;
-  cursor: not-allowed
+  cursor: not-allowed;
+  background-color: transparent
 }
 
 .xpl-input-label {
-  cursor: pointer;
   display: block;
+  cursor: pointer;
+  padding-bottom: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  padding-bottom: 0.25rem;
 }
 
 .dark .xpl-input-label {
@@ -4142,15 +4707,15 @@ button[class^="xpl-input-password"] {
 }
 
 .xpl-input-wrapper {
-  --tw-border-opacity: 1;
-  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  border-radius: 0.375rem;
-  border-width: 1px;
+  position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
   padding-left: 0.75rem;
-  position: relative;
 }
 
 .xpl-input-wrapper:focus-within {
@@ -4158,9 +4723,9 @@ button[class^="xpl-input-password"] {
 }
 
 .xpl-input--disabled .xpl-input-wrapper {
+  cursor: not-allowed;
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  cursor: not-allowed;
 }
 
 .dark .xpl-input-wrapper {
@@ -4186,10 +4751,10 @@ button[class^="xpl-input-password"] {
 .xpl-input-wrapper label {
   color: var(--xpl-color-text-secondary-lm);
   top: 9px;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   padding-right: 0.75rem;
   padding-left: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .dark .xpl-input-wrapper label {
@@ -4204,21 +4769,21 @@ button[class^="xpl-input-password"] {
 .xpl-input-wrapper label.xpl-input-post {
   border-left-width: 1px;
   line-height: 2.75rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
-  --tw-border-opacity: 1;
-  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  flex-shrink: 0;
-  height: 2.75rem;
   right: 0.75rem;
   left: auto;
+  height: 2.75rem;
+  flex-shrink: 0;
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
 .dark .xpl-input-wrapper label.xpl-input-post {
-  --tw-bg-opacity: 1;
-  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
 }
 
 .dark .xpl-input-wrapper:focus-within {
@@ -4227,17 +4792,17 @@ button[class^="xpl-input-password"] {
 
 .xpl-input-characters {
   background-color: #fffd;
-  display: block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
   pointer-events: none;
   position: absolute;
   right: 0px;
   bottom: 0px;
+  display: block;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
   --tw-text-opacity: 1;
   color: rgba(106, 109, 125, var(--tw-text-opacity));
 }
@@ -4264,10 +4829,10 @@ button[class^="xpl-input-password"] {
 
 .xpl-input-error {
   display: block;
-  font-size: 0.75rem;
-  line-height: 1rem;
   padding-top: 0.25rem;
   text-align: right;
+  font-size: 0.75rem;
+  line-height: 1rem;
   --tw-text-opacity: 1;
   color: rgba(194, 33, 15, var(--tw-text-opacity));
 }
@@ -4279,8 +4844,8 @@ button[class^="xpl-input-password"] {
 
 .xpl-input-error svg {
   top: 1px;
-  margin-right: 0.5rem;
   position: relative;
+  margin-right: 0.5rem;
 }
 
 .dark .xpl-input-error path {
@@ -4288,12 +4853,12 @@ button[class^="xpl-input-password"] {
 }
 
 .xpl-label {
-  cursor: pointer;
   display: block;
+  width: 100%;
+  cursor: pointer;
+  padding-bottom: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  padding-bottom: 0.25rem;
-  width: 100%;
 }
 
 .xpl-label--disabled {
@@ -4337,37 +4902,37 @@ small.xpl-description {
 }
 
 .xpl-list-item {
-  --tw-border-opacity: 1;
-  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
-  border-radius: 0.375rem;
-  border-width: 1px;
+  margin-bottom: 1.5rem;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  margin-bottom: 1.5rem;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
   padding: 1rem;
   text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity));
   text-decoration: none;
-  width: 100%;
 }
 
 .dark .xpl-list-item {
-  --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));
+  --tw-bg-opacity: 1;
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
 .xpl-list-left {
+  margin-right: 2rem;
   display: flex;
   flex-shrink: 0;
-  margin-right: 2rem;
 }
 
 .xpl-list-right div:not(:last-child) {
@@ -4411,29 +4976,29 @@ a.xpl-list-item:focus {
 }
 
 .xpl-list-item xpl-avatar {
-  flex-shrink: 0;
   margin-right: 1rem;
+  flex-shrink: 0;
 }
 
 .xpl-list-item-content {
   display: flex;
+  flex-grow: 1;
   align-items: center;
   justify-content: space-between;
-  flex-grow: 1;
 }
 
 .xpl-list-item-metadata {
+  margin: 0px;
   display: flex;
   list-style-type: none;
-  margin: 0px;
   padding: 0px;
 }
 
 .xpl-list-item-metadata li {
+  margin-right: 1rem;
   display: inline-flex;
   font-size: 0.75rem;
   line-height: 1rem;
-  margin-right: 1rem;
   --tw-text-opacity: 1;
   color: rgba(106, 109, 125, var(--tw-text-opacity));
 }
@@ -4533,12 +5098,12 @@ a.xpl-list-item:focus {
 
 .xpl-main-nav header p {
       color: var(--xpl-color-text-primary-dm);
+      margin-left: 1rem;
       display: grid;
       align-content: center;
-      font-weight: 600;
       font-size: 1rem;
       line-height: 1.5rem;
-      margin-left: 1rem;
+      font-weight: 600;
     }
 
 .xpl-main-nav header img {
@@ -4548,9 +5113,9 @@ a.xpl-list-item:focus {
     }
 
 .xpl-main-nav header {
+    margin-bottom: 0.5rem;
     display: flex;
     align-items: center;
-    margin-bottom: 0.5rem;
     padding: 1rem
 }
 
@@ -4581,11 +5146,11 @@ a.xpl-list-item:focus {
         }
 
 .xpl-main-nav footer {
+    z-index: 20;
     display: grid;
     align-items: flex-end;
     padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    z-index: 20
+    padding-bottom: 0.5rem
 }
 
 /* Width for different screen sizes */
@@ -4601,8 +5166,8 @@ a.xpl-list-item:focus {
 
 .xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button {
         display: grid;
-        justify-items: center;
-        grid-auto-flow: row
+        grid-auto-flow: row;
+        justify-items: center
       }
 
 .xpl-main-nav--sm .xpl-nav-item a,
@@ -4610,22 +5175,22 @@ a.xpl-list-item:focus {
         width: 74px;
       }
 
-.xpl-main-nav--sm .xpl-nav-item a p, .xpl-main-nav--sm .xpl-nav-item button p {
-          display: none;
-        }
-
 .xpl-main-nav--sm .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm .xpl-nav-item button .flatpickr-dayp{
           visibility:hidden
         }
 
+.xpl-main-nav--sm .xpl-nav-item a p, .xpl-main-nav--sm .xpl-nav-item button p {
+          display: none
+        }
+
 .xpl-main-nav--sm .xpl-nav-item a svg, .xpl-main-nav--sm .xpl-nav-item button svg {
           margin-right: 0px;
         }
 
 .xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button {
         display: grid;
-        justify-items: center;
-        grid-auto-flow: row
+        grid-auto-flow: row;
+        justify-items: center
       }
 
 .xpl-main-nav--sm .xpl-nav-item a,
@@ -4637,40 +5202,40 @@ a.xpl-list-item:focus {
       }
 
 .xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button, .xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button {
-        font-weight: 600;
         padding-top: 0.75rem;
-        padding-bottom: 0.75rem
-      }
-
-.xpl-main-nav--sm header p, .xpl-main-nav--md header p {
-        display: none;
+        padding-bottom: 0.75rem;
+        font-weight: 600
       }
 
 .xpl-main-nav--sm header .flatpickr-dayp,.xpl-main-nav--md header .flatpickr-dayp{
         visibility:hidden
       }
 
+.xpl-main-nav--sm header p, .xpl-main-nav--md header p {
+        display: none
+      }
+
 .xpl-main-nav--sm header, .xpl-main-nav--md header {
+      margin-top: 1rem;
       align-content: center;
-      justify-content: center;
-      margin-top: 1rem
+      justify-content: center
 }
 
 .xpl-main-nav--sm footer .xpl-avatar, .xpl-main-nav--md footer .xpl-avatar {
         margin-right: 0px;
       }
 
-.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item button p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item button p, .xpl-main-nav--md footer .xpl-nav-item div p {
-            display: none;
-          }
-
 .xpl-main-nav--sm footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item button .flatpickr-dayp,.xpl-main-nav--sm footer .xpl-nav-item div .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item a .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item button .flatpickr-dayp,.xpl-main-nav--md footer .xpl-nav-item div .flatpickr-dayp{
             visibility:hidden
           }
 
+.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item button p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item button p, .xpl-main-nav--md footer .xpl-nav-item div p {
+            display: none
+          }
+
 .xpl-main-nav--sm footer .xpl-nav-item a, .xpl-main-nav--sm footer .xpl-nav-item button, .xpl-main-nav--md footer .xpl-nav-item a, .xpl-main-nav--md footer .xpl-nav-item button {
-          display: inline-flex;
-          margin-bottom: 0px
+          margin-bottom: 0px;
+          display: inline-flex
         }
 
 .xpl-nav-item a {
@@ -4683,12 +5248,12 @@ a.xpl-list-item:focus {
     }
 
 .xpl-nav-item a svg, .xpl-nav-item button svg {
-      height: 2rem;
       margin-right: 0.75rem;
+      height: 2rem;
+      width: 2rem;
       fill: currentColor;
       --tw-text-opacity: 1;
       color: rgba(153, 155, 168, var(--tw-text-opacity));
-      width: 2rem;
     }
 
 .xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg, .xpl-nav-item a:active svg, .xpl-nav-item button:hover svg, .xpl-nav-item button:focus svg, .xpl-nav-item button:active svg {
@@ -4721,20 +5286,20 @@ a.xpl-list-item:focus {
 
 .xpl-nav-item a, .xpl-nav-item button {
     display: flex;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    width: 100%;
     padding-left: 1rem;
     padding-right: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     --tw-text-opacity: 1;
-    color: rgba(153, 155, 168, var(--tw-text-opacity));
-    width: 100%
+    color: rgba(153, 155, 168, var(--tw-text-opacity))
   }
 
 .xpl-nav-item a, .xpl-nav-item button {
-    background-color: transparent;
-    border-color: transparent;
+    align-content: center;
     align-items: center;
-    align-content: center
+    border-color: transparent;
+    background-color: transparent
   }
 
 .xpl-main-nav--md .xpl-nav-item a, .xpl-main-nav--md .xpl-nav-item button, .xpl-main-nav--sm .xpl-nav-item a, .xpl-main-nav--sm .xpl-nav-item button {
@@ -4759,9 +5324,9 @@ a.xpl-list-item:focus {
 }
 
 .xpl-pagination p {
+  padding-bottom: 0.5rem;
   font-size: 0.75rem;
   line-height: 1rem;
-  padding-bottom: 0.5rem;
   --tw-text-opacity: 1;
   color: rgba(60, 56, 71, var(--tw-text-opacity));
 }
@@ -4776,6 +5341,12 @@ a.xpl-list-item:focus {
   font-weight: 500;
 }
 
+.xpl-pagination nav {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+}
+
 .xpl-pagination nav > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
@@ -4784,11 +5355,8 @@ a.xpl-list-item:focus {
 
 .xpl-pagination nav {
   border-radius: 0.375rem;
-  display: inline-flex;
-  position: relative;
   --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);
-  z-index: 0
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
 .xpl-pagination svg {
@@ -4798,6 +5366,14 @@ a.xpl-list-item:focus {
 }
 
 .xpl-pagination .xpl-pagination-prev {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
@@ -4808,26 +5384,26 @@ a.xpl-list-item:focus {
 }
 
 .xpl-pagination .xpl-pagination-prev {
-  --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-  border-width: 1px;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  position: relative;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .xpl-pagination .xpl-pagination-next {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
@@ -4838,21 +5414,13 @@ a.xpl-list-item:focus {
 }
 
 .xpl-pagination .xpl-pagination-next {
-  --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-  border-width: 1px;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  position: relative;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
@@ -4870,6 +5438,12 @@ a.xpl-list-item:focus {
 }
 
 .xpl-pagination a, .xpl-pagination button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
@@ -4880,51 +5454,45 @@ a.xpl-list-item:focus {
 }
 
 .xpl-pagination a, .xpl-pagination button {
-  --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
-  border-width: 1px;
-  display: inline-flex;
-  align-items: center;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   padding-left: 1rem;
   padding-right: 1rem;
-  position: relative;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .xpl-pagination-ellipsis {
-  --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));
-  border-width: 1px;
+  position: relative;
   display: inline-flex;
   align-items: center;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
-  position: relative;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(60, 56, 71, var(--tw-text-opacity));
 }
 
 .xpl-pagination .xpl-pagination-current {
-  --tw-bg-opacity: 1;
-  background-color: rgba(238, 242, 255, var(--tw-bg-opacity));
+  z-index: 10;
   --tw-border-opacity: 1;
   border-color: rgba(99, 102, 241, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(238, 242, 255, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgba(79, 70, 229, var(--tw-text-opacity));
-  z-index: 10;
 }
 
 .xpl-pagination .xpl-pagination-current:hover {
@@ -4932,8 +5500,12 @@ a.xpl-list-item:focus {
   background-color: rgba(238, 242, 255, var(--tw-bg-opacity))
 }
 
+.flatpickr-day.xpl-pagination .xpl-pagination-show-md{
+  visibility:hidden
+}
+
 .xpl-pagination .xpl-pagination-show-md {
-  display: none;
+  display: none
 }
 
 @media (min-width: 768px) {
@@ -4942,10 +5514,6 @@ a.xpl-list-item:focus {
   }
 }
 
-.flatpickr-day.xpl-pagination .xpl-pagination-show-md{
-  visibility:hidden
-}
-
 /* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */
 
 @media (max-width: 1023px) {
@@ -4969,8 +5537,6 @@ a.xpl-list-item:focus {
 @media (max-width: 1023px) {
 
 .xpl-secondary-nav nav::after {
-        overflow: hidden;
-
         position: absolute;
 
         top: 0px;
@@ -4979,14 +5545,16 @@ a.xpl-list-item:focus {
 
         bottom: 0px;
 
-        width: 1.75rem
+        width: 1.75rem;
+
+        overflow: hidden
     }
       }
 
 .xpl-secondary-nav nav {
+    position: relative;
     --tw-bg-opacity: 1;
-    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-    position: relative
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 .xpl-secondary-nav nav ul::-webkit-scrollbar {
@@ -4999,15 +5567,19 @@ a.xpl-list-item:focus {
     }
 
 .xpl-secondary-nav nav ul {
-    --tw-bg-opacity: 1;
-    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
     display: flex;
     flex-direction: row;
     overflow-y: auto;
-    white-space: nowrap
+    white-space: nowrap;
+    --tw-bg-opacity: 1;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 @media (min-width: 1024px) {
+    .xpl-secondary-nav nav ul {
+      flex-direction: column
+    }
+
     .xpl-secondary-nav nav ul > :not([hidden]) ~ :not([hidden]) {
       --tw-space-y-reverse: 0;
       margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -5015,10 +5587,9 @@ a.xpl-list-item:focus {
     }
 
     .xpl-secondary-nav nav ul {
-      flex-direction: column;
+      white-space: normal;
       padding-right: 0px;
-      padding-left: 0px;
-      white-space: normal
+      padding-left: 0px
     }
   }
 
@@ -5034,19 +5605,19 @@ a.xpl-list-item:focus {
     }
 
 .dark .xpl-secondary-nav nav ul .xpl-nav-item a.active, .dark .xpl-secondary-nav nav ul .xpl-nav-item a:active, .dark .xpl-secondary-nav nav ul .xpl-nav-item a:focus {
-        --tw-bg-opacity: 1;
-        background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
         --tw-border-opacity: 1;
         border-color: rgba(249, 145, 112, var(--tw-border-opacity));
+        --tw-bg-opacity: 1;
+        background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
         --tw-text-opacity: 1;
         color: rgba(255, 255, 255, var(--tw-text-opacity));
       }
 
 .xpl-secondary-nav nav ul .xpl-nav-item a.active, .xpl-secondary-nav nav ul .xpl-nav-item a:active, .xpl-secondary-nav nav ul .xpl-nav-item a:focus {
-      --tw-bg-opacity: 1;
-      background-color: rgba(254, 246, 244, var(--tw-bg-opacity));
       --tw-border-opacity: 1;
       border-color: rgba(249, 145, 112, var(--tw-border-opacity));
+      --tw-bg-opacity: 1;
+      background-color: rgba(254, 246, 244, var(--tw-bg-opacity));
       --tw-text-opacity: 1;
       color: rgba(48, 45, 59, var(--tw-text-opacity))
     }
@@ -5066,19 +5637,19 @@ a.xpl-list-item:focus {
 .xpl-secondary-nav nav ul .xpl-nav-item a {
     border-right-width: 0px;
     border-bottom-width: 4px;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem
+    font-size: 0.875rem;
+    line-height: 1.25rem
 }
 
 @media (min-width: 1024px) {
     .xpl-secondary-nav nav ul .xpl-nav-item a {
-      border-bottom-width: 0px;
+      height: 3rem;
       border-right-width: 4px;
-      height: 3rem
+      border-bottom-width: 0px
     }
   }
 
@@ -5096,8 +5667,8 @@ a.xpl-list-item:focus {
 .xpl-secondary-nav {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-bottom: 1rem;
-  padding-top: 1.25rem
+  padding-top: 1.25rem;
+  padding-bottom: 1rem
 }
 
 @media (min-width: 1024px) {
@@ -5113,16 +5684,16 @@ a.xpl-list-item:focus {
   background-repeat: no-repeat;
   height: 44px;
   outline: none !important;
-  background-color: transparent;
   display: block;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  width: 100%;
   overflow: hidden;
+  background-color: transparent;
   padding-right: 0.5rem;
   text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: rgba(106, 109, 125, var(--tw-text-opacity));
-  width: 100%;
 }
 
 .xpl-select.xpl-select--disabled .xpl-input-wrapper > button {
@@ -5130,9 +5701,9 @@ a.xpl-list-item:focus {
 }
 
 .xpl-select.xpl-select--no-truncate .xpl-input-wrapper > button {
-  height: 100%;
   position: absolute;
   right: 0px;
+  height: 100%;
   width: 100%;
 }
 
@@ -5141,24 +5712,24 @@ a.xpl-list-item:focus {
 }
 
 .xpl-select-value {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   pointer-events: none;
   position: absolute;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: rgba(106, 109, 125, var(--tw-text-opacity));
-  white-space: nowrap;
 }
 
 .xpl-select--no-truncate .xpl-select-value {
-  padding-right: 2rem;
   position: relative;
   white-space: normal;
+  padding-right: 2rem;
 }
 
 .xpl-select--no-truncate xpl-tag {
-  margin-bottom: 0.5rem;
   z-index: 10;
+  margin-bottom: 0.5rem;
 }
 
 .xpl-select-value.has-value {
@@ -5194,20 +5765,24 @@ a.xpl-list-item:focus {
 }
 
 .xpl-table-container {
-  --tw-border-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  overflow: auto;
   border-radius: 0.375rem;
   border-width: 1px;
-  overflow: auto;
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   --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(48, 45, 59, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(54, 50, 64, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
+}
+
+.xpl-table {
+  min-width: 100%;
 }
 
 .xpl-table > :not([hidden]) ~ :not([hidden]) {
@@ -5218,10 +5793,6 @@ a.xpl-list-item:focus {
   border-color: rgba(238, 239, 243, var(--tw-divide-opacity))
 }
 
-.xpl-table {
-  min-width: 100%
-}
-
 .dark .xpl-table > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgba(54, 50, 64, var(--tw-divide-opacity))
@@ -5232,17 +5803,17 @@ a.xpl-list-item:focus {
 }
 
 .xpl-table thead th {
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  white-space: nowrap;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
   text-align: left;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(153, 155, 168, var(--tw-text-opacity));
-  white-space: nowrap;
 }
 
 .xpl-table-row-selected td {
@@ -5251,15 +5822,15 @@ a.xpl-list-item:focus {
 }
 
 .xpl-table tbody tr td {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  white-space: nowrap;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: rgba(153, 155, 168, var(--tw-text-opacity));
-  white-space: nowrap;
 }
 
 .dark .xpl-table-row-selected td {
@@ -5273,13 +5844,13 @@ a.xpl-list-item:focus {
 }
 
 .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(238, 239, 243, var(--tw-border-opacity));
   position: sticky;
   left: 0px;
-  z-index: 10
+  z-index: 10;
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 .xpl-table--freeze thead th:first-child {
@@ -5288,9 +5859,9 @@ a.xpl-list-item:focus {
 }
 
 .xpl-table tbody tr td:first-child, .xpl-table p {
-  font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
@@ -5331,12 +5902,12 @@ a.xpl-list-item:focus {
 }
 
 .xpl-table--freeze thead th:first-child::after, .xpl-table--freeze tbody td:first-child::after {
-  display: block;
-  height: 100%;
-  opacity: 0;
   position: absolute;
   top: 0px;
   left: 100%;
+  display: block;
+  height: 100%;
+  opacity: 0;
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms
@@ -5417,14 +5988,14 @@ a.xpl-list-item:focus {
 }
 
 .xpl-table label {
-  cursor: pointer;
   display: flex;
+  cursor: pointer;
   align-items: center;
 }
 
 .xpl-table input[type="checkbox"] {
-  cursor: pointer;
   margin-right: 1.5rem;
+  cursor: pointer;
 }
 
 .xpl-tabs {
@@ -5432,6 +6003,11 @@ a.xpl-list-item:focus {
   overflow-x: auto;
 }
 
+.xpl-tabs nav {
+  display: flex;
+  min-width: 100%;
+}
+
 .xpl-tabs nav > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -5439,14 +6015,15 @@ a.xpl-list-item:focus {
 }
 
 .xpl-tabs nav {
-  --tw-border-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   border-bottom-width: 1px;
-  display: flex;
-  min-width: 100%
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity))
 }
 
 .xpl-tabs a, .xpl-tabs button {
+  display: flex;
+  white-space: nowrap;
+  border-bottom-width: 2px;
   border-color: transparent
 }
 
@@ -5456,15 +6033,13 @@ a.xpl-list-item:focus {
 }
 
 .xpl-tabs a, .xpl-tabs button {
-  border-bottom-width: 2px;
-  display: flex;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1rem;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
@@ -5474,22 +6049,18 @@ a.xpl-list-item:focus {
   color: rgba(60, 56, 71, var(--tw-text-opacity))
 }
 
-.xpl-tabs a, .xpl-tabs button {
-  white-space: nowrap
-}
-
 .xpl-tabs a span, .xpl-tabs button span {
+  margin-left: 0.75rem;
+  border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
-  border-radius: 9999px;
-  font-weight: 500;
-  font-size: 0.625rem;
-  line-height: 0.875rem;
-  margin-left: 0.75rem;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
   padding-left: 0.625rem;
   padding-right: 0.625rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  font-size: 0.625rem;
+  line-height: 0.875rem;
+  font-weight: 500;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
@@ -5509,18 +6080,18 @@ a.xpl-list-item:focus {
 }
 
 .xpl-tag-container {
-  display: inline-flex;
   position: relative;
+  display: inline-flex;
 }
 
 button.xpl-tag {
   border-color: var(--xpl-color-secondary-lm);
   padding: 2px 28px 2px 10px;
+  margin-right: -0.25rem;
   border-radius: 9999px;
   border-width: 1px;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  margin-right: -0.25rem;
   --tw-text-opacity: 1;
   color: rgba(48, 45, 59, var(--tw-text-opacity));
   transition-property: background-color, border-color, color, fill, stroke;
@@ -5542,19 +6113,19 @@ button.xpl-tag {
 }
 
 .dark .xpl-tag-container:hover button.xpl-tag {
-  --tw-bg-opacity: 1;
-  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
   border-color: rgba(235, 229, 255, var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
 }
 
 button.xpl-tag__close {
   right: 18px;
   top: -1px;
+  position: relative;
   height: 100%;
   font-size: 1.25rem;
   line-height: 1.75rem;
-  position: relative;
   --tw-text-opacity: 1;
   color: rgba(106, 109, 125, var(--tw-text-opacity));
 }
@@ -5565,9 +6136,9 @@ button.xpl-tag__close {
 }
 
 .xpl-toggle-container {
+  margin-bottom: 1.5rem;
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 1.5rem;
 }
 
 .xpl-toggle {
@@ -5580,6 +6151,9 @@ button.xpl-tag__close {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   width: 44px;
+  position: relative;
+  flex-shrink: 0;
+  cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -5592,21 +6166,9 @@ button.xpl-tag__close {
   background-color: rgba(153, 155, 168, var(--tw-bg-opacity))
 }
 
-.xpl-toggle {
-  cursor: pointer;
-  flex-shrink: 0
-}
-
 .xpl-toggle:focus {
   outline: 2px solid transparent;
-  outline-offset: 2px
-}
-
-.xpl-toggle {
-  position: relative
-}
-
-.xpl-toggle:focus {
+  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);
@@ -5624,13 +6186,13 @@ button.xpl-tag__close {
 /* label (to the right of toggle) */
 
 .xpl-toggle + label {
-  cursor: pointer;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   margin-top: 0.25rem;
+  cursor: pointer;
   padding-right: 1rem;
   padding-left: 1rem;
   vertical-align: middle;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .xpl-toggle--small + label {
@@ -5651,8 +6213,8 @@ button.xpl-tag__close {
 
 .xpl-toggle-container label:first-child {
   display: block;
-  padding-bottom: 0.25rem;
   width: 100%;
+  padding-bottom: 0.25rem;
 }
 
 /* description */
@@ -5706,9 +6268,9 @@ button.xpl-tag__close {
 }
 
 .xpl-toggle-container--disabled .xpl-toggle, .xpl-toggle-container--disabled .xpl-toggle:hover {
+  cursor: not-allowed;
   --tw-bg-opacity: 1;
-  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
-  cursor: not-allowed
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity))
 }
 
 .dark .xpl-toggle:checked {
@@ -5811,9 +6373,9 @@ button.xpl-tag__close {
 
 .xpl-utility-bar ul, .xpl-utility-bar nav, .xpl-utility-bar xpl-breadcrumbs {
     display: grid;
-    align-items: center;
+    grid-auto-flow: column;
     align-content: center;
-    grid-auto-flow: column
+    align-items: center
   }
 
 .xpl-utility-bar div:first-child {
@@ -5822,11 +6384,11 @@ button.xpl-tag__close {
 
 .xpl-utility-bar {
   display: grid;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  grid-auto-flow: column;
   padding-left: 1rem;
   padding-right: 1rem;
-  grid-auto-flow: column
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem
 }
 
 @media (min-width: 640px) {
@@ -5857,3 +6419,18 @@ button.xpl-tag__close {
 .dark .xpl-utility-nav__bars {
   color: var(--xpl-color-text-primary-dm);
 }
+
+@media (min-width: 640px) {
+}
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 1024px) {
+}
+
+@media (min-width: 1280px) {
+}
+
+@media (min-width: 1536px) {
+}