@elliemae/pui-app-sdk 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/cjs/index.js

@@ -44,7 +44,6 @@ __export(lib_exports, {
   LargeTextBox: () => import_large_text_box.LargeTextBox,
   MASK_PIPES: () => import_input_mask.MASK_PIPES,
   MASK_TYPES: () => import_input_mask.MASK_TYPES,
-  MediaBreakpoint: () => import_media_breakpoint.MediaBreakpoint,
   MicroApp: () => import_micro_app.MicroApp,
   MicroIFrameApp: () => import_micro_iframe_app.MicroIFrameApp,
   NavigationPromptActions: () => import_actions2.ACTIONS,
@@ -115,7 +114,7 @@ __export(lib_exports, {
   useAppSelector: () => import_react_redux.useAppSelector,
   useInjectReducer: () => import_redux_injectors.useInjectReducer,
   useInjectSaga: () => import_redux_injectors.useInjectSaga,
-  useMediaBreakpoints: () => import_useMediaBreakpoints.useMediaBreakpoints,
+  useMediaQueryList: () => import_use_media_query_list.useMediaQueryList,
   waitMessageAction: () => import_actions3.waitMessage,
   withAppDecorator: () => import_decorator.withAppDecorator
 });
@@ -162,7 +161,6 @@ var import_render_with_router = require("./utils/testing/render-with-router.js")
 var import_render_with_state_addons = require("./utils/testing/render-with-state-addons.js");
 var import_helpers2 = require("./api/helpers.js");
 var import_users = require("./api/users/index.js");
-var import_useMediaBreakpoints = require("./view/useMediaBreakpoints/index.js");
 var import_decorator = require("./view/storybook/decorator.js");
 var import_error_toast = require("./view/error-toast/index.js");
 var import_form = require("./view/form/index.js");
@@ -178,7 +176,7 @@ var import_radio_group = require("./view/fields/radio-group/index.js");
 var import_date_input = require("./view/fields/date-input/index.js");
 var import_date_picker = require("./view/fields/date-picker/index.js");
 var import_submit_button = require("./view/form/submit-button/index.js");
-var import_media_breakpoint = require("./view/media-breakpoint/index.js");
+var import_use_media_query_list = require("./view/breakpoint/use-media-query-list.js");
 var import_visually_hidden = require("./view/visually-hidden/index.js");
 var import_live_message = require("./data/live-message/index.js");
 var import_error = require("./data/error/index.js");

package/dist/cjs/view/app-root/hosted-app.js

@@ -31,14 +31,17 @@ __export(hosted_app_exports, {
 });
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_media_breakpoint = require("../media-breakpoint/index.js");
-var import_window_size = require("../window-size/index.js");
-var import_html_wait_message = require("../modals/wait-message/html-wait-message.js");
+var import_use_breakpoint = require("../breakpoint/use-breakpoint.js");
+var import_use_window_size_change = require("../use-window-size-change.js");
+var import_use_html_wait_message = require("../modals/wait-message/use-html-wait-message.js");
 var import_style = __toESM(require("./style.js"));
 const Div = import_styled_components.default.div`
   height: 100%;
 `;
-const HostedApp = ({ children }) => /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), /* @__PURE__ */ React.createElement(import_media_breakpoint.MediaBreakpoint, null), /* @__PURE__ */ React.createElement(import_window_size.WindowSize, null), /* @__PURE__ */ React.createElement(import_html_wait_message.HTMLWaitMessage, {
-  close: true
-}), children);
+const HostedApp = ({ children }) => {
+  (0, import_use_breakpoint.useBreakpoint)();
+  (0, import_use_html_wait_message.useHTMLWaitMessage)(true);
+  (0, import_use_window_size_change.useWindowSizeChange)();
+  return /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), children);
+};
 module.exports = __toCommonJS(hosted_app_exports);

package/dist/cjs/view/app-root/stand-alone-app.js

@@ -32,8 +32,8 @@ __export(stand_alone_app_exports, {
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_react_aria_live = require("react-aria-live");
-var import_media_breakpoint = require("../media-breakpoint/index.js");
-var import_window_size = require("../window-size/index.js");
+var import_use_breakpoint = require("../breakpoint/use-breakpoint.js");
+var import_use_window_size_change = require("../use-window-size-change.js");
 var import_session_timeout = require("../session-timeout/index.js");
 var import_live_message = require("../live-message/index.js");
 var import_error_toast = require("../error-toast/index.js");
@@ -46,5 +46,9 @@ const StandAloneApp = ({
   manageSession,
   WaitMessage,
   children
-}) => /* @__PURE__ */ React.createElement(import_react_aria_live.LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), manageSession && /* @__PURE__ */ React.createElement(import_session_timeout.SessionTimeout, null), /* @__PURE__ */ React.createElement(import_media_breakpoint.MediaBreakpoint, null), /* @__PURE__ */ React.createElement(import_window_size.WindowSize, null), /* @__PURE__ */ React.createElement(import_live_message.LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(import_wait_message.WaitMessage, null), /* @__PURE__ */ React.createElement(import_error_toast.ErrorToast, null), children));
+}) => {
+  (0, import_use_breakpoint.useBreakpoint)();
+  (0, import_use_window_size_change.useWindowSizeChange)();
+  return /* @__PURE__ */ React.createElement(import_react_aria_live.LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(import_style.default, null), manageSession && /* @__PURE__ */ React.createElement(import_session_timeout.SessionTimeout, null), /* @__PURE__ */ React.createElement(import_live_message.LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(import_wait_message.WaitMessage, null), /* @__PURE__ */ React.createElement(import_error_toast.ErrorToast, null), children));
+};
 module.exports = __toCommonJS(stand_alone_app_exports);

package/dist/cjs/view/{media-breakpoint/index.js → breakpoint/use-breakpoint.js}

@@ -20,20 +20,20 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var media_breakpoint_exports = {};
-__export(media_breakpoint_exports, {
-  MediaBreakpoint: () => MediaBreakpoint
+var use_breakpoint_exports = {};
+__export(use_breakpoint_exports, {
+  useBreakpoint: () => useBreakpoint
 });
 var import_react = require("react");
 var import_styled_components = require("styled-components");
 var import_pubsub_js = require("pubsub-js");
 var import_react_redux = require("../../data/react-redux.js");
 var import_breakpoint = require("../../data/breakpoint/index.js");
-var import_useMediaBreakpoints = require("../useMediaBreakpoints/index.js");
+var import_use_media_query_list = require("./use-media-query-list.js");
 var import_constants = require("../../utils/constants.js");
-const MediaBreakpoint = () => {
+const useBreakpoint = () => {
   const theme = (0, import_react.useContext)(import_styled_components.ThemeContext);
-  const currentBreakpoint = (0, import_useMediaBreakpoints.useMediaBreakpoints)([
+  const currentBreakpoint = (0, import_use_media_query_list.useMediaQueryList)([
     `(max-width: ${theme.breakpoints.small})`,
     `(max-width: ${theme.breakpoints.medium})`,
     `(max-width: ${theme.breakpoints.large})`
@@ -43,6 +43,5 @@ const MediaBreakpoint = () => {
     dispatch({ type: import_breakpoint.breakpoint.change, payload: currentBreakpoint });
     (0, import_pubsub_js.publish)(import_constants.HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
   }, [currentBreakpoint, dispatch]);
-  return null;
 };
-module.exports = __toCommonJS(media_breakpoint_exports);
+module.exports = __toCommonJS(use_breakpoint_exports);

package/dist/cjs/view/{useMediaBreakpoints/index.js → breakpoint/use-media-query-list.js}

@@ -20,12 +20,12 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useMediaBreakpoints_exports = {};
-__export(useMediaBreakpoints_exports, {
-  useMediaBreakpoints: () => useMediaBreakpoints
+var use_media_query_list_exports = {};
+__export(use_media_query_list_exports, {
+  useMediaQueryList: () => useMediaQueryList
 });
 var import_react = require("react");
-const useMediaBreakpoints = (queries, values, defaultValue) => {
+const useMediaQueryList = (queries, values, defaultValue) => {
   const mediaQueryLists = queries.map((q) => window.matchMedia(q));
   const getValue = (0, import_react.useCallback)(() => {
     const index = mediaQueryLists.findIndex((mql) => mql.matches);
@@ -34,9 +34,9 @@ const useMediaBreakpoints = (queries, values, defaultValue) => {
   const [value, setValue] = (0, import_react.useState)(getValue);
   (0, import_react.useEffect)(() => {
     const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener("change", handler));
   }, [getValue, mediaQueryLists]);
   return value;
 };
-module.exports = __toCommonJS(useMediaBreakpoints_exports);
+module.exports = __toCommonJS(use_media_query_list_exports);

package/dist/cjs/view/modals/wait-message/index.js

@@ -33,7 +33,7 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ds_loading_indicator = require("@elliemae/ds-loading-indicator");
 var import_react_redux = require("../../../data/react-redux.js");
-var import_html_wait_message = require("./html-wait-message.js");
+var import_use_html_wait_message = require("./use-html-wait-message.js");
 var import_user_wait_event = require("../../../analytics/user-wait-event.js");
 const WaitMessage = (0, import_react.memo)(({
   size = "m",
@@ -48,15 +48,14 @@ const WaitMessage = (0, import_react.memo)(({
     else
       (0, import_user_wait_event.waitEndEvent)();
   }, [isOpen]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_html_wait_message.HTMLWaitMessage, {
-    close: isOpen !== null
-  }), /* @__PURE__ */ React.createElement(import_ds_loading_indicator.DSLoadingIndicator, {
+  (0, import_use_html_wait_message.useHTMLWaitMessage)(isOpen !== null);
+  return /* @__PURE__ */ React.createElement(import_ds_loading_indicator.DSLoadingIndicator, {
     id: "em-loading",
     size,
     style,
     ...rest,
     loading: isOpen,
     message
-  }));
+  });
 });
 module.exports = __toCommonJS(wait_message_exports);

package/dist/cjs/view/modals/wait-message/{html-wait-message.js → use-html-wait-message.js}

@@ -20,17 +20,16 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var html_wait_message_exports = {};
-__export(html_wait_message_exports, {
-  HTMLWaitMessage: () => HTMLWaitMessage
+var use_html_wait_message_exports = {};
+__export(use_html_wait_message_exports, {
+  useHTMLWaitMessage: () => useHTMLWaitMessage
 });
 var import_react = require("react");
-const HTMLWaitMessage = (0, import_react.memo)(({ close }) => {
+const useHTMLWaitMessage = (close) => {
   (0, import_react.useEffect)(() => {
     const htmlWaitMsgElement = document.getElementById("em-wait-message");
     if (htmlWaitMsgElement && close)
       htmlWaitMsgElement.remove();
   }, [close]);
-  return null;
-});
-module.exports = __toCommonJS(html_wait_message_exports);
+};
+module.exports = __toCommonJS(use_html_wait_message_exports);

package/dist/cjs/view/{window-size/index.js → use-window-size-change.js}

@@ -20,14 +20,14 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var window_size_exports = {};
-__export(window_size_exports, {
-  WindowSize: () => WindowSize
+var use_window_size_change_exports = {};
+__export(use_window_size_change_exports, {
+  useWindowSizeChange: () => useWindowSizeChange
 });
 var import_react = require("react");
 var import_pubsub_js = require("pubsub-js");
-var import_constants = require("../../utils/constants.js");
-const WindowSize = () => {
+var import_constants = require("../utils/constants.js");
+const useWindowSizeChange = () => {
   (0, import_react.useEffect)(() => {
     if (window.ResizeObserver) {
       const observer = new ResizeObserver((entries) => {
@@ -41,6 +41,5 @@ const WindowSize = () => {
     return () => {
     };
   }, []);
-  return null;
 };
-module.exports = __toCommonJS(window_size_exports);
+module.exports = __toCommonJS(use_window_size_change_exports);

package/dist/es/index.js

@@ -62,7 +62,6 @@ import { renderWithRouter } from "./utils/testing/render-with-router.js";
 import { RenderWithStateAddOns } from "./utils/testing/render-with-state-addons.js";
 import { getApiActionCreator, getSelectField } from "./api/helpers.js";
 import { getUser } from "./api/users/index.js";
-import { useMediaBreakpoints } from "./view/useMediaBreakpoints/index.js";
 import { withAppDecorator } from "./view/storybook/decorator.js";
 import { ErrorToast } from "./view/error-toast/index.js";
 import { Form } from "./view/form/index.js";
@@ -82,7 +81,7 @@ import { RadioGroup } from "./view/fields/radio-group/index.js";
 import { DateInput } from "./view/fields/date-input/index.js";
 import { DatePicker } from "./view/fields/date-picker/index.js";
 import { FormSubmitButton } from "./view/form/submit-button/index.js";
-import { MediaBreakpoint } from "./view/media-breakpoint/index.js";
+import { useMediaQueryList } from "./view/breakpoint/use-media-query-list.js";
 import { VisuallyHidden } from "./view/visually-hidden/index.js";
 import { actions } from "./data/live-message/index.js";
 import { actions as actions2 } from "./data/error/index.js";
@@ -114,7 +113,6 @@ export {
   LargeTextBox,
   MASK_PIPES,
   MASK_TYPES,
-  MediaBreakpoint,
   MicroApp,
   MicroIFrameApp,
   ACTIONS as NavigationPromptActions,
@@ -185,7 +183,7 @@ export {
   useAppSelector,
   useInjectReducer,
   useInjectSaga,
-  useMediaBreakpoints,
+  useMediaQueryList,
   waitMessage as waitMessageAction,
   withAppDecorator
 };

package/dist/es/view/app-root/hosted-app.js

@@ -1,15 +1,18 @@
 import * as React from "react";
 import styled from "styled-components";
-import { MediaBreakpoint } from "../media-breakpoint/index.js";
-import { WindowSize } from "../window-size/index.js";
-import { HTMLWaitMessage } from "../modals/wait-message/html-wait-message.js";
+import { useBreakpoint } from "../breakpoint/use-breakpoint.js";
+import { useWindowSizeChange } from "../use-window-size-change.js";
+import { useHTMLWaitMessage } from "../modals/wait-message/use-html-wait-message.js";
 import GlobalStyle from "./style.js";
 const Div = styled.div`
   height: 100%;
 `;
-const HostedApp = ({ children }) => /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), /* @__PURE__ */ React.createElement(MediaBreakpoint, null), /* @__PURE__ */ React.createElement(WindowSize, null), /* @__PURE__ */ React.createElement(HTMLWaitMessage, {
-  close: true
-}), children);
+const HostedApp = ({ children }) => {
+  useBreakpoint();
+  useHTMLWaitMessage(true);
+  useWindowSizeChange();
+  return /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), children);
+};
 export {
   HostedApp
 };

package/dist/es/view/app-root/stand-alone-app.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import styled from "styled-components";
 import { LiveAnnouncer } from "react-aria-live";
-import { MediaBreakpoint } from "../media-breakpoint/index.js";
-import { WindowSize } from "../window-size/index.js";
+import { useBreakpoint } from "../breakpoint/use-breakpoint.js";
+import { useWindowSizeChange } from "../use-window-size-change.js";
 import { SessionTimeout } from "../session-timeout/index.js";
 import { LiveMessage } from "../live-message/index.js";
 import { ErrorToast } from "../error-toast/index.js";
@@ -15,7 +15,11 @@ const StandAloneApp = ({
   manageSession,
   WaitMessage,
   children
-}) => /* @__PURE__ */ React.createElement(LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), manageSession && /* @__PURE__ */ React.createElement(SessionTimeout, null), /* @__PURE__ */ React.createElement(MediaBreakpoint, null), /* @__PURE__ */ React.createElement(WindowSize, null), /* @__PURE__ */ React.createElement(LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(DefaultWaitMessage, null), /* @__PURE__ */ React.createElement(ErrorToast, null), children));
+}) => {
+  useBreakpoint();
+  useWindowSizeChange();
+  return /* @__PURE__ */ React.createElement(LiveAnnouncer, null, /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), manageSession && /* @__PURE__ */ React.createElement(SessionTimeout, null), /* @__PURE__ */ React.createElement(LiveMessage, null), WaitMessage || /* @__PURE__ */ React.createElement(DefaultWaitMessage, null), /* @__PURE__ */ React.createElement(ErrorToast, null), children));
+};
 export {
   StandAloneApp
 };

package/dist/es/view/{media-breakpoint/index.js → breakpoint/use-breakpoint.js}

@@ -3,11 +3,11 @@ import { ThemeContext } from "styled-components";
 import { publish } from "pubsub-js";
 import { useAppDispatch } from "../../data/react-redux.js";
 import { breakpoint } from "../../data/breakpoint/index.js";
-import { useMediaBreakpoints } from "../useMediaBreakpoints/index.js";
+import { useMediaQueryList } from "./use-media-query-list.js";
 import { HOST_WINDOW_BREAKPOINT_CHANGED } from "../../utils/constants.js";
-const MediaBreakpoint = () => {
+const useBreakpoint = () => {
   const theme = useContext(ThemeContext);
-  const currentBreakpoint = useMediaBreakpoints([
+  const currentBreakpoint = useMediaQueryList([
     `(max-width: ${theme.breakpoints.small})`,
     `(max-width: ${theme.breakpoints.medium})`,
     `(max-width: ${theme.breakpoints.large})`
@@ -17,8 +17,7 @@ const MediaBreakpoint = () => {
     dispatch({ type: breakpoint.change, payload: currentBreakpoint });
     publish(HOST_WINDOW_BREAKPOINT_CHANGED, currentBreakpoint);
   }, [currentBreakpoint, dispatch]);
-  return null;
 };
 export {
-  MediaBreakpoint
+  useBreakpoint
 };

package/dist/es/view/{useMediaBreakpoints/index.js → breakpoint/use-media-query-list.js}

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-const useMediaBreakpoints = (queries, values, defaultValue) => {
+const useMediaQueryList = (queries, values, defaultValue) => {
   const mediaQueryLists = queries.map((q) => window.matchMedia(q));
   const getValue = useCallback(() => {
     const index = mediaQueryLists.findIndex((mql) => mql.matches);
@@ -8,11 +8,11 @@ const useMediaBreakpoints = (queries, values, defaultValue) => {
   const [value, setValue] = useState(getValue);
   useEffect(() => {
     const handler = () => setValue(getValue);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+    mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener("change", handler));
   }, [getValue, mediaQueryLists]);
   return value;
 };
 export {
-  useMediaBreakpoints
+  useMediaQueryList
 };

package/dist/es/view/modals/wait-message/index.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { memo, useEffect } from "react";
 import { DSLoadingIndicator } from "@elliemae/ds-loading-indicator";
 import { useAppSelector } from "../../../data/react-redux.js";
-import { HTMLWaitMessage } from "./html-wait-message.js";
+import { useHTMLWaitMessage } from "./use-html-wait-message.js";
 import {
   waitStartEvent,
   waitEndEvent
@@ -20,16 +20,15 @@ const WaitMessage = memo(({
     else
       waitEndEvent();
   }, [isOpen]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HTMLWaitMessage, {
-    close: isOpen !== null
-  }), /* @__PURE__ */ React.createElement(DSLoadingIndicator, {
+  useHTMLWaitMessage(isOpen !== null);
+  return /* @__PURE__ */ React.createElement(DSLoadingIndicator, {
     id: "em-loading",
     size,
     style,
     ...rest,
     loading: isOpen,
     message
-  }));
+  });
 });
 export {
   WaitMessage

package/dist/es/view/modals/wait-message/{html-wait-message.js → use-html-wait-message.js}

@@ -1,12 +1,11 @@
-import { memo, useEffect } from "react";
-const HTMLWaitMessage = memo(({ close }) => {
+import { useEffect } from "react";
+const useHTMLWaitMessage = (close) => {
   useEffect(() => {
     const htmlWaitMsgElement = document.getElementById("em-wait-message");
     if (htmlWaitMsgElement && close)
       htmlWaitMsgElement.remove();
   }, [close]);
-  return null;
-});
+};
 export {
-  HTMLWaitMessage
+  useHTMLWaitMessage
 };

package/dist/es/view/{window-size/index.js → use-window-size-change.js}

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { publish } from "pubsub-js";
-import { HOST_WINDOW_RESIZED } from "../../utils/constants.js";
-const WindowSize = () => {
+import { HOST_WINDOW_RESIZED } from "../utils/constants.js";
+const useWindowSizeChange = () => {
   useEffect(() => {
     if (window.ResizeObserver) {
       const observer = new ResizeObserver((entries) => {
@@ -15,8 +15,7 @@ const WindowSize = () => {
     return () => {
     };
   }, []);
-  return null;
 };
 export {
-  WindowSize
+  useWindowSizeChange
 };

package/dist/types/index.d.ts

@@ -41,7 +41,6 @@ export { renderWithRouter } from './utils/testing/render-with-router.js';
 export { RenderWithStateAddOns } from './utils/testing/render-with-state-addons.js';
 export { getApiActionCreator, getSelectField } from './api/helpers.js';
 export { getUser as fetchUserSettings } from './api/users/index.js';
-export { useMediaBreakpoints } from './view/useMediaBreakpoints/index.js';
 export { withAppDecorator } from './view/storybook/decorator.js';
 export { ErrorToast } from './view/error-toast/index.js';
 export { Form } from './view/form/index.js';
@@ -57,7 +56,7 @@ export { RadioGroup } from './view/fields/radio-group/index.js';
 export { DateInput } from './view/fields/date-input/index.js';
 export { DatePicker } from './view/fields/date-picker/index.js';
 export { FormSubmitButton } from './view/form/submit-button/index.js';
-export { MediaBreakpoint } from './view/media-breakpoint/index.js';
+export { useMediaQueryList } from './view/breakpoint/use-media-query-list.js';
 export { VisuallyHidden } from './view/visually-hidden/index.js';
 export { actions as ariaLive } from './data/live-message/index.js';
 export { actions as error } from './data/error/index.js';

package/dist/types/view/breakpoint/use-breakpoint.d.ts

@@ -0,0 +1 @@
+export declare const useBreakpoint: () => void;

package/dist/types/view/breakpoint/use-media-query-list.d.ts

@@ -0,0 +1 @@
+export declare const useMediaQueryList: (queries: Array<string>, values: Array<string>, defaultValue: string) => string;

package/dist/types/view/modals/wait-message/use-html-wait-message.d.ts

@@ -0,0 +1 @@
+export declare const useHTMLWaitMessage: (close: boolean) => void;

package/dist/types/view/use-window-size-change.d.ts

@@ -0,0 +1 @@
+export declare const useWindowSizeChange: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-app-sdk",
-  "version": "3.0.0-beta.20",
+  "version": "3.0.0-beta.21",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",

package/dist/types/view/media-breakpoint/index.d.ts

@@ -1 +0,0 @@
-export declare const MediaBreakpoint: () => null;

package/dist/types/view/modals/wait-message/html-wait-message.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare type HTMLWaitMessageProps = {
-    close: boolean;
-};
-export declare const HTMLWaitMessage: import("react").NamedExoticComponent<HTMLWaitMessageProps>;
-export {};

package/dist/types/view/useMediaBreakpoints/index.d.ts

@@ -1 +0,0 @@
-export declare const useMediaBreakpoints: (queries: Array<string>, values: Array<string>, defaultValue: string) => string;

package/dist/types/view/window-size/index.d.ts

@@ -1 +0,0 @@
-export declare const WindowSize: () => null;