@xplortech/apollo-core 0.4.0 → 0.4.1

package/build/style.css

@@ -164,6 +164,759 @@
   --xpl-color-information-lm: var(--xpl-color-primary-lm); /* uses themable token */
 }
 
+.flatpickr-calendar{
+  background:transparent;
+  opacity:0;
+  display:none;
+  text-align:center;
+  visibility:hidden;
+  padding:0;
+  -webkit-animation:none;
+  animation:none;
+  direction:ltr;
+  border:0;
+  font-size:0.875rem;
+  line-height:1.5rem;
+  border-radius:5px;
+  position:absolute;
+  width:307.875px;
+  box-sizing:border-box;
+  touch-action:manipulation;
+  background:#fff;
+  box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)
+}
+
+.flatpickr-calendar.open,.flatpickr-calendar.inline{
+  opacity:1;
+  max-height:640px;
+  visibility:visible
+}
+
+.flatpickr-calendar.open{
+  display:inline-block;
+  z-index:99999
+}
+
+.flatpickr-calendar.animate.open{
+  -webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);
+  animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)
+}
+
+.flatpickr-calendar.inline{
+  display:block;
+  position:relative;
+  top:2px
+}
+
+.flatpickr-calendar.static{
+  position:absolute;
+  top:calc(100% + 2px)
+}
+
+.flatpickr-calendar.static.open{
+  z-index:999;
+  display:block
+}
+
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){
+  box-shadow:none !important
+}
+
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){
+  box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6
+}
+
+.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{
+  border-bottom:0;
+  border-bottom-right-radius:0;
+  border-bottom-left-radius:0
+}
+
+.flatpickr-calendar .hasWeeks .dayContainer{
+  border-left:0
+}
+
+.flatpickr-calendar.hasTime .flatpickr-time{
+  height:40px;
+  border-top:1px solid #e6e6e6
+}
+
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{
+  height:auto
+}
+
+.flatpickr-calendar:before,.flatpickr-calendar:after{
+  position:absolute;
+  display:block;
+  pointer-events:none;
+  border:solid transparent;
+  content:'';
+  height:0;
+  width:0;
+  left:22px
+}
+
+.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{
+  left:auto;
+  right:22px
+}
+
+.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{
+  left:50%;
+  right:50%
+}
+
+.flatpickr-calendar:before{
+  border-width:5px;
+  margin:0 -5px
+}
+
+.flatpickr-calendar:after{
+  border-width:4px;
+  margin:0 -4px
+}
+
+.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{
+  bottom:100%
+}
+
+.flatpickr-calendar.arrowTop:before{
+  border-bottom-color:#e6e6e6
+}
+
+.flatpickr-calendar.arrowTop:after{
+  border-bottom-color:#fff
+}
+
+.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{
+  top:100%
+}
+
+.flatpickr-calendar.arrowBottom:before{
+  border-top-color:#e6e6e6
+}
+
+.flatpickr-calendar.arrowBottom:after{
+  border-top-color:#fff
+}
+
+.flatpickr-calendar:focus{
+  outline:0
+}
+
+.flatpickr-wrapper{
+  position:relative;
+  display:inline-block
+}
+
+.flatpickr-months{
+  display:flex
+}
+
+.flatpickr-months .flatpickr-month{
+  background:transparent;
+  color:rgba(0,0,0,0.9);
+  fill:rgba(0,0,0,0.9);
+  height:34px;
+  line-height:1;
+  text-align:center;
+  position:relative;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+  overflow:hidden;
+  flex:1
+}
+
+.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{
+  text-decoration:none;
+  cursor:pointer;
+  position:absolute;
+  top:0;
+  height:34px;
+  padding:10px;
+  z-index:3;
+  color:rgba(0,0,0,0.9);
+  fill:rgba(0,0,0,0.9)
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{
+  display:none
+}
+
+.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{
+  position:relative
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{
+  /*
+      /*rtl:begin:ignore*/
+  left:0
+  /*
+      /*rtl:end:ignore*/
+}
+
+/*
+      /*rtl:begin:ignore*/
+
+/*
+      /*rtl:end:ignore*/
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{
+  /*
+      /*rtl:begin:ignore*/
+  right:0
+  /*
+      /*rtl:end:ignore*/
+}
+
+/*
+      /*rtl:begin:ignore*/
+
+/*
+      /*rtl:end:ignore*/
+
+.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{
+  color:#959ea9
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{
+  fill:#f64747
+}
+
+.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{
+  width:14px;
+  height:14px
+}
+
+.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{
+  transition:fill .1s;
+  fill:inherit
+}
+
+.numInputWrapper{
+  position:relative;
+  height:auto
+}
+
+.numInputWrapper input,.numInputWrapper span{
+  display:inline-block
+}
+
+.numInputWrapper input{
+  width:100%
+}
+
+.numInputWrapper input::-ms-clear{
+  display:none
+}
+
+.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{
+  margin:0;
+  -webkit-appearance:none
+}
+
+.numInputWrapper span{
+  position:absolute;
+  right:0;
+  width:14px;
+  padding:0 4px 0 2px;
+  height:50%;
+  line-height:50%;
+  opacity:0;
+  cursor:pointer;
+  border:1px solid rgba(57,57,57,0.15);
+  box-sizing:border-box
+}
+
+.numInputWrapper span:hover{
+  background:rgba(0,0,0,0.1)
+}
+
+.numInputWrapper span:active{
+  background:rgba(0,0,0,0.2)
+}
+
+.numInputWrapper span:after{
+  display:block;
+  content:"";
+  position:absolute
+}
+
+.numInputWrapper span.arrowUp{
+  top:0;
+  border-bottom:0
+}
+
+.numInputWrapper span.arrowUp:after{
+  border-left:4px solid transparent;
+  border-right:4px solid transparent;
+  border-bottom:4px solid rgba(57,57,57,0.6);
+  top:26%
+}
+
+.numInputWrapper span.arrowDown{
+  top:50%
+}
+
+.numInputWrapper span.arrowDown:after{
+  border-left:4px solid transparent;
+  border-right:4px solid transparent;
+  border-top:4px solid rgba(57,57,57,0.6);
+  top:40%
+}
+
+.numInputWrapper span svg{
+  width:inherit;
+  height:auto
+}
+
+.numInputWrapper span svg path{
+  fill:rgba(0,0,0,0.5)
+}
+
+.numInputWrapper:hover{
+  background:rgba(0,0,0,0.05)
+}
+
+.numInputWrapper:hover span{
+  opacity:1
+}
+
+.flatpickr-current-month{
+  font-size:135%;
+  line-height:inherit;
+  font-weight:300;
+  color:inherit;
+  position:absolute;
+  width:75%;
+  left:12.5%;
+  padding:7.48px 0 0 0;
+  line-height:1;
+  height:34px;
+  display:inline-block;
+  text-align:center;
+  transform:translate3d(0,0,0)
+}
+
+.flatpickr-current-month span.cur-month{
+  font-family:inherit;
+  font-weight:700;
+  color:inherit;
+  display:inline-block;
+  margin-left:.5ch;
+  padding:0
+}
+
+.flatpickr-current-month span.cur-month:hover{
+  background:rgba(0,0,0,0.05)
+}
+
+.flatpickr-current-month .numInputWrapper{
+  width:6ch;
+  width:7ch\0;
+  display:inline-block
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowUp:after{
+  border-bottom-color:rgba(0,0,0,0.9)
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowDown:after{
+  border-top-color:rgba(0,0,0,0.9)
+}
+
+.flatpickr-current-month input.cur-year{
+  background:transparent;
+  box-sizing:border-box;
+  color:inherit;
+  cursor:text;
+  padding:0 0 0 .5ch;
+  margin:0;
+  display:inline-block;
+  font-size:inherit;
+  font-family:inherit;
+  font-weight:300;
+  line-height:inherit;
+  height:auto;
+  border:0;
+  border-radius:0;
+  vertical-align:initial;
+  -webkit-appearance:textfield;
+  -moz-appearance:textfield;
+  appearance:textfield
+}
+
+.flatpickr-current-month input.cur-year:focus{
+  outline:0
+}
+
+.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{
+  font-size:100%;
+  color:rgba(0,0,0,0.5);
+  background:transparent;
+  pointer-events:none
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months{
+  appearance:menulist;
+  background:transparent;
+  border:none;
+  border-radius:0;
+  box-sizing:border-box;
+  color:inherit;
+  cursor:pointer;
+  font-size:inherit;
+  font-family:inherit;
+  font-weight:300;
+  height:auto;
+  line-height:inherit;
+  margin:-1px 0 0 0;
+  outline:none;
+  padding:0 0 0 .5ch;
+  position:relative;
+  vertical-align:initial;
+  -webkit-box-sizing:border-box;
+  -webkit-appearance:menulist;
+  -moz-appearance:menulist;
+  width:auto
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{
+  outline:none
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover{
+  background:rgba(0,0,0,0.05)
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{
+  background-color:transparent;
+  outline:none;
+  padding:0
+}
+
+.flatpickr-weekdays{
+  background:transparent;
+  text-align:center;
+  overflow:hidden;
+  width:100%;
+  display:flex;
+  align-items:center;
+  height:28px
+}
+
+.flatpickr-weekdays .flatpickr-weekdaycontainer{
+  display:flex;
+  flex:1
+}
+
+span.flatpickr-weekday{
+  cursor:default;
+  font-size:90%;
+  background:transparent;
+  color:rgba(0,0,0,0.54);
+  line-height:1;
+  margin:0;
+  text-align:center;
+  display:block;
+  flex:1;
+  font-weight:bolder
+}
+
+.dayContainer,.flatpickr-weeks{
+  padding:1px 0 0 0
+}
+
+.flatpickr-days{
+  position:relative;
+  overflow:hidden;
+  display:flex;
+  align-items:flex-start;
+  width:307.875px
+}
+
+.flatpickr-days:focus{
+  outline:0
+}
+
+.dayContainer{
+  padding:0;
+  outline:0;
+  text-align:left;
+  width:307.875px;
+  min-width:307.875px;
+  max-width:307.875px;
+  box-sizing:border-box;
+  display:inline-block;
+  display:flex;
+  flex-wrap:wrap;
+  -ms-flex-wrap:wrap;
+  justify-content:space-around;
+  transform:translate3d(0,0,0);
+  opacity:1
+}
+
+.dayContainer + .dayContainer{
+  box-shadow:-1px 0 0 #e6e6e6
+}
+
+.flatpickr-day{
+  background:none;
+  border:1px solid transparent;
+  border-radius:150px;
+  box-sizing:border-box;
+  color:#393939;
+  cursor:pointer;
+  font-weight:400;
+  width:14.2857143%;
+  flex-basis:14.2857143%;
+  max-width:39px;
+  height:39px;
+  line-height:2.4375rem;
+  margin:0;
+  display:inline-block;
+  position:relative;
+  justify-content:center;
+  text-align:center
+}
+
+.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{
+  cursor:pointer;
+  outline:0;
+  background:#e6e6e6;
+  border-color:#e6e6e6
+}
+
+.flatpickr-day.today{
+  border-color:#959ea9
+}
+
+.flatpickr-day.today:hover,.flatpickr-day.today:focus{
+  border-color:#959ea9;
+  background:#959ea9;
+  color:#fff
+}
+
+.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{
+  background:#569ff7;
+  box-shadow:none;
+  color:#fff;
+  border-color:#569ff7
+}
+
+.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{
+  border-radius:50px 0 0 50px
+}
+
+.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{
+  border-radius:0 50px 50px 0
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){
+  box-shadow:-10px 0 0 #569ff7
+}
+
+.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{
+  border-radius:50px
+}
+
+.flatpickr-day.inRange{
+  border-radius:0;
+  box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6
+}
+
+.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{
+  color:rgba(57,57,57,0.3);
+  background:transparent;
+  border-color:transparent;
+  cursor:default
+}
+
+.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{
+  cursor:not-allowed;
+  color:rgba(57,57,57,0.1)
+}
+
+.flatpickr-day.week.selected{
+  border-radius:0;
+  box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7
+}
+
+.flatpickr-day.hidden{
+  visibility:hidden
+}
+
+.rangeMode .flatpickr-day{
+  margin-top:1px
+}
+
+.flatpickr-weekwrapper{
+  float:left
+}
+
+.flatpickr-weekwrapper .flatpickr-weeks{
+  padding:0 12px;
+  box-shadow:1px 0 0 #e6e6e6
+}
+
+.flatpickr-weekwrapper .flatpickr-weekday{
+  float:none;
+  width:100%;
+  line-height:1.75rem
+}
+
+.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{
+  display:block;
+  width:100%;
+  max-width:none;
+  color:rgba(57,57,57,0.3);
+  background:transparent;
+  cursor:default;
+  border:none
+}
+
+.flatpickr-innerContainer{
+  display:block;
+  display:flex;
+  box-sizing:border-box;
+  overflow:hidden
+}
+
+.flatpickr-rContainer{
+  display:inline-block;
+  padding:0;
+  box-sizing:border-box
+}
+
+.flatpickr-time{
+  text-align:center;
+  outline:0;
+  display:block;
+  height:0;
+  line-height:2.5rem;
+  max-height:40px;
+  box-sizing:border-box;
+  overflow:hidden;
+  display:flex
+}
+
+.flatpickr-time:after{
+  content:"";
+  display:table;
+  clear:both
+}
+
+.flatpickr-time .numInputWrapper{
+  flex:1;
+  width:40%;
+  height:40px;
+  float:left
+}
+
+.flatpickr-time .numInputWrapper span.arrowUp:after{
+  border-bottom-color:#393939
+}
+
+.flatpickr-time .numInputWrapper span.arrowDown:after{
+  border-top-color:#393939
+}
+
+.flatpickr-time.hasSeconds .numInputWrapper{
+  width:26%
+}
+
+.flatpickr-time.time24hr .numInputWrapper{
+  width:49%
+}
+
+.flatpickr-time input{
+  background:transparent;
+  box-shadow:none;
+  border:0;
+  border-radius:0;
+  text-align:center;
+  margin:0;
+  padding:0;
+  height:inherit;
+  line-height:inherit;
+  color:#393939;
+  font-size:0.875rem;
+  position:relative;
+  box-sizing:border-box;
+  -webkit-appearance:textfield;
+  -moz-appearance:textfield;
+  appearance:textfield
+}
+
+.flatpickr-time input.flatpickr-hour{
+  font-weight:bold
+}
+
+.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{
+  font-weight:400
+}
+
+.flatpickr-time input:focus{
+  outline:0;
+  border:0
+}
+
+.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{
+  height:inherit;
+  float:left;
+  line-height:inherit;
+  color:#393939;
+  font-weight:bold;
+  width:2%;
+  -webkit-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+  align-self:center
+}
+
+.flatpickr-time .flatpickr-am-pm{
+  outline:0;
+  width:18%;
+  cursor:pointer;
+  text-align:center;
+  font-weight:400
+}
+
+.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{
+  background:#eee
+}
+
+.flatpickr-input[readonly]{
+  cursor:pointer
+}
+
+@-webkit-keyframes fpFadeInDown{
+  from{
+    opacity:0;
+    transform:translate3d(0,-20px,0)
+  }
+
+  to{
+    opacity:1;
+    transform:translate3d(0,0,0)
+  }
+}
+
+@keyframes fpFadeInDown{
+  from{
+    opacity:0;
+    transform:translate3d(0,-20px,0)
+  }
+
+  to{
+    opacity:1;
+    transform:translate3d(0,0,0)
+  }
+}
+
 /* stylelint-disable no-descending-specificity  */
 
 /*! tailwindcss v2.1.4 | MIT License | https://tailwindcss.com */
@@ -657,13 +1410,13 @@ a.xpl-avatar: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;
+  --tw-ring-offset-width: 2px
 }
 
 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;
+  transition-duration: 150ms
 }
 
 .dark a.xpl-avatar {
@@ -696,7 +1449,7 @@ a.xpl-avatar::after {
 }
 
 a.xpl-avatar:hover::after, a.xpl-avatar:active::after {
-  opacity: 0.2;
+  opacity: 0.2
 }
 
 .xpl-avatar--disabled {
@@ -706,7 +1459,7 @@ 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
 }
 
 .xpl-avatar__placeholder {
@@ -771,14 +1524,14 @@ a.xpl-avatar--pink:focus,
   height: 1.5rem;
   font-size: 0.625rem;
   line-height: 0.875rem;
-  width: 1.5rem;
+  width: 1.5rem
 }
 
 .xpl-avatar--md img, .xpl-avatar--md .xpl-avatar__placeholder {
   height: 2rem;
   font-size: 0.625rem;
   line-height: 0.875rem;
-  width: 2rem;
+  width: 2rem
 }
 
 .dark .xpl-avatar--primary .xpl-avatar__placeholder {
@@ -857,32 +1610,22 @@ a.xpl-avatar--primary:focus {
 .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)));
+  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)))
 }
 
 .xpl-avatar-group {
   display: flex;
-  overflow: hidden;
+  overflow: hidden
 }
 
 .xpl-avatar-group img {
+  box-shadow: 0 0 0 2px #fff;
   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;
@@ -893,6 +1636,16 @@ a.xpl-avatar--primary:focus {
   width: 2.5rem;
 }
 
+.dark .xpl-avatar-group img {
+  box-shadow: 0 0 0 2px var(--xpl-color-gray-900);
+}
+
+.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--reverse {
   position: relative;
   z-index: 0;
@@ -941,15 +1694,19 @@ a.xpl-avatar--primary:focus {
   opacity: 0.6;
 }
 
-.xpl-badge {
+.xpl-badge,
+button.xpl-badge {
   padding: 4px 12px;
+}
+
+.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;
   font-size: 0.75rem;
-  line-height: 1rem;
+  line-height: 1rem
 }
 
 .xpl-badge--dot::before {
@@ -963,19 +1720,23 @@ a.xpl-avatar--primary:focus {
   display: inline-block;
 }
 
-.dark .xpl-badge {
+.dark .xpl-badge,
+.dark button.xpl-badge {
   padding: 3px 11px;
+}
+
+.dark .xpl-badge, .dark button.xpl-badge {
   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(255, 255, 255, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
-.dark .xpl-badge::before {
+.dark .xpl-badge::before, .dark button.xpl-badge::before {
   --tw-bg-opacity: 1;
-  background-color: rgba(195, 173, 255, var(--tw-bg-opacity));
+  background-color: rgba(195, 173, 255, var(--tw-bg-opacity))
 }
 
 .xpl-badge--success {
@@ -1070,7 +1831,7 @@ a.xpl-button, button.xpl-button {
   align-items: center;
   font-weight: 500;
   font-size: 0.875rem;
-  line-height: 1.25rem;
+  line-height: 1.25rem
 }
 
 a.xpl-button:focus, button.xpl-button:focus {
@@ -1079,7 +1840,7 @@ a.xpl-button:focus, button.xpl-button: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;
+  --tw-ring-offset-width: 2px
 }
 
 a.xpl-button, button.xpl-button {
@@ -1087,7 +1848,7 @@ a.xpl-button, button.xpl-button {
   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;
+  transition-duration: 150ms
 }
 
 .xpl-button i.leading {
@@ -1122,7 +1883,7 @@ a.xpl-button, button.xpl-button {
 
 .dark a.xpl-button, .dark button.xpl-button {
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 a.xpl-button:hover,
@@ -1132,7 +1893,7 @@ button.xpl-button:hover {
 
 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);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
 a.xpl-button:focus,
@@ -1150,7 +1911,7 @@ button.xpl-button:disabled:hover {
 button.xpl-button:disabled, button.xpl-button:disabled:hover {
   cursor: not-allowed;
   --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
 .dark a.xpl-button:hover,
@@ -1176,13 +1937,13 @@ a.xpl-button--secondary, button.xpl-button--secondary {
   --tw-border-opacity: 1;
   border-color: rgba(234, 235, 239, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 .dark a.xpl-button--secondary, .dark button.xpl-button--secondary {
   background-color: transparent;
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
 a.xpl-button--secondary:hover,
@@ -1192,7 +1953,7 @@ button.xpl-button--secondary:hover {
 
 a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 .dark a.xpl-button--secondary:hover,
@@ -1201,7 +1962,7 @@ a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
 }
 
 .dark a.xpl-button--secondary:hover, .dark button.xpl-button--secondary:hover {
-  background-color: transparent;
+  background-color: transparent
 }
 
 .dark a.xpl-button--secondary:focus,
@@ -1214,51 +1975,57 @@ a.xpl-button--secondary:hover, button.xpl-button--secondary:hover {
   --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
+.dark button.xpl-button--secondary:disabled {
+  background-color: transparent;
+  --tw-border-opacity: 1;
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+}
+
 a.xpl-button--subtle, button.xpl-button--subtle {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
   border-style: none;
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 .dark a.xpl-button--subtle, .dark button.xpl-button--subtle {
   background-color: transparent;
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
 a.xpl-button--subtle:hover, button.xpl-button--subtle:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
 }
 
 a.xpl-button--subtle:focus, button.xpl-button--subtle:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(238, 239, 243, var(--tw-ring-opacity));
+  --tw-ring-color: rgba(238, 239, 243, var(--tw-ring-opacity))
 }
 
 a.xpl-button--subtle:active, button.xpl-button--subtle:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity))
 }
 
 .dark a.xpl-button--subtle:hover, .dark button.xpl-button--subtle:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+  background-color: rgba(54, 50, 64, 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(54, 50, 64, var(--tw-ring-opacity));
+  --tw-ring-color: rgba(54, 50, 64, var(--tw-ring-opacity))
 }
 
 .dark a.xpl-button--subtle:active, .dark button.xpl-button--subtle:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
+  background-color: rgba(60, 56, 71, var(--tw-bg-opacity))
 }
 
 a.xpl-button--warning, button.xpl-button--warning {
@@ -1267,7 +2034,7 @@ a.xpl-button--warning, button.xpl-button--warning {
   --tw-border-opacity: 1;
   border-color: rgba(194, 33, 15, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
 .dark a.xpl-button--warning, .dark button.xpl-button--warning {
@@ -1276,36 +2043,36 @@ a.xpl-button--warning, button.xpl-button--warning {
   --tw-border-opacity: 1;
   border-color: rgba(255, 147, 135, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 a.xpl-button--warning:hover, button.xpl-button--warning:hover, a.xpl-button--warning:active, button.xpl-button--warning:active {
   --tw-bg-opacity: 1;
   background-color: rgba(150, 19, 5, var(--tw-bg-opacity));
   --tw-border-opacity: 1;
-  border-color: rgba(150, 19, 5, var(--tw-border-opacity));
+  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));
+  --tw-ring-color: rgba(194, 33, 15, var(--tw-ring-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));
   --tw-border-opacity: 1;
-  border-color: rgba(248, 114, 99, var(--tw-border-opacity));
+  border-color: rgba(248, 114, 99, var(--tw-border-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));
+  --tw-ring-color: rgba(255, 147, 135, var(--tw-ring-opacity))
 }
 
 .dark a.xpl-button--warning:active, .dark button.xpl-button--warning:active {
   --tw-bg-opacity: 1;
-  background-color: rgba(248, 114, 99, var(--tw-bg-opacity));
+  background-color: rgba(248, 114, 99, var(--tw-bg-opacity))
 }
 
 a.xpl-button--sm,
@@ -1316,7 +2083,7 @@ button.xpl-button--sm {
 
 a.xpl-button--sm, button.xpl-button--sm {
   font-size: 0.75rem;
-  line-height: 1rem;
+  line-height: 1rem
 }
 
 a.xpl-button--xs,
@@ -1327,7 +2094,7 @@ button.xpl-button--xs {
 
 a.xpl-button--xs, button.xpl-button--xs {
   font-size: 0.625rem;
-  line-height: 0.875rem;
+  line-height: 0.875rem
 }
 
 a.xpl-button--icon-only,
@@ -1338,7 +2105,7 @@ button.xpl-button--icon-only {
 a.xpl-button--icon-only, button.xpl-button--icon-only {
   padding-right: 0px;
   padding-left: 0px;
-  text-align: center;
+  text-align: center
 }
 
 a.xpl-button--sm.xpl-button--icon-only,
@@ -1364,6 +2131,70 @@ button.xpl-button--xs.xpl-button--icon-only {
   transform: scale(1);
 }
 
+.xpl-button-row {
+  --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 {
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+}
+
+.xpl-button-row-inner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.xpl-button-row xpl-button + xpl-button .xpl-button {
+  margin-left: 1rem;
+}
+
+.xpl-button-row__right .xpl-button--secondary {
+  display: none;
+}
+
+@media screen and (max-width: 640px) {
+  .xpl-button-row-inner {
+    display: block;
+  }
+
+  .xpl-button-row xpl-button + xpl-button .xpl-button {
+    margin-left: 0px;
+  }
+
+  .xpl-button-row button.xpl-button {
+    justify-content: center;
+    margin-bottom: 1rem;
+    width: 100%;
+  }
+
+  .xpl-button-row__left .xpl-button--secondary {
+    display: none;
+  }
+
+  .xpl-button-row__right .xpl-button--secondary {
+    display: block;
+  }
+
+  /* so that tertiary appears below primary */
+
+  .xpl-button-row__right {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* target the first because we're reversing it */
+
+  .xpl-button-row__right xpl-button:first-child .xpl-button {
+    margin-bottom: 0px;
+  }
+}
+
 .xpl-breadcrumbs ol {
     color: var(--xpl-color-text-secondary-lm);
   }
@@ -1379,7 +2210,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-breadcrumbs ol span {
       display: grid;
-      align-content: center;
+      align-content: center
 }
 
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:hover {
@@ -1387,7 +2218,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       }
 
 .xpl-breadcrumbs ol .xpl-breadcrumb-item a, .xpl-breadcrumbs ol .xpl-breadcrumb-item button, .xpl-breadcrumbs ol .xpl-breadcrumb-item span {
-        padding-right: 0.5rem;
+        padding-right: 0.5rem
       }
 
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
@@ -1396,10 +2227,14 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 @media (min-width: 768px) {
         .xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
-          display: flex;
+          display: flex
         }
       }
 
+.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);
       }
@@ -1412,22 +2247,26 @@ button.xpl-button--xs.xpl-button--icon-only {
           display: none;
         }
 
+.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child .flatpickr-dayspan{
+          visibility:hidden
+        }
+
 .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
         cursor: default;
         pointer-events: none;
-        text-decoration: none;
+        text-decoration: none
 }
 
 .xpl-breadcrumbs ol .xpl-breadcrumb-item {
       display: flex;
-      align-content: center;
+      align-content: center
 }
 
 .xpl-breadcrumbs ol {
     display: flex;
     align-content: center;
     font-size: 0.875rem;
-    line-height: 1.25rem;
+    line-height: 1.25rem
 }
 
 /* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */
@@ -1453,99 +2292,116 @@ button.xpl-button--xs.xpl-button--icon-only {
     }
 
 /**
- * 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.
+ * Since the UIs for checkboxes and radios are so
+ * similar, both components find their styles here.
  */
 
-.xpl-checkbox-container {
+.xpl-checkbox-radio-container {
   display: flex;
   margin-bottom: 1.5rem;
 }
 
+.xpl-checkbox-radio-container.styled {
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  border-radius: 0.375rem;
+  border-width: 1px;
+  overflow: hidden;
+  position: relative;
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dark .xpl-checkbox-radio-container.styled {
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+}
+
+.xpl-checkbox-radio-container.styled.disabled {
+  /* override hover */
+  --tw-border-opacity: 1 !important;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity)) !important;
+}
+
+.dark .xpl-checkbox-radio-container.styled.disabled {
+  /* override hover */
+  --tw-border-opacity: 1 !important;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity)) !important;
+}
+
+.xpl-checkbox-radio-container.styled:hover,
+.xpl-checkbox-radio-container.styled:focus-within {
+  border-color: var(--xpl-color-secondary-lm);
+}
+
+.dark .xpl-checkbox-radio-container.styled:hover,
+.dark .xpl-checkbox-radio-container.styled:focus-within {
+  border-color: var(--xpl-color-secondary-dm);
+}
+
 .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));
+  --tw-border-opacity: 1;
+  border-color: rgba(153, 155, 168, var(--tw-border-opacity));
   border-width: 1px;
   cursor: pointer;
 }
 
 .xpl-checkbox:focus {
   outline: 2px solid transparent;
-  outline-offset: 2px;
+  outline-offset: 2px
 }
 
 .xpl-checkbox {
-  position: relative;
+  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;
+  --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;
+.xpl-checkbox {
+  transition-property: background-color, border-color, color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  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-color-secondary-lm);
+  --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));
 }
 
+.xpl-checkbox:hover,
+.xpl-checkbox:checked,
 .xpl-checkbox:indeterminate {
-  background-color: var(--xpl-color-secondary-lm);
   border-color: var(--xpl-color-secondary-lm);
 }
 
-.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-color-secondary-lm);
+.xpl-checkbox:checked,
+.xpl-checkbox:indeterminate {
+  background-color: var(--xpl-color-secondary-lm);
 }
 
 .xpl-checkbox:disabled {
-  border-color: #e4e6eb; /* gray 200 */
   --tw-bg-opacity: 1;
-  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
   cursor: not-allowed;
 }
 
@@ -1553,160 +2409,1558 @@ button.xpl-button--xs.xpl-button--icon-only {
   --tw-ring-color: var(--xpl-color-secondary-lm);
 }
 
-.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-radio-container.styled input {
+  --tw-ring-color: transparent;
+  --tw-ring-offset-color: transparent;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  position: absolute;
 }
 
-.xpl-checkbox:hover::after, .xpl-checkbox:checked::after {
-  opacity: 1;
+.xpl-checkbox-radio-container input + label {
+  cursor: pointer;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  vertical-align: middle;
 }
 
-.dark .xpl-checkbox:hover {
-  background-color: #545d6e;
-  border-color: #545d6e;
+.xpl-checkbox-radio-container.styled label {
+  display: block;
+  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;
 }
 
-.dark .xpl-checkbox:checked {
-  background-color: var(--xpl-color-secondary-dm);
+.xpl-checkbox-radio-container.styled input:disabled + label {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
 }
 
-.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");
+.xpl-checkbox-radio-container.styled input:checked + label, .xpl-checkbox-radio-container.styled .xpl-checkbox:indeterminate + label {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 242, 255, var(--tw-bg-opacity))
 }
 
-.dark .xpl-checkbox:indeterminate {
-  background-color: var(--xpl-color-secondary-dm);
-  border-color: var(--xpl-color-secondary-dm);
+.dark .xpl-checkbox-radio-container.styled input:disabled + label {
+  --tw-bg-opacity: 1;
+  background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
 }
 
-.dark .xpl-checkbox:active,
-.dark .xpl-checkbox:checked {
-  border-color: var(--xpl-color-secondary-dm);
+.dark .xpl-checkbox-radio-container.styled input:checked + label, .dark .xpl-checkbox-radio-container.styled .xpl-checkbox:indeterminate + label {
+  --tw-bg-opacity: 1;
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity))
 }
 
-.dark .xpl-checkbox:disabled {
-  background-color: #666d7d;
-  border-color: #666d7d;
+.xpl-checkbox-radio-container.styled .xpl-checkbox:disabled:indeterminate + label {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+}
+
+.xpl-checkbox::after {
+  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:focus {
   --tw-ring-color: var(--xpl-color-secondary-dm);
 }
 
-.xpl-checkbox + label {
-  cursor: pointer;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding-right: 1rem;
-  padding-left: 1rem;
-  vertical-align: middle;
+.dark .xpl-checkbox:hover,
+.dark .xpl-checkbox:checked,
+.dark .xpl-checkbox:indeterminate {
+  border-color: var(--xpl-color-secondary-dm);
 }
 
-.xpl-checkbox:disabled + label {
-  color: #666d7d;
-  cursor: not-allowed;
+.dark .xpl-checkbox:checked,
+.dark .xpl-checkbox:indeterminate {
+  background-color: var(--xpl-color-secondary-dm);
 }
 
-.dark .xpl-checkbox + label {
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+.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));
 }
 
-.dark .xpl-checkbox:disabled + label {
-  color: #ced3db;
+.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))
 }
 
-.xpl-checkbox + label small {
-  display: block;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+.xpl-checkbox-radio-container.styled .xpl-checkbox:focus {
+  --tw-ring-color: transparent;
+  --tw-border-opacity: 1;
+  border-color: rgba(153, 155, 168, var(--tw-border-opacity));
 }
 
-.dark .xpl-checkbox + label small {
-  color: #ced3db;
+.xpl-checkbox-radio-container.styled .xpl-checkbox:checked:focus {
+  border-color: var(--xpl-color-secondary-lm);
 }
 
-.xpl-content-area-wrapper {
-  min-width: 0;
+.xpl-checkbox:indeterminate::after {
+  background-position: calc(50% - 1px) calc(50% - 1px);
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5L10 2.5L10 4.5L0 4.5Z' fill='white'/%3E%3C/svg%3E%0A");
+  opacity: 1;
 }
 
-.xpl-content-area-wrapper__wide {
-    padding: 1.5rem;
-  }
-
-@media (min-width: 768px) {
-    .xpl-content-area-wrapper__wide {
-      padding: 2rem;
-    }
-  }
+.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");
+  background-position: calc(50% - 1px) calc(50% - 1px);
+  opacity: 1;
+}
 
-.xpl-content-area-wrapper__narrow {
-    grid-template-areas: ". content .";
-    grid-template-columns: minmax(15%, auto) minmax(auto, 840px) minmax(15%, auto);
-  }
+.dark .xpl-checkbox::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='%23292632'/%3E%3C/svg%3E%0A");
+}
 
-.xpl-content-area-wrapper__narrow .xpl-content-area {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-      grid-column: span 1 / span 1;
-      grid-column-start: 2;
-    }
+.dark .xpl-checkbox:indeterminate::after {
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5L10 2.5L10 4.5L0 4.5Z' fill='%23292632'/%3E%3C/svg%3E%0A");
+}
 
-@media (max-width: 1023px) {
+.xpl-radio {
+  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;
+  --tw-border-opacity: 1;
+  border-color: rgba(153, 155, 168, var(--tw-border-opacity));
+  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: var(--xpl-color-gray-1200);
+}
+
+.xpl-radio:checked {
+  border-width: 5px;
+}
+
+.xpl-radio:hover,
+.xpl-radio:active,
+.xpl-radio:checked {
+  border-color: var(--xpl-color-secondary-lm);
+}
+
+.xpl-radio:focus {
+  --tw-ring-color: var(--xpl-color-secondary-lm);
+}
+
+.xpl-radio:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  cursor: not-allowed;
+}
+
+.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));
+}
+
+.dark .xpl-radio:hover,
+.dark .xpl-radio:active,
+.dark .xpl-radio:checked {
+  border-color: var(--xpl-color-secondary-dm);
+}
+
+.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));
+}
+
+.dark .xpl-radio:focus {
+  --tw-ring-color: var(--xpl-color-secondary-dm);
+}
+
+.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));
+}
+
+.xpl-choicelist-heading {
+  margin-bottom: 0.5rem;
+}
+
+.xpl-choicelist-heading > h3 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+}
+
+.dark .xpl-choicelist-heading > h3 {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-choicelist-heading > p {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-choicelist-heading > p {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.xpl-choicelist {
+  display: block;
+  margin: 0px;
+  padding: 0px;
+}
+
+.xpl-choicelist li {
+  margin-bottom: 1rem;
+}
+
+/* override default checkbox/radio styling in choicelists */
+
+.xpl-choicelist .xpl-checkbox-radio-container {
+  margin-bottom: 0px;
+}
+
+.xpl-choicelist--styled {
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  border-radius: 0.375rem;
+  border-width: 1px;
+  overflow: hidden;
+}
+
+.dark .xpl-choicelist--styled {
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+}
+
+.xpl-choicelist--styled .xpl-radio-container, .xpl-choicelist--styled .xpl-checkbox-container {
+  margin-bottom: 0px
+}
+
+.xpl-choicelist--styled li {
+  --tw-border-opacity: 1;
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  border-width: 1px;
+  border-top-width: 0px;
+  border-right-width: 0px;
+  border-left-width: 0px;
+  display: block;
+  margin-bottom: 0px;
+  position: relative;
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dark .xpl-choicelist--styled li {
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+}
+
+.xpl-choicelist--styled li:last-child {
+  border-bottom-width: 0px;
+}
+
+.xpl-choicelist--styled li.selected {
+  --tw-bg-opacity: 1;
+  background-color: rgba(244, 242, 255, var(--tw-bg-opacity));
+}
+
+.dark .xpl-choicelist--styled li.selected {
+  --tw-bg-opacity: 1;
+  background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+}
+
+.xpl-choicelist--styled input {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  position: absolute;
+}
+
+.xpl-choicelist--styled label {
+  display: block;
+  padding-top: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+  width: 100%;
+}
+
+.xpl-choicelist--styled .xpl-checkbox + label, .xpl-choicelist--styled .xpl-radio + label {
+  padding-left: 3rem
+}
+
+.xpl-content-area-wrapper {
+  min-width: 0;
+}
+
+.xpl-content-area-wrapper__wide {
+    padding: 1.5rem;
+  }
+
+@media (min-width: 768px) {
+    .xpl-content-area-wrapper__wide {
+      padding: 2rem
+    }
+  }
+
+.xpl-content-area-wrapper__narrow {
+    grid-template-areas: ". content .";
+    grid-template-columns: minmax(15%, auto) minmax(auto, 840px) minmax(15%, auto);
+  }
+
+.xpl-content-area-wrapper__narrow .xpl-content-area {
+      padding-top: 5rem;
+      padding-bottom: 5rem;
+      grid-column: span 1 / span 1;
+      grid-column-start: 2;
+    }
+
+@media (max-width: 1023px) {
 
 .xpl-content-area-wrapper__narrow .xpl-content-area {
         padding: 0px;
 
-        grid-template-columns: none
-    }
-      }
+        grid-template-columns: none
+    }
+      }
+
+@media (max-width: 1023px) {
+
+.xpl-content-area-wrapper__narrow {
+      padding: 1.5rem;
+
+      grid-template-columns: none;
+
+      grid-template-rows: none;
+  }
+    }
+
+.xpl-content-area-wrapper__narrow {
+    display: grid;
+    justify-items: center;
+    grid-auto-flow: column
+}
+
+.xpl-content-area-wrapper__full {
+    max-width: none;
+    padding: 1.5rem;
+  }
+
+@media (min-width: 640px) {
+    .xpl-content-area-wrapper__full {
+      padding: 2rem
+    }
+  }
+
+@media (min-width: 1024px) {
+    .xpl-content-area-wrapper__full {
+      padding: 0px
+    }
+  }
+
+.xpl-content-area-wrapper {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
+}
+
+.dark .xpl-content-area-wrapper {
+  background-color: var(--xpl-color-gray-1200);
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .xpl-divider {
+    --tw-border-opacity: 1;
+    border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+  }
+
+.xpl-divider {
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  border-bottom-width: 1px;
+  display: block;
+  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;
+}
+
+.xpl-divider--2 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.xpl-divider--1 {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.xpl-divider--0 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-divider--0 {
+  padding-bottom: 0px
+}
+
+.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;
+  --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-y: -0.5rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.xpl-dropdown ul {
+  max-height: 300px;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.dark .xpl-dropdown {
+  --tw-bg-opacity: 1;
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+}
+
+.xpl-dropdown.active {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: 50;
+  --tw-translate-y: 0.5rem;
+}
+
+.xpl-dropdown button {
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-align: left;
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  width: 100%;
+}
+
+.xpl-dropdown button:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.xpl-dropdown button:hover {
+  background-color: var(--xpl-color-secondary-bg-lm);
+}
+
+.dark .xpl-dropdown button {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .xpl-dropdown button:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.dark .xpl-dropdown button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
+}
+
+.xpl-dropdown button.selected {
+  background-color: var(--xpl-color-secondary-bg-lm);
+  border-right: 4px solid var(--xpl-color-secondary-lm);
+}
+
+.dark .xpl-dropdown button.selected {
+  border-right: 4px solid var(--xpl-color-secondary-dm);
+  --tw-bg-opacity: 1;
+  background-color: rgba(24, 22, 31, var(--tw-bg-opacity));
+}
+
+.xpl-dropdown.xpl-dropdown--multi button.selected {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%236923F4'/%3E%3C/svg%3E%0A");
+  background-position: calc(100% - 16px) center;
+  background-repeat: no-repeat;
+  border: 0 none;
+}
+
+.dark .xpl-dropdown.xpl-dropdown--multi button.selected {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%23C3ADFF'/%3E%3C/svg%3E%0A");
+}
+
+.xpl-dropdown span {
+  --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;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+  width: 100%;
+}
+
+.dark .xpl-dropdown span {
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+/* Flatpickr overrides */
+
+[class^="flatpickr-"] {
+  font-family: var(--xpl-font-family-default);
+}
+
+.flatpickr-calendar {
+  border: 1px solid #e1e2e8;
+  box-shadow: 0 4px 6px -2px #0000000d, 0 10px 15px -3px #0000001a;
+}
+
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(-13px, -20px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(-13px, 8px, 0);
+  }
+}
+
+.flatpickr-calendar.animate.arrowTop {
+  transform: translate3d(-13px, 8px, 0);
+}
+
+@-webkit-keyframes fpFadeInDownAdjust {
+  from {
+    opacity: 0;
+    transform: translate3d(-13px, -28px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(-13px, -8px, 0);
+  }
+}
+
+@keyframes fpFadeInDownAdjust {
+  from {
+    opacity: 0;
+    transform: translate3d(-13px, -28px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(-13px, -8px, 0);
+  }
+}
+
+.flatpickr-calendar.animate.arrowBottom {
+  -webkit-animation-name: fpFadeInDownAdjust;
+          animation-name: fpFadeInDownAdjust;
+  transform: translate3d(-13px, -8px, 0);
+}
+
+.dark .flatpickr-calendar {
+  border-color: #302d3b;
+  box-shadow: 0 4px 6px -2px #0000000d, 0 10px 15px -3px #0000001a;
+  --tw-bg-opacity: 1;
+  background-color: rgba(60, 56, 71, var(--tw-bg-opacity));
+}
+
+.flatpickr-calendar::before,
+.flatpickr-calendar::after {
+  display: none !important;
+}
+
+.flatpickr-months {
+  padding: 0.5rem;
+}
+
+.flatpickr-months .flatpickr-month {
+  height: 40px;
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+}
+
+.dark .flatpickr-months .flatpickr-month {
+  --tw-bg-opacity: 1;
+  background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+  left: 75%;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  box-sizing: border-box; /* don't know why this gets unset :-\ */
+  height: 40px;
+}
+
+.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
+  padding-top: 0.75rem;
+  top: 0.5rem
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+  right: 0.5rem
+}
+
+.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
+}
+
+.dark .flatpickr-months .flatpickr-prev-month,
+.dark .flatpickr-months .flatpickr-next-month {
+  fill: var(--xpl-color-text-primary-dm);
+}
+
+.dark .flatpickr-months .flatpickr-prev-month, .dark .flatpickr-months .flatpickr-next-month {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.dark .flatpickr-months .flatpickr-prev-month:hover, .dark .flatpickr-months .flatpickr-next-month:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(41, 38, 50, var(--tw-bg-opacity))
+}
+
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  fill: var(--xpl-color-text-primary-lm);
+}
+
+.flatpickr-months .flatpickr-prev-month:hover path,
+.flatpickr-months .flatpickr-next-month:hover path {
+  fill: var(--xpl-color-secondary-lm);
+}
+
+.dark .flatpickr-months .flatpickr-prev-month svg path,
+.dark .flatpickr-months .flatpickr-next-month svg path {
+  fill: #fff;
+}
+
+.dark .flatpickr-months .flatpickr-prev-month:hover path,
+.dark .flatpickr-months .flatpickr-next-month:hover path {
+  fill: var(--xpl-color-secondary-dm);
+}
+
+.flatpickr-current-month {
+  font-size: 100%;
+  height: 40px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: 0px;
+  left: 0px;
+  text-align: left;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  font-weight: 500;
+  height: 40px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  margin: 0px;
+  padding: 0.5rem;
+}
+
+.flatpickr-current-month .numInputWrapper {
+  width: 64px;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+
+.flatpickr-current-month input.cur-year {
+  font-weight: 500;
+  height: 40px;
+  padding: 0.5rem;
+  padding-right: 1rem;
+}
+
+.numInputWrapper:hover, .flatpickr-current-month input.cur-year:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity))
+}
+
+.numInputWrapper span {
+  border-width: 0px;
+}
+
+.numInputWrapper span:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months option {
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+}
+
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months option {
+  color: #fff;
+}
+
+.dark .flatpickr-current-month input.cur-year {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .numInputWrapper:hover, .dark .flatpickr-current-month input.cur-year:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(41, 38, 50, var(--tw-bg-opacity))
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowUp::after {
+  bottom: 4px;
+  top: unset;
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowDown::after {
+  top: 4px;
+}
+
+.dark .flatpickr-current-month .numInputWrapper span.arrowUp::after,
+.dark .flatpickr-current-month .numInputWrapper span.arrowDown::after {
+  border-bottom-color: var(--xpl-color-text-primary-dm);
+}
+
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(41, 38, 50, var(--tw-bg-opacity));
+}
+
+.flatpickr-day {
+  line-height: 2.3rem;
+}
+
+.rangeMode .flatpickr-day {
+  margin-top: 0px;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background-color: var(--xpl-color-secondary-lm);
+  border-color: var(--xpl-color-secondary-lm);
+}
+
+.dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange, .dark .flatpickr-day.selected.inRange, .dark .flatpickr-day.startRange.inRange, .dark .flatpickr-day.endRange.inRange, .dark .flatpickr-day.selected:focus, .dark .flatpickr-day.startRange:focus, .dark .flatpickr-day.endRange:focus, .dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange:hover, .dark .flatpickr-day.endRange:hover, .dark .flatpickr-day.selected.prevMonthDay, .dark .flatpickr-day.startRange.prevMonthDay, .dark .flatpickr-day.endRange.prevMonthDay, .dark .flatpickr-day.selected.nextMonthDay, .dark .flatpickr-day.startRange.nextMonthDay, .dark .flatpickr-day.endRange.nextMonthDay {
+    background-color: var(--xpl-color-secondary-dm);
+    border-color: var(--xpl-color-secondary-dm);
+    color: var(--xpl-color-text-reverse-dm);
+  }
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  background-color: var(--xpl-color-secondary-bg-lm);
+  border-color: var(--xpl-color-secondary-bg-lm);
+}
+
+.flatpickr-day.inRange {
+  box-shadow: -5px 0 0 var(--xpl-color-secondary-bg-lm), 5px 0 0 var(--xpl-color-secondary-bg-lm);
+}
+
+.dark .flatpickr-day.inRange {
+    box-shadow: -5px 0 0 var(--xpl-color-secondary-bg-dm), 5px 0 0 var(--xpl-color-secondary-bg-dm);
+  }
+
+.dark .flatpickr-day {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .flatpickr-day.inRange,
+.dark .flatpickr-day.prevMonthDay.inRange,
+.dark .flatpickr-day.nextMonthDay.inRange,
+.dark .flatpickr-day.today.inRange,
+.dark .flatpickr-day.prevMonthDay.today.inRange,
+.dark .flatpickr-day.nextMonthDay.today.inRange,
+.dark .flatpickr-day:hover,
+.dark .flatpickr-day.prevMonthDay:hover,
+.dark .flatpickr-day.nextMonthDay:hover,
+.dark .flatpickr-day:focus,
+.dark .flatpickr-day.prevMonthDay:focus,
+.dark .flatpickr-day.nextMonthDay:focus {
+  background-color: var(--xpl-color-secondary-bg-dm);
+  border-color: var(--xpl-color-secondary-bg-dm);
+  color: var(--xpl-color-secondary-dm);
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  box-shadow: -10px 0 0 var(--xpl-color-secondary-bg-lm);
+}
+
+.dark .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.dark .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.dark .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  box-shadow: -10px 0 0 var(--xpl-color-secondary-bg-dm);
+}
+
+span.flatpickr-weekday {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+}
+
+.dark span.flatpickr-weekday {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.xpl-grid-item {
+  flex-shrink: 0;
+  margin-right: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media screen and (max-width: 639px) {
+  .xpl-grid-item-xs-1 {
+    flex: 0 0 calc(16.667% - 20px);
+  }
+
+  .xpl-grid-item-xs-2 {
+    flex: 0 0 calc(33.333% - 16px);
+  }
+
+  .xpl-grid-item-xs-3 {
+    flex: 0 0 calc(50% - 12px);
+  }
+
+  .xpl-grid-item-xs-4 {
+    flex: 0 0 calc(66.667% - 8px);
+  }
+
+  .xpl-grid-item-xs-5 {
+    flex: 0 0 calc(83.333% - 4px);
+  }
+
+  .xpl-grid-item-xs-6 {
+    flex: 0 0 100%;
+  }
+
+  .xpl-grid-item-xs-last {
+    margin-right: 0px;
+  }
+}
+
+@media screen and (min-width: 640px) and (max-width: 1023px) {
+  .xpl-grid-item-sm-1 {
+    flex: 0 0 calc(16.667% - 20px);
+  }
+
+  .xpl-grid-item-sm-2 {
+    flex: 0 0 calc(33.333% - 16px);
+  }
+
+  .xpl-grid-item-sm-3 {
+    flex: 0 0 calc(50% - 12px);
+  }
+
+  .xpl-grid-item-sm-4 {
+    flex: 0 0 calc(66.667% - 8px);
+  }
+
+  .xpl-grid-item-sm-5 {
+    flex: 0 0 calc(83.333% - 4px);
+  }
+
+  .xpl-grid-item-sm-6 {
+    flex: 0 0 100%;
+  }
+
+  .xpl-grid-item-sm-last {
+    margin-right: 0px;
+  }
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .xpl-grid-item-md-1 {
+    flex: 0 0 calc(16.667% - 20px);
+  }
+
+  .xpl-grid-item-md-2 {
+    flex: 0 0 calc(33.333% - 16px);
+  }
+
+  .xpl-grid-item-md-3 {
+    flex: 0 0 calc(50% - 12px);
+  }
+
+  .xpl-grid-item-md-4 {
+    flex: 0 0 calc(66.667% - 8px);
+  }
+
+  .xpl-grid-item-md-5 {
+    flex: 0 0 calc(83.333% - 4px);
+  }
+
+  .xpl-grid-item-md-6 {
+    flex: 0 0 100%;
+  }
+
+  .xpl-grid-item-md-last {
+    margin-right: 0px;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .xpl-grid-item-lg-1 {
+    flex: 0 0 calc(16.667% - 20px);
+  }
+
+  .xpl-grid-item-lg-2 {
+    flex: 0 0 calc(33.333% - 16px);
+  }
+
+  .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-input {
+  display: block;
+  position: relative;
+}
+
+.xpl-input input {
+  height: 44px;
+  background-color: transparent;
+  display: block;
+  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 {
+  pointer-events: none;
+  position: absolute;
+  right: 0.75rem;
+}
+
+button[class^="xpl-input-password"] {
+  cursor: pointer;
+  height: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+.xpl-input-calendar path,
+[class^="xpl-input-password"] path {
+  fill: var(--xpl-color-text-primary-lm);
+}
+
+.xpl-input-error path {
+  fill: var(--xpl-color-text-warning-lm);
+}
+
+.dark .xpl-input-calendar path,
+.dark [class^="xpl-input-password"] path {
+  fill: #fff;
+}
+
+.xpl-input textarea {
+  min-height: 44px;
+  height: 98px;
+  background-color: transparent;
+  display: block;
+  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 {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
+}
+
+.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))
+}
+
+.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))
+}
+
+.xpl-input input:read-only:not(:disabled)::-moz-placeholder, .xpl-input textarea:read-only:not(:disabled)::-moz-placeholder {
+  color: var(--xpl-color-text-primary-lm);
+}
+
+.xpl-input input:read-only:not(:disabled):-ms-input-placeholder, .xpl-input textarea:read-only:not(:disabled):-ms-input-placeholder {
+  color: var(--xpl-color-text-primary-lm);
+}
+
+.xpl-input input:-moz-read-only:not(:disabled)::placeholder, .xpl-input textarea:-moz-read-only:not(:disabled)::placeholder {
+  color: var(--xpl-color-text-primary-lm);
+}
+
+.xpl-input input:read-only:not(:disabled)::placeholder,
+.xpl-input textarea:read-only:not(:disabled)::placeholder {
+  color: var(--xpl-color-text-primary-lm);
+}
+
+.xpl-input input:disabled, .xpl-input textarea:disabled {
+  background-color: transparent;
+  cursor: not-allowed
+}
+
+.xpl-input-label {
+  cursor: pointer;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.dark .xpl-input-label {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-input-label small {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-input-label small {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.xpl-input--disabled .xpl-input-label {
+  cursor: not-allowed;
+}
+
+.xpl-input-wrapper {
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  border-radius: 0.375rem;
+  border-width: 1px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  padding-left: 0.75rem;
+  position: relative;
+}
+
+.xpl-input-wrapper:focus-within {
+  border-color: var(--xpl-color-secondary-lm);
+}
+
+.xpl-input--disabled .xpl-input-wrapper {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+  cursor: not-allowed;
+}
+
+.dark .xpl-input-wrapper {
+  --tw-border-opacity: 1;
+  border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+}
+
+.xpl-input--error .xpl-input-wrapper {
+  --tw-border-opacity: 1;
+  border-color: rgba(219, 50, 31, var(--tw-border-opacity));
+}
+
+.dark .xpl-input--disabled .xpl-input-wrapper {
+  --tw-bg-opacity: 1;
+  background-color: rgba(54, 50, 64, var(--tw-bg-opacity));
+}
+
+.dark .xpl-input--error .xpl-input-wrapper {
+  --tw-border-opacity: 1;
+  border-color: rgba(255, 147, 135, var(--tw-border-opacity));
+}
+
+.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;
+}
+
+.dark .xpl-input-wrapper label {
+  color: var(--xpl-color-text-secondary-dm);
+}
+
+.xpl-input-wrapper label.xpl-input-pre {
+  flex-shrink: 0;
+  padding-left: 0px;
+}
+
+.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;
+}
+
+.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));
+}
+
+.dark .xpl-input-wrapper:focus-within {
+  border-color: var(--xpl-color-secondary-dm);
+}
+
+.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;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-input-characters {
+  background-color: #fff4;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-input--disabled .xpl-input-characters {
+  background-color: transparent;
+}
+
+.xpl-input--error .xpl-input-characters {
+  --tw-text-opacity: 1;
+  color: rgba(194, 33, 15, var(--tw-text-opacity));
+}
+
+.dark .xpl-input--error .xpl-input-characters {
+  --tw-text-opacity: 1;
+  color: rgba(255, 147, 135, var(--tw-text-opacity));
+}
+
+.xpl-input-error {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding-top: 0.25rem;
+  text-align: right;
+  --tw-text-opacity: 1;
+  color: rgba(194, 33, 15, var(--tw-text-opacity));
+}
+
+.dark .xpl-input-error {
+  --tw-text-opacity: 1;
+  color: rgba(255, 147, 135, var(--tw-text-opacity));
+}
+
+.xpl-input-error svg {
+  top: 1px;
+  margin-right: 0.5rem;
+  position: relative;
+}
+
+.dark .xpl-input-error path {
+  fill: var(--xpl-color-text-warning-dm);
+}
+
+.xpl-label {
+  cursor: pointer;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding-bottom: 0.25rem;
+  width: 100%;
+}
+
+.xpl-label--disabled {
+  cursor: not-allowed !important;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+small.xpl-description {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.xpl-description--disabled {
+  cursor: not-allowed !important;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-label {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.dark .xpl-label--disabled {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.dark .xpl-description {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.dark .xpl-description--disabled {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.xpl-list-item {
+  --tw-border-opacity: 1;
+  border-color: rgba(225, 226, 232, var(--tw-border-opacity));
+  border-radius: 0.375rem;
+  border-width: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  text-align: left;
+  --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-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-list-left {
+  display: flex;
+  flex-shrink: 0;
+  margin-right: 2rem;
+}
+
+.xpl-list-right div:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
 
-@media (max-width: 1023px) {
+a.xpl-list-item {
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z' fill='%236A6D7D'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 1rem) center;
+  padding-right: 2.25rem;
+}
 
-.xpl-content-area-wrapper__narrow {
-      padding: 1.5rem;
+a.xpl-list-item:hover {
+  --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)
+}
 
-      grid-template-columns: none;
+a.xpl-list-item {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
+}
 
-      grid-template-rows: none;
-  }
-    }
+.dark a.xpl-list-item {
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z' fill='%23999BA8'/%3E%3C/svg%3E%0A");
+}
 
-.xpl-content-area-wrapper__narrow {
-    display: grid;
-    justify-items: center;
-    grid-auto-flow: column;
+a.xpl-list-item:focus {
+  border-color: var(--xpl-color-secondary-lm);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 
-.xpl-content-area-wrapper__full {
-    max-width: none;
-    padding: 1.5rem;
+.dark a.xpl-list-item:focus {
+  border-color: var(--xpl-color-secondary-dm);
+}
+
+.xpl-list-item:last-child {
+  margin-bottom: 0px;
+}
+
+.xpl-list-item xpl-avatar {
+  flex-shrink: 0;
+  margin-right: 1rem;
+}
+
+.xpl-list-item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
+.xpl-list-item-metadata {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+}
+
+.xpl-list-item-metadata li {
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  margin-right: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-list-item-metadata li {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.xpl-list-item-metadata li:last-child {
+  margin-right: 0px;
+}
+
+.xpl-list-item-subtext {
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+}
+
+.dark .xpl-list-item-subtext {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.xpl-list-item .xpl-avatar--group {
+  justify-content: flex-end;
+}
+
+.xpl-list-item xpl-badge {
+  margin-right: 0.5rem;
+}
+
+@media screen and (max-width: 640px) {
+  .xpl-list-item {
+    align-items: flex-start;
   }
 
-@media (min-width: 640px) {
-    .xpl-content-area-wrapper__full {
-      padding: 2rem;
-    }
+  .xpl-list-item-content {
+    display: block;
   }
 
-@media (min-width: 1024px) {
-    .xpl-content-area-wrapper__full {
-      padding: 0px;
-    }
+  ul.xpl-list-item-metadata {
+    margin-bottom: 0.25rem;
   }
 
-.xpl-content-area-wrapper {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
-}
+  .xpl-list-item-metadata li {
+    display: block;
+  }
 
-.dark .xpl-content-area-wrapper {
-  background-color: var(--xpl-color-gray-1200);
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  .xpl-list-item .xpl-avatar--group {
+    justify-content: flex-start;
+  }
 }
 
 /* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */
@@ -1726,7 +3980,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-main-nav nav {
     display: grid;
     height: 100%;
-    overflow-y: auto;
+    overflow-y: auto
 }
 
 /* Brand Section */
@@ -1751,7 +4005,7 @@ button.xpl-button--xs.xpl-button--icon-only {
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
-    padding: 1rem;
+    padding: 1rem
 }
 
 /* Width for different screen sizes */
@@ -1771,7 +4025,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-main-nav__md .xpl-nav-item a {
         display: grid;
         justify-items: center;
-        grid-auto-flow: row;
+        grid-auto-flow: row
 }
 
 .xpl-main-nav__md .xpl-avatar {
@@ -1786,6 +4040,10 @@ button.xpl-button--xs.xpl-button--icon-only {
           display: none;
         }
 
+.xpl-main-nav__sm .xpl-nav-item a .flatpickr-dayp{
+          visibility:hidden
+        }
+
 .xpl-main-nav__sm .xpl-nav-item a svg {
           margin-right: 0px;
         }
@@ -1793,7 +4051,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-main-nav__sm .xpl-nav-item a {
         display: grid;
         justify-items: center;
-        grid-auto-flow: row;
+        grid-auto-flow: row
 }
 
 .xpl-main-nav__sm .xpl-nav-item a, .xpl-main-nav__md .xpl-nav-item a {
@@ -1808,10 +4066,14 @@ button.xpl-button--xs.xpl-button--icon-only {
         display: none;
       }
 
+.xpl-main-nav__sm header .flatpickr-dayp,.xpl-main-nav__md header .flatpickr-dayp{
+        visibility:hidden
+      }
+
 .xpl-main-nav__sm header, .xpl-main-nav__md header {
       align-content: center;
       justify-content: center;
-      margin-top: 1rem;
+      margin-top: 1rem
 }
 
 .xpl-main-nav__sm footer .xpl-avatar, .xpl-main-nav__md footer .xpl-avatar {
@@ -1822,6 +4084,10 @@ button.xpl-button--xs.xpl-button--icon-only {
             display: none;
           }
 
+.xpl-main-nav__sm footer .xpl-nav-item a .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 div .flatpickr-dayp{
+            visibility:hidden
+          }
+
 .xpl-main-nav__sm footer .xpl-nav-item a, .xpl-main-nav__md footer .xpl-nav-item a {
           display: inline-flex;
         }
@@ -1841,7 +4107,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       }
 
 .xpl-main-nav footer div {
-      overflow-x: auto;
+      overflow-x: auto
 }
 
 .xpl-main-nav footer .xpl-nav-item > a svg {
@@ -1862,7 +4128,7 @@ button.xpl-button--xs.xpl-button--icon-only {
     --tw-text-opacity: 1;
     color: rgba(153, 155, 168, var(--tw-text-opacity));
     width: 100%;
-    z-index: 20;
+    z-index: 20
 }
 
 .xpl-main-nav {
@@ -1871,7 +4137,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   position: fixed;
   top: 0px;
   bottom: 0px;
-  left: 0px;
+  left: 0px
 }
 
 .xpl-nav-item a svg {
@@ -1893,7 +4159,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       --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));
+      color: rgba(255, 255, 255, var(--tw-text-opacity))
     }
 
 .xpl-nav-item a.active svg {
@@ -1908,7 +4174,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       border-style: solid;
       border-right-width: 4px;
       --tw-text-opacity: 1;
-      color: rgba(255, 255, 255, var(--tw-text-opacity));
+      color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
 .xpl-nav-item a {
@@ -1925,7 +4191,7 @@ button.xpl-button--xs.xpl-button--icon-only {
     border-style: solid;
     border-right-width: 4px;
     align-items: center;
-    align-content: center;
+    align-content: center
 }
 
 .xpl-pagination {
@@ -1939,7 +4205,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   .xpl-pagination {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-between
   }
 }
 
@@ -1953,7 +4219,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 @media (min-width: 768px) {
   .xpl-pagination p {
-    padding-bottom: 0px;
+    padding-bottom: 0px
   }
 }
 
@@ -1964,7 +4230,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-pagination nav > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1px * var(--tw-space-x-reverse));
-  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
+  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)))
 }
 
 .xpl-pagination nav {
@@ -1973,7 +4239,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   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;
+  z-index: 0
 }
 
 .xpl-pagination svg {
@@ -1989,7 +4255,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-pagination .xpl-pagination-prev:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
 }
 
 .xpl-pagination .xpl-pagination-prev {
@@ -2009,7 +4275,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 0.5rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .xpl-pagination .xpl-pagination-next {
@@ -2019,7 +4285,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-pagination .xpl-pagination-next:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
 }
 
 .xpl-pagination .xpl-pagination-next {
@@ -2039,7 +4305,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 0.5rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .xpl-pagination .xpl-pagination-prev span, .xpl-pagination .xpl-pagination-next span {
@@ -2051,17 +4317,17 @@ button.xpl-button--xs.xpl-button--icon-only {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  border-width: 0;
+  border-width: 0
 }
 
 .xpl-pagination a, .xpl-pagination button {
   --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 .xpl-pagination a:hover, .xpl-pagination button:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity))
 }
 
 .xpl-pagination a, .xpl-pagination button {
@@ -2079,7 +4345,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-right: 1rem;
   position: relative;
   --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .xpl-pagination-ellipsis {
@@ -2114,7 +4380,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-pagination .xpl-pagination-current:hover {
   --tw-bg-opacity: 1;
-  background-color: rgba(238, 242, 255, var(--tw-bg-opacity));
+  background-color: rgba(238, 242, 255, var(--tw-bg-opacity))
 }
 
 .xpl-pagination .xpl-pagination-show-md {
@@ -2123,120 +4389,12 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 @media (min-width: 768px) {
   .xpl-pagination .xpl-pagination-show-md {
-    display: inline-flex;
+    display: inline-flex
   }
 }
 
-.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-color-secondary-lm);
-}
-
-.xpl-radio:disabled {
-  border-color: #e4e6eb; /* gray 200 */
-  --tw-bg-opacity: 1;
-  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
-  cursor: not-allowed;
-}
-
-.xpl-radio:focus {
-  --tw-ring-color: var(--xpl-color-secondary-lm);
-}
-
-.dark .xpl-radio:active,
-.dark .xpl-radio:checked {
-  border-color: var(--xpl-color-secondary-dm);
-}
-
-.dark .xpl-radio:disabled {
-  background-color: #666d7d;
-  border-color: #666d7d;
-}
-
-.dark .xpl-radio:focus {
-  --tw-ring-color: var(--xpl-color-secondary-dm);
-}
-
-.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(153, 155, 168, var(--tw-text-opacity));
-}
-
-.dark .xpl-radio + label small {
-  color: #ced3db;
+.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. */
@@ -2280,13 +4438,14 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-secondary-nav nav {
       --tw-border-opacity: 1;
-      border-color: rgba(54, 50, 64, var(--tw-border-opacity));
-      border-bottom-width: 2px;
+      border-color: rgba(106, 109, 125, var(--tw-border-opacity));
+      border-bottom-width: 1px;
     }
 
 @media (min-width: 768px) {
       .dark .xpl-secondary-nav nav {
-        border-right-width: 2px;
+        border-bottom-width: 0px;
+        border-right-width: 1px
       }
     }
 
@@ -2295,14 +4454,14 @@ button.xpl-button--xs.xpl-button--icon-only {
     border-color: rgba(238, 239, 243, var(--tw-border-opacity));
     border-right-width: 0px;
     border-bottom-width: 1px;
-    position: relative;
+    position: relative
 }
 
 @media (min-width: 768px) {
     .xpl-secondary-nav nav {
       border-bottom-width: 0px;
       border-right-width: 1px;
-      height: 100vh;
+      height: 100vh
     }
   }
 
@@ -2321,14 +4480,14 @@ button.xpl-button--xs.xpl-button--icon-only {
     display: flex;
     flex-direction: row;
     overflow-y: auto;
-    white-space: nowrap;
+    white-space: nowrap
 }
 
 @media (min-width: 768px) {
     .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)));
-      margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+      margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
     }
 
     .xpl-secondary-nav nav ul {
@@ -2336,7 +4495,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       padding-right: 0px;
       padding-left: 0px;
       padding-top: 0.5rem;
-      white-space: normal;
+      white-space: normal
     }
   }
 
@@ -2368,7 +4527,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       border-color: rgba(249, 145, 112, var(--tw-border-opacity));
       pointer-events: none;
       --tw-text-opacity: 1;
-      color: rgba(48, 45, 59, var(--tw-text-opacity));
+      color: rgba(48, 45, 59, var(--tw-text-opacity))
     }
 
 .dark .xpl-secondary-nav nav ul .xpl-nav-item a:hover {
@@ -2380,55 +4539,138 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-secondary-nav nav ul .xpl-nav-item a:hover {
       background-color: transparent;
       --tw-text-opacity: 1;
-      color: rgba(48, 45, 59, var(--tw-text-opacity));
+      color: rgba(48, 45, 59, var(--tw-text-opacity))
+}
+
+.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-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem
+}
+
+@media (min-width: 768px) {
+    .xpl-secondary-nav nav ul .xpl-nav-item a {
+      border-bottom-width: 0px;
+      border-right-width: 4px;
+      height: 3rem
+    }
+  }
+
+.dark .xpl-secondary-nav {
+    --tw-bg-opacity: 1;
+    background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
+  }
+
+@media (min-width: 768px) {
+
+.xpl-secondary-nav {
+    width: 200px;
+}
+  }
+
+.xpl-secondary-nav {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  padding-bottom: 1rem;
+  padding-top: 1.25rem
+}
+
+@media (min-width: 768px) {
+  .xpl-secondary-nav {
+    display: block;
+    padding: 0px
+  }
+}
+
+.xpl-select .xpl-input-wrapper > button {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.6813 7.44187L0.132167 1.93773C-0.0440556 1.76151 -0.0440556 1.47655 0.132167 1.30033L0.874551 0.557948C1.05077 0.381726 1.33573 0.381726 1.51195 0.557948L6 5.001L10.488 0.557948C10.6643 0.381726 10.9492 0.381726 11.1254 0.557948L11.8678 1.30033C12.0441 1.47655 12.0441 1.76151 11.8678 1.93773L6.3187 7.44187C6.14248 7.61809 5.85752 7.61809 5.6813 7.44187Z' fill='%23272431'/%3E%3C/svg%3E");
+  background-position: calc(100% - 16px) center;
+  background-repeat: no-repeat;
+  height: 44px;
+  outline: none !important;
+  background-color: transparent;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  overflow: hidden;
+  padding-right: 0.5rem;
+  text-align: left;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+  width: 100%;
+}
+
+.xpl-select.xpl-select--disabled .xpl-input-wrapper > button {
+  cursor: not-allowed;
+}
+
+.xpl-select.xpl-select--no-truncate .xpl-input-wrapper > button {
+  height: 100%;
+  position: absolute;
+  right: 0px;
+  width: 100%;
 }
 
-.xpl-secondary-nav nav ul .xpl-nav-item a {
-    border-right-width: 0px;
-    border-bottom-width: 4px;
+.xpl-select--no-truncate .xpl-input-wrapper {
+  min-height: 46px;
 }
 
-@media (min-width: 768px) {
-    .xpl-secondary-nav nav ul .xpl-nav-item a {
-      border-bottom-width: 0px;
-      border-right-width: 4px;
-      height: 3rem;
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-    }
-  }
+.xpl-select-value {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  pointer-events: none;
+  position: absolute;
+  --tw-text-opacity: 1;
+  color: rgba(106, 109, 125, var(--tw-text-opacity));
+  white-space: nowrap;
+}
 
-@media (min-width: 640px) {
+.xpl-select--no-truncate .xpl-select-value {
+  padding-right: 2rem;
+  position: relative;
+  white-space: normal;
+}
 
-.xpl-secondary-nav nav ul .xpl-nav-item a {
-      padding: 16px 24px;
-  }
-    }
+.xpl-select--no-truncate xpl-tag {
+  margin-bottom: 0.5rem;
+  z-index: 10;
+}
 
-.dark .xpl-secondary-nav {
-    --tw-bg-opacity: 1;
-    background-color: rgba(32, 30, 41, var(--tw-bg-opacity));
-  }
+.xpl-select-value.has-value {
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+}
 
-@media (min-width: 768px) {
+.dark .xpl-select-value {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
 
-.xpl-secondary-nav {
-    width: 200px;
+.dark .xpl-select-value.has-value {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-  }
 
-.xpl-secondary-nav {
-  --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
-  padding-bottom: 1rem;
-  padding-top: 1.25rem;
+.xpl-select-value--active {
+  padding-top: 8px;
+  pointer-events: auto;
+  top: 0px;
 }
 
-@media (min-width: 768px) {
-  .xpl-secondary-nav {
-    display: block;
-    padding: 0px;
-  }
+.dark .xpl-select .xpl-input-wrapper > button {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.6813 7.44187L0.132167 1.93773C-0.0440556 1.76151 -0.0440556 1.47655 0.132167 1.30033L0.874551 0.557948C1.05077 0.381726 1.33573 0.381726 1.51195 0.557948L6 5.001L10.488 0.557948C10.6643 0.381726 10.9492 0.381726 11.1254 0.557948L11.8678 1.30033C12.0441 1.47655 12.0441 1.76151 11.8678 1.93773L6.3187 7.44187C6.14248 7.61809 5.85752 7.61809 5.6813 7.44187Z' fill='white'/%3E%3C/svg%3E");
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.dark .xpl-select .xpl-input-wrapper button.has-value {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
 .xpl-table-container {
@@ -2453,16 +4695,16 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
   --tw-divide-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-divide-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-divide-opacity))
 }
 
 .xpl-table {
-  min-width: 100%;
+  min-width: 100%
 }
 
 .dark .xpl-table > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgba(54, 50, 64, var(--tw-divide-opacity));
+  border-color: rgba(54, 50, 64, var(--tw-divide-opacity))
 }
 
 .xpl-table--abs {
@@ -2517,7 +4759,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   position: sticky;
   left: 0px;
-  z-index: 10;
+  z-index: 10
 }
 
 .xpl-table--freeze thead th:first-child {
@@ -2530,7 +4772,7 @@ button.xpl-button--xs.xpl-button--icon-only {
   font-size: 0.875rem;
   line-height: 1.25rem;
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 .dark .xpl-table thead th {
@@ -2577,11 +4819,11 @@ button.xpl-button--xs.xpl-button--icon-only {
   left: 100%;
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  transition-duration: 150ms
 }
 
 .xpl-table--has-scrolled thead th:first-child::after, .xpl-table--has-scrolled tbody td:first-child::after {
-  opacity: 1;
+  opacity: 1
 }
 
 .dark .xpl-table--freeze thead th:first-child::after,
@@ -2608,12 +4850,12 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
   --tw-divide-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-divide-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-divide-opacity))
 }
 
 .xpl-table tbody {
   --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 .dark .xpl-table tbody {
@@ -2622,7 +4864,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgba(60, 56, 71, var(--tw-divide-opacity));
+  border-color: rgba(60, 56, 71, var(--tw-divide-opacity))
 }
 
 .xpl-table.xpl-table--striped tbody tr:nth-child(2n) td {
@@ -2632,7 +4874,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .dark .xpl-table tbody tr td:first-child, .dark .xpl-table p {
   --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  color: rgba(255, 255, 255, var(--tw-text-opacity))
 }
 
 .dark .xpl-table.xpl-table--striped tbody tr:nth-child(2n) td {
@@ -2651,7 +4893,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 
 .xpl-table a:hover {
   --tw-text-opacity: 1;
-  color: rgba(49, 46, 129, var(--tw-text-opacity));
+  color: rgba(49, 46, 129, var(--tw-text-opacity))
 }
 
 .xpl-table label {
@@ -2673,7 +4915,7 @@ button.xpl-button--xs.xpl-button--icon-only {
 .xpl-tabs nav > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
-  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
 }
 
 .xpl-tabs nav {
@@ -2681,16 +4923,16 @@ button.xpl-button--xs.xpl-button--icon-only {
   border-color: rgba(238, 239, 243, var(--tw-border-opacity));
   border-bottom-width: 1px;
   display: flex;
-  min-width: 100%;
+  min-width: 100%
 }
 
 .xpl-tabs a, .xpl-tabs button {
-  border-color: transparent;
+  border-color: transparent
 }
 
 .xpl-tabs a:hover, .xpl-tabs button:hover {
   --tw-border-opacity: 1;
-  border-color: rgba(238, 239, 243, var(--tw-border-opacity));
+  border-color: rgba(238, 239, 243, var(--tw-border-opacity))
 }
 
 .xpl-tabs a, .xpl-tabs button {
@@ -2704,16 +4946,16 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-top: 1rem;
   padding-bottom: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .xpl-tabs a:hover, .xpl-tabs button:hover {
   --tw-text-opacity: 1;
-  color: rgba(60, 56, 71, var(--tw-text-opacity));
+  color: rgba(60, 56, 71, var(--tw-text-opacity))
 }
 
 .xpl-tabs a, .xpl-tabs button {
-  white-space: nowrap;
+  white-space: nowrap
 }
 
 .xpl-tabs a span, .xpl-tabs button span {
@@ -2729,21 +4971,296 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
   --tw-text-opacity: 1;
-  color: rgba(48, 45, 59, var(--tw-text-opacity));
+  color: rgba(48, 45, 59, var(--tw-text-opacity))
 }
 
 .xpl-tabs a.current, .xpl-tabs button.current {
   --tw-border-opacity: 1;
   border-color: rgba(99, 102, 241, var(--tw-border-opacity));
   --tw-text-opacity: 1;
-  color: rgba(79, 70, 229, var(--tw-text-opacity));
+  color: rgba(79, 70, 229, var(--tw-text-opacity))
 }
 
 .xpl-tabs a.current span, .xpl-tabs button.current span {
   --tw-bg-opacity: 1;
   background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgba(79, 70, 229, var(--tw-text-opacity));
+  color: rgba(79, 70, 229, var(--tw-text-opacity))
+}
+
+.xpl-tag-container {
+  display: inline-flex;
+  position: relative;
+}
+
+button.xpl-tag {
+  border-color: var(--xpl-color-secondary-lm);
+  padding: 2px 28px 2px 10px;
+  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;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.xpl-tag-container:hover button.xpl-tag {
+  --tw-bg-opacity: 1;
+  background-color: rgba(235, 229, 255, var(--tw-bg-opacity));
+}
+
+.dark .xpl-tag {
+  border-color: var(--xpl-color-secondary-dm);
+  --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));
+}
+
+.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));
+}
+
+button.xpl-tag__close {
+  right: 18px;
+  top: -1px;
+  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));
+}
+
+.dark button.xpl-tag__close {
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.xpl-toggle-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+}
+
+.xpl-toggle {
+  --tw-ring-color: var(--xpl-color-secondary-lm);
+  border-radius: 12px;
+  border-color: #d1d5db;
+  height: 24px;
+  top: 2px;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 44px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  --tw-bg-opacity: 1;
+  background-color: rgba(225, 226, 232, var(--tw-bg-opacity));
+}
+
+.xpl-toggle:hover {
+  --tw-bg-opacity: 1;
+  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 {
+  --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-toggle-container label {
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(48, 45, 59, var(--tw-text-opacity));
+}
+
+/* label (to the right of toggle) */
+
+.xpl-toggle + label {
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-top: 0.25rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  vertical-align: middle;
+}
+
+.xpl-toggle--small + label {
+  margin-top: 0px;
+}
+
+.xpl-toggle-container--disabled label {
+  color: var(--xpl-color-text-secondary-lm);
+  cursor: not-allowed;
+}
+
+.dark .xpl-toggle-container label {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+/* heading */
+
+.xpl-toggle-container label:first-child {
+  display: block;
+  padding-bottom: 0.25rem;
+  width: 100%;
+}
+
+/* description */
+
+.xpl-toggle-container small {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(153, 155, 168, var(--tw-text-opacity));
+}
+
+.dark .xpl-toggle {
+  --tw-ring-offset-color: var(--xpl-color-gray-900);
+  --tw-ring-color: var(--xpl-color-secondary-dm);
+  --tw-bg-opacity: 1;
+  background-color: rgba(106, 109, 125, var(--tw-bg-opacity));
+}
+
+.dark .xpl-toggle:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(153, 155, 168, var(--tw-bg-opacity))
+}
+
+.xpl-toggle::after {
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L7 7M1 7L4 4L1 7ZM4 4L7 1L4 4ZM4 4L1 1L4 4Z' stroke='%236A6D7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px 0 #0000001a;
+  content: "";
+  display: block;
+  height: 20px;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.dark .xpl-toggle + label {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.xpl-toggle:checked {
+  background-color: var(--xpl-color-secondary-lm);
+}
+
+.xpl-toggle-container--disabled .xpl-toggle, .xpl-toggle-container--disabled .xpl-toggle:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(238, 239, 243, var(--tw-bg-opacity));
+  cursor: not-allowed
+}
+
+.dark .xpl-toggle:checked {
+  background-color: var(--xpl-color-secondary-dm);
+}
+
+.dark .xpl-toggle-container--disabled .xpl-toggle {
+  background-color: var(--xpl-color-action-disabled-dm);
+}
+
+.xpl-toggle:checked:hover {
+  background-color: var(--xpl-color-secondary-hover-lm);
+}
+
+.xpl-toggle: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='M10 1L4 7L1 4' stroke='%236923F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  transform: translateX(20px);
+}
+
+.xpl-toggle:disabled::after {
+  --tw-bg-opacity: 1;
+  background-color: rgba(248, 249, 250, var(--tw-bg-opacity));
+}
+
+.xpl-toggle:checked:hover::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='M10 1L4 7L1 4' stroke='%234D1AB2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.xpl-toggle:disabled:checked, .xpl-toggle:disabled:checked:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(221, 209, 255, var(--tw-bg-opacity))
+}
+
+.dark .xpl-toggle:checked:hover {
+  background-color: var(--xpl-color-secondary-hover-dm);
+}
+
+.dark .xpl-toggle:disabled:checked,
+.dark .xpl-toggle:disabled:checked:hover {
+  background-color: var(--xpl-color-action-disabled-dm);
+}
+
+.xpl-toggle:disabled: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='M10 1L4 7L1 4' stroke='%23A480FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.dark .xpl-toggle:disabled::after {
+  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L7 7M1 7L4 4L1 7ZM4 4L7 1L4 4ZM4 4L1 1L4 4Z' stroke='%23272431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  --tw-bg-opacity: 1;
+  background-color: rgba(106, 109, 125, var(--tw-bg-opacity));
+}
+
+.dark .xpl-toggle:disabled: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='M10 1L4 7L1 4' stroke='%23272431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.xpl-toggle--small {
+  border-radius: 8px;
+  height: 16px;
+  width: 28px;
+}
+
+.xpl-toggle--small::after {
+  background-position: center calc(50% + 0.5px);
+  background-size: 50% auto;
+  height: 12px;
+  width: 12px;
+}
+
+.xpl-toggle--small:checked::after {
+  background-size: 60% auto;
+  transform: translateX(12px);
 }
 
 .xpl-utility-bar ul > * {
@@ -2756,7 +5273,7 @@ button.xpl-button--xs.xpl-button--icon-only {
       }
 
 .xpl-utility-bar ul:nth-child(2) {
-      justify-self: end;
+      justify-self: end
 }
 
 .xpl-utility-bar ul:first-child > * {
@@ -2764,33 +5281,33 @@ button.xpl-button--xs.xpl-button--icon-only {
       }
 
 .xpl-utility-bar ul:first-child {
-      justify-self: start;
+      justify-self: start
 }
 
 .xpl-utility-bar ul {
     display: grid;
     align-content: center;
-    grid-auto-flow: column;
+    grid-auto-flow: column
 }
 
 .xpl-utility-bar {
   --tw-bg-opacity: 1;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
 }
 
 .dark .xpl-utility-bar {
   --tw-bg-opacity: 1;
-  background-color: rgba(48, 45, 59, var(--tw-bg-opacity));
+  background-color: rgba(48, 45, 59, var(--tw-bg-opacity))
 }
 
 .xpl-utility-bar {
   --tw-border-opacity: 1;
-  border-color: rgba(234, 235, 239, var(--tw-border-opacity));
+  border-color: rgba(234, 235, 239, var(--tw-border-opacity))
 }
 
 .dark .xpl-utility-bar {
   --tw-border-opacity: 1;
-  border-color: rgba(60, 56, 71, var(--tw-border-opacity));
+  border-color: rgba(60, 56, 71, var(--tw-border-opacity))
 }
 
 .xpl-utility-bar {
@@ -2801,21 +5318,21 @@ button.xpl-button--xs.xpl-button--icon-only {
   padding-left: 1rem;
   padding-right: 1rem;
   --tw-text-opacity: 1;
-  color: rgba(153, 155, 168, var(--tw-text-opacity));
+  color: rgba(153, 155, 168, var(--tw-text-opacity))
 }
 
 .dark .xpl-utility-bar {
   --tw-text-opacity: 1;
-  color: rgba(234, 235, 239, var(--tw-text-opacity));
+  color: rgba(234, 235, 239, var(--tw-text-opacity))
 }
 
 .xpl-utility-bar {
-  grid-auto-flow: column;
+  grid-auto-flow: column
 }
 
 @media (min-width: 640px) {
   .xpl-utility-bar {
     padding-left: 1.5rem;
-    padding-right: 1.5rem;
+    padding-right: 1.5rem
   }
 }