@awell-health/ui-library 0.1.57 → 0.1.58

package/dist/index.css

@@ -4232,42 +4232,387 @@ html {
     line-height: var(--awell-leading-7);
   }
 }
-.awell__rangeInput_awell_range_input_wrapper {
-  --awell-range-slider-background-color: var(--awell-accent-ring-color-buttons);
-  --ticksHeight: 12px;
+@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
+:root {
+  --awell-accent100: #fdb833;
+  --awell-accent40: #fee2ad;
+  --awell-accent60: #fdd484;
+  --awell-blue: #2E87FC;
+  --awell-blue50: #DEEBFF;
+  --awell-blue300: #0065FF;
+  --awell-blue400: #0052CC;
+  --awell-blue500: #0747A6;
+  --awell-blueBorder: #126DEF;
+  --awell-brand10: #e6edf9;
+  --awell-brand40: #99b6e6;
+  --awell-brand50: #739FE7;
+  --awell-brand60: #4E7AC2;
+  --awell-brand75: #B3D4FF;
+  --awell-brand80: #3476E0;
+  --awell-brand100: #004ac2;
+  --awell-brand200: #2684FF;
+  --awell-brand300: #0065FF;
+  --awell-green: #67D172;
+  --awell-green25: #EBFDF7;
+  --awell-green50: #E3FCEF;
+  --awell-green100: #27AB83;
+  --awell-green500: #064;
+  --awell-greenBorder: #5DB566;
+  --awell-neutralDark500: #42526E;
+  --awell-neutralDark600: #344563;
+  --awell-neutralDark700: #253858;
+  --awell-neutralDark800: #172B4D;
+  --awell-neutralDark900: #091E42;
+  --awell-neutralLight0: #fff;
+  --awell-neutralLight10: #fafbfc;
+  --awell-neutralLight100: #7A869A;
+  --awell-neutralLight20: #f4f5f7;
+  --awell-neutralLight30: #ebecf0;
+  --awell-neutralLight40: #dfe1e6;
+  --awell-neutralLight50: #c1c7d0;
+  --awell-neutralMid100: #7a869a;
+  --awell-neutralMid200: #6b778c;
+  --awell-neutralMid300: #5e6c84;
+  --awell-neutralMid400: #505F79;
+  --awell-neutralMid60: #b3bac5;
+  --awell-neutralMid70: #a5adba;
+  --awell-neutralMid80: #97a0af;
+  --awell-neutralMid90: #8993a4;
+  --awell-orange: #FEC32D;
+  --awell-orangeBorder: #CB9C22;
+  --awell-purple: #6558BE;
+  --awell-purpleBorder: #4F4498;
+  --awell-red: #FF3A54;
+  --awell-red100: #E12D39;
+  --awell-red400: #DE350B;
+  --awell-red50: #FFEBE6;
+  --awell-red500: #BF2600;
+  --awell-redBorder: #D12D43;
+  --awell-secondaryAqua100: #01c5e3;
+  --awell-secondaryBrown100: #df692f;
+  --awell-secondaryLightblue100: #2590fb;
+  --awell-secondaryLimegreen100: #86e34b;
+  --awell-secondaryMagenta100: #e255ff;
+  --awell-secondaryOrange100: #ff6000;
+  --awell-secondaryPink100: #ff37be;
+  --awell-secondaryPink40: #ffafe5;
+  --awell-secondaryYellow100: #f7d32b;
+  --awell-secondaryYellow20: #fdf6d5;
+  --awell-secondaryYellow40: #f4edcb;
+  --awell-signalError100: #e12d39;
+  --awell-signalError60: #ed8188;
+  --awell-signalError20: #F9D5D7;
+  --awell-signalInformative100: #001d4d;
+  --awell-signalInformative60: #667794;
+  --awell-signalSuccess100: #27ab83;
+  --awell-signalSuccess60: #7dccb4;
+  --awell-signalWarning100: #fdd333;
+  --awell-signalWarning60: #fde484;
+  --awell-teal: #21C7E4;
+  --awell-teal400: #00A3BF;
+  --awell-teal50: #E6FCFF;
+  --awell-tealBorder: #179BB2;
+  --awell-yellow100: #FFE380;
+  --awell-yellow75: #FFF0B3;
+  --awell-primary-color: var(--awell-accent-color)
+  /** Slate (grayscale color palette) **/
+  --awell-slate50: #f8fafc;
+  --awell-slate100: #f1f5f9;
+  --awell-slate200:#e2e8f0;
+  --awell-slate300:#cbd5e1;
+  --awell-slate400:#94a3b8;
+  --awell-slate500:#64748b;
+  --awell-slate600:#475569;
+  --awell-slate700:#334155;
+  --awell-slate800:#1e293b;
+  --awell-slate900:#0f172a;
+}
+
+html {
+  /*
+    FONT
+  */
+  --awell-font: roboto;
+  /*
+    Misc
+  */
+  --awell-header-height: 94px;
+  --awell-mobile-footer-height: 60px;
+  --awell-footer-height: 80px;
+  /*
+    FONT SIZES
+    Based on https://tailwindcss.com/docs/font-size
+  */
+  --font-size-xs: 0.75rem;
+  /* 12px */
+  --font-size-sm: 0.875rem;
+  /* 14px */
+  --font-size-base: 1rem;
+  /* 16px */
+  --font-size-lg: 1.125rem;
+  /* 18px */
+  --font-size-xl: 1.25rem;
+  /* 20px */
+  --font-size-2xl: 1.5rem;
+  /* 24px */
+  --font-size-3xl: 1.875rem;
+  /* 30px */
+  --font-size-4xl: 2.25rem;
+  /* 36px */
+  --font-size-5xl: 3rem;
+  /* 48px */
+  --font-size-6xl: 3.75em;
+  /* 60px */
+  --font-size-7xl: 4.5rem;
+  /* 72px */
+  --font-size-8xl: 6rem;
+  /* 96px */
+  --awell-font-size-xs: var(--font-size-xs);
+  --awell-font-size-sm: var(--font-size-sm);
+  --awell-font-size-base: var(--font-size-base);
+  --awell-font-size-lg: var(--font-size-lg);
+  --awell-font-size-xl: var(--font-size-xl);
+  --awell-font-size-2xl: var(--font-size-2xl);
+  --awell-font-size-3xl: var(--font-size-3xl);
+  --awell-font-size-4xl: var(--font-size-4xl);
+  --awell-font-size-5xl: var(--font-size-5xl);
+  --awell-font-size-6xl: var(--font-size-6xl);
+  --awell-font-size-7xl: var(--font-size-7xl);
+  --awell-font-size-8xl: var(--font-size-8xl);
+  /*
+    SPACING
+    Based on https://tailwindcss.com/docs/padding
+  */
+  --spacing-none: 0rem;
+  --spacing-O\.5: 0.125rem;
+  /* 2px */
+  --spacing-1: 0.25rem;
+  /* 4px */
+  --spacing-1\.5: 0.375rem;
+  /* 6px */
+  --spacing-2: 0.5rem;
+  /* 8px */
+  --spacing-2\.5: 0.625rem;
+  /* 10px */
+  --spacing-3: 0.65rem;
+  /* 12px */
+  --spacing-3\.5: 0.875rem;
+  /* 14px */
+  --spacing-4: 1rem;
+  /* 16px */
+  --spacing-5: 1.25rem;
+  /* 20px */
+  --spacing-6: 1.5rem;
+  /* 24px */
+  --spacing-7: 1.75rem;
+  /* 28px */
+  --spacing-8: 2rem;
+  /* 32px */
+  --spacing-9: 2.25rem;
+  /* 36px */
+  --spacing-10: 2.5rem;
+  /* 40px */
+  --spacing-11: 2.75rem;
+  /* 44px */
+  --spacing-12: 3rem;
+  /* 48px */
+  --spacing-14: 3.5rem;
+  /* 56px */
+  --spacing-16: 4rem;
+  /* 64px */
+  --spacing-20: 5rem;
+  /* 80px */
+  --spacing-24: 6rem;
+  /* 96px */
+  --spacing-28: 7rem;
+  /* 112px */
+  --spacing-32: 8rem;
+  /* 128px */
+  --spacing-36: 9rem;
+  /* 144px */
+  --spacing-40: 10rem;
+  /* 160px */
+  --spacing-44: 11rem;
+  /* 176px */
+  --spacing-48: 12rem;
+  /* 192px */
+  --spacing-52: 13rem;
+  /* 208px */
+  --spacing-56: 14rem;
+  /* 224px */
+  --spacing-60: 15rem;
+  /* 240px */
+  --awell-spacing-none: var(--spacing-none);
+  --awell-spacing-0\.5: var(--spacing-O\.5);
+  --awell-spacing-1: var(--spacing-1);
+  --awell-spacing-1\.5: var(--spacing-1\.5);
+  --awell-spacing-2: var(--spacing-2);
+  --awell-spacing-2\.5: var(--spacing-2\.5);
+  --awell-spacing-3: var(--spacing-3);
+  --awell-spacing-3\.5: var(--spacing-3\.5);
+  --awell-spacing-4: var(--spacing-4);
+  --awell-spacing-5: var(--spacing-5);
+  --awell-spacing-6: var(--spacing-6);
+  --awell-spacing-7: var(--spacing-7);
+  --awell-spacing-8: var(--spacing-8);
+  --awell-spacing-9: var(--spacing-9);
+  --awell-spacing-10: var(--spacing-10);
+  --awell-spacing-11: var(--spacing-11);
+  --awell-spacing-12: var(--spacing-12);
+  --awell-spacing-14: var(--spacing-14);
+  --awell-spacing-16: var(--spacing-16);
+  --awell-spacing-20: var(--spacing-20);
+  --awell-spacing-24: var(--spacing-24);
+  --awell-spacing-28: var(--spacing-28);
+  --awell-spacing-32: var(--spacing-32);
+  --awell-spacing-36: var(--spacing-36);
+  --awell-spacing-40: var(--spacing-40);
+  --awell-spacing-44: var(--spacing-44);
+  --awell-spacing-48: var(--spacing-48);
+  --awell-spacing-52: var(--spacing-52);
+  --awell-spacing-56: var(--spacing-56);
+  --awell-spacing-60: var(--spacing-60);
+  /*
+    BORDER RADIUS
+    Based on https://tailwindcss.com/docs/border-radius#rounding-corners-separately
+  */
+  --awell-border-radius-none: 0px;
+  --awell-border-radius-sm: 0.125rem;
+  /* 4px */
+  --awell-border-radius-rounded: 0.25rem;
+  /* 6px */
+  --awell-border-radius-md: 0.375rem;
+  /* 8px */
+  --awell-border-radius-lg: 0.5rem;
+  /* 12px */
+  --awell-border-radius-xl: 0.75rem;
+  /* 16px */
+  --awell-border-radius-2xl: 1rem;
+  /* 18px */
+  --awell-border-radius-3xl: 1.5rem;
+  /* 24px */
+  --awell-border-radius-full: 9999px;
+  /* cirlce */
+  /*
+    SHADOW
+    Based on https://tailwindcss.com/docs/box-shadow
+  */
+  --awell-shadow-none: 0 0 #0000;
+  --awell-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --awell-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --awell-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --awell-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --awell-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  /*
+    FONT WEIGHT
+    Based on https://tailwindcss.com/docs/font-weight
+  */
+  --awell-font-thin: 100;
+  --awell-font-extralight: 200;
+  --awell-font-light: 300;
+  --awell-font-normal: 400;
+  --awell-font-medium: 500;
+  --awell-font-semibold: 600;
+  --awell-font-bold: 700;
+  --awell-font-extrabold: 800;
+  --awell-font-black: 900;
+  /*
+    LINE-HEIGHT
+    Based on https://tailwindcss.com/docs/line-height#relative-line-heights
+  */
+  --awell-leading-3: 0.75rem;
+  /* 12px */
+  --awell-leading-4: 1rem;
+  /* 16px */
+  --awell-leading-5: 1.25rem;
+  /* 20px */
+  --awell-leading-6: 1.5rem;
+  /* 24px */
+  --awell-leading-7: 1.75rem;
+  /* 28px */
+  --awell-leading-8: 2rem;
+  /* 32px */
+  --awell-leading-9: 2.25rem;
+  /* 36px */
+  --awell-leading-10: 2.5rem;
+  /* 40px */
+  --awell-leading-none: 1;
+  --awell-leading-tight: 1.25;
+  --awell-leading-snug: 1.375;
+  --awell-leading-normal: 1.5;
+  --awell-leading-relaxed: 1.625;
+  --awell-leading-loose: 2;
+  /**
+    RADIOS & CHECKBOXES
+  **/
+  --awell-radio-checkbox-height-mobile: 1.5rem;
+  --awell-radio-checkbox-width-mobile: 1.5rem;
+  --awell-radio-checkbox-height-above-mobile: 1.4rem;
+  --awell-radio-checkbox-width-above-mobile: 1.4rem;
+  --awell-radio-checkbox-border-color: var(--awell-slate400);
+  --awell-radio-checkbox-label-color: var(--awell-slate700);
+  --awell-checkbox-border-radius: var(--awell-border-radius-rounded);
+  /**
+    ACTIVITY CONTENT
+  **/
+  --awell-activity-max-width: 65ch;
+  --awell-activity-padding: 0 var(--awell-spacing-4);
+}
+
+.awell__rangeInput_input_container {
   position: relative;
-  transition: all 0.25s ease-in;
-  margin-top: 0;
-  margin-top: var(--awell-spacing-8);
-  /* min / max labels at the edges */
+}
+.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--awell-spacing-1);
+}
+.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper.awell__rangeInput_with_value_tooltip {
+  height: 22px;
 }
 @media (min-width: 640px) {
-  .awell__rangeInput_awell_range_input_wrapper {
-    --awell-thick-width: 2px;
+  .awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper.awell__rangeInput_with_value_tooltip {
+    height: 27px;
   }
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip_touched {
-  display: block;
-  position: absolute;
+.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper .awell__rangeInput_tooltip_touched {
+  display: inline-block;
   text-align: center;
   background-color: var(--awell-secondary-color);
   color: var(--awell-secondary-text-color);
   padding: var(--awell-spacing-1) var(--awell-spacing-2);
   font-size: var(--awell-font-size-xs);
   border-radius: var(--awell-spacing-2);
-  top: -28px;
-  left: 50%;
-  transform: translateX(-50%);
 }
 @media (min-width: 640px) {
-  .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip_touched {
-    top: -32px;
+  .awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper .awell__rangeInput_tooltip_touched {
     font-size: var(--awell-font-size-base);
   }
 }
-.awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper {
+  --awell-range-slider-background-color: var(
+    --awell-accent-ring-color-buttons
+  );
+  --ticksHeight: 12px;
+  position: relative;
+  transition: all 0.25s ease-in;
+}
+@media (min-width: 640px) {
+  .awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper {
+    --awell-thick-width: 2px;
+  }
+}
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks {
   --awell-thick-width: 1px;
-  --awell-ticks: linear-gradient(to right, var(--awell-thick-color) var(--awell-thick-width), transparent 1px)
+  --awell-ticks: linear-gradient(
+      to right,
+      var(--awell-thick-color) var(--awell-thick-width),
+      transparent 1px
+    )
     repeat-x;
   background: silver;
   background: var(--awell-ticks);
@@ -4275,65 +4620,9 @@ html {
   background-position: 0 calc(var(--ticksHeight) * 1.7);
   display: flex;
   flex-direction: column;
+  padding-bottom: calc(var(--ticksHeight) * 1.7);
 }
-.awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks::before, .awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks::after {
-  top: 40px;
-}
-.awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks .awell__rangeInput_awell_range_input_datalist {
-  margin-top: 16px;
-}
-.awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks .awell__rangeInput_awell_range_input_datalist.awell__rangeInput_with_min_max_labels {
-  margin-top: 36px;
-}
-.awell__rangeInput_awell_range_input_wrapper::before, .awell__rangeInput_awell_range_input_wrapper::after {
-  font-size: var(--awell-font-size-sm);
-  content: var(--awell-min-max-value);
-  position: absolute;
-  top: calc(40px - var(--ticksHeight));
-}
-@media (min-width: 640px) {
-  .awell__rangeInput_awell_range_input_wrapper::before, .awell__rangeInput_awell_range_input_wrapper::after {
-    font-size: var(--awell-font-size-base);
-  }
-}
-.awell__rangeInput_awell_range_input_wrapper::before {
-  counter-reset: x var(--awell-min);
-}
-.awell__rangeInput_awell_range_input_wrapper::after {
-  counter-reset: x var(--awell-max);
-  right: 0;
-}
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist {
-  font-size: var(--awell-font-size-sm);
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-}
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist.awell__rangeInput_with_min_max_labels {
-  margin-top: 20px;
-}
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist .awell__rangeInput_minLabel {
-  position: absolute;
-  left: 0;
-  bottom: -40px;
-  width: 47.5%;
-  max-width: 250px;
-  text-align: left;
-}
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist .awell__rangeInput_maxLabel {
-  position: absolute;
-  right: 0;
-  bottom: -40px;
-  width: 47.5%;
-  max-width: 250px;
-  text-align: right;
-}
-@media (min-width: 640px) {
-  .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist {
-    font-size: var(--awell-font-size-base);
-  }
-}
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
   --awell-radio-awell-border-radius: var(--border-radius-default, 4px);
   --awell-radio-neutral: var(--neutral, var(--awell-neutralMid400));
   font-size: var(--awell-font-size-md);
@@ -4345,10 +4634,10 @@ html {
   /* TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
   how to remove the virtical space around the range input in IE */
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus {
   outline: none;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-runnable-track {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-runnable-track {
   position: relative;
   background: var(--awell-range-slider-background-color);
   border: 0;
@@ -4357,7 +4646,7 @@ html {
   height: 11.4px;
   cursor: pointer;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-thumb {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-thumb {
   margin-top: -1.3px;
   width: 14px;
   height: 14px;
@@ -4367,7 +4656,7 @@ html {
   cursor: pointer;
   appearance: none;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-track {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-track {
   background: var(--awell-range-slider-background-color);
   border: 0;
   border-radius: 25px;
@@ -4375,7 +4664,7 @@ html {
   height: 11.4px;
   cursor: pointer;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-thumb {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-thumb {
   width: 14px;
   height: 14px;
   background: var(--awell-accent-color);
@@ -4383,7 +4672,7 @@ html {
   border-radius: 15px;
   cursor: pointer;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-track {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-track {
   position: relative;
   background: transparent;
   border-color: transparent;
@@ -4393,17 +4682,17 @@ html {
   height: 11.4px;
   cursor: pointer;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-lower {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-lower {
   background: var(--awell-accent-color);
   border: 0;
   border-radius: 50px;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-upper {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-upper {
   background: var(--awell-range-slider-background-color);
   border: 0;
   border-radius: 50px;
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-thumb {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-thumb {
   width: 14px;
   height: 14px;
   background: var(--awell-accent-color);
@@ -4413,26 +4702,22 @@ html {
   margin-top: 0;
   /* Needed to keep the Edge thumb centred */
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-lower {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-lower {
   background: var(--awell-range-slider-background-color);
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-upper {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-upper {
   background: var(--awell-range-slider-background-color);
 }
 @supports (-ms-ime-align: auto) {
-  .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
+  .awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
     /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
   }
-  .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
+  .awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
     margin: 0;
     /* Edge starts the margin from the thumb, not the track as other browsers do */
   }
 }
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_labels {
-  display: flex;
-  justify-content: space-between;
-}
-.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
+.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
   position: absolute;
   background-color: var(--awell-secondary-color);
   color: var(--awell-secondary-text-color);
@@ -4442,10 +4727,38 @@ html {
   transform: translateX(-50%);
 }
 @media (min-width: 640px) {
-  .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
+  .awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
     font-size: var(--awell-font-size-base);
   }
 }
+.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper {
+  display: flex;
+  gap: var(--awell-spacing-2);
+  flex-direction: column;
+}
+.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--awell-spacing-2);
+  font-size: var(--awell-font-size-sm);
+}
+@media (min-width: 640px) {
+  .awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list {
+    font-size: var(--awell-font-size-base);
+  }
+}
+.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list > div {
+  width: 50%;
+}
+.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list:first-child {
+  margin-top: var(--awell-spacing-1);
+}
+.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list .awell__rangeInput_min {
+  text-align: left;
+}
+.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list .awell__rangeInput_max {
+  text-align: right;
+}
 
 .awell__rangeInput_awell_range_input.awell__rangeInput_hideThumb::-webkit-slider-thumb {
   visibility: hidden;
@@ -5520,9 +5833,6 @@ html {
   height: var(--awell-font-size-base);
   margin-top: var(--awell-spacing-4);
 }
-.awell__question_awell_question .awell__question_error.awell__question_slider_error {
-  margin-top: var(--awell-spacing-12);
-}
 .awell__phoneInputField_awell_input_field_wrapper {
   --awell-focus-ring-color: var(--awell-accent-ring-color-inputs);
   --awell-focus-ring-offset-width: 0px;
@@ -7862,10 +8172,6 @@ html {
   margin-bottom: var(--awell-spacing-8);
 }
 
-.awell__form_traditional_form_question_slider {
-  margin-bottom: var(--awell-spacing-12);
-}
-
 .awell__form_trademark {
   font-size: var(--font-size-xs);
   color: var(--awell-slate500);

package/dist/index.js

@@ -16596,7 +16596,7 @@ Check the top-level render call using <` + t + ">.");
       return jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$i.input_wrapper, " ").concat(customWrapperClass) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$i.radio_wrapper }, { children: jsxRuntime.exports.jsx("input", __assign({}, props, { name: name, type: "radio", onChange: onChange })) })), jsxRuntime.exports.jsx("div", __assign({ className: classes$i.label_wrapper }, { children: jsxRuntime.exports.jsx("label", __assign({ htmlFor: props.id }, { children: label })) }))] }));
     };
 
-    var classes$h = {"awell_range_input_wrapper":"awell__rangeInput_awell_range_input_wrapper","tooltip_touched":"awell__rangeInput_tooltip_touched","with_marks":"awell__rangeInput_with_marks","awell_range_input_datalist":"awell__rangeInput_awell_range_input_datalist","with_min_max_labels":"awell__rangeInput_with_min_max_labels","minLabel":"awell__rangeInput_minLabel","maxLabel":"awell__rangeInput_maxLabel","awell_range_input":"awell__rangeInput_awell_range_input","awell_range_input_labels":"awell__rangeInput_awell_range_input_labels","tooltip":"awell__rangeInput_tooltip","hideThumb":"awell__rangeInput_hideThumb","showThumb":"awell__rangeInput_showThumb"};
+    var classes$h = {"input_container":"awell__rangeInput_input_container","touch_tooltip_wrapper":"awell__rangeInput_touch_tooltip_wrapper","with_value_tooltip":"awell__rangeInput_with_value_tooltip","tooltip_touched":"awell__rangeInput_tooltip_touched","awell_range_input_wrapper":"awell__rangeInput_awell_range_input_wrapper","with_marks":"awell__rangeInput_with_marks","awell_range_input":"awell__rangeInput_awell_range_input","tooltip":"awell__rangeInput_tooltip","min_max_wrapper":"awell__rangeInput_min_max_wrapper","min_max_data_list":"awell__rangeInput_min_max_data_list","min":"awell__rangeInput_min","max":"awell__rangeInput_max","hideThumb":"awell__rangeInput_hideThumb","showThumb":"awell__rangeInput_showThumb"};
 
     var lodash = {exports: {}};
 
@@ -33839,7 +33839,7 @@ Check the top-level render call using <` + t + ">.");
       React__default["default"].useEffect(function () {
         var MIDPOINT_PERCENTAGE = 0.5;
         var THUMB_WIDTH = 16;
-        var TOP_POSITION_ADJUSTMENT = -28;
+        var TOP_POSITION_ADJUSTMENT = -30;
         if (touched === true && is_value_tooltip_on && tooltipRef.current) {
           var input = tooltipRef.current.closest(".".concat(classes$h.awell_range_input_wrapper));
           if (input) {
@@ -33857,11 +33857,11 @@ Check the top-level render call using <` + t + ">.");
           }
         }
       }, [internalValue, is_value_tooltip_on, max, min, touched]);
-      return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsx(QuestionLabel, { htmlFor: id, label: label, mandatory: mandatory, id: "".concat(id, "-label") }), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$h.awell_range_input_wrapper, " ").concat(display_marks ? classes$h.with_marks : ''), style: style }, { children: [jsxRuntime.exports.jsx("input", __assign({}, props, { "data-testid": id, type: "range", id: "awell__slider_input", min: min, max: max, step: step_value, className: "".concat(classes$h.awell_range_input, " ").concat(touched ? classes$h.showThumb : classes$h.hideThumb), onChange: handleValueChange, onFocus: function () {
-              setTouched(true);
-              onTouched(true);
-            }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": props.value || min, "aria-labelledby": "".concat(id, "-label") })), renderTouchTooltip(), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$h.awell_range_input_datalist, " ").concat(show_min_max_values ? classes$h.with_min_max_labels : ''), "data-testid": "".concat(id, "-datalist") }, { children: [jsxRuntime.exports.jsx("span", __assign({ className: classes$h.minLabel, "aria-label": "Minimum value" }, { children: min_label })), jsxRuntime.exports.jsx("span", __assign({ className: classes$h.maxLabel, "aria-label": "Maximum value" }, { children: max_label }))] })), is_value_tooltip_on &&
-          renderValueTooltip(internalValue, tooltipPosition.left, tooltipPosition.top, touched)] }))] });
+      return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsx(QuestionLabel, { htmlFor: id, label: label, mandatory: mandatory, id: "".concat(id, "-label") }), jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.input_container }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$h.touch_tooltip_wrapper, "  ").concat(is_value_tooltip_on ? classes$h.with_value_tooltip : '') }, { children: renderTouchTooltip() })), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$h.awell_range_input_wrapper, " ").concat(display_marks ? classes$h.with_marks : ''), style: style }, { children: [is_value_tooltip_on &&
+            renderValueTooltip(internalValue, tooltipPosition.left, tooltipPosition.top, touched), jsxRuntime.exports.jsx("input", __assign({}, props, { "data-testid": id, type: "range", id: "awell__slider_input", min: min, max: max, step: step_value, className: "".concat(classes$h.awell_range_input, " ").concat(touched ? classes$h.showThumb : classes$h.hideThumb), onChange: handleValueChange, onFocus: function () {
+                setTouched(true);
+                onTouched(true);
+              }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": props.value || min, "aria-labelledby": "".concat(id, "-label") }))] })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.min_max_wrapper }, { children: [show_min_max_values && jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.min_max_data_list, "data-testid": "".concat(id, "-datalist-values") }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$h.min, "aria-label": "Minimum value" }, { children: min })), jsxRuntime.exports.jsx("div", __assign({ className: classes$h.max, "aria-label": "Maximum value" }, { children: max }))] })), (!lodash.exports.isEmpty(min_label) || !lodash.exports.isEmpty(max_label)) && jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.min_max_data_list, "data-testid": "".concat(id, "-datalist-labels") }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$h.min, "aria-label": "Minimum label" }, { children: min_label })), jsxRuntime.exports.jsx("div", __assign({ className: classes$h.max, "aria-label": "Maximum label" }, { children: max_label }))] }))] }))] }))] });
     };
 
     var classes$g = {"scroll_indicator_container":"awell__ScrollIndicator_scroll_indicator_container","scroll_indicator_svg":"awell__ScrollIndicator_scroll_indicator_svg"};
@@ -36977,7 +36977,7 @@ Check the top-level render call using <` + t + ">.");
               '' }, option.id);}) }))] });
     };
 
-    var classes$9 = {"awell_question":"awell__question_awell_question","error":"awell__question_error","slider_error":"awell__question_slider_error"};
+    var classes$9 = {"awell_question":"awell__question_awell_question","error":"awell__question_error"};
 
     var classes$8 = {"awell_input_field_wrapper":"awell__phoneInputField_awell_input_field_wrapper","awell_phone_input_field_container":"awell__phoneInputField_awell_phone_input_field_container","input_wrapper_with_error":"awell__phoneInputField_input_wrapper_with_error","has_error":"awell__phoneInputField_has_error","error_message":"awell__phoneInputField_error_message","error_icon":"awell__phoneInputField_error_icon","awell_input_field":"awell__phoneInputField_awell_input_field"};
 
@@ -37423,9 +37423,7 @@ Check the top-level render call using <` + t + ">.");
         var id = _a.id;
         return id === question.id;
       });
-      return jsxRuntime.exports.jsxs("div", __assign({ style: style, className: classes$9.awell_question }, { children: [jsxRuntime.exports.jsx(QuestionData, { question: question, control: control, getValues: getValues, labels: labels, inputAutoFocus: inputAutoFocus, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, onAnswerChange: onAnswerChange, shouldAutoProgress: shouldAutoProgress }), currentError && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$9.error, " ").concat(question.userQuestionType === exports.UserQuestionType.Slider ?
-          classes$9.slider_error :
-          '') }, { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: currentError.error })) }))] }));
+      return jsxRuntime.exports.jsxs("div", __assign({ style: style, className: classes$9.awell_question }, { children: [jsxRuntime.exports.jsx(QuestionData, { question: question, control: control, getValues: getValues, labels: labels, inputAutoFocus: inputAutoFocus, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, onAnswerChange: onAnswerChange, shouldAutoProgress: shouldAutoProgress }), currentError && jsxRuntime.exports.jsx("div", __assign({ className: classes$9.error }, { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: currentError.error })) }))] }));
     };
 
     var classes$7 = {"awell_attachment_list":"awell__attachmentList_awell_attachment_list"};
@@ -37518,7 +37516,7 @@ Check the top-level render call using <` + t + ">.");
       return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: layoutClasses.main_content }, { children: jsxRuntime.exports.jsxs("article", __assign({ className: "".concat(classes$4.awell_message, " ").concat(classes$4.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$4.message_title }, { children: subject })), jsxRuntime.exports.jsx("div", __assign({ className: classes$4.content }, { children: jsxRuntime.exports.jsx(RichTextViewer, { content: cleanContent }) })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.attachmentList }, { children: [jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: attachmentIcon, labels: attachmentLabels }), children] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$4.button_wrapper, " ").concat(classes$4.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "markMessageAsReadButton", variant: "secondary", onClick: onMessageRead }, { children: buttonLabels.readMessage })) })) }))] });
     };
 
-    var classes$3 = {"container":"awell__form_container","traditional_container":"awell__form_traditional_container","awell_wizard_form":"awell__form_awell_wizard_form","form_progress":"awell__form_form_progress","loadingContainer":"awell__form_loadingContainer","title":"awell__form_title","wizard_form":"awell__form_wizard_form","conversational_button_wrapper":"awell__form_conversational_button_wrapper","traditional_button_wrapper":"awell__form_traditional_button_wrapper","traditional_form":"awell__form_traditional_form","traditional_form_question":"awell__form_traditional_form_question","traditional_form_question_slider":"awell__form_traditional_form_question_slider","trademark":"awell__form_trademark","traditional":"awell__form_traditional","conversational":"awell__form_conversational"};
+    var classes$3 = {"container":"awell__form_container","traditional_container":"awell__form_traditional_container","awell_wizard_form":"awell__form_awell_wizard_form","form_progress":"awell__form_form_progress","loadingContainer":"awell__form_loadingContainer","title":"awell__form_title","wizard_form":"awell__form_wizard_form","conversational_button_wrapper":"awell__form_conversational_button_wrapper","traditional_button_wrapper":"awell__form_traditional_button_wrapper","traditional_form":"awell__form_traditional_form","traditional_form_question":"awell__form_traditional_form_question","trademark":"awell__form_trademark","traditional":"awell__form_traditional","conversational":"awell__form_conversational"};
 
     var useClickOutsideNotifier = function (_a) {
       var ref = _a.ref,clickOutsideHandler = _a.clickOutsideHandler;
@@ -38059,10 +38057,7 @@ Check the top-level render call using <` + t + ">.");
       }, []);
       return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: "".concat(layoutClasses.main_content, " ").concat(classes$3.traditional_form) }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.container, " ").concat(classes$3.traditional_container) }, { children: [!questionWithVisiblity ? jsxRuntime.exports.jsx("div", __assign({ className: classes$3.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx("div", { children: questionWithVisiblity.
                 filter(function (vb) {return vb.visible;}).
-                map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.traditional_form_question, " ").concat(visibleQuestion.userQuestionType ===
-                    exports.UserQuestionType.Slider ?
-                    classes$3.traditional_form_question_slider :
-                    '') }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.trademark, " ").concat(classes$3.conversational) }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.traditional_button_wrapper) }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });
+                map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: classes$3.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.trademark, " ").concat(classes$3.conversational) }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.traditional_button_wrapper) }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });
     };
 
     var WizardForm = ConversationalForm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "private": false,
   "description": "UI components to integrate with Awell Health",
   "repository": {