@elliemae/pui-app-sdk 3.13.0 → 3.16.0

package/dist/esm/utils/testing/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
 import { getDefaultTheme } from "@elliemae/pui-theme";
 import { createAppStore } from "../../data/store.js";
@@ -11,11 +10,12 @@ const AllTheProviders = ({
   store = defaultStore,
   theme = defaultTheme,
   children
-}) => /* @__PURE__ */ React.createElement(AppRoot, {
+}) => /* @__PURE__ */ jsx(AppRoot, {
   store,
   history: browserHistory,
-  theme
-}, children);
+  theme,
+  children
+});
 const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options });
 export * from "@testing-library/react";
 export {

package/dist/esm/utils/testing/render-with-redux.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { createAppStore } from "../../data/store.js";
@@ -8,9 +7,10 @@ const renderWithRedux = (ui, {
   initialState,
   store = createAppStore(initialState, browserHistory)
 } = {}) => ({
-  ...render(/* @__PURE__ */ React.createElement(Provider, {
-    store
-  }, ui)),
+  ...render(/* @__PURE__ */ jsx(Provider, {
+    store,
+    children: ui
+  })),
   store
 });
 export {

package/dist/esm/utils/testing/render-with-router-redux.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { createMemoryHistory } from "history";
@@ -12,11 +11,15 @@ const renderWithRouterRedux = (ui, {
   initialState,
   store = createAppStore(initialState, browserHistory)
 } = {}) => ({
-  ...render(/* @__PURE__ */ React.createElement(Provider, {
-    store
-  }, /* @__PURE__ */ React.createElement(AppRouter, {
-    history
-  }, ui))),
+  ...render(
+    /* @__PURE__ */ jsx(Provider, {
+      store,
+      children: /* @__PURE__ */ jsx(AppRouter, {
+        history,
+        children: ui
+      })
+    })
+  ),
   store
 });
 export {

package/dist/esm/utils/testing/render-with-router.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { render } from "@testing-library/react";
 import { createMemoryHistory } from "history";
 import { AppRouter } from "../../view/app-router.js";
@@ -7,9 +6,10 @@ const renderWithRouter = (ui, {
   route = "/",
   history = createMemoryHistory({ initialEntries: [route] })
 } = {}) => {
-  const renderResult = render(/* @__PURE__ */ React.createElement(AppRouter, {
-    history
-  }, ui));
+  const renderResult = render(/* @__PURE__ */ jsx(AppRouter, {
+    history,
+    children: ui
+  }));
   return {
     ...renderResult,
     history

package/dist/esm/utils/testing/render-with-state-addons.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
 import { getDefaultTheme } from "@elliemae/pui-theme";
@@ -28,11 +27,12 @@ const RenderWithStateAddOns = ({
   useEffect(() => {
     setReady(true);
   }, []);
-  return ready ? /* @__PURE__ */ React.createElement(ThemeProvider, {
-    theme
-  }, /* @__PURE__ */ React.createElement(Component, {
-    ...rest
-  })) : null;
+  return ready ? /* @__PURE__ */ jsx(ThemeProvider, {
+    theme,
+    children: /* @__PURE__ */ jsx(Component, {
+      ...rest
+    })
+  }) : null;
 };
 export {
   RenderWithStateAddOns

package/dist/esm/utils/types.js

@@ -1 +0,0 @@
-"use strict";

package/dist/esm/utils/url.js

@@ -1,4 +1,3 @@
-"use strict";
 const getRedirectUrl = () => {
   const url = new URL(window.location.href);
   url.search = "";

package/dist/esm/utils/web-storage.js

@@ -1,4 +1,3 @@
-"use strict";
 import localforage from "localforage";
 const STORAGE = "storage";
 const GET_SESSION_STORAGE = "getSessionStorage";

package/dist/esm/utils/window.js

@@ -1,4 +1,3 @@
-"use strict";
 import { getDefaultTheme } from "@elliemae/pui-theme";
 const getWindow = () => {
   try {
@@ -9,8 +8,14 @@ const getWindow = () => {
   }
 };
 const getViewportSize = () => ({
-  width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
-  height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+  width: Math.max(
+    document.documentElement.clientWidth || 0,
+    window.innerWidth || 0
+  ),
+  height: Math.max(
+    document.documentElement.clientHeight || 0,
+    window.innerHeight || 0
+  )
 });
 const convertBreakpointToNumber = (breakpoint) => Number(breakpoint.replace("px", ""));
 const getCurrentBreakpoint = () => {

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

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { ErrorToast } from "../error-toast/index.js";
 import { WaitMessage as DefaultWaitMessage } from "../modals/wait-message/index.js";
@@ -14,7 +13,14 @@ const HostedApp = ({ WaitMessage, children }) => {
   useBreakpoint();
   useHTMLWaitMessage(true);
   useWindowSizeChange();
-  return /* @__PURE__ */ React.createElement(Div, null, /* @__PURE__ */ React.createElement(GlobalStyle, null), WaitMessage || /* @__PURE__ */ React.createElement(DefaultWaitMessage, null), /* @__PURE__ */ React.createElement(ErrorToast, null), children);
+  return /* @__PURE__ */ jsxs(Div, {
+    children: [
+      /* @__PURE__ */ jsx(GlobalStyle, {}),
+      WaitMessage || /* @__PURE__ */ jsx(DefaultWaitMessage, {}),
+      /* @__PURE__ */ jsx(ErrorToast, {}),
+      children
+    ]
+  });
 };
 export {
   HostedApp

package/dist/esm/view/app-root/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { Provider } from "react-redux";
 import { ThemeProvider } from "styled-components";
 import { getDefaultTheme } from "@elliemae/pui-theme";
@@ -10,9 +9,9 @@ import { StandAloneApp } from "./stand-alone-app.js";
 import { HostedApp } from "./hosted-app.js";
 const AppToRender = (props) => {
   const isParent = isStandAloneGuest() || isHost();
-  return isParent ? /* @__PURE__ */ React.createElement(StandAloneApp, {
+  return isParent ? /* @__PURE__ */ jsx(StandAloneApp, {
     ...props
-  }) : /* @__PURE__ */ React.createElement(HostedApp, {
+  }) : /* @__PURE__ */ jsx(HostedApp, {
     ...props
   });
 };
@@ -25,19 +24,24 @@ const AppRoot = ({
   WaitMessage,
   errorTemplate,
   children
-}) => /* @__PURE__ */ React.createElement(ErrorBoundary, {
-  errorTemplate
-}, /* @__PURE__ */ React.createElement(Provider, {
-  store
-}, /* @__PURE__ */ React.createElement(AppRouter, {
-  history,
-  basename
-}, /* @__PURE__ */ React.createElement(ThemeProvider, {
-  theme
-}, /* @__PURE__ */ React.createElement(AppToRender, {
-  manageSession,
-  WaitMessage
-}, children)))));
+}) => /* @__PURE__ */ jsx(ErrorBoundary, {
+  errorTemplate,
+  children: /* @__PURE__ */ jsx(Provider, {
+    store,
+    children: /* @__PURE__ */ jsx(AppRouter, {
+      history,
+      basename,
+      children: /* @__PURE__ */ jsx(ThemeProvider, {
+        theme,
+        children: /* @__PURE__ */ jsx(AppToRender, {
+          manageSession,
+          WaitMessage,
+          children
+        })
+      })
+    })
+  })
+});
 export {
   AppRoot
 };

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

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { LiveAnnouncer } from "react-aria-live";
 import { useBreakpoint } from "../breakpoint/use-breakpoint.js";
@@ -19,7 +18,18 @@ const StandAloneApp = ({
 }) => {
   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));
+  return /* @__PURE__ */ jsx(LiveAnnouncer, {
+    children: /* @__PURE__ */ jsxs(Div, {
+      children: [
+        /* @__PURE__ */ jsx(GlobalStyle, {}),
+        manageSession && /* @__PURE__ */ jsx(SessionTimeout, {}),
+        /* @__PURE__ */ jsx(LiveMessage, {}),
+        WaitMessage || /* @__PURE__ */ jsx(DefaultWaitMessage, {}),
+        /* @__PURE__ */ jsx(ErrorToast, {}),
+        children
+      ]
+    })
+  });
 };
 export {
   StandAloneApp

package/dist/esm/view/app-root/style.js

@@ -1,4 +1,3 @@
-"use strict";
 import { createGlobalStyle } from "styled-components";
 var style_default = createGlobalStyle`
   :root {

package/dist/esm/view/app-router.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { useState, useLayoutEffect } from "react";
 import { Router } from "react-router-dom";
 const AppRouter = ({ history, basename, ...props }) => {
@@ -22,7 +21,7 @@ const AppRouter = ({ history, basename, ...props }) => {
       unlisten();
     };
   }, [history]);
-  return /* @__PURE__ */ React.createElement(Router, {
+  return /* @__PURE__ */ jsx(Router, {
     ...props,
     basename,
     location: state.location,

package/dist/esm/view/breakpoint/use-breakpoint.js

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

package/dist/esm/view/breakpoint/use-media-query-list.js

@@ -1,4 +1,3 @@
-"use strict";
 import { useState, useEffect, useCallback } from "react";
 const useMediaQueryList = (queries, values, defaultValue) => {
   const mediaQueryLists = queries.map((q) => window.matchMedia(q));
@@ -10,7 +9,9 @@ const useMediaQueryList = (queries, values, defaultValue) => {
   useEffect(() => {
     const handler = () => setValue(getValue);
     mediaQueryLists.forEach((mql) => mql.addEventListener("change", handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeEventListener("change", handler));
+    return () => mediaQueryLists.forEach(
+      (mql) => mql.removeEventListener("change", handler)
+    );
   }, [getValue, mediaQueryLists]);
   return value;
 };

package/dist/esm/view/error-boundary/default-error-template.js

@@ -1,6 +1,14 @@
-"use strict";
-import * as React from "react";
-const DefaultErrorTemplate = (props) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h2", null, "We are unable to process your request"), /* @__PURE__ */ React.createElement("section", null, "Please close your browser and login again"));
+import { jsx, jsxs } from "react/jsx-runtime";
+const DefaultErrorTemplate = (props) => /* @__PURE__ */ jsxs("div", {
+  children: [
+    /* @__PURE__ */ jsx("h2", {
+      children: "We are unable to process your request"
+    }),
+    /* @__PURE__ */ jsx("section", {
+      children: "Please close your browser and login again"
+    })
+  ]
+});
 export {
   DefaultErrorTemplate
 };

package/dist/esm/view/error-boundary/index.js

@@ -1,4 +1,4 @@
-"use strict";
+import { jsx } from "react/jsx-runtime";
 import React from "react";
 import {
   DefaultErrorTemplate
@@ -26,7 +26,7 @@ class ErrorBoundary extends React.Component {
     const { children, errorTemplate } = this.props;
     const ErrorTemplate = errorTemplate || DefaultErrorTemplate;
     const { error, errorInfo } = this.state;
-    return errorInfo ? /* @__PURE__ */ React.createElement(ErrorTemplate, {
+    return errorInfo ? /* @__PURE__ */ jsx(ErrorTemplate, {
       error,
       errorInfo
     }) : children;

package/dist/esm/view/error-toast/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { useEffect, memo } from "react";
 import { ToastPosition, ToastType, DSToast, toast } from "@elliemae/ds-toast";
 import { useAppSelector, useAppDispatch } from "../../data/react-redux.js";
@@ -22,7 +21,7 @@ const ErrorToast = memo((props) => {
       dispatch(error.clear());
     }
   }, [storeError, props, dispatch]);
-  return /* @__PURE__ */ React.createElement(DSToast, {
+  return /* @__PURE__ */ jsx(DSToast, {
     ...props
   });
 });

package/dist/esm/view/fetch-host-app-data/index.js

@@ -1,4 +1,3 @@
-"use strict";
 import _ from "lodash";
 import { isHostAppDataExist, setHostAppData } from "./store.js";
 import {

package/dist/esm/view/fetch-host-app-data/store.js

@@ -1,4 +1,3 @@
-"use strict";
 import { get } from "lodash";
 let hostAppData = {};
 const setHostAppData = (appData) => {

package/dist/esm/view/fields/autocomplete/index.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { DSAutocomplete } from "@elliemae/ds-controlled-form";
+import { Controller } from "react-hook-form";
+const filterOptions = (allOptions, newFilter) => {
+  const filtered = allOptions.filter(
+    (option) => option.type === "section" || option.label.toLowerCase().includes(newFilter?.toLowerCase())
+  );
+  return filtered.length === 1 && filtered[0].type === "section" ? [] : filtered;
+};
+const Autocomplete = ({
+  name,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(Controller, {
+  name,
+  render: ({ field: { onChange, value, ...props } }) => /* @__PURE__ */ jsx(DSAutocomplete, {
+    ...rest,
+    ...props,
+    options: filterOptions(rest.options, value),
+    filter: value ?? "",
+    onSelect: onChange,
+    children
+  })
+});
+export {
+  Autocomplete
+};

package/dist/esm/view/fields/check-box/index.js

@@ -1,13 +1,12 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
 import {
   Controller
 } from "react-hook-form";
-const CheckBox = ({ name, rules = {}, ...rest }) => /* @__PURE__ */ React.createElement(Controller, {
+const CheckBox = ({ name, rules = {}, ...rest }) => /* @__PURE__ */ jsx(Controller, {
   name,
   rules,
-  render: ({ field: { value = false, ...restProps } }) => /* @__PURE__ */ React.createElement(DSControlledCheckbox, {
+  render: ({ field: { value = false, ...restProps } }) => /* @__PURE__ */ jsx(DSControlledCheckbox, {
     ...rest,
     ...restProps,
     checked: value

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

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSComboBox } from "@elliemae/ds-form";
 import {
   Controller
@@ -9,11 +8,11 @@ const ComboBox = ({
   defaultValue = "",
   rules = {},
   ...rest
-}) => /* @__PURE__ */ React.createElement(Controller, {
+}) => /* @__PURE__ */ jsx(Controller, {
   name,
   rules,
   defaultValue,
-  render: ({ field: { onChange, ...props } }) => /* @__PURE__ */ React.createElement(DSComboBox, {
+  render: ({ field: { onChange, ...props } }) => /* @__PURE__ */ jsx(DSComboBox, {
     ...rest,
     ...props,
     onChange: (selected) => {

package/dist/esm/view/fields/combo-box-v3/index.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { DSComboBox } from "@elliemae/ds-controlled-form";
+import {
+  Controller
+} from "react-hook-form";
+const ComboBoxV3 = ({
+  name,
+  defaultValue = null,
+  rules = {},
+  ...rest
+}) => /* @__PURE__ */ jsx(Controller, {
+  name,
+  rules,
+  defaultValue,
+  render: ({ field: { onChange, value, ...props } }) => /* @__PURE__ */ jsx(DSComboBox, {
+    ...rest,
+    ...props,
+    selectedValues: value,
+    onChange
+  })
+});
+export {
+  ComboBoxV3
+};

package/dist/esm/view/fields/connect-form.js

@@ -1,4 +1,3 @@
-"use strict";
 import { useFormContext } from "react-hook-form";
 const ConnectForm = ({ children }) => {
   const methods = useFormContext();

package/dist/esm/view/fields/date-input/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSDateInput } from "@elliemae/ds-form";
 import {
   Controller
@@ -9,11 +8,11 @@ const DateInput = ({
   defaultValue = "",
   rules = {},
   ...rest
-}) => /* @__PURE__ */ React.createElement(Controller, {
+}) => /* @__PURE__ */ jsx(Controller, {
   name,
   rules,
   defaultValue,
-  render: ({ field }) => /* @__PURE__ */ React.createElement(DSDateInput, {
+  render: ({ field }) => /* @__PURE__ */ jsx(DSDateInput, {
     ...rest,
     ...field
   })

package/dist/esm/view/fields/date-picker/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import DSDatePicker from "@elliemae/ds-date-picker";
 import {
   Controller
@@ -9,11 +8,11 @@ const DatePicker = ({
   defaultValue = "",
   rules = {},
   ...rest
-}) => /* @__PURE__ */ React.createElement(Controller, {
+}) => /* @__PURE__ */ jsx(Controller, {
   name,
   defaultValue,
   rules,
-  render: ({ field }) => /* @__PURE__ */ React.createElement(DSDatePicker, {
+  render: ({ field }) => /* @__PURE__ */ jsx(DSDatePicker, {
     ...rest,
     ...field
   })

package/dist/esm/view/fields/date-range-picker/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { DSControlledDateRangePicker } from "@elliemae/ds-controlled-form";
 import {
@@ -9,12 +8,16 @@ const WrappedDateRangePicker = ({
   field: { value, onChange, ...restProps },
   ...rest
 }) => {
-  const [fromDateString, setFromDateString] = useState(value[0]);
-  const [toDateString, setToDateString] = useState(value[1]);
+  const [fromDateString, setFromDateString] = useState(
+    value[0]
+  );
+  const [toDateString, setToDateString] = useState(
+    value[1]
+  );
   useEffect(() => {
     onChange([fromDateString, toDateString]);
   }, [fromDateString, toDateString]);
-  return /* @__PURE__ */ React.createElement(DSControlledDateRangePicker, {
+  return /* @__PURE__ */ jsx(DSControlledDateRangePicker, {
     ...rest,
     ...restProps,
     fromDate: fromDateString,
@@ -28,11 +31,11 @@ const DateRangePicker = ({
   defaultValue = ["", ""],
   rules = {},
   ...rest
-}) => /* @__PURE__ */ React.createElement(Controller, {
+}) => /* @__PURE__ */ jsx(Controller, {
   name,
   defaultValue,
   rules,
-  render: ({ field }) => /* @__PURE__ */ React.createElement(WrappedDateRangePicker, {
+  render: ({ field }) => /* @__PURE__ */ jsx(WrappedDateRangePicker, {
     field,
     ...rest
   })

package/dist/esm/view/fields/date-time-picker/index.js

@@ -1,5 +1,4 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSControlledDateTimePicker } from "@elliemae/ds-controlled-form";
 import {
   Controller
@@ -9,11 +8,11 @@ const DateTimePicker = ({
   defaultValue = "",
   rules = {},
   ...rest
-}) => /* @__PURE__ */ React.createElement(Controller, {
+}) => /* @__PURE__ */ jsx(Controller, {
   name,
   defaultValue,
   rules,
-  render: ({ field: { value, onChange, ...restProps } }) => /* @__PURE__ */ React.createElement(DSControlledDateTimePicker, {
+  render: ({ field: { value, onChange, ...restProps } }) => /* @__PURE__ */ jsx(DSControlledDateTimePicker, {
     ...rest,
     ...restProps,
     dateTime: value,

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

@@ -1,20 +1,21 @@
-"use strict";
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { DSFormItemLayout } from "@elliemae/ds-form";
 import { get } from "react-hook-form";
 import { ConnectForm } from "../connect-form.js";
-const FormItemLayout = ({ name, ...rest }) => /* @__PURE__ */ React.createElement(ConnectForm, null, ({
-  formState: { errors }
-}) => {
-  const errorField = get(errors, name);
-  const hasError = !!errorField;
-  const validationMessage = errorField?.message;
-  return /* @__PURE__ */ React.createElement(DSFormItemLayout, {
-    name,
-    hasError,
-    validationMessage,
-    ...rest
-  });
+const FormItemLayout = ({ name, ...rest }) => /* @__PURE__ */ jsx(ConnectForm, {
+  children: ({
+    formState: { errors }
+  }) => {
+    const errorField = get(errors, name);
+    const hasError = !!errorField;
+    const validationMessage = errorField?.message;
+    return /* @__PURE__ */ jsx(DSFormItemLayout, {
+      name,
+      hasError,
+      validationMessage,
+      ...rest
+    });
+  }
 });
 export {
   FormItemLayout