@elliemae/pui-app-sdk 3.0.0-beta.18 → 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/fields/check-box/index.js

@@ -27,26 +27,18 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var check_box_exports = {};
 __export(check_box_exports, {
-  CHECKBOX_VARIANT: () => import_Checkbox.CHECKBOX_VARIANT,
   CheckBox: () => CheckBox
 });
 var React = __toESM(require("react"));
-var import_Checkbox = require("@elliemae/ds-form/Checkbox");
+var import_ds_controlled_form = require("@elliemae/ds-controlled-form");
 var import_react_hook_form = require("react-hook-form");
-const CheckBox = ({
-  name,
-  defaultChecked = false,
-  rules = {},
-  ...rest
-}) => /* @__PURE__ */ React.createElement(import_react_hook_form.Controller, {
+const CheckBox = ({ name, rules = {}, ...rest }) => /* @__PURE__ */ React.createElement(import_react_hook_form.Controller, {
   name,
   rules,
-  render: ({ field: { onChange, value, ...restProps } }) => /* @__PURE__ */ React.createElement(import_Checkbox.DSCheckbox, {
+  render: ({ field: { value = false, ...restProps } }) => /* @__PURE__ */ React.createElement(import_ds_controlled_form.DSControlledCheckbox, {
     ...rest,
     ...restProps,
-    defaultChecked,
-    checked: value,
-    onChange: (e) => onChange(((e || {}).target || {}).checked)
+    checked: value
   })
 });
 module.exports = __toCommonJS(check_box_exports);

package/dist/cjs/view/fields/combo-box/index.js

@@ -36,7 +36,6 @@ const ComboBox = ({
   name,
   defaultValue = "",
   rules = {},
-  onChange: changeHandler,
   ...rest
 }) => /* @__PURE__ */ React.createElement(import_react_hook_form.Controller, {
   name,
@@ -46,9 +45,8 @@ const ComboBox = ({
     ...rest,
     ...props,
     onChange: (selected) => {
-      onChange(selected);
-      if (changeHandler)
-        changeHandler(selected);
+      const { value = selected } = selected;
+      onChange(value);
     }
   })
 });

package/dist/cjs/view/fields/form-layout-block-item/index.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var form_layout_block_item_exports = {};
+__export(form_layout_block_item_exports, {
+  FormLayoutBlockItem: () => FormLayoutBlockItem
+});
+var React = __toESM(require("react"));
+var import_ds_form_layout_blocks = require("@elliemae/ds-form-layout-blocks");
+var import_react_hook_form = require("react-hook-form");
+var import_connect_form = require("../connect-form.js");
+const FormLayoutBlockItem = ({
+  inputID,
+  label,
+  ...rest
+}) => /* @__PURE__ */ React.createElement(import_connect_form.ConnectForm, null, ({
+  formState: { errors }
+}) => {
+  const errorField = (0, import_react_hook_form.get)(errors, inputID);
+  const hasError = !!errorField;
+  const validationMessage = errorField?.message;
+  return /* @__PURE__ */ React.createElement(import_ds_form_layout_blocks.DSFormLayoutBlockItem, {
+    inputID,
+    label,
+    hasError,
+    validationMessage,
+    ...rest
+  });
+});
+module.exports = __toCommonJS(form_layout_block_item_exports);

package/dist/cjs/view/fields/watch-value.js

@@ -31,8 +31,10 @@ __export(watch_value_exports, {
 });
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_react_hook_form = require("react-hook-form");
 const Section = import_styled_components.default.section`
+  margin-top: 10px;
   border-top: 2px blue dotted;
   width: 100%;
 `;
@@ -42,9 +44,9 @@ const Div = import_styled_components.default.div`
   padding-left: 10px;
   align-items: flex-start;
 `;
-const WatchValue = ({ name, labelText }) => {
+const WatchValue = ({ name, label }) => {
   const { watch } = (0, import_react_hook_form.useFormContext)();
   const data = watch(name, false) || "";
-  return /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement("h4", null, "Form Data:"), /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement("div", null, labelText, " : ", /* @__PURE__ */ React.createElement("strong", null, JSON.stringify(data)))));
+  return /* @__PURE__ */ React.createElement(import_ds_grid.Grid, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement("h4", null, "Form Data:"), /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement("div", null, label, " : ", /* @__PURE__ */ React.createElement("strong", null, JSON.stringify(data))))));
 };
 module.exports = __toCommonJS(watch_value_exports);

package/dist/cjs/view/form/personal-info-section.js

@@ -37,48 +37,52 @@ var import_moment = __toESM(require("moment"));
 var import_text_box = require("../fields/text-box/index.js");
 var import_combo_box = require("../fields/combo-box/index.js");
 var import_date_input = require("../fields/date-input/index.js");
-var import_form_item_layout = require("../fields/form-item-layout/index.js");
-const FirstName = () => /* @__PURE__ */ React.createElement(import_form_item_layout.FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: import_text_box.TextBox,
-  labelText: "First Name",
+var import_form_layout_block_item = require("../fields/form-layout-block-item/index.js");
+const FirstName = () => /* @__PURE__ */ React.createElement(import_form_layout_block_item.FormLayoutBlockItem, {
+  label: "First Name",
+  inputID: "firstname",
+  required: true
+}, /* @__PURE__ */ React.createElement(import_text_box.TextBox, {
+  id: "firstname",
   name: "firstname",
-  required: true,
   rules: {
     required: { value: true, message: "First Name is required" },
     minLength: { value: 2, message: "Minimum 2 characters" },
     maxLength: { value: 50, message: "Maximum 50 characters" }
   }
-});
-const DOB = () => /* @__PURE__ */ React.createElement(import_form_item_layout.FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: import_date_input.DateInput,
-  labelText: "Date of Birth",
+}));
+const DOB = () => /* @__PURE__ */ React.createElement(import_form_layout_block_item.FormLayoutBlockItem, {
+  label: "Date of Birth",
+  inputID: "dob",
+  required: true
+}, /* @__PURE__ */ React.createElement(import_date_input.DateInput, {
+  id: "dob",
   name: "dob",
-  required: true,
   rules: {
     required: { value: true, message: "Date of Birth is required" },
     validate: (value) => (0, import_moment.default)() > value || "Date of Birth can not be greater than current date"
   }
-});
-const State = () => /* @__PURE__ */ React.createElement(import_form_item_layout.FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: import_combo_box.ComboBox,
-  labelText: "State",
+}));
+const State = () => /* @__PURE__ */ React.createElement(import_form_layout_block_item.FormLayoutBlockItem, {
+  label: "State",
+  inputID: "state",
+  required: true
+}, /* @__PURE__ */ React.createElement(import_combo_box.ComboBox, {
+  id: "state",
   name: "state",
-  required: true,
   rules: { required: { value: true, message: "State is required" } },
   options: [
     { value: "ca", label: "California" },
     { value: "nj", label: "New Jersey" }
   ]
-});
-const MaritalStatus = () => /* @__PURE__ */ React.createElement(import_form_item_layout.FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: import_combo_box.ComboBox,
-  labelText: "Marital Status",
+}));
+const MaritalStatus = () => /* @__PURE__ */ React.createElement(import_form_layout_block_item.FormLayoutBlockItem, {
+  label: "Marital Status",
+  inputID: "marital_status",
+  required: true
+}, /* @__PURE__ */ React.createElement(import_combo_box.ComboBox, {
+  id: "marital_status",
   name: "marital_status",
-  required: true,
   rules: {
     required: { value: true, message: "Marital Status is required" }
   },
@@ -86,5 +90,5 @@ const MaritalStatus = () => /* @__PURE__ */ React.createElement(import_form_item
     { value: "married", label: "Married" },
     { value: "single", label: "Single" }
   ]
-});
+}));
 module.exports = __toCommonJS(personal_info_section_exports);

package/dist/cjs/view/form/submit-button/index.js

@@ -37,7 +37,7 @@ const FormSubmitButton = ({ ...rest }) => {
     formState,
     formProps: { mode }
   } = (0, import_react_hook_form.useFormContext)();
-  return /* @__PURE__ */ React.createElement(import_ds_button.DSButton, {
+  return /* @__PURE__ */ React.createElement(import_ds_button.DSButtonV2, {
     ...rest,
     type: "submit",
     disabled: mode !== "onSubmit" && (!formState.isDirty || formState.isDirty && !formState.isValid)

package/dist/cjs/view/modals/error/index.js

@@ -31,23 +31,26 @@ __export(error_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ds_modal = require("@elliemae/ds-modal");
+var import_ds_dialog = require("@elliemae/ds-dialog");
+var import_ds_icons = require("@elliemae/ds-icons");
 const Error2 = ({
   open,
-  name,
-  showHeader = false,
-  children
+  primaryMessage,
+  secondaryMessage
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(open);
-  return /* @__PURE__ */ React.createElement(import_ds_modal.DSModal, {
-    centered: true,
-    modalType: import_ds_modal.MODAL_TYPE.ERROR,
+  const [isOpen, setOpen] = (0, import_react.useState)(open);
+  const handleClick = (0, import_react.useCallback)(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialog, {
     isOpen,
-    name,
-    showHeader,
-    showFooter: false,
-    onClose: () => setIsOpen(false),
-    onConfirm: null
-  }, children);
+    onClickOutside: handleClick,
+    size: "small"
+  }, /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogBody, {
+    p: "s"
+  }, /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogDefaultLayout, null, /* @__PURE__ */ React.createElement(import_ds_icons.ErrorHexegon, {
+    size: "xxl",
+    color: ["danger", "900"]
+  }), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogPrimaryMessage, null, primaryMessage), secondaryMessage && /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogSecondaryMessage, null, secondaryMessage))));
 };
 module.exports = __toCommonJS(error_exports);

package/dist/cjs/view/modals/navigation-prompt/index.js

@@ -31,21 +31,32 @@ __export(navigation_prompt_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ds_modal = require("@elliemae/ds-modal");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button = require("@elliemae/ds-button");
+var import_ds_dialog = require("@elliemae/ds-dialog");
 var import_react_redux = require("../../../data/react-redux.js");
 var import_actions = require("../../../data/navigation-prompt/actions.js");
-const NavigationPrompt = (0, import_react.memo)(({ open, showHeader = false }) => {
+const NavigationPrompt = (0, import_react.memo)(({ open }) => {
   const dispatch = (0, import_react_redux.useAppDispatch)();
-  return /* @__PURE__ */ React.createElement(import_ds_modal.DSModal, {
-    centered: true,
-    modalType: import_ds_modal.MODAL_TYPE.CONFIRM,
+  const cancelDialog = () => dispatch(import_actions.navigationPrompt.cancel());
+  const confirmDialog = () => dispatch(import_actions.navigationPrompt.confirm());
+  return /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialog, {
     isOpen: open,
-    showHeader,
-    onClose: () => dispatch(import_actions.navigationPrompt.cancel()),
-    onConfirm: () => dispatch(import_actions.navigationPrompt.confirm()),
-    onReject: () => dispatch(import_actions.navigationPrompt.cancel()),
-    confirmLabel: "Save & Continue",
-    rejectLabel: "Continue Without Saving"
-  }, /* @__PURE__ */ React.createElement("p", null, "You currently have unsaved changes. Are you sure you want to proceed without saving?"));
+    onClickOutside: cancelDialog,
+    centered: true
+  }, /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogHeader, null, /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogAddon, null, /* @__PURE__ */ React.createElement(import_ds_button.DSButtonV2, {
+    buttonType: "icon",
+    onClick: cancelDialog
+  }, /* @__PURE__ */ React.createElement(import_ds_icons.Close, {
+    color: ["neutral", "900"]
+  })))), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogSeparator, null), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogBody, {
+    px: 24,
+    mb: 16
+  }, "You currently have unsaved changes. Are you sure you want to proceed without saving?"), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogSeparator, null), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogFooter, null, /* @__PURE__ */ React.createElement(import_ds_button.DSButtonV2, {
+    buttonType: "outline",
+    onClick: cancelDialog
+  }, "Continue without saving"), /* @__PURE__ */ React.createElement(import_ds_button.DSButtonV2, {
+    onClick: confirmDialog
+  }, "Save & Continue")));
 });
 module.exports = __toCommonJS(navigation_prompt_exports);

package/dist/cjs/view/modals/session-expiry/index.js

@@ -31,12 +31,14 @@ __export(session_expiry_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ds_modal = require("@elliemae/ds-modal");
+var import_ds_button = require("@elliemae/ds-button");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_dialog = require("@elliemae/ds-dialog");
 var import_react_redux = require("../../../data/react-redux.js");
 var import_actions = require("../../../data/logout/actions.js");
 var import_session = require("../../../utils/session.js");
 var import_customHooks = require("./customHooks.js");
-const SessionExpiry = (0, import_react.memo)(({ open, warningNotifiedAt = 0, showHeader = false }) => {
+const SessionExpiry = (0, import_react.memo)(({ open, warningNotifiedAt = 0 }) => {
   const [isOpen, setIsOpen] = (0, import_react.useState)(open);
   const timeLeft = (0, import_customHooks.useTrackSessionExpiry)(warningNotifiedAt);
   const dispatch = (0, import_react_redux.useAppDispatch)();
@@ -52,21 +54,19 @@ const SessionExpiry = (0, import_react.memo)(({ open, warningNotifiedAt = 0, sho
     setIsOpen(false);
     dispatch(import_actions.logout.confirm());
   };
-  return /* @__PURE__ */ React.createElement(import_ds_modal.DSModal, {
-    centered: true,
-    modalType: import_ds_modal.MODAL_TYPE_V2.DECISION,
+  return timeLeft ? /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialog, {
     isOpen,
-    showHeader,
-    onConfirm: resetSession,
-    onReject: logoutSession,
-    modalTitle: timeLeft ? `Your session will expire in ${timeLeft}` : "",
-    confirmLabel: "Reset",
-    rejectLabel: "Logout",
-    showRejectButton: true,
-    showClose: false,
-    version: 2,
-    shouldCloseOnOverlayClick: false,
-    modalSubType: import_ds_modal.MODAL_SUB_TYPE_V2.WARNING
-  }, /* @__PURE__ */ React.createElement("p", null, "Please logout or reset your session"));
+    size: "small"
+  }, /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogBody, {
+    p: "s"
+  }, /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogDefaultLayout, null, /* @__PURE__ */ React.createElement(import_ds_icons.WarningCircle, {
+    size: "xl",
+    color: ["warning", "900"]
+  }), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogPrimaryMessage, null, `Your session will expire in ${timeLeft}`), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogSecondaryMessage, null, "Please logout or reset your session"))), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogSeparator, null), /* @__PURE__ */ React.createElement(import_ds_dialog.DSDialogFooter, null, /* @__PURE__ */ React.createElement(import_ds_button.DSButtonV2, {
+    buttonType: "outline",
+    onClick: logoutSession
+  }, "Logout"), /* @__PURE__ */ React.createElement(import_ds_button.DSButtonV2, {
+    onClick: resetSession
+  }, "Reset"))) : null;
 });
 module.exports = __toCommonJS(session_expiry_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
 };