@awell-health/ui-library 0.1.58 → 0.1.61

package/dist/index.css

@@ -1167,7 +1167,7 @@ html {
 }
 .awell__questionLabel_label {
   margin-bottom: var(--awell-spacing-1\.5);
-  font-size: var(--awell-font-size-base);
+  font-size: var(--awell-font-size-sm);
   line-height: var(--awell-leading-normal);
   font-weight: var(--awell-font-medium);
   color: rgb(55, 65, 81);
@@ -1176,7 +1176,7 @@ html {
 }
 @media (min-width: 640px) {
   .awell__questionLabel_label {
-    font-size: var(--awell-font-size-lg);
+    font-size: var(--awell-font-size-base);
     line-height: var(--awell-leading-relaxed);
   }
 }
@@ -2184,15 +2184,21 @@ html {
 
 .awell__inputField_awell_input_field {
   font: var(--awell-font);
-  padding: var(--awell-spacing-3) var(--awell-spacing-4);
+  font-size: var(--awell-font-size-sm);
+  padding: var(--awell-spacing-2) var(--awell-spacing-3);
   color: var(--awell-slate900);
-  font-size: var(--awell-font-size-base);
   line-height: var(--awell-leading-5);
   border: 1px solid rgb(209, 213, 219);
   border-radius: var(--awell-border-radius-md);
   box-shadow: var(--awell-shadow-sm);
   width: 100%;
 }
+@media (min-width: 640px) {
+  .awell__inputField_awell_input_field {
+    font-size: var(--awell-font-size-base);
+    padding: var(--awell-spacing-3) var(--awell-spacing-4);
+  }
+}
 .awell__inputField_awell_input_field:focus {
   outline: 2px transparent;
   outline-offset: 2px;
@@ -9665,4 +9671,426 @@ html {
   height: 100%;
   align-items: center;
   width: 100%;
+}
+@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);
+}
+
+:root {
+  --awell-activity-collect-medication-max-width: 850px;
+  --awell-activity-collect-medication-padding: var(--awell-activity-padding);
+}
+
+.awell__collectMedication_container {
+  max-width: var(--awell-activity-collect-medication-max-width);
+  padding: var(--awell-activity-collect-medication-padding);
+  margin: 0 auto;
+}
+
+.awell__collectMedication_groupMedsListContainer {
+  font-size: var(--awell-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  gap: var(--awell-spacing-4);
+}
+@media (min-width: 640px) {
+  .awell__collectMedication_groupMedsListContainer {
+    font-size: var(--awell-font-size-base);
+    gap: var(--awell-spacing-3);
+  }
+}
+
+.awell__collectMedication_singleMedsListContainer {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: left;
+  width: 100%;
+  gap: var(--awell-spacing-2);
+}
+@media (min-width: 640px) {
+  .awell__collectMedication_singleMedsListContainer {
+    gap: var(--awell-spacing-4);
+  }
+}
+
+.awell__collectMedication_singleMedsListContainer:not(:first-child) label {
+  display: none;
+}
+
+.awell__collectMedication_singleMedsListContainer > div {
+  width: 100%;
+}
+
+.awell__collectMedication_addMedsButton {
+  margin-top: var(--awell-spacing-4);
+  display: flex;
+  justify-content: flex-start;
+}
+
+.awell__collectMedication_deleteMedsButton {
+  background-color: var(--awell-red50);
+  border: none;
+  color: var(--awell-red);
+  border-radius: var(--awell-border-radius-md);
+  display: flex;
+  align-items: center;
+  padding: var(--awell-spacing-2);
+  cursor: pointer;
+}
+.awell__collectMedication_deleteMedsButton:hover {
+  background-color: #fee2e2;
+}
+@media (min-width: 640px) {
+  .awell__collectMedication_deleteMedsButton {
+    padding: var(--awell-spacing-2);
+  }
+}
+
+.awell__collectMedication_icon {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+@media (min-width: 640px) {
+  .awell__collectMedication_icon {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+}
+
+.awell__collectMedication_button_wrapper {
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  align-items: center;
+  width: 100%;
 }