@turquoisehealth/pit-viper 2.21.1 → 2.21.2

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

@@ -185,7 +185,7 @@
 
 .pv-heading-3 {
   font-size: var(--font-size-heading-3, 0.875rem);
-  line-height: var(--line-height-heading-3, 1.1428571);
+  line-height: var(--line-height-heading-3, 1.4285714);
 }
 
 .pv-heading-4 {
@@ -348,7 +348,7 @@
 }
 [data-list-style=display]::before {
   content: counter(display) ".";
-  color: #176F6F;
+  color: #16696D;
   font-family: "Inter", sans-serif;
   font-size: 1.5rem;
 }
@@ -430,7 +430,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--button-gap, 4px);
   white-space: nowrap;
   font-weight: var(--button-font-weight, 500);
   line-height: var(--button-line-height, 1.45454545);
@@ -504,7 +504,7 @@
 
 .pv-button-secondary {
   color: var(--button-secondary-color, #121313);
-  background-color: var(--button-secondary-background-color, transparent);
+  background-color: var(--button-secondary-background-color, #FFFFFF);
   border-color: var(--button-secondary-border-color, #E3E7EA);
 }
 .pv-button-secondary:not(:disabled):hover, .pv-button-secondary:not(:disabled):focus-visible {
@@ -527,7 +527,7 @@
 }
 
 .pv-button-tertiary {
-  background-color: transparent;
+  background-color: #FFFFFF;
   border-color: transparent;
 }
 .pv-button-tertiary:not(:disabled) {
@@ -657,10 +657,10 @@
   background-color: #ECECEC;
 }
 .pv-button-icon.pv-button-small {
-  padding: 0.25rem;
+  padding: calc(0.25rem - 1px);
 }
 .pv-button-icon.pv-button-xsmall {
-  padding: 0.125rem;
+  padding: calc(0.125rem - 1px);
 }
 
 .pv-button-icon-outline {
@@ -869,7 +869,7 @@
 .pv-alpha-button span:last-child,
 [data-collapsed] .pv-alpha-button span:last-child {
   display: inline-block;
-  background-color: #EAB333;
+  background-color: #FFEB99;
   border-radius: 4px;
   padding: 0.125rem;
   font-size: 0.6875rem;
@@ -1048,6 +1048,8 @@
   font-size: var(--label-font-size, 0.6875rem);
   font-weight: var(--label-font-weight, 400);
   letter-spacing: 0.12px;
+  position: relative;
+  z-index: 1;
 }
 
 label:has(input:not(:disabled)).pv-label-hover:hover {
@@ -1056,11 +1058,12 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 
 .pv-checkbox,
 .pv-radio {
+  position: relative;
   appearance: none;
   width: 1rem;
   height: 1rem;
   background-color: #FFFFFF;
-  border: 2px solid var(--color-border, #E3E7EA);
+  border: 2px solid var(--checkbox-border, #D2D8DC);
   flex-shrink: 0;
   transition-duration: 0.125s;
   transition-property: background-color, border-color;
@@ -1071,49 +1074,63 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   transition-duration: 0.125s;
   transition-property: color;
 }
+.pv-checkbox:not(:disabled):hover:before, .pv-checkbox:not(:disabled):focus-visible:before,
+.pv-radio:not(:disabled):hover:before,
+.pv-radio:not(:disabled):focus-visible:before {
+  content: "";
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background-color: var(--checkbox-hover-before-background-color, #F7F8F8);
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  z-index: -1;
+}
 .pv-checkbox:not(:disabled):focus-visible, .pv-checkbox:not(:disabled):hover,
 .pv-radio:not(:disabled):focus-visible,
 .pv-radio:not(:disabled):hover {
-  background-color: #ECECEC;
+  background-color: var(--checkbox-hover-background-color, transparent);
+  border-color: var(--checkbox-hover-border-color, #D2D8DC);
   cursor: pointer;
-}
-.pv-checkbox:focus-visible:not(:disabled), .pv-checkbox:hover:not(:disabled),
-.pv-radio:focus-visible:not(:disabled),
-.pv-radio:hover:not(:disabled) {
-  border-color: var(--color-border-brand, #36C5BA);
-}
-.pv-checkbox:focus-visible:not(:disabled):checked, .pv-checkbox:hover:not(:disabled):checked,
-.pv-radio:focus-visible:not(:disabled):checked,
-.pv-radio:hover:not(:disabled):checked {
-  background-color: var(--color-background-brand, #176F6F);
-}
-.pv-checkbox:checked,
-.pv-radio:checked {
-  background-color: var(--color-background-brand, #02363D);
-  border-color: var(--color-border-brand, #02363D);
+  outline-color: var(--checkbox-hover-outline-color, transparent);
+}
+.pv-checkbox:not(:disabled):focus-visible:checked, .pv-checkbox:not(:disabled):focus-visible:indeterminate, .pv-checkbox:not(:disabled):hover:checked, .pv-checkbox:not(:disabled):hover:indeterminate,
+.pv-radio:not(:disabled):focus-visible:checked,
+.pv-radio:not(:disabled):focus-visible:indeterminate,
+.pv-radio:not(:disabled):hover:checked,
+.pv-radio:not(:disabled):hover:indeterminate {
+  border-color: var(--checkbox-checked-hover-border-color, #16696D);
+  background-color: var(--checkbox-checked-hover-background-color, #16696D);
+}
+.pv-checkbox:not(:disabled):focus-visible:checked:before, .pv-checkbox:not(:disabled):focus-visible:indeterminate:before, .pv-checkbox:not(:disabled):hover:checked:before, .pv-checkbox:not(:disabled):hover:indeterminate:before,
+.pv-radio:not(:disabled):focus-visible:checked:before,
+.pv-radio:not(:disabled):focus-visible:indeterminate:before,
+.pv-radio:not(:disabled):hover:checked:before,
+.pv-radio:not(:disabled):hover:indeterminate:before {
+  background-color: var(--checkbox-checked-hover-before-background-color, #E4F8F6);
+}
+.pv-checkbox:checked, .pv-checkbox:indeterminate,
+.pv-radio:checked,
+.pv-radio:indeterminate {
+  background-color: var(--checkbox-checked-background-color, #16696D);
+  border-color: var(--checkbox-checked-border-color, #16696D);
 }
 .pv-checkbox:disabled,
 .pv-radio:disabled {
-  background-color: #ECECEC;
+  background-color: var(--checkbox-disabled-background-color, #ECECEC);
 }
 .pv-checkbox:disabled:checked,
 .pv-radio:disabled:checked {
-  background-color: #6E7784;
-  border-color: #6E7784;
+  background-color: var(--checkbox-checked-disabled-background-color, #ECECEC);
+  border-color: var(--checkbox-checked-disabled-border-color, #ECECEC);
 }
 .pv-checkbox:disabled + span,
 .pv-radio:disabled + span {
   color: #4B595C;
 }
 
-.pv-checkbox:focus-visible:indeterminate, .pv-checkbox:hover:indeterminate {
-  background-color: var(--color-background-brand, #176F6F);
-}
-.pv-checkbox:indeterminate {
-  background-color: var(--color-background-brand, #02363D);
-  border-color: var(--color-border-brand, #02363D);
-}
-
 .pv-checkbox {
   border-radius: 2px;
 }
@@ -1123,10 +1140,16 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   background-position: 50% 50%;
 }
 .pv-checkbox:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='m12 2.256-7.762 8.87L0 6.89l1.466-1.466 2.67 2.67L10.44.892 12 2.256Z'/%3E%3C/svg%3E");
+  background-image: var(--checkbox-checked-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.1 4.9c.6.6.6 1.5 0 2.1l-11 11c-.6.6-1.5.6-2.1 0l-5-5c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l3.9 4L18.9 5c.6-.6 1.6-.6 2.2-.1z' fill='%23fff'/%3E%3C/svg%3E"));
+}
+.pv-checkbox:checked:disabled {
+  background-image: var(--checkbox-checked-disabled-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.1 4.9c.6.6.6 1.5 0 2.1l-11 11c-.6.6-1.5.6-2.1 0l-5-5c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l3.9 4L18.9 5c.6-.6 1.6-.6 2.2-.1z' fill='%237D898D'/%3E%3C/svg%3E"));
 }
 .pv-checkbox:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 5h12v2H0z' fill='%23fff'/%3E%3C/svg%3E");
+  background-image: var(--checkbox-indeterminate-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7Z' fill='%23fff'/%3E%3C/svg%3E"));
+}
+.pv-checkbox:indeterminate:disabled {
+  background-image: var(--checkbox-indeterminate-disabled-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7Z' fill='%237D898D'/%3E%3C/svg%3E"));
 }
 
 .pv-radio {
@@ -1137,18 +1160,30 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   background-color: unset;
   border-color: var(--color-border, #E3E7EA);
 }
+.pv-radio:checked {
+  background-color: var(--radio-checked-background-color, transparent);
+}
+.pv-radio:checked:not(:disabled):hover, .pv-radio:checked:not(:disabled):focus-visible {
+  background-color: var(--radio-checked-hover-background-color, transparent);
+}
 .pv-radio:checked:after {
   content: "";
   display: block;
-  width: 6px;
-  height: 6px;
-  background-color: #FFFFFF;
+  width: var(--radio-checked-after-size, 8px);
+  height: var(--radio-checked-after-size, 8px);
+  background-color: var(--radio-checked-after-background-color, #16696D);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
 }
+.pv-radio:disabled:checked {
+  border-color: var(--radio-checked-disabled-border-color, #D2D8DC);
+}
+.pv-radio:disabled:checked:after {
+  background-color: var(--radio-checked-disabled-after-background-color, #D2D8DC);
+}
 
 .pv-input-padded-end {
   padding-inline-end: 2.25rem;
@@ -1448,7 +1483,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 .pv-ghost-input[data-style=h3] input {
   font-weight: 600;
   font-size: 0.875rem;
-  line-height: 1.1428571;
+  line-height: 1.4285714;
 }
 .pv-ghost-input[data-style=h4] input {
   font-weight: 600;
@@ -1796,7 +1831,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 [data-collapsed] [data-grid-area=sidebar] .pv-nav-list details > summary {
   background-image: none;
   width: 40px;
-  padding: var(--nav-list-collapsed-padding, 0.5rem 1rem);
+  padding: var(--nav-list-collapsed-padding, 0.5rem 0.75rem);
 }
 [data-collapsed] [data-grid-area=sidebar] .pv-nav-list details[open] > summary {
   background-color: var(--nav-list-background-color, transparent);
@@ -1814,7 +1849,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 [data-collapsed] [data-grid-area=sidebar] .pv-nav-list a {
   display: block;
-  padding: var(--nav-list-collapsed-padding, 0.5rem 1rem);
+  padding: var(--nav-list-collapsed-padding, 0.5rem 0.75rem);
 }
 
 .pv-nav-list-inverse,
@@ -2545,13 +2580,17 @@ td:not([rowspan]) > .pv-responsive-cell {
   border-radius: 2rem;
 }
 
-button[class*=pv-tag] {
+button[class*=pv-tag],
+button.pv-tag-tertiary {
   cursor: pointer;
 }
-button[class*=pv-tag]:hover, button[class*=pv-tag]:focus-visible {
+button[class*=pv-tag]:hover, button[class*=pv-tag]:focus-visible,
+button.pv-tag-tertiary:hover,
+button.pv-tag-tertiary:focus-visible {
   background-color: #E8F2F4;
 }
-button[class*=pv-tag]:active {
+button[class*=pv-tag]:active,
+button.pv-tag-tertiary:active {
   background-color: #C7D8DB;
 }
 
@@ -2645,6 +2684,33 @@ strong[class*=pv-tag] {
   color: #121313;
 }
 
+.pv-tag-primary {
+  background-color: #16696D;
+  color: #FFFFFF;
+}
+
+button.pv-tag-primary:hover, button.pv-tag-primary:focus-visible {
+  background-color: #0D5256;
+}
+button.pv-tag-primary:active {
+  background-color: #02363D;
+}
+
+.pv-tag-secondary {
+  background-color: #FFFFFF;
+  color: #4B595C;
+  border-color: #D2D8DC;
+}
+
+button.pv-tag-secondary:hover, button.pv-tag-secondary:focus-visible {
+  background-color: #E8F2F4;
+  color: #121313;
+}
+button.pv-tag-secondary:active {
+  background-color: #C7D8DB;
+  color: #121313;
+}
+
 .pv-pill {
   display: inline-block;
   padding: 3px 6px;
@@ -2895,7 +2961,7 @@ strong[class*=pv-tag] {
 .pv-select-multiple[data-dropdown],
 .pv-input-search[data-dropdown] {
   border-color: #36C5BA;
-  color: #176F6F;
+  color: #16696D;
 }
 .pv-select-multiple[data-dropdown] + .pv-popover,
 .pv-input-search[data-dropdown] + .pv-popover {
@@ -3188,7 +3254,7 @@ strong[class*=pv-tag] {
   display: none;
 }
 :where([class*=pv-accordion]) > summary:hover, :where([class*=pv-accordion]) > summary:focus-within {
-  color: var(--color-text-brand, #176F6F);
+  color: var(--color-text-brand, #16696D);
 }
 :where([class*=pv-accordion]) > :where(:not(summary)) {
   padding: 0 1rem 1rem 1rem;
@@ -3286,7 +3352,7 @@ strong[class*=pv-tag] {
   transition-timing-function: ease-in;
 }
 :where(.pv-details) > summary:hover, :where(.pv-details) > summary:focus-within {
-  color: var(--color-text-brand, #176F6F);
+  color: var(--color-text-brand, #16696D);
 }
 :where(.pv-details) > summary::-webkit-details-marker {
   display: none;
@@ -3442,7 +3508,7 @@ strong[class*=pv-tag] {
 .pv-card-select > label > :last-child {
   padding: 1rem 1.5rem;
   font-weight: 600;
-  color: #176F6F;
+  color: #16696D;
   background-image: var(--unselected-icon);
   background-repeat: no-repeat;
   background-size: 1.5rem 1.5rem;
@@ -3452,7 +3518,7 @@ strong[class*=pv-tag] {
   content: var(--unselected);
 }
 .pv-card-select > label:hover {
-  color: #176F6F;
+  color: #16696D;
   cursor: pointer;
   border-color: #36C5BA;
 }
@@ -3824,7 +3890,7 @@ pv-data-grid.ag-theme-pv {
   --ag-active-color: #36C5BA !important;
   --ag-row-hover-color: #F7F8F8 !important;
   --ag-range-selection-background-color: rgba(0,0,0,0.2) !important;
-  --ag-accent-color: #176F6F !important;
+  --ag-accent-color: #16696D !important;
   --ag-header-cell-hover-background-color: #E2F7F5;
   --ag-header-column-separator-height: 100%;
   --ag-popup-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.30), 0px 8px 12px -4px rgba(0, 0, 0, 0.08), 0px 12px 16px 0px rgba(0, 0, 0, 0.10);
@@ -4045,6 +4111,26 @@ pv-data-grid.ag-theme-pv {
   border-bottom: 1px solid #E3E7EA;
 }
 
+[class*=pv-banner] {
+  padding: var(--banner-padding, 0.75rem 1rem);
+  border-radius: var(--banner-radius, 4px);
+}
+
+.pv-banner-primary {
+  background-color: var(--banner-primary-background-color, #E4F8F6);
+  border-bottom: 1px solid var(--banner-primary-border-color, #B0E8E4);
+}
+
+.pv-banner-secondary {
+  background-color: var(--banner-secondary-background-color, #FFFFFF);
+  border: 1px solid var(--banner-secondary-border-color, #E3E7EA);
+}
+
+.pv-banner-tertiary {
+  background-color: var(--banner-tertiary-background-color, #F7F8F8);
+  border: 1px solid var(--banner-tertiary-border-color, transparent);
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, Inter, sans-serif);
@@ -4233,6 +4319,40 @@ body:has(.pv-layout-primary) {
   }
 }
 
+.pv-layout-two-sidebar {
+  --left-size: 320px;
+  --right-size: 320px;
+  overflow: clip;
+  height: 100%;
+  display: grid;
+  transition: 200ms;
+  grid-template-columns: var(--left-size) 1fr var(--right-size);
+  grid-template-areas: "left center right";
+}
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]) {
+  grid-template-columns: 0 1fr var(--right-size);
+}
+.pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) {
+  grid-template-columns: var(--left-size) 1fr 0;
+}
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]):has([data-layout=right-sidebar][data-hidden]) {
+  grid-template-columns: 0 1fr 0;
+}
+.pv-layout-two-sidebar [data-layout=left-sidebar] {
+  border-right: 1px solid #E3E7EA;
+  min-width: var(--left-size);
+}
+.pv-layout-two-sidebar [data-layout=left-sidebar][data-hidden] {
+  transform: translateX(calc(var(--left-size) * -1));
+}
+.pv-layout-two-sidebar [data-layout=right-sidebar] {
+  border-left: 1px solid #E3E7EA;
+  min-width: var(--right-size);
+}
+.pv-layout-two-sidebar [data-layout=right-sidebar][data-hidden] {
+  transform: translateX(var(--right-size));
+}
+
 .pv-surface-brand {
   background-color: var(--color-background-brand, #02363D);
 }
@@ -4278,8 +4398,7 @@ body:has(.pv-layout-primary) {
 }
 
 .pv-text-subdued-inverse {
-  color: var(--color-text-inverse, #FFFFFF);
-  opacity: 0.7;
+  color: var(--color-text-inverse-subdued, #FFFFFF);
 }
 
 .pv-text-inverse {
@@ -4287,7 +4406,7 @@ body:has(.pv-layout-primary) {
 }
 
 .pv-text-brand {
-  color: var(--color-text-brand, #176F6F);
+  color: var(--color-text-brand, #16696D);
 }
 
 .pv-text-brand-inverse {
@@ -4676,6 +4795,10 @@ svg.pv-text-inherit {
   border-color: var(--color-border-warning, #B38F00);
 }
 
+.pv-border-critical {
+  border-color: var(--color-border-critical, #FF471A);
+}
+
 .pv-border-brand {
   border-color: var(--color-border-brand, #16696D);
 }

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

@@ -448,7 +448,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: var(--button-gap, 8px);
   white-space: nowrap;
   font-weight: var(--button-font-weight, 600);
   line-height: var(--button-line-height, inherit);
@@ -538,7 +538,7 @@
 }
 .pv-button-secondary.pv-button-inverse:not(:disabled):hover, .pv-button-secondary.pv-button-inverse:not(:disabled):focus-visible {
   color: var(--color-text-body, #02363D);
-  background-color: var(--color-background-brand-accent, #E2F7F5);
+  background-color: var(--color-background-brand-accent, #F3FCFB);
 }
 .pv-button-secondary.pv-button-inverse:not(:disabled):active {
   background-color: var(--color-background-interactive, #A8E6E1);
@@ -675,10 +675,10 @@
   background-color: #ECECEC;
 }
 .pv-button-icon.pv-button-small {
-  padding: 0.25rem;
+  padding: calc(0.25rem - 1px);
 }
 .pv-button-icon.pv-button-xsmall {
-  padding: 0.125rem;
+  padding: calc(0.125rem - 1px);
 }
 
 .pv-button-icon-outline {
@@ -754,10 +754,10 @@
 }
 [class*=pv-segmented-control] button:hover:not(:disabled),
 [class*=pv-segmented-control] button:focus-visible:not(:disabled) {
-  background-color: #E2F7F5;
+  background-color: #F3FCFB;
 }
 [class*=pv-segmented-control] button:active:not(:disabled) {
-  background-color: #E2F7F5;
+  background-color: #F3FCFB;
 }
 
 .pv-segmented-control-icon button {
@@ -857,7 +857,7 @@
   color: #02363D;
 }
 .pv-button-floating-on-dark:hover:not(:disabled), .pv-button-floating-on-dark:focus-visible:not(:disabled) {
-  background-color: #E2F7F5;
+  background-color: #F3FCFB;
 }
 .pv-button-floating-on-dark:active:not(:disabled) {
   background-color: #6FD6CE;
@@ -887,7 +887,7 @@
 .pv-alpha-button span:last-child,
 [data-collapsed] .pv-alpha-button span:last-child {
   display: inline-block;
-  background-color: #EAB333;
+  background-color: #FFEB99;
   border-radius: 4px;
   padding: 0.125rem;
   font-size: 0.6875rem;
@@ -1066,6 +1066,8 @@
   font-size: var(--label-font-size, 1rem);
   font-weight: var(--label-font-weight, 700);
   letter-spacing: 0;
+  position: relative;
+  z-index: 1;
 }
 
 label:has(input:not(:disabled)).pv-label-hover:hover {
@@ -1074,11 +1076,12 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 
 .pv-checkbox,
 .pv-radio {
+  position: relative;
   appearance: none;
   width: 1rem;
   height: 1rem;
   background-color: #FFFFFF;
-  border: 2px solid var(--color-border, #DCDFE4);
+  border: 2px solid var(--checkbox-border, #DCDFE4);
   flex-shrink: 0;
   transition-duration: 0.125s;
   transition-property: background-color, border-color;
@@ -1089,49 +1092,63 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   transition-duration: 0.125s;
   transition-property: color;
 }
+.pv-checkbox:not(:disabled):hover:before, .pv-checkbox:not(:disabled):focus-visible:before,
+.pv-radio:not(:disabled):hover:before,
+.pv-radio:not(:disabled):focus-visible:before {
+  content: "";
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background-color: var(--checkbox-hover-before-background-color, transparent);
+  position: absolute;
+  top: -6px;
+  left: -6px;
+  z-index: -1;
+}
 .pv-checkbox:not(:disabled):focus-visible, .pv-checkbox:not(:disabled):hover,
 .pv-radio:not(:disabled):focus-visible,
 .pv-radio:not(:disabled):hover {
-  background-color: #F3F4F6;
+  background-color: var(--checkbox-hover-background-color, #F3F4F6);
+  border-color: var(--checkbox-hover-border-color, #176F6F);
   cursor: pointer;
-}
-.pv-checkbox:focus-visible:not(:disabled), .pv-checkbox:hover:not(:disabled),
-.pv-radio:focus-visible:not(:disabled),
-.pv-radio:hover:not(:disabled) {
-  border-color: var(--color-border-brand, #176F6F);
-}
-.pv-checkbox:focus-visible:not(:disabled):checked, .pv-checkbox:hover:not(:disabled):checked,
-.pv-radio:focus-visible:not(:disabled):checked,
-.pv-radio:hover:not(:disabled):checked {
-  background-color: var(--color-background-brand, #176F6F);
-}
-.pv-checkbox:checked,
-.pv-radio:checked {
-  background-color: var(--color-background-brand, #218C88);
-  border-color: var(--color-border-brand, #218C88);
+  outline-color: var(--checkbox-hover-outline-color, #36C5BA);
+}
+.pv-checkbox:not(:disabled):focus-visible:checked, .pv-checkbox:not(:disabled):focus-visible:indeterminate, .pv-checkbox:not(:disabled):hover:checked, .pv-checkbox:not(:disabled):hover:indeterminate,
+.pv-radio:not(:disabled):focus-visible:checked,
+.pv-radio:not(:disabled):focus-visible:indeterminate,
+.pv-radio:not(:disabled):hover:checked,
+.pv-radio:not(:disabled):hover:indeterminate {
+  border-color: var(--checkbox-checked-hover-border-color, #176F6F);
+  background-color: var(--checkbox-checked-hover-background-color, #176F6F);
+}
+.pv-checkbox:not(:disabled):focus-visible:checked:before, .pv-checkbox:not(:disabled):focus-visible:indeterminate:before, .pv-checkbox:not(:disabled):hover:checked:before, .pv-checkbox:not(:disabled):hover:indeterminate:before,
+.pv-radio:not(:disabled):focus-visible:checked:before,
+.pv-radio:not(:disabled):focus-visible:indeterminate:before,
+.pv-radio:not(:disabled):hover:checked:before,
+.pv-radio:not(:disabled):hover:indeterminate:before {
+  background-color: var(--checkbox-checked-hover-before-background-color, transparent);
+}
+.pv-checkbox:checked, .pv-checkbox:indeterminate,
+.pv-radio:checked,
+.pv-radio:indeterminate {
+  background-color: var(--checkbox-checked-background-color, #218C88);
+  border-color: var(--checkbox-checked-border-color, #218C88);
 }
 .pv-checkbox:disabled,
 .pv-radio:disabled {
-  background-color: #F3F4F6;
+  background-color: var(--checkbox-disabled-background-color, #F3F4F6);
 }
 .pv-checkbox:disabled:checked,
 .pv-radio:disabled:checked {
-  background-color: #6E7784;
-  border-color: #6E7784;
+  background-color: var(--checkbox-checked-disabled-background-color, #6E7784);
+  border-color: var(--checkbox-checked-disabled-border-color, #6E7784);
 }
 .pv-checkbox:disabled + span,
 .pv-radio:disabled + span {
   color: #6E7784;
 }
 
-.pv-checkbox:focus-visible:indeterminate, .pv-checkbox:hover:indeterminate {
-  background-color: var(--color-background-brand, #176F6F);
-}
-.pv-checkbox:indeterminate {
-  background-color: var(--color-background-brand, #218C88);
-  border-color: var(--color-border-brand, #218C88);
-}
-
 .pv-checkbox {
   border-radius: 2px;
 }
@@ -1141,10 +1158,16 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   background-position: 50% 50%;
 }
 .pv-checkbox:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='m12 2.256-7.762 8.87L0 6.89l1.466-1.466 2.67 2.67L10.44.892 12 2.256Z'/%3E%3C/svg%3E");
+  background-image: var(--checkbox-checked-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='m12 2.256-7.762 8.87L0 6.89l1.466-1.466 2.67 2.67L10.44.892 12 2.256Z'/%3E%3C/svg%3E"));
+}
+.pv-checkbox:checked:disabled {
+  background-image: var(--checkbox-checked-disabled-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='m12 2.256-7.762 8.87L0 6.89l1.466-1.466 2.67 2.67L10.44.892 12 2.256Z'/%3E%3C/svg%3E"));
 }
 .pv-checkbox:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 5h12v2H0z' fill='%23fff'/%3E%3C/svg%3E");
+  background-image: var(--checkbox-indeterminate-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 5h12v2H0z' fill='%23fff'/%3E%3C/svg%3E"));
+}
+.pv-checkbox:indeterminate:disabled {
+  background-image: var(--checkbox-indeterminate-disabled-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='m12 2.256-7.762 8.87L0 6.89l1.466-1.466 2.67 2.67L10.44.892 12 2.256Z'/%3E%3C/svg%3E"));
 }
 
 .pv-radio {
@@ -1155,18 +1178,30 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   background-color: unset;
   border-color: var(--color-border, #DCDFE4);
 }
+.pv-radio:checked {
+  background-color: var(--radio-checked-background-color, #218C88);
+}
+.pv-radio:checked:not(:disabled):hover, .pv-radio:checked:not(:disabled):focus-visible {
+  background-color: var(--radio-checked-hover-background-color, #176F6F);
+}
 .pv-radio:checked:after {
   content: "";
   display: block;
-  width: 6px;
-  height: 6px;
-  background-color: #FFFFFF;
+  width: var(--radio-checked-after-size, 6px);
+  height: var(--radio-checked-after-size, 6px);
+  background-color: var(--radio-checked-after-background-color, #FFFFFF);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
 }
+.pv-radio:disabled:checked {
+  border-color: var(--radio-checked-disabled-border-color, transparent);
+}
+.pv-radio:disabled:checked:after {
+  background-color: var(--radio-checked-disabled-after-background-color, #FFFFFF);
+}
 
 .pv-input-padded-end {
   padding-inline-end: 2.25rem;
@@ -1539,13 +1574,13 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 .pv-toc > li a:hover, .pv-toc > li a:focus-visible {
   color: #176F6F;
-  background-color: #E2F7F5;
+  background-color: #F3FCFB;
   border-color: #02363D;
   text-decoration: none;
 }
 .pv-toc > li a:active {
   color: #176F6F;
-  background-color: #E2F7F5;
+  background-color: #F3FCFB;
   border-color: #02363D;
 }
 .pv-toc > li[aria-current] a {
@@ -2563,13 +2598,17 @@ td:not([rowspan]) > .pv-responsive-cell {
   border-radius: 2rem;
 }
 
-button[class*=pv-tag] {
+button[class*=pv-tag],
+button.pv-tag-tertiary {
   cursor: pointer;
 }
-button[class*=pv-tag]:hover, button[class*=pv-tag]:focus-visible {
+button[class*=pv-tag]:hover, button[class*=pv-tag]:focus-visible,
+button.pv-tag-tertiary:hover,
+button.pv-tag-tertiary:focus-visible {
   background-color: unset;
 }
-button[class*=pv-tag]:active {
+button[class*=pv-tag]:active,
+button.pv-tag-tertiary:active {
   background-color: unset;
 }
 
@@ -2663,6 +2702,33 @@ strong[class*=pv-tag] {
   color: #02363D;
 }
 
+.pv-tag-primary {
+  background-color: #16696D;
+  color: #FFFFFF;
+}
+
+button.pv-tag-primary:hover, button.pv-tag-primary:focus-visible {
+  background-color: #0D5256;
+}
+button.pv-tag-primary:active {
+  background-color: #02363D;
+}
+
+.pv-tag-secondary {
+  background-color: #FFFFFF;
+  color: #4B595C;
+  border-color: #D2D8DC;
+}
+
+button.pv-tag-secondary:hover, button.pv-tag-secondary:focus-visible {
+  background-color: #E8F2F4;
+  color: #121313;
+}
+button.pv-tag-secondary:active {
+  background-color: #C7D8DB;
+  color: #121313;
+}
+
 .pv-pill {
   display: inline-block;
   padding: 3px 6px;
@@ -3478,7 +3544,7 @@ strong[class*=pv-tag] {
   border-color: #176F6F;
 }
 .pv-card-select > input:checked + label {
-  background-color: #E2F7F5;
+  background-color: #F3FCFB;
   border-color: #176F6F;
 }
 .pv-card-select > input:checked + label > :first-child {
@@ -4063,6 +4129,26 @@ pv-data-grid.ag-theme-pv {
   border-bottom: 1px solid #DCDFE4;
 }
 
+[class*=pv-banner] {
+  padding: var(--banner-padding, 0.75rem 1rem);
+  border-radius: var(--banner-radius, 5px);
+}
+
+.pv-banner-primary {
+  background-color: var(--banner-primary-background-color, #E4F8F6);
+  border-bottom: 1px solid var(--banner-primary-border-color, #B0E8E4);
+}
+
+.pv-banner-secondary {
+  background-color: var(--banner-secondary-background-color, #FFFFFF);
+  border: 1px solid var(--banner-secondary-border-color, #DCDFE4);
+}
+
+.pv-banner-tertiary {
+  background-color: var(--banner-tertiary-background-color, #F7F8F8);
+  border: 1px solid var(--banner-tertiary-border-color, transparent);
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, HK Grotesk, sans-serif);
@@ -4251,6 +4337,40 @@ body:has(.pv-layout-primary) {
   }
 }
 
+.pv-layout-two-sidebar {
+  --left-size: 320px;
+  --right-size: 320px;
+  overflow: clip;
+  height: 100%;
+  display: grid;
+  transition: 200ms;
+  grid-template-columns: var(--left-size) 1fr var(--right-size);
+  grid-template-areas: "left center right";
+}
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]) {
+  grid-template-columns: 0 1fr var(--right-size);
+}
+.pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) {
+  grid-template-columns: var(--left-size) 1fr 0;
+}
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]):has([data-layout=right-sidebar][data-hidden]) {
+  grid-template-columns: 0 1fr 0;
+}
+.pv-layout-two-sidebar [data-layout=left-sidebar] {
+  border-right: 1px solid #DCDFE4;
+  min-width: var(--left-size);
+}
+.pv-layout-two-sidebar [data-layout=left-sidebar][data-hidden] {
+  transform: translateX(calc(var(--left-size) * -1));
+}
+.pv-layout-two-sidebar [data-layout=right-sidebar] {
+  border-left: 1px solid #DCDFE4;
+  min-width: var(--right-size);
+}
+.pv-layout-two-sidebar [data-layout=right-sidebar][data-hidden] {
+  transform: translateX(var(--right-size));
+}
+
 .pv-surface-brand {
   background-color: var(--color-background-brand, #02363D);
 }
@@ -4268,7 +4388,7 @@ body:has(.pv-layout-primary) {
 }
 
 .pv-surface-brand-accent {
-  background-color: var(--color-background-brand-accent, #E2F7F5);
+  background-color: var(--color-background-brand-accent, #F3FCFB);
 }
 
 .pv-surface-warning {
@@ -4296,8 +4416,7 @@ body:has(.pv-layout-primary) {
 }
 
 .pv-text-subdued-inverse {
-  color: var(--color-text-inverse, #FFFFFF);
-  opacity: 0.7;
+  color: var(--color-text-inverse-subdued, #DCDFE4);
 }
 
 .pv-text-inverse {
@@ -4321,11 +4440,11 @@ body:has(.pv-layout-primary) {
 }
 
 .pv-text-warning {
-  color: #B78000;
+  color: #896000;
 }
 
 .pv-text-success {
-  color: #17B225;
+  color: #0E6027;
 }
 
 .pv-text-inherit a,
@@ -4694,6 +4813,10 @@ svg.pv-text-inherit {
   border-color: var(--color-border-warning, #EFC666);
 }
 
+.pv-border-critical {
+  border-color: var(--color-border-critical, #A2191F);
+}
+
 .pv-border-brand {
   border-color: var(--color-border-brand, #02363D);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.21.1",
+  "version": "2.21.2",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {
@@ -47,7 +47,7 @@
     "build:eleventy": "eleventy",
     "build:pagefind": "npx pagefind --site _site",
     "build:pv-components": "npm run build --workspace=pv-components",
-    "prepublishOnly": "npm run build:pv-components",
+    "prepublishOnly": "npm run build",
     "start": "npm-run-all build:sass --parallel watch:*",
     "build": "npm-run-all build:*",
     "postbuild": "eleventy --quiet",