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

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/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/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/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;