@turquoisehealth/pit-viper 2.40.0 → 2.42.0

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -1,11 +1,7 @@
 @charset "UTF-8";
 /* toggle color styles should align with secondary and tertiary buttons */
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
-:root {
-  --select-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M4.16663 6L8.16663 10L12.1666 6' stroke='%2389989B' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
 /* toggle color styles should align with secondary and tertiary buttons */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900");
 .pv-v2 {
   font-family: var(--font-family-body, Inter, sans-serif);
   font-weight: 400;
@@ -944,7 +940,7 @@
   padding-inline-end: 2rem;
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
-  background-position: top 50% right 0.5rem;
+  background-position: right 0.5rem center;
   text-align: unset;
 }
 .pv-v2 .pv-select:not(:disabled, [data-invalid]):focus-visible, .pv-v2 .pv-select:not(:disabled, [data-invalid]):hover,
@@ -959,10 +955,10 @@
   opacity: 1;
 }
 .pv-v2 .pv-select {
-  background-image: var(--select-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2302363D' d='m7.1 9.9 4.3 5.1c.1.1.2.1.3.2.1 0 .2.1.3.1s.2 0 .3-.1c.1 0 .2-.1.3-.2L17 9.9c.4-.5.1-1.2-.6-1.2H7.6c-.6 0-1 .8-.5 1.2z'/%3E%3C/svg%3E"));
+  background-image: var(--select-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%234B595C'/%3E%3C/svg%3E"));
 }
 .pv-v2 .pv-select-multiple {
-  background-image: var(--select-multiple-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%2302363D'/%3E%3C/svg%3E"));
+  background-image: var(--select-multiple-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%234B595C'/%3E%3C/svg%3E"));
 }
 .pv-v2 .pv-textarea {
   --resize: vertical;
@@ -1214,31 +1210,35 @@
 }
 .pv-v2 [class*=pv-label-selectable] {
   cursor: pointer;
-  background-color: #FFFFFF;
-  border: 2px solid #E3E7EA;
-  border-radius: 8px;
-  font-weight: 400;
-  padding: 1.5rem;
+  background-color: var(--selectable-label-background-color, #FFFFFF);
+  border: var(--selectable-label-border, 1px solid #E3E7EA);
+  border-radius: var(--selectable-label-radius, 8px);
+  font-weight: var(--selectable-label-font-weight, 400);
+  padding: var(--selectable-label-padding, 1.5rem);
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: border-color, color;
 }
 .pv-v2 [class*=pv-label-selectable]:hover, .pv-v2 [class*=pv-label-selectable]:focus-within {
-  border-color: #36C5BA;
-  color: #176F6F;
+  border-color: var(--selectable-label-hover-border-color, inherit);
+  color: var(--selectable-label-hover-color, #121313);
+  background-color: var(--selectable-label-hover-background-color, #E8F2F4);
 }
 .pv-v2 [class*=pv-label-selectable]:hover .pv-text-subdued, .pv-v2 [class*=pv-label-selectable]:focus-within .pv-text-subdued {
-  color: #176F6F;
+  color: var(--selectable-label-subdued-color, #176F6F);
+}
+.pv-v2 [class*=pv-label-selectable]:active {
+  background-color: var(--selectable-label-pressed-background-color, #C7D8DB);
 }
 .pv-v2 [class*=pv-label-selectable]:focus-within input {
   outline: none;
 }
 .pv-v2 [class*=pv-label-selectable]:has(:checked) {
-  border-color: #36C5BA;
+  border-color: var(--selectable-label-selected-border-color, #16696D);
 }
 .pv-v2 .pv-label-selectable-small {
-  border-radius: 4px;
-  padding: 0.75rem 1.5rem;
+  border-radius: var(--selectable-label-small-radius, 4px);
+  padding: var(--selectable-label-small-padding, 0.5rem);
 }
 .pv-v2 [class*=pv-toggle] {
   cursor: pointer;
@@ -2328,7 +2328,7 @@
   padding: 0.5rem;
 }
 .pv-v2 .pv-popover-list :where(li[data-active]) :where(a, label) {
-  background-color: var(--popover-list-selected-item-background-color, #F7F8F8);
+  background-color: var(--popover-list-selected-item-background-color, #E4F8F6);
 }
 .pv-v2 .pv-popover-list :where(a),
 .pv-v2 .pv-popover-list :where(label) {
@@ -2380,21 +2380,21 @@
   z-index: 50;
 }
 .pv-v2 [class*=pv-tag] {
-  font-size: 0.6875rem;
-  line-height: 1.45454545;
-  font-weight: 500;
-  color: #121313;
+  font-size: var(--tag-font-size, 0.6875rem);
+  line-height: var(--tag-line-height, 1.45454545);
+  font-weight: var(--tag-font-weight, 500);
+  color: var(--tag-color, #121313);
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  background-color: #E8EBEB;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: calc(0.125rem - 1px) 0.5rem;
+  gap: var(--tag-gap, 0.25rem);
+  background-color: var(--tag-background-color, #E8EBEB);
+  border: 1px solid var(--tag-border-color, transparent);
+  border-radius: var(--tag-radius, 4px);
+  padding: var(--tag-padding, calc(0.125rem - 1px) 0.5rem);
   white-space: nowrap;
 }
 .pv-v2 [class*=pv-tag][data-style=rounded] {
-  border-radius: 2rem;
+  border-radius: var(--tag-rounded-radius, 2rem);
 }
 .pv-v2 button[class*=pv-tag],
 .pv-v2 button.pv-tag-tertiary {
@@ -2403,26 +2403,27 @@
 .pv-v2 button[class*=pv-tag]:hover, .pv-v2 button[class*=pv-tag]:focus-visible,
 .pv-v2 button.pv-tag-tertiary:hover,
 .pv-v2 button.pv-tag-tertiary:focus-visible {
-  background-color: #E8F2F4;
+  background-color: var(--tag-hover-background-color, #E8F2F4);
 }
 .pv-v2 button[class*=pv-tag]:active,
 .pv-v2 button.pv-tag-tertiary:active {
-  background-color: #C7D8DB;
+  background-color: var(--tag-pressed-background-color, #C7D8DB);
 }
 .pv-v2 strong[class*=pv-tag] {
-  font-weight: 600;
+  font-weight: var(--tag-strong-font-weight, 600);
   text-transform: uppercase;
 }
 .pv-v2 .pv-tag-sm {
-  font-size: 0.6875rem;
-  line-height: 14px;
-  padding: 0 0.5rem;
+  font-size: var(--tag-small-font-size, 0.6875rem);
+  line-height: var(--tag-small-line-height, 14px);
+  padding: var(--tag-small-padding, 0 0.5rem);
+  border-radius: var(--tag-small-radius, 2px);
 }
 .pv-v2 .pv-tag-lg {
-  font-size: 0.6875rem;
-  line-height: 1.45454545;
-  border-radius: 3px;
-  padding: calc(0.25rem - 1px) 0.5rem;
+  font-size: var(--tag-large-font-size, 0.6875rem);
+  line-height: var(--tag-large-line-height, 1.45454545);
+  padding: var(--tag-large-padding, calc(0.25rem - 1px) 0.5rem);
+  border-radius: var(--tag-large-radius, 3px);
 }
 .pv-v2 [class*=pv-tag]:has(.pv-company-xs, .pv-company-sm) {
   padding: 1px 4px;
@@ -2447,55 +2448,62 @@
 .pv-v2 .pv-tag-inverse {
   background-color: #02363D;
 }
-.pv-v2 .pv-tag-red {
-  background-color: #FFF1F1;
-  border-color: transparent;
-  color: #A2191F;
+.pv-v2 .pv-tag-red,
+.pv-v2 .pv-tag-error {
+  background-color: var(--tag-red-background-color, #FFEFEB);
+  border-color: var(--tag-red-border-color, transparent);
+  color: var(--tag-red-color, #FF471A);
 }
 .pv-v2 .pv-tag-red-inverse {
-  background-color: #DA1E28;
+  background-color: var(--tag-red-inverse-background-color, #DA1E28);
 }
 .pv-v2 .pv-tag-yellow {
-  background-color: #FFEB99;
-  border-color: transparent;
-  color: #121313;
+  background-color: var(--tag-yellow-background-color, #FFEB99);
+  border-color: var(--tag-yellow-border-color, transparent);
+  color: var(--tag-yellow-color, #121313);
 }
 .pv-v2 .pv-tag-yellow-inverse {
   background-color: #EAB333;
   color: #121313;
 }
-.pv-v2 .pv-tag-green {
-  background-color: #DEFBE6;
-  border-color: transparent;
-  color: #0E6027;
+.pv-v2 .pv-tag-green,
+.pv-v2 .pv-tag-success {
+  background-color: var(--tag-green-background-color, #E8FDEA);
+  border-color: var(--tag-green-border-color, transparent);
+  color: var(--tag-green-color, #0E8019);
 }
 .pv-v2 .pv-tag-green-inverse {
   background-color: #198038;
 }
-.pv-v2 .pv-tag-orange {
-  background-color: #FAEAE4;
-  border-color: transparent;
-  color: #BA4E01;
+.pv-v2 .pv-tag-orange,
+.pv-v2 .pv-tag-warning {
+  background-color: var(--tag-orange-background-color, #FFEED9);
+  border-color: var(--tag-orange-border-color, transparent);
+  color: var(--tag-orange-color, #B26500);
 }
 .pv-v2 .pv-tag-orange-inverse {
   background-color: #BA4E01;
 }
 .pv-v2 .pv-tag-turquoise {
-  background-color: #E2F7F5;
-  border-color: transparent;
-  color: #176F6F;
+  background-color: var(--tag-turquoise-background-color, #E2F7F5);
+  border-color: var(--tag-turquoise-border-color, transparent);
+  color: var(--tag-turquoise-color, #176F6F);
 }
 .pv-v2 .pv-tag-turquoise-inverse {
   background-color: #176F6F;
 }
 .pv-v2 .pv-tag-purple {
-  background-color: #E8DAFF;
-  border-color: transparent;
-  color: #121313;
+  background-color: var(--tag-purple-background-color, #E8DAFF);
+  border-color: var(--tag-purple-border-color, transparent);
+  color: var(--tag-purple-color, #121313);
 }
 .pv-v2 .pv-tag-primary {
-  background-color: #16696D;
-  color: #FFFFFF;
+  background-color: var(--tag-primary-background-color, #16696D);
+  color: var(--tag-primary-color, #FFFFFF);
+}
+.pv-v2 .pv-tag-highlight {
+  background-color: var(--tag-highlight-background-color, #E4F8F6);
+  color: var(--tag-highlight-color, #16696D);
 }
 .pv-v2 button.pv-tag-primary:hover, .pv-v2 button.pv-tag-primary:focus-visible {
   background-color: #0D5256;
@@ -2504,9 +2512,9 @@
   background-color: #02363D;
 }
 .pv-v2 .pv-tag-secondary {
-  background-color: #FFFFFF;
-  color: #4B595C;
-  border-color: #D2D8DC;
+  background-color: var(--tag-secondary-background-color, #FFFFFF);
+  border-color: var(--tag-secondary-border-color, #D2D8DC);
+  color: var(--tag-secondary-color, #4B595C);
 }
 .pv-v2 button.pv-tag-secondary:hover, .pv-v2 button.pv-tag-secondary:focus-visible {
   background-color: #E8F2F4;
@@ -2746,7 +2754,7 @@
   font-weight: 600;
 }
 .pv-v2 .pv-select-multiple[data-dropdown] {
-  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23176f6f'/%3E%3C/svg%3E"));
+  background-image: var(--select-multiple-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%234B595C'/%3E%3C/svg%3E"));
   background-color: #ECECEC;
 }
 .pv-v2 .pv-select-multiple[data-dropdown],
@@ -2761,11 +2769,11 @@
   border-radius: 4px;
 }
 .pv-v2 .pv-dropdown > [class*=pv-button] {
-  padding-inline-end: 40px;
+  padding-inline-end: 2rem;
   background-image: var(--dropdown-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 8.151a1.2 1.2 0 0 1 1.698 0L12 13.303l5.151-5.152A1.2 1.2 0 1 1 18.85 9.85l-6 6a1.2 1.2 0 0 1-1.697 0l-6-6a1.2 1.2 0 0 1 0-1.698Z' fill='%23FFFFFF'/%3E%3C/svg%3E"));
   background-repeat: no-repeat;
-  background-size: 1.25rem 1.25rem;
-  background-position: right 1rem center;
+  background-size: 1rem 1rem;
+  background-position: right 0.5rem center;
 }
 .pv-v2 .pv-dropdown > [class*=pv-button][data-dropdown] {
   background-image: var(--dropdown-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.151 15.848a1.2 1.2 0 0 0 1.698 0L12 10.698l5.151 5.15a1.2 1.2 0 1 0 1.698-1.697l-6-6a1.2 1.2 0 0 0-1.697 0l-6 6a1.2 1.2 0 0 0 0 1.697Z' fill='%23FFFFFF'/%3E%3C/svg%3E"));
@@ -2796,77 +2804,59 @@
   background-image: none;
 }
 .pv-v2 .pv-pagination {
-  display: flex;
-  justify-content: center;
+  border-radius: var(--pagination-radius, 0);
+  border: var(--pagination-border, 0);
 }
-.pv-v2 .pv-pagination > button,
-.pv-v2 .pv-pagination > a {
-  font-size: 1.5rem;
-  line-height: 1;
-  background-color: transparent;
-  transition-duration: 0.125s;
-  transition-property: background-color, color;
-}
-.pv-v2 .pv-pagination > button:first-of-type,
-.pv-v2 .pv-pagination > a:first-of-type {
-  border-radius: 2rem 0 0 2rem;
-}
-.pv-v2 .pv-pagination > button:last-of-type,
-.pv-v2 .pv-pagination > a:last-of-type {
-  border-radius: 0 2rem 2rem 0;
-}
-.pv-v2 .pv-pagination > button:disabled, .pv-v2 .pv-pagination > button:not([href]):not(button),
-.pv-v2 .pv-pagination > a:disabled,
-.pv-v2 .pv-pagination > a:not([href]):not(button) {
-  color: #ADB5C0;
-  background-color: #ECECEC;
-  user-select: none;
-  cursor: default;
-}
-.pv-v2 .pv-pagination > button:hover,
-.pv-v2 .pv-pagination > a:hover {
-  background-color: #ECECEC;
-  cursor: pointer;
-}
-.pv-v2 .pv-pagination [role=list] {
-  display: flex;
+.pv-v2 .pv-pagination, .pv-v2 .pv-pagination :is(ul, ol) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pagination-gap, 0.25rem);
+  overflow: clip;
 }
-.pv-v2 .pv-pagination li {
+.pv-v2 .pv-pagination :where(button, a), .pv-v2 .pv-pagination :is(ul, ol) :where(button, a) {
   display: grid;
   place-items: center;
   user-select: none;
+  border: none;
+  text-decoration: none;
+  aspect-ratio: 1;
+  padding: 0;
+  color: var(--pagination-item-color, #4B595C);
+  font-size: var(--pagination-font-size, 0.75rem);
+  font-weight: var(--pagination-font-weight, 500);
+  line-height: var(--pagination-line-height, 1.33333333);
+  background-color: var(--pagination-background-color, transparent);
+  border-radius: var(--pagination-item-radius, 4px);
+  width: var(--pagination-item-width, 32px);
+}
+.pv-v2 .pv-pagination :where(button, a):not(:disabled), .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled) {
+  cursor: pointer;
 }
-.pv-v2 .pv-pagination a {
-  display: block;
-  line-height: 38px;
-  transition-duration: 0.125s;
-  transition-property: background-color, color;
-  width: 40px;
+.pv-v2 .pv-pagination :where(button, a):not(:disabled):hover, .pv-v2 .pv-pagination :where(button, a):not(:disabled):focus-visible, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):hover, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):focus-visible {
+  background-color: var(--pagination-item-hover-background-color, #E8F2F4);
 }
-.pv-v2 .pv-pagination a[aria-current=page] {
-  background-color: #16696D;
-  color: #FFFFFF;
+.pv-v2 .pv-pagination :where(button, a):not(:disabled):active, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):not(:disabled):active {
+  background-color: var(--pagination-item-pressed-background-color, #C7D8DB);
 }
-.pv-v2 .pv-pagination a:hover, .pv-v2 .pv-pagination a:focus-visible {
-  text-decoration: none;
+.pv-v2 .pv-pagination :where(button, a):disabled, .pv-v2 .pv-pagination :is(ul, ol) :where(button, a):disabled {
+  color: var(--pagination-disabled-color, #7D898D);
+  background-color: var(--pagination-disabled-background-color, #ECECEC);
 }
-.pv-v2 .pv-pagination a:hover:not([aria-current=page]), .pv-v2 .pv-pagination a:focus-visible:not([aria-current=page]) {
-  background-color: #ECECEC;
+.pv-v2 .pv-pagination [aria-current=page] :is(button, a),
+.pv-v2 .pv-pagination [aria-current=page] :is(button, a):hover,
+.pv-v2 .pv-pagination [aria-current=page] :is(button, a):focus-visible, .pv-v2 .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a),
+.pv-v2 .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a):hover,
+.pv-v2 .pv-pagination :is(ul, ol) [aria-current=page] :is(button, a):focus-visible {
+  color: var(--pagination-item-active-color, #FFFFFF);
+  background-color: var(--pagination-item-active-background-color, #16696D);
 }
-.pv-v2 .pv-pagination > button,
-.pv-v2 .pv-pagination > a,
-.pv-v2 .pv-pagination li {
-  border: 1px solid #E3E7EA;
-  text-align: center;
-  width: 40px;
-  height: 40px;
-  color: inherit;
-  background-color: #FFFFFF;
-  font-weight: 700;
+.pv-v2 .pv-pagination[data-style=small] :where(button, a), .pv-v2 .pv-pagination :is(ul, ol)[data-style=small] :where(button, a) {
+  width: var(--pagination-small-item-width, 24px);
 }
-.pv-v2 .pv-pagination :not(:last-child),
-.pv-v2 .pv-pagination [role=list] li:last-child {
-  border-inline-end: 0;
+.pv-v2 .pv-pagination li,
+.pv-v2 .pv-pagination > :is(button, a):not(:last-child), .pv-v2 .pv-pagination :is(ul, ol) li,
+.pv-v2 .pv-pagination :is(ul, ol) > :is(button, a):not(:last-child) {
+  border-right: var(--pagination-border, 0);
 }
 .pv-v2 .pv-scroller {
   position: absolute;