@turquoisehealth/pit-viper 2.201.1-dev.2 → 2.202.0

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

@@ -6547,6 +6547,8 @@ input.select2-search__field::placeholder {
   --p-datepicker-date-border-radius: 4px;
   --p-datepicker-date-padding: 1px;
   --p-datepicker-date-selected-background: #13595D;
+  --p-datepicker-date-range-selected-background: #E4F8F6;
+  --p-datepicker-date-range-selected-color: #121313;
   --p-datepicker-date-hover-background: #E8F2F4;
   --p-datepicker-date-color: #4B595C;
   --p-button-text-secondary-hover-background: #E8F2F4;
@@ -6589,6 +6591,50 @@ input.select2-search__field::placeholder {
   color: #4B595C;
 }
 
+.p-datepicker-panel {
+  width: fit-content !important;
+}
+
+.p-datepicker-panel:has(.p-datepicker-month-view),
+.p-datepicker-panel:has(.p-datepicker-year-view) {
+  width: max-content !important;
+}
+
+.p-datepicker-month-view {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+}
+
+.p-datepicker-year-view {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+}
+
+.p-datepicker-month-view .p-datepicker-month,
+.p-datepicker-year-view .p-datepicker-month {
+  margin: 2px;
+  width: 48px;
+}
+.p-datepicker-month-view .p-datepicker-year,
+.p-datepicker-year-view .p-datepicker-year {
+  margin: 2px;
+  width: 56px;
+}
+.p-datepicker-month-view .p-datepicker-month-selected,
+.p-datepicker-month-view .p-datepicker-year-selected,
+.p-datepicker-year-view .p-datepicker-month-selected,
+.p-datepicker-year-view .p-datepicker-year-selected {
+  background-color: #13595D;
+  color: white;
+}
+.p-datepicker-month-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.p-datepicker-month-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected),
+.p-datepicker-year-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.p-datepicker-year-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected) {
+  background-color: #E4F8F6;
+  color: #121313;
+}
+
 .p-datepicker-calendar-container .p-datepicker-header .p-button {
   width: 1.5rem;
   height: 1.5rem;
@@ -6604,6 +6650,10 @@ input.select2-search__field::placeholder {
 .p-datepicker-calendar-container .p-datepicker-day-selected:active {
   background-color: #02363D;
 }
+.p-datepicker-calendar-container .p-datepicker-day-selected-range {
+  background-color: #E4F8F6;
+  color: #121313;
+}
 .p-datepicker-calendar-container .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):active {
   background-color: #C7D8DB;
 }

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

@@ -6369,6 +6369,8 @@ input.select2-search__field::placeholder {
   --p-datepicker-date-border-radius: 6px;
   --p-datepicker-date-padding: 1px;
   --p-datepicker-date-selected-background: #147F85;
+  --p-datepicker-date-range-selected-background: #E4F8F6;
+  --p-datepicker-date-range-selected-color: #1A3A39;
   --p-datepicker-date-hover-background: #F8F7F1;
   --p-datepicker-date-color: #486161;
   --p-button-text-secondary-hover-background: #F8F7F1;
@@ -6411,6 +6413,50 @@ input.select2-search__field::placeholder {
   color: #486161;
 }
 
+.p-datepicker-panel {
+  width: fit-content !important;
+}
+
+.p-datepicker-panel:has(.p-datepicker-month-view),
+.p-datepicker-panel:has(.p-datepicker-year-view) {
+  width: max-content !important;
+}
+
+.p-datepicker-month-view {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+}
+
+.p-datepicker-year-view {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+}
+
+.p-datepicker-month-view .p-datepicker-month,
+.p-datepicker-year-view .p-datepicker-month {
+  margin: 2px;
+  width: 48px;
+}
+.p-datepicker-month-view .p-datepicker-year,
+.p-datepicker-year-view .p-datepicker-year {
+  margin: 2px;
+  width: 56px;
+}
+.p-datepicker-month-view .p-datepicker-month-selected,
+.p-datepicker-month-view .p-datepicker-year-selected,
+.p-datepicker-year-view .p-datepicker-month-selected,
+.p-datepicker-year-view .p-datepicker-year-selected {
+  background-color: #147F85;
+  color: white;
+}
+.p-datepicker-month-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.p-datepicker-month-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected),
+.p-datepicker-year-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.p-datepicker-year-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected) {
+  background-color: #E4F8F6;
+  color: #1A3A39;
+}
+
 .p-datepicker-calendar-container .p-datepicker-header .p-button {
   width: 1.5rem;
   height: 1.5rem;
@@ -6426,6 +6472,10 @@ input.select2-search__field::placeholder {
 .p-datepicker-calendar-container .p-datepicker-day-selected:active {
   background-color: #1A3A39;
 }
+.p-datepicker-calendar-container .p-datepicker-day-selected-range {
+  background-color: #E4F8F6;
+  color: #1A3A39;
+}
 .p-datepicker-calendar-container .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):active {
   background-color: #C7D8DB;
 }

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

@@ -5740,6 +5740,8 @@
   --p-datepicker-date-border-radius: 4px;
   --p-datepicker-date-padding: 1px;
   --p-datepicker-date-selected-background: #16696D;
+  --p-datepicker-date-range-selected-background: #E4F8F6;
+  --p-datepicker-date-range-selected-color: #121313;
   --p-datepicker-date-hover-background: #E8F2F4;
   --p-datepicker-date-color: #4B595C;
   --p-button-text-secondary-hover-background: #E8F2F4;
@@ -5777,6 +5779,45 @@
   width: 2rem;
   color: #4B595C;
 }
+.pv-v2 .p-datepicker-panel {
+  width: fit-content !important;
+}
+.pv-v2 .p-datepicker-panel:has(.p-datepicker-month-view),
+.pv-v2 .p-datepicker-panel:has(.p-datepicker-year-view) {
+  width: max-content !important;
+}
+.pv-v2 .p-datepicker-month-view {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+}
+.pv-v2 .p-datepicker-year-view {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+}
+.pv-v2 .p-datepicker-month-view .p-datepicker-month,
+.pv-v2 .p-datepicker-year-view .p-datepicker-month {
+  margin: 2px;
+  width: 48px;
+}
+.pv-v2 .p-datepicker-month-view .p-datepicker-year,
+.pv-v2 .p-datepicker-year-view .p-datepicker-year {
+  margin: 2px;
+  width: 56px;
+}
+.pv-v2 .p-datepicker-month-view .p-datepicker-month-selected,
+.pv-v2 .p-datepicker-month-view .p-datepicker-year-selected,
+.pv-v2 .p-datepicker-year-view .p-datepicker-month-selected,
+.pv-v2 .p-datepicker-year-view .p-datepicker-year-selected {
+  background-color: #16696D;
+  color: white;
+}
+.pv-v2 .p-datepicker-month-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.pv-v2 .p-datepicker-month-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected),
+.pv-v2 .p-datepicker-year-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.pv-v2 .p-datepicker-year-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected) {
+  background-color: #E4F8F6;
+  color: #121313;
+}
 .pv-v2 .p-datepicker-calendar-container .p-datepicker-header .p-button {
   width: 1.5rem;
   height: 1.5rem;
@@ -5792,6 +5833,10 @@
 .pv-v2 .p-datepicker-calendar-container .p-datepicker-day-selected:active {
   background-color: #02363D;
 }
+.pv-v2 .p-datepicker-calendar-container .p-datepicker-day-selected-range {
+  background-color: #E4F8F6;
+  color: #121313;
+}
 .pv-v2 .p-datepicker-calendar-container .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):active {
   background-color: #C7D8DB;
 }

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

@@ -6547,6 +6547,8 @@ input.select2-search__field::placeholder {
   --p-datepicker-date-border-radius: 4px;
   --p-datepicker-date-padding: 1px;
   --p-datepicker-date-selected-background: #16696D;
+  --p-datepicker-date-range-selected-background: #E4F8F6;
+  --p-datepicker-date-range-selected-color: #121313;
   --p-datepicker-date-hover-background: #E8F2F4;
   --p-datepicker-date-color: #4B595C;
   --p-button-text-secondary-hover-background: #E8F2F4;
@@ -6589,6 +6591,50 @@ input.select2-search__field::placeholder {
   color: #4B595C;
 }
 
+.p-datepicker-panel {
+  width: fit-content !important;
+}
+
+.p-datepicker-panel:has(.p-datepicker-month-view),
+.p-datepicker-panel:has(.p-datepicker-year-view) {
+  width: max-content !important;
+}
+
+.p-datepicker-month-view {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+}
+
+.p-datepicker-year-view {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+}
+
+.p-datepicker-month-view .p-datepicker-month,
+.p-datepicker-year-view .p-datepicker-month {
+  margin: 2px;
+  width: 48px;
+}
+.p-datepicker-month-view .p-datepicker-year,
+.p-datepicker-year-view .p-datepicker-year {
+  margin: 2px;
+  width: 56px;
+}
+.p-datepicker-month-view .p-datepicker-month-selected,
+.p-datepicker-month-view .p-datepicker-year-selected,
+.p-datepicker-year-view .p-datepicker-month-selected,
+.p-datepicker-year-view .p-datepicker-year-selected {
+  background-color: #16696D;
+  color: white;
+}
+.p-datepicker-month-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.p-datepicker-month-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected),
+.p-datepicker-year-view .p-datepicker-month-selected + .p-datepicker-month-selected:has(+ .p-datepicker-month-selected),
+.p-datepicker-year-view .p-datepicker-year-selected + .p-datepicker-year-selected:has(+ .p-datepicker-year-selected) {
+  background-color: #E4F8F6;
+  color: #121313;
+}
+
 .p-datepicker-calendar-container .p-datepicker-header .p-button {
   width: 1.5rem;
   height: 1.5rem;
@@ -6604,6 +6650,10 @@ input.select2-search__field::placeholder {
 .p-datepicker-calendar-container .p-datepicker-day-selected:active {
   background-color: #02363D;
 }
+.p-datepicker-calendar-container .p-datepicker-day-selected-range {
+  background-color: #E4F8F6;
+  color: #121313;
+}
 .p-datepicker-calendar-container .p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):active {
   background-color: #C7D8DB;
 }

package/package.json

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