@awell-health/ui-library 0.1.108 → 0.1.111

package/dist/index.css

@@ -6695,6 +6695,7 @@ html {
   justify-content: center;
   width: 100%;
   z-index: 1001;
+  transition: opacity 0.3s ease-in-out;
 }
 @media (min-width: 640px) {
   .awell__hostedPageFooter_footer .awell__hostedPageFooter_scrollHint {
@@ -6702,14 +6703,6 @@ html {
     bottom: var(--awell-footer-height);
   }
 }
-.awell__hostedPageFooter_footer .awell__hostedPageFooter_scrollHint.awell__hostedPageFooter_visible {
-  opacity: 1;
-  transition: opacity 0.3s ease-in-out;
-}
-.awell__hostedPageFooter_footer .awell__hostedPageFooter_scrollHint.awell__hostedPageFooter_hidden {
-  opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-}
 @import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
 :root {
   --awell-accent100: #fdb833;

package/dist/index.js

@@ -48498,69 +48498,100 @@ var     Kr=[{
         }) }));
     };
 
-    var useScrollHint = function () {
+    var useScrollHint = function (fixPosition) {
+      if (fixPosition === void 0) {fixPosition = false;}
       var _a = React.useState(false),showScrollHint = _a[0],setShowScrollHint = _a[1];
-      var determineShowScrollHint = function () {
-        var mainContentEl = document.getElementById('ahp_main_content_with_scroll_hint');
-        if (mainContentEl) {
-          var isElementTotalHeightHigherThanElementVisibleHeight = mainContentEl.scrollHeight > mainContentEl.offsetHeight;
-          var hasUserScrolledToBottomOfEl = Math.ceil(mainContentEl.scrollTop + mainContentEl.offsetHeight) >=
-          mainContentEl.scrollHeight - 5;
-          if (isElementTotalHeightHigherThanElementVisibleHeight &&
-          !hasUserScrolledToBottomOfEl) {
-            setShowScrollHint(true);
-          } else
-          {
-            setShowScrollHint(false);
-          }
+      var rafIdRef = React.useRef();
+      var checkScrollHint = React.useCallback(function () {
+        if (fixPosition) {
+          var isPageScrollable = document.documentElement.scrollHeight > window.innerHeight;
+          var isAtBottom = Math.ceil(window.scrollY + window.innerHeight) >=
+          document.documentElement.scrollHeight - 5;
+          setShowScrollHint(isPageScrollable && !isAtBottom);
         } else
         {
-          setShowScrollHint(false);
+          var mainContentEl = document.getElementById('ahp_main_content_with_scroll_hint');
+          if (!mainContentEl) {
+            setShowScrollHint(false);
+            return;
+          }
+          var isScrollable = mainContentEl.scrollHeight > mainContentEl.offsetHeight;
+          var isAtBottom = Math.ceil(mainContentEl.scrollTop + mainContentEl.offsetHeight) >=
+          mainContentEl.scrollHeight - 5;
+          setShowScrollHint(isScrollable && !isAtBottom);
         }
-      };
-      React.useEffect(function () {
-        determineShowScrollHint();
-      }, [window.document.body.offsetHeight]);
-      React.useEffect(function () {
-        determineShowScrollHint();
-        var mainContentEl = document.getElementById('ahp_main_content_with_scroll_hint');
-        window.addEventListener('resize', determineShowScrollHint);
-        if (mainContentEl) {
-          mainContentEl.addEventListener('scroll', determineShowScrollHint);
+      }, [fixPosition]);
+      var debouncedCheckScrollHint = React.useCallback(function () {
+        if (rafIdRef.current) {
+          cancelAnimationFrame(rafIdRef.current);
         }
-        return function () {
-          window.removeEventListener('resize', determineShowScrollHint);
-          if (mainContentEl) {
-            mainContentEl.removeEventListener('scroll', determineShowScrollHint);
+        rafIdRef.current = requestAnimationFrame(checkScrollHint);
+      }, [checkScrollHint]);
+      React.useEffect(function () {
+        checkScrollHint();
+        var rafCheck = requestAnimationFrame(function () {
+          checkScrollHint();
+        });
+        if (fixPosition) {
+          window.addEventListener('resize', checkScrollHint);
+          window.addEventListener('scroll', checkScrollHint);
+          var mutationObserver_1 = new MutationObserver(debouncedCheckScrollHint);
+          mutationObserver_1.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: false });
+
+          return function () {
+            cancelAnimationFrame(rafCheck);
+            if (rafIdRef.current) {
+              cancelAnimationFrame(rafIdRef.current);
+            }
+            window.removeEventListener('resize', checkScrollHint);
+            window.removeEventListener('scroll', checkScrollHint);
+            mutationObserver_1.disconnect();
+          };
+        } else
+        {
+          var mainContentEl_1 = document.getElementById('ahp_main_content_with_scroll_hint');
+          window.addEventListener('resize', checkScrollHint);
+          if (mainContentEl_1) {
+            mainContentEl_1.addEventListener('scroll', checkScrollHint);
           }
-        };
-      }, []);
+          var mutationObserver_2 = new MutationObserver(debouncedCheckScrollHint);
+          if (mainContentEl_1) {
+            mutationObserver_2.observe(mainContentEl_1, {
+              childList: true,
+              subtree: true,
+              attributes: false });
+
+          }
+          return function () {
+            cancelAnimationFrame(rafCheck);
+            if (rafIdRef.current) {
+              cancelAnimationFrame(rafIdRef.current);
+            }
+            window.removeEventListener('resize', checkScrollHint);
+            if (mainContentEl_1) {
+              mainContentEl_1.removeEventListener('scroll', checkScrollHint);
+            }
+            mutationObserver_2.disconnect();
+          };
+        }
+      }, [fixPosition, checkScrollHint, debouncedCheckScrollHint]);
       return {
-        showScrollHint: showScrollHint,
-        determineShowScrollHint: determineShowScrollHint };
+        showScrollHint: showScrollHint };
 
     };
 
-    var classes$7 = {"footer":"awell__hostedPageFooter_footer","fixed":"awell__hostedPageFooter_fixed","scrollHint":"awell__hostedPageFooter_scrollHint","visible":"awell__hostedPageFooter_visible","hidden":"awell__hostedPageFooter_hidden"};
+    var classes$7 = {"footer":"awell__hostedPageFooter_footer","fixed":"awell__hostedPageFooter_fixed","scrollHint":"awell__hostedPageFooter_scrollHint"};
 
     var HostedPageFooter = function (_a) {
-      var children = _a.children,_b = _a.showScrollHint,showScrollHint = _b === void 0 ? false : _b,_c = _a.fixPosition,fixPosition = _c === void 0 ? false : _c;
-      var scrollIndicatorRef = React.useRef(null);
-      React.useEffect(function () {
-        var handleScroll = function () {
-          if (scrollIndicatorRef.current) {
-            var _a = document.documentElement,scrollTop = _a.scrollTop,scrollHeight = _a.scrollHeight,clientHeight = _a.clientHeight;
-            var isAtBottom = scrollTop + clientHeight >= scrollHeight - 2;
-            scrollIndicatorRef.current.classList.toggle(classes$7.hidden, isAtBottom);
-          }
-        };
-        window.addEventListener('scroll', handleScroll);
-        return function () {return window.removeEventListener('scroll', handleScroll);};
-      }, []);
+      var children = _a.children,_b = _a.hideScrollHint,hideScrollHint = _b === void 0 ? false : _b,_c = _a.fixPosition,fixPosition = _c === void 0 ? false : _c;
+      var showScrollHint = useScrollHint(fixPosition).showScrollHint;
       var footerClass = fixPosition ?
       "".concat(classes$7.footer, " ").concat(classes$7.fixed) :
       classes$7.footer;
-      return jsxRuntime.exports.jsxs("footer", __assign({ className: footerClass }, { children: [showScrollHint && jsxRuntime.exports.jsx("div", __assign({ ref: scrollIndicatorRef, className: "".concat(classes$7.scrollHint, " ").concat(classes$7.visible), id: "awell__scroll_hint" }, { children: jsxRuntime.exports.jsx(ScrollIndicator, {}) })), children] }));
+      return jsxRuntime.exports.jsxs("footer", __assign({ className: footerClass }, { children: [!hideScrollHint && showScrollHint && jsxRuntime.exports.jsx("div", __assign({ className: classes$7.scrollHint, id: "awell__scroll_hint" }, { children: jsxRuntime.exports.jsx(ScrollIndicator, {}) })), children] }));
     };
 
     var classes$6 = {"container":"awell__checklist_container","awell_checklist":"awell__checklist_awell_checklist","title":"awell__checklist_title","checklist":"awell__checklist_checklist","checkboxListFormControl":"awell__checklist_checkboxListFormControl","button_wrapper":"awell__checklist_button_wrapper"};
@@ -48570,7 +48601,6 @@ var     Kr=[{
     var Checklist = function (_a) {
       var title = _a.title,items = _a.items,onSubmit = _a.onSubmit,_b = _a.readOnly,readOnly = _b === void 0 ? false : _b,_c = _a.disabled,disabled = _c === void 0 ? false : _c,submitLabel = _a.submitLabel;
       var _d = React.useState(readOnly ? items : []),checkedItems = _d[0],setCheckedItems = _d[1];
-      var showScrollHint = useScrollHint().showScrollHint;
       var handleChange = function (item) {return function (checked) {
           if (checked) {
             setCheckedItems(__spreadArray(__spreadArray([], checkedItems, true), [item], false));
@@ -48579,16 +48609,15 @@ var     Kr=[{
             setCheckedItems(checkedItems.filter(function (checkedItem) {return checkedItem !== item;}));
           }
         };};
-      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("div", __assign({ className: "".concat(classes$6.awell_checklist, " ").concat(classes$6.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$6.title }, { children: jsxRuntime.exports.jsx(QuestionLabel, { label: title }) })), jsxRuntime.exports.jsx("div", __assign({ className: classes$6.checklist }, { children: items.map(function (item) {return jsxRuntime.exports.jsx(CheckboxButton, { onChange: function (event) {return handleChange(item)(event.target.checked);}, label: item.label, id: item.id, disabled: readOnly, name: "checklist-".concat(title) }, item.id);}) }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$6.button_wrapper, " ").concat(classes$6.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ onClick: onSubmit, disabled: checkedItems.length !== items.length || readOnly || disabled, "data-cy": "submitChecklistButton" }, { children: submitLabel })) })) }))] });
+      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("div", __assign({ className: "".concat(classes$6.awell_checklist, " ").concat(classes$6.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$6.title }, { children: jsxRuntime.exports.jsx(QuestionLabel, { label: title }) })), jsxRuntime.exports.jsx("div", __assign({ className: classes$6.checklist }, { children: items.map(function (item) {return jsxRuntime.exports.jsx(CheckboxButton, { onChange: function (event) {return handleChange(item)(event.target.checked);}, label: item.label, id: item.id, disabled: readOnly, name: "checklist-".concat(title) }, item.id);}) }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$6.button_wrapper, " ").concat(classes$6.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ onClick: onSubmit, disabled: checkedItems.length !== items.length || readOnly || disabled, "data-cy": "submitChecklistButton" }, { children: submitLabel })) })) })] });
     };
 
     var classes$5 = {"container":"awell__message_container","awell_message":"awell__message_awell_message","slate-MediaEmbedElement-input":"awell__message_slate-MediaEmbedElement-input","slate-MediaEmbedElement-iframe":"awell__message_slate-MediaEmbedElement-iframe","content":"awell__message_content","message_title":"awell__message_message_title","attachmentList":"awell__message_attachmentList","button_wrapper":"awell__message_button_wrapper"};
 
     var Message = function (_a) {
       var onMessageRead = _a.onMessageRead,content = _a.content,subject = _a.subject,children = _a.children,attachmentIcon = _a.attachmentIcon,attachmentLabels = _a.attachmentLabels,attachments = _a.attachments,buttonLabels = _a.buttonLabels;
-      var showScrollHint = useScrollHint().showScrollHint;
       var cleanContent = generatePureHtml(content);
-      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$5.awell_message, " ").concat(classes$5.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$5.message_title }, { children: subject })), jsxRuntime.exports.jsx("div", __assign({ className: classes$5.content }, { children: jsxRuntime.exports.jsx(RichTextViewer, { content: cleanContent }) })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$5.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$5.button_wrapper, " ").concat(classes$5.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "markMessageAsReadButton", variant: "secondary", onClick: onMessageRead }, { children: buttonLabels.readMessage })) })) }))] });
+      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$5.awell_message, " ").concat(classes$5.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$5.message_title }, { children: subject })), jsxRuntime.exports.jsx("div", __assign({ className: classes$5.content }, { children: jsxRuntime.exports.jsx(RichTextViewer, { content: cleanContent }) })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$5.attachmentList }, { children: [jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: attachmentIcon, labels: attachmentLabels }), children] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$5.button_wrapper, " ").concat(classes$5.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "markMessageAsReadButton", variant: "secondary", onClick: onMessageRead }, { children: buttonLabels.readMessage })) })) })] });
     };
 
     var classes$4 = {"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_question":"awell__form_traditional_form_question","trademark":"awell__form_trademark","conversational":"awell__form_conversational"};
@@ -49397,15 +49426,11 @@ var     Kr=[{
         autosaveAnswers: autosaveAnswers,
         onAnswersChange: onAnswersChange }),
       submitForm = _e.submitForm,isSubmittingForm = _e.isSubmittingForm,handleGoToNextQuestion = _e.handleGoToNextQuestion,handleGoToPrevQuestion = _e.handleGoToPrevQuestion,_f = _e.formMethods,control = _f.control,getValues = _f.getValues,currentQuestion = _e.currentQuestion,percentageCompleted = _e.percentageCompleted,errors = _e.errors,isFirstQuestion = _e.isFirstQuestion,isLastQuestion = _e.isLastQuestion,isEvaluatingQuestionVisibility = _e.isEvaluatingQuestionVisibility;
-      var _g = useScrollHint(),showScrollHint = _g.showScrollHint,determineShowScrollHint = _g.determineShowScrollHint;
       var submitAndMoveToNextQuestion = function () {
         if (!isLastQuestion) {
           handleGoToNextQuestion();
         }
       };
-      React.useEffect(function () {
-        determineShowScrollHint();
-      }, [currentQuestion]);
       var shouldAutoProgress = function (question) {
         if (autoProgress === false) {
           return false;
@@ -49419,7 +49444,7 @@ var     Kr=[{
       form.questions.length === 1 ||
       showProgressBar === false;
       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("div", __assign({ className: "".concat(classes$4.awell_wizard_form, " ").concat(classes$4.container) }, { children: [!hideProgressIndicator && jsxRuntime.exports.jsx("div", __assign({ className: classes$4.form_progress }, { children: jsxRuntime.exports.jsx(ProgressIndicator, { percentageCompleted: percentageCompleted }) })), isEvaluatingQuestionVisibility ||
-            (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id) === undefined ? jsxRuntime.exports.jsx("div", __assign({ className: classes$4.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.wizard_form }, { children: [jsxRuntime.exports.jsx(Question, { question: currentQuestion, control: control, getValues: getValues, errors: errors, labels: questionLabels, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, inputAutoFocus: true, shouldAutoProgress: shouldAutoProgress, onFileUpload: onFileUpload }, currentQuestion.id), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$4.trademark, " ").concat(classes$4.conversational) }, { children: form.trademark }))] })) })] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: !isEvaluatingQuestionVisibility && jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$4.conversational_button_wrapper, " ").concat(classes$4.container) }, { children: [jsxRuntime.exports.jsx("div", { children: !isFirstQuestion && jsxRuntime.exports.jsx(Button, __assign({ variant: "tertiary", onClick: handleGoToPrevQuestion, "data-cy": "navigateToPrevQuestionButton" }, { children: buttonLabels.prev })) }), isLastQuestion ? jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit })) : jsxRuntime.exports.jsx(Button, __assign({ variant: "secondary", onClick: handleGoToNextQuestion, "data-cy": "navigateToNextQuestionButton" }, { children: buttonLabels.next }))] })) }))] });
+            (currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id) === undefined ? jsxRuntime.exports.jsx("div", __assign({ className: classes$4.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.wizard_form }, { children: [jsxRuntime.exports.jsx(Question, { question: currentQuestion, control: control, getValues: getValues, errors: errors, labels: questionLabels, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, inputAutoFocus: true, shouldAutoProgress: shouldAutoProgress, onFileUpload: onFileUpload }, currentQuestion.id), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$4.trademark, " ").concat(classes$4.conversational) }, { children: form.trademark }))] })) })] })) })), jsxRuntime.exports.jsx(HostedPageFooter, { children: !isEvaluatingQuestionVisibility && jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$4.conversational_button_wrapper, " ").concat(classes$4.container) }, { children: [jsxRuntime.exports.jsx("div", { children: !isFirstQuestion && jsxRuntime.exports.jsx(Button, __assign({ variant: "tertiary", onClick: handleGoToPrevQuestion, "data-cy": "navigateToPrevQuestionButton" }, { children: buttonLabels.prev })) }), isLastQuestion ? jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit })) : jsxRuntime.exports.jsx(Button, __assign({ variant: "secondary", onClick: handleGoToNextQuestion, "data-cy": "navigateToNextQuestionButton" }, { children: buttonLabels.next }))] })) })] });
     };
 
     function r(e) {var t,f,n = "";if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == typeof e) if (Array.isArray(e)) {var o = e.length;for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);} else for (f in e) e[f] && (n && (n += " "), n += f);return n;}function clsx() {for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);return n;}
@@ -49442,9 +49467,9 @@ var     Kr=[{
           resetLayoutMode();
         };
       });
-      return jsxRuntime.exports.jsxs("div", __assign({ style: { height: '100%' } }, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: clsx(layoutClasses.main_content, classes$4.traditional_form) }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: clsx(classes$4.container, classes$4.traditional_container) }, { children: [!questionWithVisiblity ? jsxRuntime.exports.jsx("div", __assign({ className: classes$4.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx("div", { children: questionWithVisiblity.
+      return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: clsx(layoutClasses.main_content, classes$4.traditional_form) }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: clsx(classes$4.container, classes$4.traditional_container) }, { children: [!questionWithVisiblity ? jsxRuntime.exports.jsx("div", __assign({ className: classes$4.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: classes$4.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility, labels: questionLabels, onFileUpload: onFileUpload }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: classes$4.trademark }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: true, fixPosition: true }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.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$4.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility, labels: questionLabels, onFileUpload: onFileUpload }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: classes$4.trademark }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ fixPosition: true }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.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;
@@ -63108,7 +63133,6 @@ var     Kr=[{
 
     var CloudinaryUpload = function (_a) {
       var cloudName = _a.cloudName,uploadPreset = _a.uploadPreset,folder = _a.folder,tags = _a.tags,context = _a.context,onFinish = _a.onFinish,text = _a.text;
-      var showScrollHint = useScrollHint().showScrollHint;
       var _b = React.useState([]),uploadedFilesList = _b[0],setUploadedFilesList = _b[1];
       var attachments = React.useMemo(function () {
         return uploadedFilesList.map(function (_a, index) {
@@ -63127,13 +63151,12 @@ var     Kr=[{
       var handleOnDone = React.useCallback(function () {
         onFinish(uploadedFilesList);
       }, [onFinish, uploadedFilesList]);
-      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("section", __assign({ className: "".concat(classes$1.awell_cloudinary, " ").concat(classes$1.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$1.message_title }, { children: text.subject })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$1.content }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "files" }, { children: jsxRuntime.exports.jsx("p", { children: text.fileCountHeader(uploadedFilesList === null || uploadedFilesList === void 0 ? void 0 : uploadedFilesList.length) }) })), !!attachments.length && jsxRuntime.exports.jsx("div", __assign({ className: classes$1.attachmentList }, { children: jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: text.attachmentIcon, labels: text.attachmentLabels }) })), jsxRuntime.exports.jsx(CloudinaryUploadWidget, { cloudName: cloudName, uploadPreset: uploadPreset, folder: folder, tags: tags, context: context, onFileUpload: onImageUploadHandler, text: { uploadButton: text.buttonLabels.upload } })] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$1.button_wrapper, " ").concat(classes$1.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "finishUpload", variant: "secondary", onClick: handleOnDone }, { children: text.buttonLabels.done })) })) }))] });
+      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("section", __assign({ className: "".concat(classes$1.awell_cloudinary, " ").concat(classes$1.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$1.message_title }, { children: text.subject })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$1.content }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "files" }, { children: jsxRuntime.exports.jsx("p", { children: text.fileCountHeader(uploadedFilesList === null || uploadedFilesList === void 0 ? void 0 : uploadedFilesList.length) }) })), !!attachments.length && jsxRuntime.exports.jsx("div", __assign({ className: classes$1.attachmentList }, { children: jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: text.attachmentIcon, labels: text.attachmentLabels }) })), jsxRuntime.exports.jsx(CloudinaryUploadWidget, { cloudName: cloudName, uploadPreset: uploadPreset, folder: folder, tags: tags, context: context, onFileUpload: onImageUploadHandler, text: { uploadButton: text.buttonLabels.upload } })] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$1.button_wrapper, " ").concat(classes$1.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "finishUpload", variant: "secondary", onClick: handleOnDone }, { children: text.buttonLabels.done })) })) })] });
     };
     CloudinaryUpload.displayName = 'Cloudinary';
 
     var CloudinarySingleFileUpload = function (_a) {
       var cloudName = _a.cloudName,uploadPreset = _a.uploadPreset,folder = _a.folder,tags = _a.tags,context = _a.context,onFinish = _a.onFinish,text = _a.text;
-      var showScrollHint = useScrollHint().showScrollHint;
       var _b = React.useState(undefined),uploadedFile = _b[0],setUploadedFile = _b[1];
       var attachments = React.useMemo(function () {return [
         {
@@ -63149,7 +63172,7 @@ var     Kr=[{
       var handleOnDone = React.useCallback(function () {
         onFinish(uploadedFile);
       }, [onFinish, uploadedFile]);
-      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("section", __assign({ className: "".concat(classes$1.awell_cloudinary, " ").concat(classes$1.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$1.message_title }, { children: text.subject })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$1.content }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "files" }, { children: jsxRuntime.exports.jsx("p", { children: text.fileCountHeader(uploadedFile !== undefined) }) })), uploadedFile && jsxRuntime.exports.jsx("div", __assign({ className: classes$1.attachmentList }, { children: jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: text.attachmentIcon, labels: text.attachmentLabels }) })), !uploadedFile && jsxRuntime.exports.jsx(CloudinaryUploadWidget, { cloudName: cloudName, uploadPreset: uploadPreset, multiple: false, folder: folder, tags: tags, context: context, onFileUpload: onImageUploadHandler, text: { uploadButton: text.buttonLabels.upload } })] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$1.button_wrapper, " ").concat(classes$1.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "finishUpload", variant: "secondary", onClick: handleOnDone }, { children: text.buttonLabels.done })) })) }))] });
+      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("section", __assign({ className: "".concat(classes$1.awell_cloudinary, " ").concat(classes$1.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$1.message_title }, { children: text.subject })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$1.content }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "files" }, { children: jsxRuntime.exports.jsx("p", { children: text.fileCountHeader(uploadedFile !== undefined) }) })), uploadedFile && jsxRuntime.exports.jsx("div", __assign({ className: classes$1.attachmentList }, { children: jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: text.attachmentIcon, labels: text.attachmentLabels }) })), !uploadedFile && jsxRuntime.exports.jsx(CloudinaryUploadWidget, { cloudName: cloudName, uploadPreset: uploadPreset, multiple: false, folder: folder, tags: tags, context: context, onFileUpload: onImageUploadHandler, text: { uploadButton: text.buttonLabels.upload } })] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$1.button_wrapper, " ").concat(classes$1.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "finishUpload", variant: "secondary", onClick: handleOnDone }, { children: text.buttonLabels.done })) })) })] });
     };
     CloudinarySingleFileUpload.displayName = 'CloudinarySingleFileUpload';
 
@@ -63191,7 +63214,7 @@ var     Kr=[{
                     return updateMedication(index, 'dose', e.target.value);
                   }, placeholder: text.medication_dose }), jsxRuntime.exports.jsx(InputField, { id: "instructions", label: text.medication_instructions, type: "text", value: medication.instructions || '', onChange: function (e) {
                     return updateMedication(index, 'instructions', e.target.value);
-                  }, placeholder: text.medication_instructions }), jsxRuntime.exports.jsx("button", __assign({ onClick: function () {return removeMedication(index);}, type: "button", className: classes.deleteMedsButton }, { children: jsxRuntime.exports.jsx(ForwardRef$1, { className: classes.icon, "aria-hidden": "true" }) }))] }), index);}) })), jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes.container, " ").concat(classes.addMedsButton) }, { children: jsxRuntime.exports.jsx(Button, __assign({ onClick: addMedication, variant: "secondary" }, { children: text.add_medication_button })) }))] })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes.button_wrapper, " ").concat(classes.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "submitMedication", variant: "primary", onClick: handleSubmit }, { children: text.submit_medication })) })) }))] });
+                  }, placeholder: text.medication_instructions }), jsxRuntime.exports.jsx("button", __assign({ onClick: function () {return removeMedication(index);}, type: "button", className: classes.deleteMedsButton }, { children: jsxRuntime.exports.jsx(ForwardRef$1, { className: classes.icon, "aria-hidden": "true" }) }))] }), index);}) })), jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes.container, " ").concat(classes.addMedsButton) }, { children: jsxRuntime.exports.jsx(Button, __assign({ onClick: addMedication, variant: "secondary" }, { children: text.add_medication_button })) }))] })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ hideScrollHint: true }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes.button_wrapper, " ").concat(classes.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "submitMedication", variant: "primary", onClick: handleSubmit }, { children: text.submit_medication })) })) }))] });
     };
     CollectMedication.displayName = 'CollectMedication';
 

package/dist/types/hooks/useScrollHint/useScrollHint.d.ts

@@ -1,6 +1,5 @@
 interface UseScrollHintHook {
     showScrollHint: boolean;
-    determineShowScrollHint: () => void;
 }
-export declare const useScrollHint: () => UseScrollHintHook;
+export declare const useScrollHint: (fixPosition?: boolean) => UseScrollHintHook;
 export {};

package/dist/types/hostedPages/layouts/HostedPageLayout/HostedPageFooter/HostedPageFooter.d.ts

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 export interface HostedPageFooterProps {
     children: React.ReactNode | string;
-    showScrollHint?: boolean;
+    hideScrollHint?: boolean;
     fixPosition?: boolean;
 }
 export declare const HostedPageFooter: FC<HostedPageFooterProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.108",
+  "version": "0.1.111",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",