@turquoisehealth/pit-viper 2.231.0 → 2.233.0

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

@@ -1612,7 +1612,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-range {
-  --range-fill-color: #36c5ba;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
   --range-thumb-border-width: 3px;
   --range-thumb-size: 20px;
   --range-track-color: var(--color-border, #e3e7ea);
@@ -1803,6 +1803,34 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   z-index: 3;
 }
 
+.pv-range-input-label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
+  width: var(--pv-range-input-width, 4.6875rem);
+}
+
+.pv-range-input-field {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pv-range-input-field .pv-input-text {
+  width: 100%;
+}
+
+.pv-range-input-icon {
+  color: var(--color-text-subdued, #4B595C);
+  inset-inline-start: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+}
+
+.pv-range-input-field-with-icon .pv-input-text {
+  padding-inline-start: calc(0.75rem + 1.375rem);
+}
+
 .pv-range-tooltip,
 .pv-range-dual-tooltip {
   background: var(--color-background-inverse, #242626);

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

@@ -1618,7 +1618,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-range {
-  --range-fill-color: #36c5ba;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
   --range-thumb-border-width: 3px;
   --range-thumb-size: 20px;
   --range-track-color: var(--color-border, #e3e7ea);
@@ -1809,6 +1809,34 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   z-index: 3;
 }
 
+.pv-range-input-label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
+  width: var(--pv-range-input-width, 4.6875rem);
+}
+
+.pv-range-input-field {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pv-range-input-field .pv-input-text {
+  width: 100%;
+}
+
+.pv-range-input-icon {
+  color: var(--color-text-subdued, #486161);
+  inset-inline-start: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+}
+
+.pv-range-input-field-with-icon .pv-input-text {
+  padding-inline-start: calc(0.75rem + 1.375rem);
+}
+
 .pv-range-tooltip,
 .pv-range-dual-tooltip {
   background: var(--color-background-inverse, #242626);

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

@@ -1490,7 +1490,7 @@
   line-height: 1.09090909;
 }
 .pv-v2 .pv-range {
-  --range-fill-color: #36c5ba;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
   --range-thumb-border-width: 3px;
   --range-thumb-size: 20px;
   --range-track-color: var(--color-border, #e3e7ea);
@@ -1660,6 +1660,30 @@
 .pv-v2 .pv-range-dual-native-max {
   z-index: 3;
 }
+.pv-v2 .pv-range-input-label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
+  width: var(--pv-range-input-width, 4.6875rem);
+}
+.pv-v2 .pv-range-input-field {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pv-v2 .pv-range-input-field .pv-input-text {
+  width: 100%;
+}
+.pv-v2 .pv-range-input-icon {
+  color: var(--color-text-subdued, #4B595C);
+  inset-inline-start: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+}
+.pv-v2 .pv-range-input-field-with-icon .pv-input-text {
+  padding-inline-start: calc(0.75rem + 1.375rem);
+}
 .pv-v2 .pv-range-tooltip,
 .pv-v2 .pv-range-dual-tooltip {
   background: var(--color-background-inverse, #242626);

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

@@ -1612,7 +1612,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-range {
-  --range-fill-color: #36c5ba;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
   --range-thumb-border-width: 3px;
   --range-thumb-size: 20px;
   --range-track-color: var(--color-border, #e3e7ea);
@@ -1803,6 +1803,34 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   z-index: 3;
 }
 
+.pv-range-input-label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
+  width: var(--pv-range-input-width, 4.6875rem);
+}
+
+.pv-range-input-field {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pv-range-input-field .pv-input-text {
+  width: 100%;
+}
+
+.pv-range-input-icon {
+  color: var(--color-text-subdued, #4B595C);
+  inset-inline-start: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+}
+
+.pv-range-input-field-with-icon .pv-input-text {
+  padding-inline-start: calc(0.75rem + 1.375rem);
+}
+
 .pv-range-tooltip,
 .pv-range-dual-tooltip {
   background: var(--color-background-inverse, #242626);

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

@@ -1617,7 +1617,7 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
 }
 
 .pv-range {
-  --range-fill-color: #36c5ba;
+  --range-fill-color: var(--color-background-brand-inverse, #36c5ba);
   --range-thumb-border-width: 3px;
   --range-thumb-size: 20px;
   --range-track-color: var(--color-border, #e3e7ea);
@@ -1808,6 +1808,34 @@ div:has(> .pv-input-text[data-suffix="%"]) .pv-input-text {
   z-index: 3;
 }
 
+.pv-range-input-label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
+  width: var(--pv-range-input-width, 4.6875rem);
+}
+
+.pv-range-input-field {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pv-range-input-field .pv-input-text {
+  width: 100%;
+}
+
+.pv-range-input-icon {
+  color: var(--color-text-subdued, #6E7784);
+  inset-inline-start: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+}
+
+.pv-range-input-field-with-icon .pv-input-text {
+  padding-inline-start: calc(0.75rem + 1.375rem);
+}
+
 .pv-range-tooltip,
 .pv-range-dual-tooltip {
   background: var(--color-background-inverse, #242626);

package/package.json

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