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

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/es/view/fields/check-box/index.js

@@ -1,25 +1,17 @@
 import * as React from "react";
-import { DSCheckbox, CHECKBOX_VARIANT } from "@elliemae/ds-form/Checkbox";
+import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
 import {
   Controller
 } from "react-hook-form";
-const CheckBox = ({
-  name,
-  defaultChecked = false,
-  rules = {},
-  ...rest
-}) => /* @__PURE__ */ React.createElement(Controller, {
+const CheckBox = ({ name, rules = {}, ...rest }) => /* @__PURE__ */ React.createElement(Controller, {
   name,
   rules,
-  render: ({ field: { onChange, value, ...restProps } }) => /* @__PURE__ */ React.createElement(DSCheckbox, {
+  render: ({ field: { value = false, ...restProps } }) => /* @__PURE__ */ React.createElement(DSControlledCheckbox, {
     ...rest,
     ...restProps,
-    defaultChecked,
-    checked: value,
-    onChange: (e) => onChange(((e || {}).target || {}).checked)
+    checked: value
   })
 });
 export {
-  CHECKBOX_VARIANT,
   CheckBox
 };

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

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

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
+import { get } from "react-hook-form";
+import { ConnectForm } from "../connect-form.js";
+const FormLayoutBlockItem = ({
+  inputID,
+  label,
+  ...rest
+}) => /* @__PURE__ */ React.createElement(ConnectForm, null, ({
+  formState: { errors }
+}) => {
+  const errorField = get(errors, inputID);
+  const hasError = !!errorField;
+  const validationMessage = errorField?.message;
+  return /* @__PURE__ */ React.createElement(DSFormLayoutBlockItem, {
+    inputID,
+    label,
+    hasError,
+    validationMessage,
+    ...rest
+  });
+});
+export {
+  FormLayoutBlockItem
+};

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

@@ -1,7 +1,9 @@
 import * as React from "react";
 import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
 import { useFormContext } from "react-hook-form";
 const Section = styled.section`
+  margin-top: 10px;
   border-top: 2px blue dotted;
   width: 100%;
 `;
@@ -11,10 +13,10 @@ const Div = styled.div`
   padding-left: 10px;
   align-items: flex-start;
 `;
-const WatchValue = ({ name, labelText }) => {
+const WatchValue = ({ name, label }) => {
   const { watch } = 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(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))))));
 };
 export {
   WatchValue

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

@@ -3,48 +3,52 @@ import moment from "moment";
 import { TextBox } from "../fields/text-box/index.js";
 import { ComboBox } from "../fields/combo-box/index.js";
 import { DateInput } from "../fields/date-input/index.js";
-import { FormItemLayout } from "../fields/form-item-layout/index.js";
-const FirstName = () => /* @__PURE__ */ React.createElement(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: TextBox,
-  labelText: "First Name",
+import { FormLayoutBlockItem } from "../fields/form-layout-block-item/index.js";
+const FirstName = () => /* @__PURE__ */ React.createElement(FormLayoutBlockItem, {
+  label: "First Name",
+  inputID: "firstname",
+  required: true
+}, /* @__PURE__ */ React.createElement(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(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: DateInput,
-  labelText: "Date of Birth",
+}));
+const DOB = () => /* @__PURE__ */ React.createElement(FormLayoutBlockItem, {
+  label: "Date of Birth",
+  inputID: "dob",
+  required: true
+}, /* @__PURE__ */ React.createElement(DateInput, {
+  id: "dob",
   name: "dob",
-  required: true,
   rules: {
     required: { value: true, message: "Date of Birth is required" },
     validate: (value) => moment() > value || "Date of Birth can not be greater than current date"
   }
-});
-const State = () => /* @__PURE__ */ React.createElement(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: ComboBox,
-  labelText: "State",
+}));
+const State = () => /* @__PURE__ */ React.createElement(FormLayoutBlockItem, {
+  label: "State",
+  inputID: "state",
+  required: true
+}, /* @__PURE__ */ React.createElement(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(FormItemLayout, {
-  floatingLabel: true,
-  inputComponent: ComboBox,
-  labelText: "Marital Status",
+}));
+const MaritalStatus = () => /* @__PURE__ */ React.createElement(FormLayoutBlockItem, {
+  label: "Marital Status",
+  inputID: "marital_status",
+  required: true
+}, /* @__PURE__ */ React.createElement(ComboBox, {
+  id: "marital_status",
   name: "marital_status",
-  required: true,
   rules: {
     required: { value: true, message: "Marital Status is required" }
   },
@@ -52,7 +56,7 @@ const MaritalStatus = () => /* @__PURE__ */ React.createElement(FormItemLayout,
     { value: "married", label: "Married" },
     { value: "single", label: "Single" }
   ]
-});
+}));
 export {
   DOB,
   FirstName,

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

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
-import { DSButton } from "@elliemae/ds-button";
+import { DSButtonV2 } from "@elliemae/ds-button";
 const FormSubmitButton = ({ ...rest }) => {
   const {
     formState,
     formProps: { mode }
   } = useFormContext();
-  return /* @__PURE__ */ React.createElement(DSButton, {
+  return /* @__PURE__ */ React.createElement(DSButtonV2, {
     ...rest,
     type: "submit",
     disabled: mode !== "onSubmit" && (!formState.isDirty || formState.isDirty && !formState.isValid)

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

@@ -1,23 +1,32 @@
 import * as React from "react";
-import { useState } from "react";
-import { DSModal, MODAL_TYPE } from "@elliemae/ds-modal";
+import { useState, useCallback } from "react";
+import {
+  DSDialog,
+  DSDialogBody,
+  DSDialogDefaultLayout,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage
+} from "@elliemae/ds-dialog";
+import { ErrorHexegon } from "@elliemae/ds-icons";
 const Error = ({
   open,
-  name,
-  showHeader = false,
-  children
+  primaryMessage,
+  secondaryMessage
 }) => {
-  const [isOpen, setIsOpen] = useState(open);
-  return /* @__PURE__ */ React.createElement(DSModal, {
-    centered: true,
-    modalType: MODAL_TYPE.ERROR,
+  const [isOpen, setOpen] = useState(open);
+  const handleClick = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ React.createElement(DSDialog, {
     isOpen,
-    name,
-    showHeader,
-    showFooter: false,
-    onClose: () => setIsOpen(false),
-    onConfirm: null
-  }, children);
+    onClickOutside: handleClick,
+    size: "small"
+  }, /* @__PURE__ */ React.createElement(DSDialogBody, {
+    p: "s"
+  }, /* @__PURE__ */ React.createElement(DSDialogDefaultLayout, null, /* @__PURE__ */ React.createElement(ErrorHexegon, {
+    size: "xxl",
+    color: ["danger", "900"]
+  }), /* @__PURE__ */ React.createElement(DSDialogPrimaryMessage, null, primaryMessage), secondaryMessage && /* @__PURE__ */ React.createElement(DSDialogSecondaryMessage, null, secondaryMessage))));
 };
 export {
   Error

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

@@ -1,21 +1,39 @@
 import * as React from "react";
 import { memo } from "react";
-import { DSModal, MODAL_TYPE } from "@elliemae/ds-modal";
+import { Close } from "@elliemae/ds-icons";
+import { DSButtonV2 } from "@elliemae/ds-button";
+import {
+  DSDialog,
+  DSDialogHeader,
+  DSDialogBody,
+  DSDialogFooter,
+  DSDialogSeparator,
+  DSDialogAddon
+} from "@elliemae/ds-dialog";
 import { useAppDispatch } from "../../../data/react-redux.js";
 import { navigationPrompt } from "../../../data/navigation-prompt/actions.js";
-const NavigationPrompt = memo(({ open, showHeader = false }) => {
+const NavigationPrompt = memo(({ open }) => {
   const dispatch = useAppDispatch();
-  return /* @__PURE__ */ React.createElement(DSModal, {
-    centered: true,
-    modalType: MODAL_TYPE.CONFIRM,
+  const cancelDialog = () => dispatch(navigationPrompt.cancel());
+  const confirmDialog = () => dispatch(navigationPrompt.confirm());
+  return /* @__PURE__ */ React.createElement(DSDialog, {
     isOpen: open,
-    showHeader,
-    onClose: () => dispatch(navigationPrompt.cancel()),
-    onConfirm: () => dispatch(navigationPrompt.confirm()),
-    onReject: () => dispatch(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(DSDialogHeader, null, /* @__PURE__ */ React.createElement(DSDialogAddon, null, /* @__PURE__ */ React.createElement(DSButtonV2, {
+    buttonType: "icon",
+    onClick: cancelDialog
+  }, /* @__PURE__ */ React.createElement(Close, {
+    color: ["neutral", "900"]
+  })))), /* @__PURE__ */ React.createElement(DSDialogSeparator, null), /* @__PURE__ */ React.createElement(DSDialogBody, {
+    px: 24,
+    mb: 16
+  }, "You currently have unsaved changes. Are you sure you want to proceed without saving?"), /* @__PURE__ */ React.createElement(DSDialogSeparator, null), /* @__PURE__ */ React.createElement(DSDialogFooter, null, /* @__PURE__ */ React.createElement(DSButtonV2, {
+    buttonType: "outline",
+    onClick: cancelDialog
+  }, "Continue without saving"), /* @__PURE__ */ React.createElement(DSButtonV2, {
+    onClick: confirmDialog
+  }, "Save & Continue")));
 });
 export {
   NavigationPrompt

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

@@ -1,11 +1,21 @@
 import * as React from "react";
 import { memo, useEffect, useState } from "react";
-import { DSModal, MODAL_SUB_TYPE_V2, MODAL_TYPE_V2 } from "@elliemae/ds-modal";
+import { DSButtonV2 } from "@elliemae/ds-button";
+import { WarningCircle } from "@elliemae/ds-icons";
+import {
+  DSDialog,
+  DSDialogDefaultLayout,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage,
+  DSDialogBody,
+  DSDialogFooter,
+  DSDialogSeparator
+} from "@elliemae/ds-dialog";
 import { useAppDispatch } from "../../../data/react-redux.js";
 import { logout } from "../../../data/logout/actions.js";
 import { resetUserIdleTime } from "../../../utils/session.js";
 import { useTrackSessionExpiry } from "./customHooks.js";
-const SessionExpiry = memo(({ open, warningNotifiedAt = 0, showHeader = false }) => {
+const SessionExpiry = memo(({ open, warningNotifiedAt = 0 }) => {
   const [isOpen, setIsOpen] = useState(open);
   const timeLeft = useTrackSessionExpiry(warningNotifiedAt);
   const dispatch = useAppDispatch();
@@ -21,22 +31,20 @@ const SessionExpiry = memo(({ open, warningNotifiedAt = 0, showHeader = false })
     setIsOpen(false);
     dispatch(logout.confirm());
   };
-  return /* @__PURE__ */ React.createElement(DSModal, {
-    centered: true,
-    modalType: MODAL_TYPE_V2.DECISION,
+  return timeLeft ? /* @__PURE__ */ React.createElement(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: MODAL_SUB_TYPE_V2.WARNING
-  }, /* @__PURE__ */ React.createElement("p", null, "Please logout or reset your session"));
+    size: "small"
+  }, /* @__PURE__ */ React.createElement(DSDialogBody, {
+    p: "s"
+  }, /* @__PURE__ */ React.createElement(DSDialogDefaultLayout, null, /* @__PURE__ */ React.createElement(WarningCircle, {
+    size: "xl",
+    color: ["warning", "900"]
+  }), /* @__PURE__ */ React.createElement(DSDialogPrimaryMessage, null, `Your session will expire in ${timeLeft}`), /* @__PURE__ */ React.createElement(DSDialogSecondaryMessage, null, "Please logout or reset your session"))), /* @__PURE__ */ React.createElement(DSDialogSeparator, null), /* @__PURE__ */ React.createElement(DSDialogFooter, null, /* @__PURE__ */ React.createElement(DSButtonV2, {
+    buttonType: "outline",
+    onClick: logoutSession
+  }, "Logout"), /* @__PURE__ */ React.createElement(DSButtonV2, {
+    onClick: resetSession
+  }, "Reset"))) : null;
 });
 export {
   SessionExpiry

package/dist/types/view/fields/check-box/index.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import { CHECKBOX_VARIANT } from '@elliemae/ds-form/Checkbox';
 import { RegisterOptions, FieldValues, FieldPath } from 'react-hook-form';
 export declare type CheckBoxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     name: string;
-    defaultChecked?: boolean;
+    label: string;
     rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
     [x: string]: any;
 };
-export declare const CheckBox: ({ name, defaultChecked, rules, ...rest }: CheckBoxProps) => JSX.Element;
-export { CHECKBOX_VARIANT };
+export declare const CheckBox: ({ name, rules, ...rest }: CheckBoxProps) => JSX.Element;

package/dist/types/view/fields/check-box/index.stories.d.ts

@@ -2,6 +2,4 @@ import { Story, Meta } from '@storybook/react';
 import { CheckBoxProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<CheckBoxProps<import("react-hook-form").FieldValues, string> & {
-    labelText: string;
-}>;
+export declare const Basic: Story<CheckBoxProps<import("react-hook-form").FieldValues, string>>;

package/dist/types/view/fields/combo-box/index.d.ts

@@ -4,7 +4,6 @@ export declare type ComboBoxProps<TFieldValues extends FieldValues = FieldValues
     name: string;
     defaultValue?: string;
     rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
-    onChange: (e: React.BaseSyntheticEvent) => void;
     [x: string]: any;
 };
-export declare const ComboBox: ({ name, defaultValue, rules, onChange: changeHandler, ...rest }: ComboBoxProps) => JSX.Element;
+export declare const ComboBox: ({ name, defaultValue, rules, ...rest }: ComboBoxProps) => JSX.Element;

package/dist/types/view/fields/combo-box/index.stories.d.ts

@@ -1,7 +1,5 @@
 import { Story, Meta } from '@storybook/react';
-import { FormItemLayoutProps } from '../form-item-layout/index.js';
+import { ComboBoxProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<FormItemLayoutProps & {
-    labelText: string;
-}>;
+export declare const Basic: Story<ComboBoxProps<import("react-hook-form").FieldValues, string>>;

package/dist/types/view/fields/date-picker/index.d.ts

@@ -2,6 +2,7 @@
 import { RegisterOptions, FieldValues, FieldPath } from 'react-hook-form';
 export declare type DatePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     name: string;
+    labelText: string;
     defaultValue?: string;
     rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
     [x: string]: any;

package/dist/types/view/fields/date-picker/index.stories.d.ts

@@ -2,6 +2,4 @@ import { Story, Meta } from '@storybook/react';
 import { DatePickerProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<DatePickerProps<import("react-hook-form").FieldValues, string> & {
-    labelText: string;
-}>;
+export declare const Basic: Story<DatePickerProps<import("react-hook-form").FieldValues, string>>;

package/dist/types/view/fields/form-layout-block-item/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type FormLayoutBlockItemProps = {
+    inputID: string;
+    label: string;
+    children: React.ReactNode;
+    [x: string]: any;
+};
+export declare const FormLayoutBlockItem: ({ inputID, label, ...rest }: FormLayoutBlockItemProps) => JSX.Element;

package/dist/types/view/fields/form-layout-block-item/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react';
+import { FormLayoutBlockItemProps } from './index.js';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: Story<FormLayoutBlockItemProps>;

package/dist/types/view/fields/input-mask/index.stories.d.ts

@@ -2,6 +2,4 @@ import { Story, Meta } from '@storybook/react';
 import { InputMaskProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<InputMaskProps<import("react-hook-form").FieldValues, string> & {
-    labelText: string;
-}>;
+export declare const Basic: Story<InputMaskProps<import("react-hook-form").FieldValues, string>>;

package/dist/types/view/fields/large-text-box/index.stories.d.ts

@@ -2,6 +2,4 @@ import { Story, Meta } from '@storybook/react';
 import { LargeTextBoxProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<LargeTextBoxProps<import("react-hook-form").FieldValues, string> & {
-    labelText: string;
-}>;
+export declare const Basic: Story<LargeTextBoxProps<import("react-hook-form").FieldValues, string>>;

package/dist/types/view/fields/radio/index.d.ts

@@ -2,9 +2,9 @@
 import { RegisterOptions, FieldValues, FieldPath } from 'react-hook-form';
 export declare type RadioProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     name: string;
+    labelText: string;
     defaultChecked?: boolean;
     rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>;
-    mask: <T>(value: T) => T;
     [x: string]: any;
 };
 export declare const Radio: ({ name, defaultChecked, rules, ...rest }: RadioProps) => JSX.Element;

package/dist/types/view/fields/radio/index.stories.d.ts

@@ -2,6 +2,4 @@ import { Story, Meta } from '@storybook/react';
 import { RadioProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<RadioProps<import("react-hook-form").FieldValues, string> & {
-    labelText: string;
-}>;
+export declare const Basic: Story<RadioProps<import("react-hook-form").FieldValues, string>>;

package/dist/types/view/fields/watch-value.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare type WatchValueProps = {
     name: string;
-    labelText: string;
+    label: string;
 };
-export declare const WatchValue: ({ name, labelText }: WatchValueProps) => JSX.Element;
+export declare const WatchValue: ({ name, label }: WatchValueProps) => JSX.Element;

package/dist/types/view/form/submit-button/index.d.ts

@@ -4,6 +4,7 @@ export declare type CustomFormProviderProps = UseFormReturn & {
     formProps: UseFormProps;
 };
 export declare type FormSubmitButtonProps = {
+    children: React.ReactNode;
     [x: string]: any;
 };
 export declare const FormSubmitButton: ({ ...rest }: FormSubmitButtonProps) => JSX.Element;

package/dist/types/view/modals/error/index.d.ts

@@ -3,6 +3,7 @@ export interface ErrorProps {
     open: boolean;
     name: string;
     showHeader?: boolean;
-    children: React.ReactNode;
+    primaryMessage: React.ReactNode;
+    secondaryMessage?: React.ReactNode;
 }
-export declare const Error: ({ open, name, showHeader, children, }: ErrorProps) => JSX.Element;
+export declare const Error: ({ open, primaryMessage, secondaryMessage, }: ErrorProps) => JSX.Element;

package/dist/types/view/modals/navigation-prompt/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 export interface NavigationPromptProps {
     open: boolean;
-    showHeader?: boolean;
 }
 export declare const NavigationPrompt: import("react").NamedExoticComponent<NavigationPromptProps>;

package/dist/types/view/modals/session-expiry/index.d.ts

@@ -2,6 +2,5 @@
 export interface SessionExpiryProps {
     open: boolean;
     warningNotifiedAt?: number;
-    showHeader?: boolean;
 }
 export declare const SessionExpiry: import("react").NamedExoticComponent<SessionExpiryProps>;

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

@@ -2,5 +2,9 @@ import { Story, Meta } from '@storybook/react';
 import { WaitMessageProps } from './index.js';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: Story<WaitMessageProps>;
-export declare const Close: Story<WaitMessageProps>;
+export declare const Basic: Story<WaitMessageProps & {
+    isOpen: boolean;
+}>;
+export declare const Close: Story<WaitMessageProps & {
+    isOpen: boolean;
+}>;

package/dist/types/view/session-timeout/index.stories.d.ts

@@ -2,7 +2,4 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Basic: {
-    (): JSX.Element;
-    decorators: any[];
-};
+export declare const Basic: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/pui-app-sdk",
-  "version": "3.0.0-beta.17",
+  "version": "3.0.0-beta.20",
   "description": "ICE MT UI Platform Application SDK ",
   "sideEffects": [
     "*.css",
@@ -11,35 +11,41 @@
   "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/es/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/types/index.d.ts"
+      "require": "./dist/cjs/index.js"
     },
     "./storybook/*": {
       "import": "./dist/es/utils/storybook/*.js",
       "require": "./dist/cjs/utils/storybook/*.js"
     },
     "./auth": {
+      "types": "./dist/types/utils/auth/index.d.ts",
       "import": "./dist/es/utils/auth/index.js",
       "require": "./dist/cjs/utils/auth/index.js"
     },
     "./app-config": {
+      "types": "./dist/types/utils/app-config/index.d.ts",
       "import": "./dist/es/utils/app-config/index.js",
       "require": "./dist/cjs/utils/app-config/index.js"
     },
     "./http-client": {
+      "types": "./dist/types/communication/http-client/index.d.ts",
       "import": "./dist/es/communication/http-client/index.js",
       "require": "./dist/cjs/communication/http-client/index.js"
     },
     "./analytics": {
+      "types": "./dist/types/analytics/index.d.ts",
       "import": "./dist/es/analytics/index.js",
       "require": "./dist/cjs/analytics/index.js"
     },
     "./data": {
+      "types": "./dist/types/data/index.d.ts",
       "import": "./dist/es/data/index.js",
       "require": "./dist/cjs/data/index.js"
     },
     "./micro-frontend": {
+      "types": "./dist/types/micro-frontend.d.ts",
       "import": "./dist/es/micro-frontend.js",
       "require": "./dist/cjs/micro-frontend.js"
     }
@@ -100,8 +106,13 @@
     "@elliemae/app-react-dependencies": "^3.0.0-beta.3",
     "@elliemae/ds-basic": "^2.3.0-alpha.2",
     "@elliemae/ds-button": "^2.3.0-alpha.2",
+    "@elliemae/ds-controlled-form": "^2.3.0-alpha.2",
     "@elliemae/ds-date-picker": "^2.3.0-alpha.2",
+    "@elliemae/ds-date-range-picker": "^2.3.0-alpha.2",
+    "@elliemae/ds-dialog": "^2.3.0-alpha.2",
     "@elliemae/ds-form": "^2.3.0-alpha.2",
+    "@elliemae/ds-form-layout-blocks": "^2.3.0-alpha.2",
+    "@elliemae/ds-grid": "^2.3.0-alpha.2",
     "@elliemae/ds-loading-indicator": "^2.3.0-alpha.2",
     "@elliemae/ds-modal": "^2.3.0-alpha.2",
     "@elliemae/ds-popperjs": "^2.3.0-alpha.2",
@@ -117,14 +128,19 @@
     "@elliemae/browserslist-config-elliemae-latest-browsers": "~1.2.1",
     "@elliemae/ds-basic": "~2.3.0-alpha.2",
     "@elliemae/ds-button": "~2.3.0-alpha.2",
+    "@elliemae/ds-controlled-form": "~2.3.0-alpha.2",
     "@elliemae/ds-date-picker": "~2.3.0-alpha.2",
+    "@elliemae/ds-date-range-picker": "~2.3.0-alpha.2",
+    "@elliemae/ds-dialog": "~2.3.0-alpha.2",
     "@elliemae/ds-form": "~2.3.0-alpha.2",
+    "@elliemae/ds-form-layout-blocks": "~2.3.0-alpha.2",
+    "@elliemae/ds-grid": "~2.3.0-alpha.2",
     "@elliemae/ds-loading-indicator": "~2.3.0-alpha.2",
     "@elliemae/ds-modal": "~2.3.0-alpha.2",
     "@elliemae/ds-popperjs": "~2.3.0-alpha.2",
     "@elliemae/ds-toast": "~2.3.0-alpha.2",
     "@elliemae/em-ssf-guest": "~1.11.1",
-    "@elliemae/pui-cli": "~6.0.0-beta.34",
+    "@elliemae/pui-cli": "~6.0.0-beta.37",
     "@elliemae/pui-diagnostics": "~2.7.3",
     "@elliemae/pui-e2e-test-sdk": "~6.9.0",
     "@elliemae/pui-micro-frontend-base": "~1.10.1",