@saas-ui/modals 1.5.5 → 2.0.0-next.1

package/dist/index.mjs

@@ -0,0 +1,401 @@
+import * as React from 'react';
+import { createStylesContext, forwardRef, useMenuContext, useMenuList, useMultiStyleConfig, chakra, ModalFooter, ModalBody, Button, AlertDialog, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter, ButtonGroup, Drawer as Drawer$1, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, DrawerBody, DrawerFooter, Modal as Modal$1, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, Menu } from '@chakra-ui/react';
+import { runIfFn } from '@saas-ui/react-utils';
+import { Form, Fields, SubmitButton } from '@saas-ui/forms';
+
+// src/dialog.tsx
+var ConfirmDialog = (props) => {
+  const {
+    title,
+    cancelLabel = "Cancel",
+    confirmLabel = "Confirm",
+    cancelProps,
+    confirmProps,
+    buttonGroupProps,
+    isOpen,
+    closeOnCancel = true,
+    closeOnConfirm = true,
+    leastDestructiveFocus = "cancel",
+    onClose,
+    onCancel,
+    onConfirm,
+    children,
+    ...rest
+  } = props;
+  const cancelRef = React.useRef(null);
+  const confirmRef = React.useRef(null);
+  return /* @__PURE__ */ React.createElement(AlertDialog, {
+    isOpen,
+    onClose,
+    ...rest,
+    leastDestructiveRef: leastDestructiveFocus === "cancel" ? cancelRef : confirmRef
+  }, /* @__PURE__ */ React.createElement(AlertDialogOverlay, null, /* @__PURE__ */ React.createElement(AlertDialogContent, null, /* @__PURE__ */ React.createElement(AlertDialogHeader, null, title), /* @__PURE__ */ React.createElement(AlertDialogBody, null, children), /* @__PURE__ */ React.createElement(AlertDialogFooter, null, /* @__PURE__ */ React.createElement(ButtonGroup, {
+    ...buttonGroupProps
+  }, /* @__PURE__ */ React.createElement(Button, {
+    ref: cancelRef,
+    ...cancelProps,
+    onClick: () => {
+      onCancel == null ? void 0 : onCancel();
+      closeOnCancel && onClose();
+    }
+  }, (cancelProps == null ? void 0 : cancelProps.children) || cancelLabel), /* @__PURE__ */ React.createElement(Button, {
+    ref: confirmRef,
+    ...confirmProps,
+    onClick: () => {
+      onConfirm == null ? void 0 : onConfirm();
+      closeOnConfirm && onClose();
+    }
+  }, (confirmProps == null ? void 0 : confirmProps.children) || confirmLabel))))));
+};
+var BaseDrawer = (props) => {
+  const {
+    title,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React.createElement(Drawer$1, {
+    isOpen,
+    onClose,
+    ...rest
+  }, !hideOverlay && /* @__PURE__ */ React.createElement(DrawerOverlay, null), /* @__PURE__ */ React.createElement(DrawerContent, null, /* @__PURE__ */ React.createElement(DrawerHeader, null, title), !hideCloseButton && /* @__PURE__ */ React.createElement(DrawerCloseButton, null), children));
+};
+var Drawer = (props) => {
+  const { footer, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(BaseDrawer, {
+    ...rest
+  }, /* @__PURE__ */ React.createElement(DrawerBody, null, children), footer && /* @__PURE__ */ React.createElement(DrawerFooter, null, footer));
+};
+var BaseModal = (props) => {
+  const {
+    title,
+    footer,
+    children,
+    isOpen,
+    onClose,
+    hideCloseButton,
+    hideOverlay,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ React.createElement(Modal$1, {
+    isOpen,
+    onClose,
+    ...rest
+  }, !hideOverlay && /* @__PURE__ */ React.createElement(ModalOverlay, null), /* @__PURE__ */ React.createElement(ModalContent, null, title && /* @__PURE__ */ React.createElement(ModalHeader, null, title), !hideCloseButton && /* @__PURE__ */ React.createElement(ModalCloseButton, null), children, footer && /* @__PURE__ */ React.createElement(ModalFooter, null, footer)));
+};
+var Modal = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(BaseModal, {
+    ...rest
+  }, /* @__PURE__ */ React.createElement(ModalBody, null, children));
+};
+var [StylesProvider] = createStylesContext("SuiMenuDialog");
+var MenuDialog = (props) => {
+  const { onClose, onCloseComplete, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Menu, {
+    variant: "dialog",
+    onClose: () => {
+      onClose == null ? void 0 : onClose();
+      onCloseComplete == null ? void 0 : onCloseComplete();
+    },
+    ...rest
+  });
+};
+var MenuDialogList = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      rootProps,
+      title,
+      footer,
+      initialFocusRef,
+      hideCloseButton,
+      motionPreset,
+      ...rest
+    } = props;
+    const { isOpen, onClose, menuRef } = useMenuContext();
+    const { ref, ...ownProps } = useMenuList(rest, forwardedRef);
+    const styles = useMultiStyleConfig("Menu", props);
+    return /* @__PURE__ */ React.createElement(BaseModal, {
+      isOpen,
+      onClose,
+      initialFocusRef: initialFocusRef || menuRef,
+      title,
+      hideCloseButton,
+      motionPreset
+    }, /* @__PURE__ */ React.createElement(StylesProvider, {
+      value: styles
+    }, /* @__PURE__ */ React.createElement(chakra.div, {
+      ...ownProps,
+      ref,
+      __css: {
+        outline: 0,
+        maxHeight: "80vh",
+        overflowY: "auto",
+        ...styles.list,
+        boxShadow: "none",
+        border: 0
+      }
+    })), footer && /* @__PURE__ */ React.createElement(ModalFooter, null, footer));
+  }
+);
+var FormDialog = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      schema,
+      resolver,
+      fieldResolver,
+      defaultValues,
+      values,
+      context,
+      onChange,
+      onSubmit,
+      onError,
+      mode,
+      reValidateMode,
+      shouldFocusError = true,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError = 100,
+      cancelLabel = "Cancel",
+      submitLabel = "Submit",
+      footer,
+      isOpen,
+      onClose,
+      ...rest
+    } = props;
+    const formProps = {
+      ref,
+      schema,
+      resolver,
+      defaultValues,
+      values,
+      context,
+      onChange,
+      onSubmit,
+      onError,
+      mode,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError
+    };
+    return /* @__PURE__ */ React.createElement(BaseModal, {
+      isOpen,
+      onClose,
+      ...rest
+    }, /* @__PURE__ */ React.createElement(Form, {
+      ...formProps,
+      ref
+    }, (form) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ModalBody, null, runIfFn(children, form) || /* @__PURE__ */ React.createElement(Fields, {
+      schema,
+      fieldResolver,
+      focusFirstField: true
+    })), footer || /* @__PURE__ */ React.createElement(ModalFooter, null, /* @__PURE__ */ React.createElement(Button, {
+      variant: "ghost",
+      mr: 3,
+      onClick: onClose
+    }, cancelLabel), /* @__PURE__ */ React.createElement(SubmitButton, null, submitLabel)))));
+  }
+);
+var ModalsContext = React.createContext(
+  null
+);
+var initialModalState = {
+  id: null,
+  props: null,
+  type: "modal"
+};
+var defaultModals = {
+  alert: ConfirmDialog,
+  confirm: ConfirmDialog,
+  drawer: Drawer,
+  modal: Modal,
+  menu: MenuDialog,
+  form: FormDialog
+};
+function ModalsProvider({ children, modals }) {
+  const _instances = React.useMemo(() => /* @__PURE__ */ new Set(), []);
+  const [activeModals, setActiveModals] = React.useState({
+    modal: initialModalState
+  });
+  const getModalComponent = React.useMemo(() => {
+    const _modals = {
+      ...defaultModals,
+      ...modals
+    };
+    return (type = "modal") => {
+      const component = _modals[type] || _modals.modal;
+      return component;
+    };
+  }, [modals]);
+  const setActiveModal = (modal, scope) => {
+    if (!scope) {
+      return setActiveModals({
+        modal
+      });
+    }
+    setActiveModals((prevState) => ({
+      ...prevState,
+      [scope]: modal
+    }));
+  };
+  const open = (options) => {
+    if (typeof options === "function") {
+      const component2 = options;
+      options = {
+        component: component2
+      };
+    }
+    const {
+      id = _instances.size + 1,
+      type = "modal",
+      scope = "modal",
+      component,
+      ...props
+    } = options;
+    const modal = {
+      id,
+      props,
+      type,
+      scope,
+      component,
+      isOpen: true
+    };
+    _instances.add(modal);
+    setActiveModal(modal, scope);
+    return id;
+  };
+  const drawer = (options) => {
+    return open({
+      ...options,
+      type: "drawer"
+    });
+  };
+  const alert = (options) => {
+    return open({
+      ...options,
+      scope: "alert",
+      type: "alert",
+      cancelProps: {
+        display: "none"
+      },
+      confirmProps: {
+        label: "OK"
+      },
+      leastDestructiveFocus: "confirm"
+    });
+  };
+  const confirm = (options) => {
+    return open({
+      ...options,
+      scope: "alert",
+      type: "confirm"
+    });
+  };
+  const menu = (options) => {
+    return open({
+      ...options,
+      type: "menu"
+    });
+  };
+  const form = (options) => {
+    return open({
+      ...options,
+      type: "form"
+    });
+  };
+  const close = async (id, force) => {
+    var _a, _b;
+    const modals2 = [...Array.from(_instances)];
+    const modal = modals2.filter((modal2) => modal2.id === id)[0];
+    if (!modal) {
+      return;
+    }
+    const shouldClose = await ((_b = (_a = modal.props) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a, { force }));
+    if (shouldClose === false) {
+      return;
+    }
+    const scoped = modals2.filter(({ scope }) => scope === modal.scope);
+    if (scoped.length === 1) {
+      setActiveModal(
+        {
+          ...modal,
+          isOpen: false
+        },
+        modal.scope
+      );
+    } else if (scoped.length > 1) {
+      setActiveModal(scoped[scoped.length - 2], modal.scope);
+    } else {
+      setActiveModal(
+        {
+          id: null,
+          props: null,
+          type: modal.type
+        },
+        modal.scope
+      );
+    }
+  };
+  const closeComplete = (id) => {
+    const modals2 = [...Array.from(_instances)];
+    const modal = modals2.filter((modal2) => modal2.id === id)[0];
+    _instances.delete(modal);
+    const scoped = modals2.filter(({ scope }) => scope === modal.scope);
+    if (scoped.length === 1) {
+      setActiveModal(initialModalState, modal.scope);
+    }
+  };
+  const closeAll = () => {
+    _instances.forEach((modal) => {
+      var _a, _b;
+      return (_b = (_a = modal.props) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a, { force: true });
+    });
+    _instances.clear();
+    setActiveModal(initialModalState);
+  };
+  const context = {
+    open,
+    drawer,
+    alert,
+    confirm,
+    menu,
+    form,
+    close,
+    closeAll
+  };
+  const content = React.useMemo(
+    () => Object.entries(activeModals).map(([scope, config]) => {
+      const Component = config.component || getModalComponent(config.type);
+      const { title, body, children: children2, ...props } = config.props || {};
+      return /* @__PURE__ */ React.createElement(Component, {
+        key: scope,
+        title,
+        children: body || children2,
+        ...props,
+        isOpen: !!config.isOpen,
+        onClose: () => close(config.id),
+        onCloseComplete: () => closeComplete(config.id)
+      });
+    }),
+    [activeModals]
+  );
+  return /* @__PURE__ */ React.createElement(ModalsContext.Provider, {
+    value: context
+  }, content, children);
+}
+var useModalsContext = () => React.useContext(ModalsContext);
+var useModals = () => {
+  return useModalsContext();
+};
+
+export { BaseDrawer, BaseModal, ConfirmDialog, Drawer, FormDialog, MenuDialog, MenuDialogList, Modal, ModalsContext, ModalsProvider, useModals, useModalsContext };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/menu.tsx","../src/form.tsx","../src/provider.tsx"],"names":["React","ModalFooter","ModalBody","Button","forwardRef","component","modals","modal","children"],"mappings":";AAAA,YAAY,WAAW;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,OAEK;AAqDA,IAAM,gBAA8C,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AAEJ,QAAM,YAAkB,aAAO,IAAI;AACnC,QAAM,aAAmB,aAAO,IAAI;AAEpC,SACE,oCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IACJ,qBACE,0BAA0B,WAAW,YAAY;AAAA,KAGnD,oCAAC,0BACC,oCAAC,0BACC,oCAAC,yBAAmB,KAAM,GAE1B,oCAAC,uBAAiB,QAAS,GAE3B,oCAAC,yBACC,oCAAC;AAAA,IAAa,GAAG;AAAA,KACf,oCAAC;AAAA,IACC,KAAK;AAAA,IACJ,GAAG;AAAA,IACJ,SAAS,MAAM;AACb;AAEA,uBAAiB,QAAQ;AAAA,IAC3B;AAAA,MAEC,2CAAa,aAAY,WAC5B,GACA,oCAAC;AAAA,IACC,KAAK;AAAA,IACJ,GAAG;AAAA,IACJ,SAAS,MAAM;AACb;AAEA,wBAAkB,QAAQ;AAAA,IAC5B;AAAA,MAEC,6CAAc,aAAY,YAC7B,CACF,CACF,CACF,CACF,CACF;AAEJ;;;ACtIA,YAAYA,YAAW;AAEvB;AAAA,EACE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAkBA,IAAM,aAAwC,CAAC,UAAU;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AACJ,SACE,qCAAC;AAAA,IAAa;AAAA,IAAgB;AAAA,IAAmB,GAAG;AAAA,KACjD,CAAC,eAAe,qCAAC,mBAAc,GAChC,qCAAC,qBACC,qCAAC,oBAAc,KAAM,GACpB,CAAC,mBAAmB,qCAAC,uBAAkB,GACvC,QACH,CACF;AAEJ;AASO,IAAM,SAAgC,CAAC,UAAU;AACtD,QAAM,EAAE,QAAQ,aAAa,KAAK,IAAI;AACtC,SACE,qCAAC;AAAA,IAAY,GAAG;AAAA,KACd,qCAAC,kBAAY,QAAS,GAErB,UAAU,qCAAC,oBAAc,MAAO,CACnC;AAEJ;;;ACnEA,YAAYA,YAAW;AAEvB;AAAA,EACE,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAqBA,IAAM,YAAsC,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,IAAI;AACJ,SACE,qCAAC;AAAA,IAAY;AAAA,IAAgB;AAAA,IAAmB,GAAG;AAAA,KAChD,CAAC,eAAe,qCAAC,kBAAa,GAC/B,qCAAC,oBACE,SAAS,qCAAC,mBAAa,KAAM,GAC7B,CAAC,mBAAmB,qCAAC,sBAAiB,GACtC,UACA,UAAU,qCAAC,mBAAa,MAAO,CAClC,CACF;AAEJ;AAEO,IAAM,QAAkC,CAAC,UAAU;AACxD,QAAM,EAAE,aAAa,KAAK,IAAI;AAC9B,SACE,qCAAC;AAAA,IAAW,GAAG;AAAA,KACb,qCAAC,iBAAW,QAAS,CACvB;AAEJ;;;AC/DA,YAAYA,YAAW;AAEvB;AAAA,EACE,eAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAIP,IAAM,CAAC,cAAc,IAAI,oBAAoB,eAAe;AASrD,IAAM,aAAwC,CAAC,UAAU;AAC9D,QAAM,EAAE,SAAS,oBAAoB,KAAK,IAAI;AAE9C,SACE,qCAAC;AAAA,IACC,SAAQ;AAAA,IACR,SAAS,MAAM;AACb;AAGA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,GACN;AAEJ;AASO,IAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,IAAI;AAEJ,UAAM,EAAE,QAAQ,SAAS,QAAQ,IAAI,eAAe;AAEpD,UAAM,EAAE,QAAQ,SAAS,IAAI,YAAY,MAAM,YAAY;AAE3D,UAAM,SAAS,oBAAoB,QAAQ,KAAK;AAEhD,WACE,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,OAGA,qCAAC;AAAA,MAAe,OAAO;AAAA,OACrB,qCAAC,OAAO,KAAP;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAG,OAAO;AAAA,QACV,WAAW;AAAA,QACX,QAAQ;AAAA,MACV;AAAA,KACF,CACF,GACC,UAAU,qCAACA,cAAA,MAAa,MAAO,CAClC;AAAA,EAEJ;AACF;;;AC/FA,YAAYD,YAAW;AAEvB,SAAS,aAAAE,YAAW,eAAAD,cAAa,UAAAE,SAAQ,cAAAC,mBAAkB;AAC3D,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmDA,IAAM,aAAaA;AAAA,EACxB,CAIE,OACA,QACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,cAAc;AAAA,MACd,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,IACL,IAAI;AAEJ,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,WACE,qCAAC;AAAA,MAAU;AAAA,MAAgB;AAAA,MAAmB,GAAG;AAAA,OAC/C,qCAAC;AAAA,MAAM,GAAG;AAAA,MAAW;AAAA,OAClB,CAAC,SACA,4DACE,qCAACF,YAAA,MACE,QAAQ,UAAU,IAAI,KACrB,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,KACjB,CAEJ,GAEC,UACC,qCAACD,cAAA,MACC,qCAACE,SAAA;AAAA,MAAO,SAAQ;AAAA,MAAQ,IAAI;AAAA,MAAG,SAAS;AAAA,OACrC,WACH,GACA,qCAAC,oBAAc,WAAY,CAC7B,CAEJ,CAEJ,CACF;AAAA,EAEJ;AACF;;;ACjJA,YAAYH,YAAW;AAmBhB,IAAM,gBAAsB;AAAA,EACjC;AACF;AAqFA,IAAM,oBAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,SAAS,eAAe,EAAE,UAAU,OAAO,GAAwB;AAGxE,QAAM,aAAmB,eAAQ,MAAM,oBAAI,IAAiB,GAAG,CAAC,CAAC;AAEjE,QAAM,CAAC,cAAc,eAAe,IAAU,gBAE5C;AAAA,IACA,OAAO;AAAA,EACT,CAAC;AAED,QAAM,oBAA0B,eAAQ,MAAM;AAC5C,UAAM,UAAyC;AAAA,MAC7C,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAEA,WAAO,CAAC,OAAmB,YAAY;AACrC,YAAM,YAAY,QAAQ,SAAS,QAAQ;AAE3C,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB,CAAC,OAAoB,UAAmB;AAC7D,QAAI,CAAC,OAAO;AACV,aAAO,gBAAgB;AAAA,QACrB;AAAA,MACF,CAAC;AAAA,IACH;AACA,oBAAgB,CAAC,eAAe;AAAA,MAC9B,GAAG;AAAA,MACH,CAAC,QAAQ;AAAA,IACX,EAAE;AAAA,EACJ;AAEA,QAAM,OAAO,CACX,YACY;AACZ,QAAI,OAAO,YAAY,YAAY;AACjC,YAAMK,aAAsC;AAC5C,gBAAU;AAAA,QACR,WAAAA;AAAA,MACF;AAAA,IACF;AAEA,UAAM;AAAA,MACJ,KAAK,WAAW,OAAO;AAAA,MACvB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,SACG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAwB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AAEA,eAAW,IAAI,KAAK;AACpB,mBAAe,OAAO,KAAK;AAE3B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,CAAC,YAAoC;AAClD,WAAO,KAAoB;AAAA,MACzB,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,QAAQ,CAAC,YAA2C;AACxD,WAAO,KAAK;AAAA,MACV,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,uBAAuB;AAAA,IACzB,CAAC;AAAA,EACH;AAEA,QAAM,UAAU,CAAC,YAA2C;AAC1D,WAAO,KAA2B;AAAA,MAChC,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,CAAC,YAAwC;AACpD,WAAO,KAAwB;AAAA,MAC7B,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,OAAO,CAAC,YAAwC;AACpD,WAAO,KAAwB;AAAA,MAC7B,GAAG;AAAA,MACH,MAAM;AAAA,IACR,CAAC;AAAA,EACH;AAEA,QAAM,QAAQ,OAAO,IAAqB,UAAoB;AA1OhE;AA2OI,UAAMC,UAAS,CAAC,GAAG,MAAM,KAAK,UAAU,CAAC;AACzC,UAAM,QAAQA,QAAO,OAAO,CAACC,WAAUA,OAAM,OAAO,EAAE,EAAE;AAExD,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,cAAc,QAAM,iBAAM,UAAN,mBAAa,YAAb,4BAAuB,EAAE,MAAM;AACzD,QAAI,gBAAgB,OAAO;AACzB;AAAA,IACF;AAEA,UAAM,SAASD,QAAO,OAAO,CAAC,EAAE,MAAM,MAAM,UAAU,MAAM,KAAK;AAEjE,QAAI,OAAO,WAAW,GAAG;AACvB;AAAA,QACE;AAAA,UACE,GAAG;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,WAAW,OAAO,SAAS,GAAG;AAC5B,qBAAe,OAAO,OAAO,SAAS,IAAI,MAAM,KAAK;AAAA,IACvD,OAAO;AACL;AAAA,QACE;AAAA,UACE,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,MAAM,MAAM;AAAA,QACd;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,OAAwB;AAC7C,UAAMA,UAAS,CAAC,GAAG,MAAM,KAAK,UAAU,CAAC;AACzC,UAAM,QAAQA,QAAO,OAAO,CAACC,WAAUA,OAAM,OAAO,EAAE,EAAE;AAExD,eAAW,OAAO,KAAK;AAEvB,UAAM,SAASD,QAAO,OAAO,CAAC,EAAE,MAAM,MAAM,UAAU,MAAM,KAAK;AAEjE,QAAI,OAAO,WAAW,GAAG;AACvB,qBAAe,mBAAmB,MAAM,KAAK;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,eAAW,QAAQ,CAAC,UAAO;AA7R/B;AA6RkC,+BAAM,UAAN,mBAAa,YAAb,4BAAuB,EAAE,OAAO,KAAK;AAAA,KAAE;AACrE,eAAW,MAAM;AAEjB,mBAAe,iBAAiB;AAAA,EAClC;AAEA,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,UAAgB;AAAA,IACpB,MACE,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,OAAO,MAAM,MAAM;AACpD,YAAM,YAAY,OAAO,aAAa,kBAAkB,OAAO,IAAI;AAEnE,YAAM,EAAE,OAAO,MAAM,UAAAE,cAAa,MAAM,IAAI,OAAO,SAAS,CAAC;AAE7D,aACE,qCAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,UAAU,QAAQA;AAAA,QACjB,GAAG;AAAA,QACJ,QAAQ,CAAC,CAAC,OAAO;AAAA,QACjB,SAAS,MAAM,MAAM,OAAO,EAAE;AAAA,QAC9B,iBAAiB,MAAM,cAAc,OAAO,EAAE;AAAA,OAChD;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,YAAY;AAAA,EACf;AAEA,SACE,qCAAC,cAAc,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC5B,SACA,QACH;AAEJ;AAEO,IAAM,mBAAmB,MACxB,kBAAW,aAAa;AAEzB,IAAM,YAAY,MAAM;AAC7B,SAAO,iBAAiB;AAC1B","sourcesContent":["import * as React from 'react'\n\nimport {\n  AlertDialog,\n  AlertDialogBody,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogContent,\n  AlertDialogOverlay,\n  AlertDialogProps,\n  ButtonGroup,\n  ButtonGroupProps,\n  Button,\n  ButtonProps,\n} from '@chakra-ui/react'\n\nexport interface ConfirmDialogProps\n  extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n  /**\n   * The dialog title\n   */\n  title?: React.ReactNode\n  /**\n   * The cancel button label\n   */\n  cancelLabel?: React.ReactNode\n  /**\n   * The confirm button label\n   */\n  confirmLabel?: React.ReactNode\n  /**\n   * The cancel button props\n   */\n  cancelProps?: ButtonProps\n  /**\n   * The confirm button props\n   */\n  confirmProps?: ButtonProps\n  /**\n   * The button group props\n   */\n  buttonGroupProps?: ButtonGroupProps\n  /**\n   * Close the dialog on cancel\n   * @default true\n   */\n  closeOnCancel?: boolean\n  /**\n   * Close the dialog on confirm\n   * @default true\n   */\n  closeOnConfirm?: boolean\n  /**\n   * Defines which button gets initial focus\n   * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n   */\n  leastDestructiveFocus?: 'cancel' | 'confirm'\n  /**\n   * Function that's called when cancel is clicked\n   */\n  onCancel?: () => void\n  /**\n   * Function that's called when confirm is clicked\n   */\n  onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n  const {\n    title,\n    cancelLabel = 'Cancel',\n    confirmLabel = 'Confirm',\n    cancelProps,\n    confirmProps,\n    buttonGroupProps,\n    isOpen,\n    closeOnCancel = true,\n    closeOnConfirm = true,\n    leastDestructiveFocus = 'cancel',\n    onClose,\n    onCancel,\n    onConfirm,\n    children,\n    ...rest\n  } = props\n\n  const cancelRef = React.useRef(null)\n  const confirmRef = React.useRef(null)\n\n  return (\n    <AlertDialog\n      isOpen={isOpen}\n      onClose={onClose}\n      {...rest}\n      leastDestructiveRef={\n        leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n      }\n    >\n      <AlertDialogOverlay>\n        <AlertDialogContent>\n          <AlertDialogHeader>{title}</AlertDialogHeader>\n\n          <AlertDialogBody>{children}</AlertDialogBody>\n\n          <AlertDialogFooter>\n            <ButtonGroup {...buttonGroupProps}>\n              <Button\n                ref={cancelRef}\n                {...cancelProps}\n                onClick={() => {\n                  onCancel?.()\n\n                  closeOnCancel && onClose()\n                }}\n              >\n                {cancelProps?.children || cancelLabel}\n              </Button>\n              <Button\n                ref={confirmRef}\n                {...confirmProps}\n                onClick={() => {\n                  onConfirm?.()\n\n                  closeOnConfirm && onClose()\n                }}\n              >\n                {confirmProps?.children || confirmLabel}\n              </Button>\n            </ButtonGroup>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialogOverlay>\n    </AlertDialog>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Drawer as ChakraDrawer,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n  /**\n   * The drawer title\n   */\n  title: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the overflow\n   */\n  hideOverlay?: boolean\n  children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n  const {\n    title,\n    children,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    ...rest\n  } = props\n  return (\n    <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <DrawerOverlay />}\n      <DrawerContent>\n        <DrawerHeader>{title}</DrawerHeader>\n        {!hideCloseButton && <DrawerCloseButton />}\n        {children}\n      </DrawerContent>\n    </ChakraDrawer>\n  )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n  /**\n   * Drawer footer content, wrapped with `DrawerFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n  const { footer, children, ...rest } = props\n  return (\n    <BaseDrawer {...rest}>\n      <DrawerBody>{children}</DrawerBody>\n\n      {footer && <DrawerFooter>{footer}</DrawerFooter>}\n    </BaseDrawer>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  Modal as ChakraModal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalFooter,\n  ModalBody,\n  ModalCloseButton,\n  ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n  /**\n   * The modal title\n   */\n  title?: React.ReactNode\n  /**\n   * The modal footer\n   */\n  footer?: React.ReactNode\n  /**\n   * Hide the close button\n   */\n  hideCloseButton?: boolean\n  /**\n   * Hide the overlay\n   */\n  hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n  const {\n    title,\n    footer,\n    children,\n    isOpen,\n    onClose,\n    hideCloseButton,\n    hideOverlay,\n    ...rest\n  } = props\n  return (\n    <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n      {!hideOverlay && <ModalOverlay />}\n      <ModalContent>\n        {title && <ModalHeader>{title}</ModalHeader>}\n        {!hideCloseButton && <ModalCloseButton />}\n        {children}\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </ModalContent>\n    </ChakraModal>\n  )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n  const { children, ...rest } = props\n  return (\n    <BaseModal {...rest}>\n      <ModalBody>{children}</ModalBody>\n    </BaseModal>\n  )\n}\n","import * as React from 'react'\n\nimport {\n  ModalFooter,\n  chakra,\n  forwardRef,\n  useMenuContext,\n  useMenuList,\n  createStylesContext,\n  useMultiStyleConfig,\n  Menu,\n  MenuListProps,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n  /**\n   * The modal footer, wrapped with `ModalFooter`\n   */\n  footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n  const { onClose, onCloseComplete, ...rest } = props\n\n  return (\n    <Menu\n      variant=\"dialog\"\n      onClose={() => {\n        onClose?.()\n        // Not supported in Menu, so we call it here instead\n        // @todo Refactor this in v2?\n        onCloseComplete?.()\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport interface MenuDialogListProps\n  extends Omit<\n      BaseModalProps,\n      'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n    >,\n    Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n  (props, forwardedRef) => {\n    const {\n      rootProps,\n      title,\n      footer,\n      initialFocusRef,\n      hideCloseButton,\n      motionPreset,\n      ...rest\n    } = props\n\n    const { isOpen, onClose, menuRef } = useMenuContext()\n\n    const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n    const styles = useMultiStyleConfig('Menu', props)\n\n    return (\n      <BaseModal\n        isOpen={isOpen}\n        onClose={onClose}\n        initialFocusRef={initialFocusRef || menuRef}\n        title={title}\n        hideCloseButton={hideCloseButton}\n        motionPreset={motionPreset}\n      >\n        {/* We forward the styles again, otherwise the modal styles will be picked up */}\n        <StylesProvider value={styles}>\n          <chakra.div\n            {...ownProps}\n            ref={ref as React.Ref<HTMLDivElement>}\n            __css={{\n              outline: 0,\n              maxHeight: '80vh', // can override this in theme\n              overflowY: 'auto', // can override this in theme\n              ...styles.list,\n              boxShadow: 'none',\n              border: 0,\n            }}\n          />\n        </StylesProvider>\n        {footer && <ModalFooter>{footer}</ModalFooter>}\n      </BaseModal>\n    )\n  }\n)\n","import * as React from 'react'\n\nimport { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'\nimport { runIfFn } from '@saas-ui/react-utils'\n\nimport {\n  Form,\n  Fields,\n  SubmitButton,\n  FormProps,\n  FieldValues,\n  FieldResolver,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport interface FormDialogProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext extends object = object\n> extends Omit<BaseModalProps, 'children'>,\n    Pick<\n      FormProps<TFieldValues, TContext>,\n      | 'schema'\n      | 'defaultValues'\n      | 'values'\n      | 'context'\n      | 'onChange'\n      | 'onSubmit'\n      | 'onError'\n      | 'resolver'\n      | 'mode'\n      | 'reValidateMode'\n      | 'shouldFocusError'\n      | 'shouldUnregister'\n      | 'shouldUseNativeValidation'\n      | 'criteriaMode'\n      | 'delayError'\n    > {\n  /**\n   * The modal footer, will be wrapped with `ModalFooter`.\n   * Defaults to a cancel and submit button.\n   */\n  footer?: React.ReactNode\n  /**\n   * The cancel button label\n   * @default \"Cancel\"\n   */\n  cancelLabel?: React.ReactNode\n  /**\n   * The submit button label\n   * @default \"Submit\"\n   */\n  submitLabel?: React.ReactNode\n  /**\n   * If no children are passed, this will auto render fields based on the supplied schema.\n   */\n  children?: React.ReactNode\n  /**\n   * A schema field resolver used to auto generate form fields.\n   */\n  fieldResolver?: FieldResolver\n}\n\nexport const FormDialog = forwardRef(\n  <\n    TFieldValues extends FieldValues = FieldValues,\n    TContext extends object = object\n  >(\n    props: FormDialogProps<TFieldValues, TContext>,\n    ref: React.ForwardedRef<HTMLFormElement>\n  ) => {\n    const {\n      children,\n      schema,\n      resolver,\n      fieldResolver,\n      defaultValues,\n      values,\n      context,\n      onChange,\n      onSubmit,\n      onError,\n      mode,\n      reValidateMode,\n      shouldFocusError = true,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError = 100,\n      cancelLabel = 'Cancel',\n      submitLabel = 'Submit',\n      footer,\n      isOpen,\n      onClose,\n      ...rest\n    } = props\n\n    const formProps = {\n      ref,\n      schema,\n      resolver,\n      defaultValues,\n      values,\n      context,\n      onChange,\n      onSubmit,\n      onError,\n      mode,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    return (\n      <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>\n        <Form {...formProps} ref={ref}>\n          {(form) => (\n            <>\n              <ModalBody>\n                {runIfFn(children, form) || (\n                  <Fields\n                    schema={schema}\n                    fieldResolver={fieldResolver}\n                    focusFirstField\n                  />\n                )}\n              </ModalBody>\n\n              {footer || (\n                <ModalFooter>\n                  <Button variant=\"ghost\" mr={3} onClick={onClose}>\n                    {cancelLabel}\n                  </Button>\n                  <SubmitButton>{submitLabel}</SubmitButton>\n                </ModalFooter>\n              )}\n            </>\n          )}\n        </Form>\n      </BaseModal>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormDialogProps<TFieldValues> & {\n    ref?: React.ForwardedRef<HTMLFormElement>\n  }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { Modal, BaseModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\nimport { MenuDialog, MenuDialogProps } from './menu'\nimport { FormDialog, FormDialogProps } from './form'\n\nexport interface ModalsContextValue {\n  open: (options: OpenOptions) => ModalId\n  drawer: (options: DrawerOptions) => ModalId\n  alert: (options: ConfirmDialogOptions) => ModalId\n  confirm: (options: ConfirmDialogOptions) => ModalId\n  menu: (options: MenuDialogOptions) => ModalId\n  form: (options: FormDialogOptions) => ModalId\n  close: (id: ModalId) => void\n  closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue | null>(\n  null\n)\n\ninterface ModalsProviderProps {\n  children: React.ReactNode\n  modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n  extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {\n  onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n  body?: React.ReactNode\n  children?: React.ReactNode\n  [key: string]: any\n}\n\nexport interface DrawerOptions\n  extends ModalOptions,\n    Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n  extends ModalOptions,\n    Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n  extends ModalOptions,\n    Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n  extends ModalOptions,\n    Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions extends ModalOptions {\n  type?: ModalTypes\n  scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes =\n  | 'modal'\n  | 'drawer'\n  | 'alert'\n  | 'confirm'\n  | 'menu'\n  | string\n\nexport interface ModalConfig<\n  TModalOptions extends ModalOptions = ModalOptions\n> {\n  /**\n   * The modal id, autogenerated when not set.\n   * Can be used to close modals.\n   */\n  id?: ModalId | null\n  /**\n   * The modal props\n   */\n  props?: TModalOptions | null\n  /**\n   * The modal scope\n   * Modals can only have one level per scope.\n   * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n   */\n  scope?: ModalScopes | string\n  /**\n   * The modal type to open.\n   * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n   *\n   * Custom types can be configured using the `modals` prop of `ModalProvider`\n   */\n  type?: ModalTypes\n  /**\n   * Render a custom modal component.\n   * This will ignore the `type` param.\n   */\n  component?: React.FC<BaseModalProps>\n  /**\n   * Whether the modal is open or not.\n   * This is used internally to keep track of the modal state.\n   */\n  isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n  id: null,\n  props: null,\n  type: 'modal',\n}\n\nconst defaultModals = {\n  alert: ConfirmDialog,\n  confirm: ConfirmDialog,\n  drawer: Drawer,\n  modal: Modal,\n  menu: MenuDialog,\n  form: FormDialog,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n  // Note that updating the Set doesn't trigger a re-render,\n  // use in conjuction with setActiveModals\n  const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n  const [activeModals, setActiveModals] = React.useState<\n    Record<string, ModalConfig>\n  >({\n    modal: initialModalState,\n  })\n\n  const getModalComponent = React.useMemo(() => {\n    const _modals: Record<string, React.FC<any>> = {\n      ...defaultModals,\n      ...modals,\n    }\n\n    return (type: ModalTypes = 'modal') => {\n      const component = _modals[type] || _modals.modal\n\n      return component\n    }\n  }, [modals])\n\n  const setActiveModal = (modal: ModalConfig, scope?: string) => {\n    if (!scope) {\n      return setActiveModals({\n        modal,\n      })\n    }\n    setActiveModals((prevState) => ({\n      ...prevState,\n      [scope]: modal,\n    }))\n  }\n\n  const open = <T extends ModalOptions>(\n    options: T | React.FC<BaseModalProps>\n  ): ModalId => {\n    if (typeof options === 'function') {\n      const component: React.FC<BaseModalProps> = options\n      options = {\n        component,\n      } as unknown as T\n    }\n\n    const {\n      id = _instances.size + 1,\n      type = 'modal',\n      scope = 'modal',\n      component,\n      ...props\n    } = options\n\n    const modal: ModalConfig<T> = {\n      id,\n      props: props as T,\n      type,\n      scope,\n      component,\n      isOpen: true,\n    }\n\n    _instances.add(modal)\n    setActiveModal(modal, scope)\n\n    return id\n  }\n\n  const drawer = (options: DrawerOptions): ModalId => {\n    return open<DrawerOptions>({\n      ...options,\n      type: 'drawer',\n    })\n  }\n\n  const alert = (options: ConfirmDialogOptions): ModalId => {\n    return open({\n      ...options,\n      scope: 'alert',\n      type: 'alert',\n      cancelProps: {\n        display: 'none',\n      },\n      confirmProps: {\n        label: 'OK',\n      },\n      leastDestructiveFocus: 'confirm',\n    })\n  }\n\n  const confirm = (options: ConfirmDialogOptions): ModalId => {\n    return open<ConfirmDialogOptions>({\n      ...options,\n      scope: 'alert',\n      type: 'confirm',\n    })\n  }\n\n  const menu = (options: MenuDialogOptions): ModalId => {\n    return open<MenuDialogOptions>({\n      ...options,\n      type: 'menu',\n    })\n  }\n\n  const form = (options: FormDialogOptions): ModalId => {\n    return open<FormDialogOptions>({\n      ...options,\n      type: 'form',\n    })\n  }\n\n  const close = async (id?: ModalId | null, force?: boolean) => {\n    const modals = [...Array.from(_instances)]\n    const modal = modals.filter((modal) => modal.id === id)[0]\n\n    if (!modal) {\n      return\n    }\n\n    const shouldClose = await modal.props?.onClose?.({ force })\n    if (shouldClose === false) {\n      return\n    }\n\n    const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n    if (scoped.length === 1) {\n      setActiveModal(\n        {\n          ...modal,\n          isOpen: false,\n        },\n        modal.scope\n      )\n    } else if (scoped.length > 1) {\n      setActiveModal(scoped[scoped.length - 2], modal.scope)\n    } else {\n      setActiveModal(\n        {\n          id: null,\n          props: null,\n          type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n        },\n        modal.scope\n      )\n    }\n  }\n\n  const closeComplete = (id?: ModalId | null) => {\n    const modals = [...Array.from(_instances)]\n    const modal = modals.filter((modal) => modal.id === id)[0]\n\n    _instances.delete(modal)\n\n    const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n    if (scoped.length === 1) {\n      setActiveModal(initialModalState, modal.scope)\n    }\n  }\n\n  const closeAll = () => {\n    _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n    _instances.clear()\n\n    setActiveModal(initialModalState)\n  }\n\n  const context = {\n    open,\n    drawer,\n    alert,\n    confirm,\n    menu,\n    form,\n    close,\n    closeAll,\n  }\n\n  const content = React.useMemo(\n    () =>\n      Object.entries(activeModals).map(([scope, config]) => {\n        const Component = config.component || getModalComponent(config.type)\n\n        const { title, body, children, ...props } = config.props || {}\n\n        return (\n          <Component\n            key={scope}\n            title={title}\n            children={body || children}\n            {...props}\n            isOpen={!!config.isOpen}\n            onClose={() => close(config.id)}\n            onCloseComplete={() => closeComplete(config.id)}\n          />\n        )\n      }),\n    [activeModals]\n  )\n\n  return (\n    <ModalsContext.Provider value={context}>\n      {content}\n      {children}\n    </ModalsContext.Provider>\n  )\n}\n\nexport const useModalsContext = () =>\n  React.useContext(ModalsContext) as ModalsContextValue\n\nexport const useModals = () => {\n  return useModalsContext()\n}\n"]}

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@saas-ui/modals",
-  "version": "1.5.5",
+  "version": "2.0.0-next.1",
   "description": "A modal manager for Chakra UI",
   "source": "src/index.ts",
   "exports": {
     ".": {
       "require": "./dist/index.js",
-      "import": "./dist/index.modern.mjs"
+      "import": "./dist/index.mjs"
     },
     "./src": {
       "default": "./src/index.ts"
     }
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.modern.mjs",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "build": "yarn clean && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,modern --compress",
+    "build": "tsup src/index.ts --config tsup.config.ts",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
@@ -57,14 +57,16 @@
   },
   "dependencies": {
     "@chakra-ui/utils": "^2.0.14",
-    "@saas-ui/button": "1.4.0",
-    "@saas-ui/forms": "1.5.3",
-    "@saas-ui/menu": "1.4.1"
+    "@saas-ui/forms": "2.0.0-next.1",
+    "@saas-ui/hooks": "2.0.0-next.1",
+    "@saas-ui/react-utils": "2.0.0-next.1"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=2.4.6",
-    "@chakra-ui/system": ">=2.3.8",
-    "framer-motion": ">=5.5.0",
-    "react": ">=18.0.0"
+    "@chakra-ui/react": ">=2.4.9",
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "framer-motion": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }

package/src/dialog.tsx

@@ -8,14 +8,11 @@ import {
   AlertDialogContent,
   AlertDialogOverlay,
   AlertDialogProps,
-} from '@chakra-ui/react'
-
-import {
   ButtonGroup,
   ButtonGroupProps,
   Button,
   ButtonProps,
-} from '@saas-ui/button'
+} from '@chakra-ui/react'
 
 export interface ConfirmDialogProps
   extends Omit<AlertDialogProps, 'leastDestructiveRef'> {
@@ -116,7 +113,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
                   closeOnCancel && onClose()
                 }}
               >
-                {cancelProps?.children || cancelProps?.label || cancelLabel}
+                {cancelProps?.children || cancelLabel}
               </Button>
               <Button
                 ref={confirmRef}
@@ -127,7 +124,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
                   closeOnConfirm && onClose()
                 }}
               >
-                {confirmProps?.children || confirmProps?.label || confirmLabel}
+                {confirmProps?.children || confirmLabel}
               </Button>
             </ButtonGroup>
           </AlertDialogFooter>

package/src/form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'
-import { runIfFn } from '@chakra-ui/utils'
+import { runIfFn } from '@saas-ui/react-utils'
 
 import {
   Form,
@@ -10,17 +10,20 @@ import {
   FormProps,
   FieldValues,
   FieldResolver,
-  UseFormReturn,
 } from '@saas-ui/forms'
 
 import { BaseModal, BaseModalProps } from './modal'
 
-export interface FormDialogProps<TFieldValues extends FieldValues = FieldValues>
-  extends Omit<BaseModalProps, 'children'>,
+export interface FormDialogProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+> extends Omit<BaseModalProps, 'children'>,
     Pick<
-      FormProps<TFieldValues>,
+      FormProps<TFieldValues, TContext>,
       | 'schema'
       | 'defaultValues'
+      | 'values'
+      | 'context'
       | 'onChange'
       | 'onSubmit'
       | 'onError'
@@ -59,9 +62,12 @@ export interface FormDialogProps<TFieldValues extends FieldValues = FieldValues>
 }
 
 export const FormDialog = forwardRef(
-  <TFieldValues extends FieldValues = FieldValues>(
-    props: FormDialogProps<TFieldValues>,
-    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
+  <
+    TFieldValues extends FieldValues = FieldValues,
+    TContext extends object = object
+  >(
+    props: FormDialogProps<TFieldValues, TContext>,
+    ref: React.ForwardedRef<HTMLFormElement>
   ) => {
     const {
       children,
@@ -69,6 +75,8 @@ export const FormDialog = forwardRef(
       resolver,
       fieldResolver,
       defaultValues,
+      values,
+      context,
       onChange,
       onSubmit,
       onError,
@@ -79,8 +87,8 @@ export const FormDialog = forwardRef(
       shouldUseNativeValidation,
       criteriaMode,
       delayError = 100,
-      cancelLabel,
-      submitLabel,
+      cancelLabel = 'Cancel',
+      submitLabel = 'Submit',
       footer,
       isOpen,
       onClose,
@@ -92,6 +100,8 @@ export const FormDialog = forwardRef(
       schema,
       resolver,
       defaultValues,
+      values,
+      context,
       onChange,
       onSubmit,
       onError,
@@ -106,7 +116,7 @@ export const FormDialog = forwardRef(
 
     return (
       <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>
-        <Form {...formProps}>
+        <Form {...formProps} ref={ref}>
           {(form) => (
             <>
               <ModalBody>
@@ -122,9 +132,9 @@ export const FormDialog = forwardRef(
               {footer || (
                 <ModalFooter>
                   <Button variant="ghost" mr={3} onClick={onClose}>
-                    {cancelLabel || 'Cancel'}
+                    {cancelLabel}
                   </Button>
-                  <SubmitButton>{submitLabel || 'Submit'}</SubmitButton>
+                  <SubmitButton>{submitLabel}</SubmitButton>
                 </ModalFooter>
               )}
             </>
@@ -135,6 +145,6 @@ export const FormDialog = forwardRef(
   }
 ) as <TFieldValues extends FieldValues>(
   props: FormDialogProps<TFieldValues> & {
-    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
+    ref?: React.ForwardedRef<HTMLFormElement>
   }
 ) => React.ReactElement

package/src/menu.tsx

@@ -12,11 +12,9 @@ import {
   MenuListProps,
 } from '@chakra-ui/react'
 
-import {} from '@chakra-ui/system'
-
 import { BaseModal, BaseModalProps } from './modal'
 
-const [StylesProvider] = createStylesContext('MenuDialog')
+const [StylesProvider] = createStylesContext('SuiMenuDialog')
 
 export interface MenuDialogProps extends BaseModalProps {
   /**