@turquoisehealth/pit-viper 2.65.1 → 2.66.1-dev.0

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

@@ -753,7 +753,7 @@
   gap: 0.125rem;
 }
 [class*=pv-segmented-control] button {
-  padding: 0.125rem 0.5rem;
+  padding: calc(0.125rem - 1px) 0.5rem;
   gap: 0.125rem;
 }
 [class*=pv-segmented-control] button[data-active],
@@ -770,19 +770,25 @@
 [class*=pv-segmented-control] button:active:not(:disabled) {
   background-color: #C7D8DB;
 }
+[class*=pv-segmented-control] button:has(svg:is(:only-child)) {
+  padding: calc(0.125rem - 1px);
+}
+[class*=pv-segmented-control].pv-segmented-control-large button:has(svg:is(:only-child)) {
+  padding: calc(0.25rem - 1px);
+}
 
 .pv-segmented-control-icon button {
-  padding: 0.125rem;
+  padding: calc(0.125rem - 1px);
 }
 
 .pv-segmented-control-large {
   padding: 0.25rem;
 }
 .pv-segmented-control-large button {
-  padding: 0.25rem 0.5rem;
+  padding: calc(0.25rem - 1px) 0.5rem;
 }
 .pv-segmented-control-large.pv-segmented-control-icon button {
-  padding: 0.25rem;
+  padding: calc(0.25rem - 1px);
 }
 
 .pv-button-transformer {
@@ -2079,15 +2085,15 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-status-yellow:before {
-  background-color: #E5A000;
+  background-color: #FED732;
 }
 
 .pv-status-red:before {
-  background-color: #DA1E28;
+  background-color: #FF471A;
 }
 
 .pv-status-green:before {
-  background-color: #218C88;
+  background-color: #1ACF28;
 }
 
 .pv-status-black:before {
@@ -2099,19 +2105,19 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-status-orange:before {
-  background-color: #C86628;
+  background-color: #FFA632;
 }
 
 .pv-status-yellow:is(th, td) {
-  border-color: #E5A000;
+  border-color: #FED732;
 }
 
 .pv-status-red:is(th, td) {
-  border-color: #DA1E28;
+  border-color: #FF471A;
 }
 
 .pv-status-green:is(th, td) {
-  border-color: #218C88;
+  border-color: #1ACF28;
 }
 
 .pv-status-black:is(th, td) {
@@ -2123,7 +2129,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-status-orange:is(th, td) {
-  border-color: #C86628;
+  border-color: #FFA632;
 }
 
 .pv-table,
@@ -2759,6 +2765,14 @@ button.pv-tag-secondary:active {
   padding-inline: 0;
 }
 
+[class*=pv-tag][data-style=counter] {
+  padding: 0 2px;
+  line-height: 0.875rem;
+  min-width: 1rem;
+  text-align: center;
+  display: block;
+}
+
 [class*=pv-tab-list] {
   display: flex;
   align-items: center;
@@ -2973,8 +2987,11 @@ button.pv-tag-secondary:active {
   border-radius: 4px;
 }
 
-.pv-dropdown > [class*=pv-button] {
+.pv-dropdown:not(pv-dropdown-auto-close) > [class*=pv-button] {
   padding-inline-end: 2rem;
+}
+
+.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-repeat: no-repeat;
   background-size: 1rem 1rem;
@@ -4529,6 +4546,7 @@ body:has(.pv-layout-primary) {
 .pv-layout-two-sidebar {
   --left-size: 320px;
   --right-size: 320px;
+  --min-size: 0;
   overflow: clip;
   height: 100%;
   display: grid;
@@ -4537,27 +4555,41 @@ body:has(.pv-layout-primary) {
   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);
+  --left-size: var(--min-size) !important;
+}
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]) svg.pv-trigger-icon {
+  transform: rotate(180deg);
 }
 .pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) {
-  grid-template-columns: var(--left-size) 1fr 0;
+  --right-size: var(--min-size) !important;
+}
+.pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) svg.pv-trigger-icon {
+  transform: rotate(180deg);
 }
 .pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]):has([data-layout=right-sidebar][data-hidden]) {
-  grid-template-columns: 0 1fr 0;
+  --left-size: var(--min-size) !important;
+  --right-size: var(--min-size) !important;
 }
 .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));
+  transform: translateX(calc(var(--min-size) - var(--left-size)));
+  width: var(--min-size);
 }
 .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));
+  transform: translateX(calc(var(--right-size) * -1)var(--min-size));
+  width: var(--min-size);
+}
+
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]) [data-layout=left-sidebar] .pv-fade,
+.pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) [data-layout=right-sidebar] .pv-fade {
+  display: none;
 }
 
 .pv-surface-brand {
@@ -5236,8 +5268,8 @@ svg.pv-text-inherit {
 
 .select2-selection--single {
   background-color: #fff;
-  border: 2px solid #E3E7EA;
-  border-radius: 2px;
+  border: 1px solid #E3E7EA;
+  border-radius: 4px;
   padding-inline-end: 2rem;
   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-repeat: no-repeat;
@@ -5254,7 +5286,7 @@ svg.pv-text-inherit {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #4B595C;
-  line-height: 24px;
+  line-height: 12px;
 }
 .select2-selection--single .select2-selection__clear {
   position: relative;
@@ -5263,7 +5295,7 @@ svg.pv-text-inherit {
   font-weight: bold;
 }
 .select2-selection--single .select2-selection__placeholder {
-  color: #999;
+  color: #89989B;
 }
 .select2-selection--single .select2-selection__arrow {
   display: none;
@@ -5271,29 +5303,29 @@ svg.pv-text-inherit {
 
 .select2-selection--multiple {
   background-color: white;
-  border: 2px solid #E3E7EA;
-  border-radius: 2px;
+  border: 1px solid #E3E7EA;
+  border-radius: 4px;
   cursor: text;
 }
 .select2-selection--multiple .select2-selection__rendered {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0.25rem 0.5rem;
+  padding: calc(0.5rem - 3px) 0.5rem;
   flex-wrap: wrap;
 }
 
 .select2-search--inline {
   flex: 1;
-  max-height: 26px;
+  max-height: 20px;
 }
 
 .select2-search--inline .select2-search__field {
   width: 100% !important;
-  line-height: 24px;
+  line-height: 12px;
   border: none;
   padding-block: 0.5rem;
-  max-height: 26px;
+  max-height: 20px;
 }
 
 .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
@@ -5318,12 +5350,14 @@ svg.pv-text-inherit {
 
 .select2-search--dropdown .select2-search__field {
   padding: 0.5rem 2rem 0.5rem 0.5rem;
-  line-height: 24px;
-  border-radius: 2px;
-  border: 2px solid #E3E7EA;
+  line-height: 12px;
+  border-radius: 4px;
+  border: 1px solid #E3E7EA;
+  height: 32px;
   width: 100%;
   position: absolute;
-  top: -44px;
+  top: -33px;
+  left: 0;
   background-color: transparent;
   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.6 15.3h8.8c.7 0 1-.7.6-1.2L12.6 9c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1s-.2.1-.3.1c-.1.1-.2.1-.3.2l-4.3 5.1c-.5.4-.1 1.2.5 1.2z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -5346,9 +5380,14 @@ svg.pv-text-inherit {
 .select2-container--focus .select2-selection__rendered {
   border-color: #36C5BA;
   outline: 0;
+  font-size: 0.75rem;
+  line-height: 1.33333333;
+  border-radius: 4px;
 }
 
 .select2-container--default .select2-search--inline .select2-search__field {
+  font-size: 0.75rem;
+  line-height: 1.33333333;
   background: transparent;
   border: none;
   outline: 0;
@@ -5371,6 +5410,9 @@ svg.pv-text-inherit {
   padding: 6px;
   user-select: none;
   -webkit-user-select: none;
+  font-size: 0.75rem;
+  line-height: 1.33333333;
+  color: #121313;
 }
 
 .select2-results__option[aria-selected] {
@@ -5382,12 +5424,14 @@ svg.pv-text-inherit {
 }
 
 .select2-container--open .select2-dropdown--above {
+  padding: 0.5rem;
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .select2-container--open .select2-dropdown--below {
+  padding: 0.5rem;
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -5441,10 +5485,13 @@ svg.pv-text-inherit {
 
 .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
   list-style: none;
+  font-size: 0.75rem;
+  line-height: 1.33333333;
+  font-weight: 500;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
-  color: #999;
+  color: #89989B;
   margin-top: 5px;
   float: left;
 }
@@ -5459,24 +5506,25 @@ svg.pv-text-inherit {
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: #F7F8F8;
-  border: 1px solid #E3E7EA;
-  border-radius: 2px;
+  border: none;
+  border-radius: 4px;
   padding: 0.125rem 0.5rem;
   font-size: 0.6875rem;
   line-height: 1.45454545;
   cursor: default;
+  font-weight: 500;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
-  color: #999;
+  color: #4B595C;
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
-  margin-right: 2px;
+  margin-right: 0.25rem;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
-  color: #333;
+  color: #4B595C;
 }
 
 .select2-container--default.select2-container--disabled .select2-selection--multiple {
@@ -5499,6 +5547,7 @@ svg.pv-text-inherit {
 }
 
 .select2-container--default .select2-results > .select2-results__options {
+  padding-inline-start: 0;
   max-height: 200px;
   overflow-y: auto;
 }
@@ -5508,11 +5557,12 @@ svg.pv-text-inherit {
 }
 
 .select2-container--default .select2-results__option[aria-disabled=true] {
-  color: #999;
+  color: #89989B;
 }
 
 .select2-results__option {
-  padding: 0.5rem 1rem;
+  padding: 0.5rem;
+  border-radius: 4px;
 }
 
 .select2-results__option[aria-selected=true],
@@ -5526,6 +5576,29 @@ svg.pv-text-inherit {
   padding: 6px;
 }
 
+.select2-selection--single .select2-selection__rendered,
+.select2-selection--single .select2-selection__placeholder {
+  font-size: 0.75rem;
+  line-height: 1.33333333;
+}
+
+.select2-selection--single .select2-selection__rendered {
+  color: #121313;
+  padding: calc(0.5rem - 1px) 0.5rem;
+}
+
+.select2-results__option[aria-selected=true] {
+  background-color: #E4F8F6;
+}
+
+.select2-results__option--highlighted {
+  background-color: #E8F2F4;
+}
+
+input.select2-search__field::placeholder {
+  color: #89989B !important;
+}
+
 :root {
   --p-datepicker-today-background: #F7F8F8;
   --p-datepicker-date-border-radius: 4px;

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

@@ -775,6 +775,12 @@
 [class*=pv-segmented-control] button:active:not(:disabled) {
   background-color: #F3FCFB;
 }
+[class*=pv-segmented-control] button:has(svg:is(:only-child)) {
+  padding: 0.25rem;
+}
+[class*=pv-segmented-control].pv-segmented-control-large button:has(svg:is(:only-child)) {
+  padding: 0.25rem;
+}
 
 .pv-segmented-control-icon button {
   padding: 0.25rem;
@@ -2764,6 +2770,14 @@ button.pv-tag-secondary:active {
   padding-inline: 0;
 }
 
+[class*=pv-tag][data-style=counter] {
+  padding: 0 2px;
+  line-height: 0.875rem;
+  min-width: 1rem;
+  text-align: center;
+  display: block;
+}
+
 [class*=pv-tab-list] {
   display: flex;
   align-items: center;
@@ -2978,8 +2992,11 @@ button.pv-tag-secondary:active {
   border-radius: 5px;
 }
 
-.pv-dropdown > [class*=pv-button] {
+.pv-dropdown:not(pv-dropdown-auto-close) > [class*=pv-button] {
   padding-inline-end: 2rem;
+}
+
+.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 fill='%23FFFFFF' 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-repeat: no-repeat;
   background-size: 1rem 1rem;
@@ -4534,6 +4551,7 @@ body:has(.pv-layout-primary) {
 .pv-layout-two-sidebar {
   --left-size: 320px;
   --right-size: 320px;
+  --min-size: 0;
   overflow: clip;
   height: 100%;
   display: grid;
@@ -4542,27 +4560,41 @@ body:has(.pv-layout-primary) {
   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);
+  --left-size: var(--min-size) !important;
+}
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]) svg.pv-trigger-icon {
+  transform: rotate(180deg);
 }
 .pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) {
-  grid-template-columns: var(--left-size) 1fr 0;
+  --right-size: var(--min-size) !important;
+}
+.pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) svg.pv-trigger-icon {
+  transform: rotate(180deg);
 }
 .pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]):has([data-layout=right-sidebar][data-hidden]) {
-  grid-template-columns: 0 1fr 0;
+  --left-size: var(--min-size) !important;
+  --right-size: var(--min-size) !important;
 }
 .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));
+  transform: translateX(calc(var(--min-size) - var(--left-size)));
+  width: var(--min-size);
 }
 .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));
+  transform: translateX(calc(var(--right-size) * -1)var(--min-size));
+  width: var(--min-size);
+}
+
+.pv-layout-two-sidebar:has([data-layout=left-sidebar][data-hidden]) [data-layout=left-sidebar] .pv-fade,
+.pv-layout-two-sidebar:has([data-layout=right-sidebar][data-hidden]) [data-layout=right-sidebar] .pv-fade {
+  display: none;
 }
 
 .pv-surface-brand {
@@ -5268,7 +5300,7 @@ svg.pv-text-inherit {
   font-weight: bold;
 }
 .select2-selection--single .select2-selection__placeholder {
-  color: #999;
+  color: #6E7784;
 }
 .select2-selection--single .select2-selection__arrow {
   display: none;
@@ -5326,9 +5358,11 @@ svg.pv-text-inherit {
   line-height: 24px;
   border-radius: 2px;
   border: 2px solid #DCDFE4;
+  height: 42px;
   width: 100%;
   position: absolute;
   top: -44px;
+  left: 0;
   background-color: transparent;
   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.6 15.3h8.8c.7 0 1-.7.6-1.2L12.6 9c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1s-.2.1-.3.1c-.1.1-.2.1-.3.2l-4.3 5.1c-.5.4-.1 1.2.5 1.2z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -5351,9 +5385,14 @@ svg.pv-text-inherit {
 .select2-container--focus .select2-selection__rendered {
   border-color: #176F6F;
   outline: 0;
+  font-size: 16px;
+  line-height: 24px;
+  border-radius: 2px;
 }
 
 .select2-container--default .select2-search--inline .select2-search__field {
+  font-size: 16px;
+  line-height: 24px;
   background: transparent;
   border: none;
   outline: 0;
@@ -5376,6 +5415,9 @@ svg.pv-text-inherit {
   padding: 6px;
   user-select: none;
   -webkit-user-select: none;
+  font-size: 16px;
+  line-height: 24px;
+  color: #02363D;
 }
 
 .select2-results__option[aria-selected] {
@@ -5387,12 +5429,14 @@ svg.pv-text-inherit {
 }
 
 .select2-container--open .select2-dropdown--above {
+  padding: 0.5rem 0;
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .select2-container--open .select2-dropdown--below {
+  padding: 0.5rem 0;
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -5446,10 +5490,13 @@ svg.pv-text-inherit {
 
 .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
   list-style: none;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
-  color: #999;
+  color: #6E7784;
   margin-top: 5px;
   float: left;
 }
@@ -5464,12 +5511,13 @@ svg.pv-text-inherit {
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
   background-color: #F8F8FA;
-  border: 1px solid #DCDFE4;
+  border: 1px solid #e3e7ea;
   border-radius: 2px;
   padding: 0.125rem 0.5rem;
   font-size: 0.875rem;
   line-height: 1.42857143;
   cursor: default;
+  font-weight: 400;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
@@ -5477,11 +5525,11 @@ svg.pv-text-inherit {
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
-  margin-right: 2px;
+  margin-right: 0.25rem;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
-  color: #333;
+  color: #999;
 }
 
 .select2-container--default.select2-container--disabled .select2-selection--multiple {
@@ -5504,6 +5552,7 @@ svg.pv-text-inherit {
 }
 
 .select2-container--default .select2-results > .select2-results__options {
+  padding-inline-start: 1rem;
   max-height: 200px;
   overflow-y: auto;
 }
@@ -5513,11 +5562,12 @@ svg.pv-text-inherit {
 }
 
 .select2-container--default .select2-results__option[aria-disabled=true] {
-  color: #999;
+  color: #6E7784;
 }
 
 .select2-results__option {
   padding: 0.5rem 1rem;
+  border-radius: 0;
 }
 
 .select2-results__option[aria-selected=true],
@@ -5530,3 +5580,26 @@ svg.pv-text-inherit {
   display: block;
   padding: 6px;
 }
+
+.select2-selection--single .select2-selection__rendered,
+.select2-selection--single .select2-selection__placeholder {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.select2-selection--single .select2-selection__rendered {
+  color: #6E7784;
+  padding: 0.5rem;
+}
+
+.select2-results__option[aria-selected=true] {
+  background-color: #F8F8FA;
+}
+
+.select2-results__option--highlighted {
+  background-color: #F7F8F8;
+}
+
+input.select2-search__field::placeholder {
+  color: #6E7784 !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.65.1",
+  "version": "2.66.1-dev.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {