@turquoisehealth/pit-viper 2.151.2-dev.0 → 2.152.0

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

@@ -458,7 +458,7 @@
   border-radius: var(--button-radius, 4px);
   font-size: var(--button-font-size, 0.875rem);
   transition-duration: 0.125s;
-  transition-property: background-color, color;
+  transition-property: background-color, background-image, color;
 }
 :where([class*=pv-button]):disabled,
 :where([class*=pv-segmented-control] button):disabled {
@@ -687,6 +687,8 @@
 }
 
 .pv-button-small {
+  font-size: var(--button-small-font-size, 0.875rem);
+  line-height: var(--button-small-line-height, 1.2857142857);
   padding: var(--button-small-padding, calc(0.125rem - 1px) 0.25rem);
 }
 .pv-button-small.pv-button-primary-outline {
@@ -1219,21 +1221,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   position: relative;
   border-radius: 50%;
 }
-.pv-radio:not(:checked):not(:disabled):hover, .pv-radio:not(:checked):not(:disabled):focus-visible {
-  background-color: transparent;
-}
-.pv-radio:not(:checked):not(:disabled):hover:after, .pv-radio:not(:checked):not(:disabled):focus-visible:after {
-  content: "";
-  display: block;
-  width: var(--radio-checked-after-size, 8px);
-  height: var(--radio-checked-after-size, 8px);
-  background-color: var(--radio-checked-after-background-color, #13595D);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-}
 .pv-radio:indeterminate {
   background-color: unset;
   border-color: var(--color-border, #8F939E);

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

@@ -460,11 +460,11 @@
   gap: var(--button-gap, 0.25rem);
   white-space: nowrap;
   font-weight: var(--button-font-weight, 500);
-  line-height: var(--button-line-height, 1.5);
+  line-height: var(--button-line-height, 1.25);
   border-radius: var(--button-radius, 6px);
   font-size: var(--button-font-size, 1rem);
   transition-duration: 0.125s;
-  transition-property: background-color, color;
+  transition-property: background-color, background-image, color;
 }
 :where([class*=pv-button]):disabled,
 :where([class*=pv-segmented-control] button):disabled {
@@ -543,12 +543,12 @@
 
 .pv-button-secondary {
   color: var(--button-secondary-color, #1A3A39);
-  background-color: var(--button-secondary-background-color, #FFFFFF);
-  border-color: var(--button-secondary-border-color, #E8EBEB);
+  background-color: var(--button-secondary-background-color, white);
+  border-color: var(--button-secondary-border-color, #D1D8D7);
 }
 .pv-button-secondary:not(:disabled):hover, .pv-button-secondary:not(:disabled):focus-visible {
   color: var(--button-secondary-hover-color, #1A3A39);
-  background-color: var(--button-secondary-hover-background-color, #F8F7F1);
+  background-color: var(--button-secondary-hover-background-color, #E8EBEB);
 }
 .pv-button-secondary:not(:disabled):active {
   background-color: var(--button-secondary-pressed-background-color, #C7D8DB);
@@ -693,7 +693,9 @@
 }
 
 .pv-button-small {
-  padding: var(--button-small-padding, calc(0.125rem - 1px) 0.25rem);
+  font-size: var(--button-small-font-size, 0.875rem);
+  line-height: var(--button-small-line-height, 1.4285714286);
+  padding: var(--button-small-padding, 0.3125rem 1rem);
 }
 .pv-button-small.pv-button-primary-outline {
   padding: calc(0.25rem - 1px) 0.5rem;
@@ -1225,21 +1227,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   position: relative;
   border-radius: 50%;
 }
-.pv-radio:not(:checked):not(:disabled):hover, .pv-radio:not(:checked):not(:disabled):focus-visible {
-  background-color: transparent;
-}
-.pv-radio:not(:checked):not(:disabled):hover:after, .pv-radio:not(:checked):not(:disabled):focus-visible:after {
-  content: "";
-  display: block;
-  width: var(--radio-checked-after-size, 8px);
-  height: var(--radio-checked-after-size, 8px);
-  background-color: var(--radio-checked-after-background-color, #147F85);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-}
 .pv-radio:indeterminate {
   background-color: unset;
   border-color: var(--color-border, #E8EBEB);
@@ -1303,7 +1290,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 .pv-switch input[type=checkbox] {
   appearance: none;
-  background-color: #D9DEDE;
+  background-color: #E8EBEB;
   border-color: transparent;
   border-radius: 1rem;
   display: flex;
@@ -1315,7 +1302,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 .pv-switch input[type=checkbox]:not(:disabled):hover,
 .pv-switch input[type=checkbox]:not(:disabled):focus-visible {
-  background-color: #F8F7F1;
+  background-color: #E8EBEB;
   cursor: pointer;
 }
 .pv-switch input[type=checkbox]:not(:disabled):active {
@@ -1323,17 +1310,17 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 }
 .pv-switch input[type=checkbox]:checked:not(:disabled):hover,
 .pv-switch input[type=checkbox]:checked:not(:disabled):focus-visible {
-  background-color: #1A3A39;
+  background-color: #36C4B8;
 }
 .pv-switch input[type=checkbox]:checked:not(:disabled):hover:after,
 .pv-switch input[type=checkbox]:checked:not(:disabled):focus-visible:after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.293a1 1 0 0 1 1.414 1.414l-11 11a.999.999 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L9 15.586 19.293 5.293Z' fill='%230D5256'/%3E%3C/svg%3E");
 }
 .pv-switch input[type=checkbox]:checked:not(:disabled):active {
-  background-color: #1A3A39;
+  background-color: #36C4B8;
 }
 .pv-switch input[type=checkbox]:checked:not(:disabled):active:after {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.293 5.293a1 1 0 0 1 1.414 1.414l-11 11a.999.999 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L9 15.586 19.293 5.293Z' fill='%2302363D'/%3E%3C/svg%3E");
+  background-image: none;
 }
 .pv-switch input[type=checkbox]:disabled,
 .pv-switch input[type=checkbox]:checked:disabled {
@@ -2682,8 +2669,8 @@ td:not([rowspan]) > .pv-responsive-cell {
   align-items: center;
   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, 6px);
+  border: 1px solid var(--tag-border-color, #D1D8D7);
+  border-radius: var(--tag-radius, 2rem);
   padding: var(--tag-padding, calc(0.125rem - 1px) 0.5rem);
   white-space: nowrap;
 }
@@ -2723,9 +2710,9 @@ strong[class*=pv-tag] {
 
 .pv-tag-sm {
   font-size: var(--tag-small-font-size, 0.875rem);
-  line-height: var(--tag-small-line-height, 14px);
-  padding: var(--tag-small-padding, 0 0.5rem);
-  border-radius: var(--tag-small-radius, 2px);
+  line-height: var(--tag-small-line-height, 1.2857142857);
+  padding: var(--tag-small-padding, 3px 7px);
+  border-radius: var(--tag-small-radius, 2rem);
 }
 
 .pv-tag-lg {
@@ -3128,13 +3115,13 @@ button.pv-tag-secondary:active {
 }
 
 .pv-dropdown > [class*=pv-button] {
-  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-image: var(--dropdown-closed-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231a3a39' d='M3.53 6.47a.66.66 0 1 1 .94-.94L8 9.06l3.53-3.53a.66.66 0 1 1 .94.94l-4 4a.66.66 0 0 1-.94 0z'/%3E%3C/svg%3E"));
   background-repeat: no-repeat;
   background-size: 1rem 1rem;
   background-position: right 0.5rem center;
 }
 .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"));
+  background-image: var(--dropdown-open-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231a3a39' d='M3.53 9.53a.66.66 0 1 0 .94.94L8 6.94l3.53 3.53a.66.66 0 1 0 .94-.94l-4-4a.66.66 0 0 0-.94 0z'/%3E%3C/svg%3E"));
 }
 .pv-dropdown > [class*=pv-button][data-dropdown] + .pv-popover {
   visibility: visible;
@@ -6006,3 +5993,36 @@ input.select2-search__field::placeholder {
 .p-datepicker-calendar-container .p-icon {
   height: 0.75rem;
 }
+
+pv-dropdown-auto-close.pv-dropdown > .pv-button-secondary:focus-visible, pv-dropdown-auto-close.pv-dropdown > .pv-button-secondary:active {
+  background-color: #E8EBEB;
+  border-color: #36C4B8;
+}
+
+.pv-switch input[type=checkbox]:after {
+  height: 1rem;
+  width: 1rem;
+  border: 1px solid #D1D8D7;
+}
+.pv-switch input[type=checkbox]:checked {
+  background-color: #36C4B8;
+}
+.pv-switch input[type=checkbox]:checked:after {
+  right: 4px;
+  background-image: none;
+}
+.pv-switch input[type=checkbox]:checked:not(:disabled):hover:after,
+.pv-switch input[type=checkbox]:checked:not(:disabled):active:after,
+.pv-switch input[type=checkbox]:checked:disabled:after {
+  background-image: none;
+}
+
+.pv-cs-button > svg {
+  fill: rgba(255, 255, 255, 0.2);
+  width: 15px;
+  height: 18px;
+}
+
+.pv-cs-button:hover > svg {
+  fill: #147F85;
+}

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

@@ -400,7 +400,7 @@
   border-radius: var(--button-radius, 4px);
   font-size: var(--button-font-size, 0.75rem);
   transition-duration: 0.125s;
-  transition-property: background-color, color;
+  transition-property: background-color, background-image, color;
 }
 .pv-v2 :where([class*=pv-button]):disabled,
 .pv-v2 :where([class*=pv-segmented-control] button):disabled {
@@ -614,6 +614,8 @@
   padding: var(--button-xsmall-padding, calc(0.125rem - 1px) 0.25rem);
 }
 .pv-v2 .pv-button-small {
+  font-size: var(--button-small-font-size, 0.75rem);
+  line-height: var(--button-small-line-height, 1.33333333);
   padding: var(--button-small-padding, calc(0.125rem - 1px) 0.25rem);
 }
 .pv-v2 .pv-button-small.pv-button-primary-outline {
@@ -1120,21 +1122,6 @@
   position: relative;
   border-radius: 50%;
 }
-.pv-v2 .pv-radio:not(:checked):not(:disabled):hover, .pv-v2 .pv-radio:not(:checked):not(:disabled):focus-visible {
-  background-color: transparent;
-}
-.pv-v2 .pv-radio:not(:checked):not(:disabled):hover:after, .pv-v2 .pv-radio:not(:checked):not(:disabled):focus-visible:after {
-  content: "";
-  display: block;
-  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-v2 .pv-radio:indeterminate {
   background-color: unset;
   border-color: var(--color-border, #E3E7EA);

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

@@ -458,7 +458,7 @@
   border-radius: var(--button-radius, 4px);
   font-size: var(--button-font-size, 0.75rem);
   transition-duration: 0.125s;
-  transition-property: background-color, color;
+  transition-property: background-color, background-image, color;
 }
 :where([class*=pv-button]):disabled,
 :where([class*=pv-segmented-control] button):disabled {
@@ -687,6 +687,8 @@
 }
 
 .pv-button-small {
+  font-size: var(--button-small-font-size, 0.75rem);
+  line-height: var(--button-small-line-height, 1.33333333);
   padding: var(--button-small-padding, calc(0.125rem - 1px) 0.25rem);
 }
 .pv-button-small.pv-button-primary-outline {
@@ -1219,21 +1221,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   position: relative;
   border-radius: 50%;
 }
-.pv-radio:not(:checked):not(:disabled):hover, .pv-radio:not(:checked):not(:disabled):focus-visible {
-  background-color: transparent;
-}
-.pv-radio:not(:checked):not(:disabled):hover:after, .pv-radio:not(:checked):not(:disabled):focus-visible:after {
-  content: "";
-  display: block;
-  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:indeterminate {
   background-color: unset;
   border-color: var(--color-border, #E3E7EA);

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

@@ -463,7 +463,7 @@
   border-radius: var(--button-radius, 2rem);
   font-size: var(--button-font-size, 1rem);
   transition-duration: 0.125s;
-  transition-property: background-color, color;
+  transition-property: background-color, background-image, color;
 }
 :where([class*=pv-button]):disabled,
 :where([class*=pv-segmented-control] button):disabled {
@@ -692,6 +692,8 @@
 }
 
 .pv-button-small {
+  font-size: var(--button-small-font-size, 1rem);
+  line-height: var(--button-small-line-height, inherit);
   padding: var(--button-small-padding, calc(0.5rem - 1px) 1rem);
 }
 .pv-button-small.pv-button-primary-outline {
@@ -1224,21 +1226,6 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   position: relative;
   border-radius: 50%;
 }
-.pv-radio:not(:checked):not(:disabled):hover, .pv-radio:not(:checked):not(:disabled):focus-visible {
-  background-color: transparent;
-}
-.pv-radio:not(:checked):not(:disabled):hover:after, .pv-radio:not(:checked):not(:disabled):focus-visible:after {
-  content: "";
-  display: block;
-  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:indeterminate {
   background-color: unset;
   border-color: var(--color-border, #DCDFE4);