@awell-health/ui-library 0.1.50 → 0.1.52

package/dist/index.css

@@ -8212,30 +8212,400 @@ html {
   --awell-activity-padding: 0 var(--awell-spacing-4);
 }
 
+.awell__CloseButton_close_button {
+  position: absolute;
+  right: 1.5rem;
+  top: 0.85rem;
+  cursor: pointer;
+  background: #fff;
+  border-radius: var(--awell-border-radius-md);
+  border: 1px solid var(--awell-neutralLight50);
+  display: flex;
+  padding: var(--awell-spacing-1\.5);
+}
+.awell__CloseButton_close_button:hover {
+  border-color: var(--awell-accent-color);
+}
+.awell__CloseButton_close_button:hover .awell__CloseButton_close_button_svg {
+  color: var(--awell-accent-color);
+}
+.awell__CloseButton_close_button:focus {
+  color: var(--awell-accent-color);
+}
+.awell__CloseButton_close_button .awell__CloseButton_close_button_svg {
+  width: 20px;
+  height: 20px;
+  color: var(--awell-neutralLight50);
+}
+@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
 :root {
-  --awell-scheduling-activity-footer-max-width: var(--awell-activity-max-width);
-  --awell-scheduling-activity-padding: var(--awell-activity-padding);
+  --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;
 }
 
-.awell__calDotcomActivity_calDotComActivity {
+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__loadActivityPlaceholder_loading_indicators {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.awell__calDotcomActivity_container {
-  padding: var(--awell-scheduling-activity-padding);
+  width: 100%;
 }
 
-.awell__calDotcomActivity_button_wrapper {
-  max-width: var(--awell-scheduling-activity-footer-max-width);
-  display: flex;
-  justify-content: flex-end;
-  height: 100%;
-  align-items: center;
+.awell__loadActivityPlaceholder_loading_indicator {
   width: 100%;
+  height: 3.125rem;
+  border-radius: var(--awell-border-radius-xl);
+  margin: var(--awell-spacing-2) 0;
+  background: linear-gradient(90deg, transparent, #EEEEEE, transparent);
+  background-size: 200% 100%;
+  background-position: -100% 0;
+  animation: awell__loadActivityPlaceholder_wave 1.2s infinite;
+}
+
+/* Styles for larger screens */
+@media (min-width: 768px) {
+  .awell__loadActivityPlaceholder_loading_indicators {
+    max-width: 570px;
+    padding: var(--awell-spacing-8) 0;
+  }
+}
+/* Styles for smaller screens (mobile) */
+@media (max-width: 767px) {
+  .awell__loadActivityPlaceholder_loading_indicators {
+    min-width: 336px;
+    padding: var(--awell-spacing-8) var(--awell-spacing-4);
+  }
+}
+@keyframes awell__loadActivityPlaceholder_wave {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
 }
 @import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
 :root {
@@ -8568,66 +8938,24 @@ html {
 }
 
 :root {
-  --awell-activity-cloudinary-max-width: var(--awell-activity-max-width);
-  --awell-activity-cloudinary-padding: var(--awell-activity-padding);
-}
-
-.awell__cloudinary_container {
-  max-width: var(--awell-activity-cloudinary-max-width);
-  padding: var(--awell-activity-cloudinary-padding);
+  --awell-scheduling-activity-footer-max-width: var(--awell-activity-max-width);
+  --awell-scheduling-activity-padding: var(--awell-activity-padding);
 }
 
-.awell__cloudinary_awell_cloudinary,
-.awell__cloudinary_content {
+.awell__calDotcomActivity_calDotComActivity {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
-  gap: 16px;
-}
-
-.awell__cloudinary_content {
-  width: 100%;
-}
-
-.awell__cloudinary_message_title {
-  color: rgb(17, 24, 39);
-  text-align: center;
-  line-height: var(--awell-leading-8);
-  font-size: var(--awell-font-size-4xl);
-  letter-spacing: -0.025em;
-  font-weight: var(--awell-font-extrabold);
-  margin-bottom: var(--awell-spacing-8);
-}
-@media (min-width: 640px) {
-  .awell__cloudinary_message_title {
-    margin-bottom: var(--awell-spacing-6);
-    font-size: var(--awell-font-size-3xl);
-  }
-}
-.awell__cloudinary_message_title:after {
-  content: "";
-  margin: 0 auto;
-  display: block;
-  width: 10rem;
-  margin-top: var(--awell-spacing-4);
-  background-color: var(--awell-accent-color);
-  height: 3px;
-  border-radius: var(--awell-border-radius-lg);
-}
-@media (min-width: 640px) {
-  .awell__cloudinary_message_title:after {
-    margin-top: var(--awell-spacing-3);
-  }
 }
 
-.awell__cloudinary_attachmentList {
-  margin-top: var(--awell-spacing-4);
-  width: 100%;
+.awell__calDotcomActivity_container {
+  padding: var(--awell-scheduling-activity-padding);
 }
 
-.awell__cloudinary_button_wrapper {
+.awell__calDotcomActivity_button_wrapper {
+  max-width: var(--awell-scheduling-activity-footer-max-width);
   display: flex;
   justify-content: flex-end;
   height: 100%;
@@ -8964,28 +9292,70 @@ html {
   --awell-activity-padding: 0 var(--awell-spacing-4);
 }
 
-.awell__CloseButton_close_button {
-  position: absolute;
-  right: 1.5rem;
-  top: 0.85rem;
-  cursor: pointer;
-  background: #fff;
-  border-radius: var(--awell-border-radius-md);
-  border: 1px solid var(--awell-neutralLight50);
+:root {
+  --awell-activity-cloudinary-max-width: var(--awell-activity-max-width);
+  --awell-activity-cloudinary-padding: var(--awell-activity-padding);
+}
+
+.awell__cloudinary_container {
+  max-width: var(--awell-activity-cloudinary-max-width);
+  padding: var(--awell-activity-cloudinary-padding);
+}
+
+.awell__cloudinary_awell_cloudinary,
+.awell__cloudinary_content {
   display: flex;
-  padding: var(--awell-spacing-1\.5);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  gap: 16px;
 }
-.awell__CloseButton_close_button:hover {
-  border-color: var(--awell-accent-color);
+
+.awell__cloudinary_content {
+  width: 100%;
 }
-.awell__CloseButton_close_button:hover .awell__CloseButton_close_button_svg {
-  color: var(--awell-accent-color);
+
+.awell__cloudinary_message_title {
+  color: rgb(17, 24, 39);
+  text-align: center;
+  line-height: var(--awell-leading-8);
+  font-size: var(--awell-font-size-4xl);
+  letter-spacing: -0.025em;
+  font-weight: var(--awell-font-extrabold);
+  margin-bottom: var(--awell-spacing-8);
 }
-.awell__CloseButton_close_button:focus {
-  color: var(--awell-accent-color);
+@media (min-width: 640px) {
+  .awell__cloudinary_message_title {
+    margin-bottom: var(--awell-spacing-6);
+    font-size: var(--awell-font-size-3xl);
+  }
 }
-.awell__CloseButton_close_button .awell__CloseButton_close_button_svg {
-  width: 20px;
-  height: 20px;
-  color: var(--awell-neutralLight50);
+.awell__cloudinary_message_title:after {
+  content: "";
+  margin: 0 auto;
+  display: block;
+  width: 10rem;
+  margin-top: var(--awell-spacing-4);
+  background-color: var(--awell-accent-color);
+  height: 3px;
+  border-radius: var(--awell-border-radius-lg);
+}
+@media (min-width: 640px) {
+  .awell__cloudinary_message_title:after {
+    margin-top: var(--awell-spacing-3);
+  }
+}
+
+.awell__cloudinary_attachmentList {
+  margin-top: var(--awell-spacing-4);
+  width: 100%;
+}
+
+.awell__cloudinary_button_wrapper {
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  align-items: center;
+  width: 100%;
 }