@kne/react-modal 0.1.1 → 0.1.5

package/dist/index.modern.js

@@ -1,6 +1,6 @@
-import { useRef, useEffect, Children } from 'react';
-import { Modal as Modal$1, App, Button, Tabs } from 'antd';
-import { CloseOutlined } from '@ant-design/icons';
+import { useRef, useEffect, useState, useCallback, memo, forwardRef, useImperativeHandle, createRef, Children } from 'react';
+import { Modal as Modal$1, App, Button, Drawer as Drawer$1, Tabs } from 'antd';
+import { CloseOutlined, InfoCircleFilled, ExclamationCircleFilled, CloseCircleFilled, CheckCircleFilled } from '@ant-design/icons';
 import classnames from 'classnames';
 import { useMobilePopupMount, useScrollElement } from '@kne/responsive-utils';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
@@ -49,9 +49,9 @@ const withLocale = createWithIntlProvider({
   namespace: 'react-modal'
 });
 
-var style = {"kne-responsive-boundary":"kne-react-modal_gh14z","kne-responsive-scroll":"kne-react-modal_Kfn6L","modal":"kne-react-modal_Bk7-B","small":"kne-react-modal_DZGD6","large":"kne-react-modal_9sz-n","modal-body-inner":"kne-react-modal_fFnva","is-mobile":"kne-react-modal_LtgJz","modal-container":"kne-react-modal_aEoZq","modal-antd-header":"kne-react-modal_54n8W","modal-antd-footer":"kne-react-modal_AJ9pV","modal-antd-body":"kne-react-modal_u2IjN","modal-outer":"kne-react-modal_kkILR","no-title":"kne-react-modal_8Iysr","no-footer":"kne-react-modal_VMxik","no-padding":"kne-react-modal_Fof-N","modal-title":"kne-react-modal_tG9MF","modal-body":"kne-react-modal_W-QFz","modal-footer":"kne-react-modal_meVfy","body-scroll-off":"kne-react-modal_l627I","is-embedded-footer":"kne-react-modal_17Eih","modal-footer-extra":"kne-react-modal_Fx8Z-","modal-footer-actions":"kne-react-modal_V3ZrX","modal-close":"kne-react-modal_-EK8N","modal-host":"kne-react-modal_eNb-h","modal-wrap":"kne-react-modal_3Sju5","modal-wrap-centered":"kne-react-modal_-qCIk","modal-wrap-fullscreen":"kne-react-modal_8lS2G","modal-mask-fullscreen":"kne-react-modal_XfLOC"};
+var modalStyle = {"kne-responsive-boundary":"kne-react-modal_gh14z","kne-responsive-scroll":"kne-react-modal_Kfn6L","modal":"kne-react-modal_Bk7-B","small":"kne-react-modal_DZGD6","large":"kne-react-modal_9sz-n","modal-body-inner":"kne-react-modal_fFnva","is-mobile":"kne-react-modal_LtgJz","modal-container":"kne-react-modal_aEoZq","modal-antd-header":"kne-react-modal_54n8W","modal-antd-footer":"kne-react-modal_AJ9pV","modal-antd-body":"kne-react-modal_u2IjN","modal-outer":"kne-react-modal_kkILR","no-title":"kne-react-modal_8Iysr","no-footer":"kne-react-modal_VMxik","no-padding":"kne-react-modal_Fof-N","modal-title":"kne-react-modal_tG9MF","modal-body":"kne-react-modal_W-QFz","modal-footer":"kne-react-modal_meVfy","body-scroll-off":"kne-react-modal_l627I","is-embedded-footer":"kne-react-modal_17Eih","modal-footer-extra":"kne-react-modal_Fx8Z-","modal-footer-actions":"kne-react-modal_V3ZrX","modal-close":"kne-react-modal_-EK8N","modal-host":"kne-react-modal_eNb-h","modal-form-host":"kne-react-modal_Js8cf","modal-wrap":"kne-react-modal_3Sju5","modal-wrap-centered":"kne-react-modal_-qCIk","modal-wrap-fullscreen":"kne-react-modal_8lS2G","modal-mask-fullscreen":"kne-react-modal_XfLOC"};
 
-const _excluded$4 = ["ButtonComponent", "onClick", "autoClose", "display"];
+const _excluded$7 = ["ButtonComponent", "onClick", "autoClose", "display"];
 const Footer = ({
   footer,
   footerButtons,
@@ -90,7 +90,7 @@ const Footer = ({
         onClick,
         autoClose = true
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     return _extends({}, props, {
       buttonComponent: ButtonComponent,
       onClick: async (...args) => {
@@ -107,15 +107,15 @@ const Footer = ({
     return null;
   }
   return /*#__PURE__*/jsxs("div", {
-    className: classnames(style['modal-footer'], 'modal-footer', {
-      [style['is-mobile']]: isMobile,
-      [style['is-embedded-footer']]: embeddedFooterOnly
+    className: classnames(modalStyle['modal-footer'], 'modal-footer', {
+      [modalStyle['is-mobile']]: isMobile,
+      [modalStyle['is-embedded-footer']]: embeddedFooterOnly
     }),
     children: [showFooterSlot ? /*#__PURE__*/jsx("div", {
-      className: style['modal-footer-extra'],
+      className: modalStyle['modal-footer-extra'],
       children: footer
     }) : null, showButtons ? /*#__PURE__*/jsx("div", {
-      className: style['modal-footer-actions'],
+      className: modalStyle['modal-footer-actions'],
       children: /*#__PURE__*/jsx(ButtonGroup, {
         list: list,
         showLength: list.length,
@@ -125,21 +125,21 @@ const Footer = ({
   });
 };
 
-const _excluded$3 = ["children", "footer", "footerButtons", "className", "size", "title", "onClose", "onConfirm", "confirmText", "onCancel", "cancelText", "closable", "noPadding", "bodyScroll", "isMobile", "mobileFullscreen", "fixedModeClass", "wrapClassName", "classNames", "styles", "style"],
-  _excluded2 = ["width"],
-  _excluded3 = ["size", "getContainer", "open", "mobileFullscreen", "bodyScroll"],
+const _excluded$6 = ["children", "footer", "footerButtons", "className", "size", "title", "onClose", "onConfirm", "confirmText", "onCancel", "cancelText", "closable", "noPadding", "bodyScroll", "isMobile", "mobileFullscreen", "fixedModeClass", "wrapClassName", "classNames", "styles", "style", "modalRender"],
+  _excluded2$3 = ["width"],
+  _excluded3$1 = ["size", "getContainer", "open", "mobileFullscreen", "bodyScroll"],
   _excluded4 = ["afterClose", "getContainer"],
   _excluded5 = ["children", "getContainer", "afterClose"];
 const ModalLocaleRoot = withLocale(({
   children
 }) => children);
-const renderWithOptions = (value, options) => {
+const renderWithOptions$1 = (value, options) => {
   if (typeof value === 'function') {
     return value(options);
   }
   return value;
 };
-const wrapCustomGetContainer = customGetContainer => {
+const wrapCustomGetContainer$2 = customGetContainer => {
   if (!customGetContainer) {
     return undefined;
   }
@@ -148,10 +148,10 @@ const wrapCustomGetContainer = customGetContainer => {
   }
   return () => customGetContainer;
 };
-const VIEWPORT_EXAMPLE_SELECTORS = ['.example-driver-device-scroll'];
-const viewportPopupMountOptions = {
+const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
+const viewportPopupMountOptions$1 = {
   cover: 'viewport',
-  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$3
 };
 const findParentModalMountHost = node => {
   if (!node || typeof node.closest !== 'function') {
@@ -168,7 +168,7 @@ const resolveModalGetContainer = ({
   getPopupContainer,
   getHostNode
 }) => {
-  const wrappedCustom = wrapCustomGetContainer(customGetContainer);
+  const wrappedCustom = wrapCustomGetContainer$2(customGetContainer);
   return triggerNode => {
     if (wrappedCustom) {
       const custom = wrappedCustom(triggerNode);
@@ -184,17 +184,17 @@ const resolveModalGetContainer = ({
     return getPopupContainer(triggerNode);
   };
 };
-let parentScrollLockCount = 0;
-let parentScrollLocked = [];
-const lockParentScroll = getScrollElement => {
-  parentScrollLockCount += 1;
-  if (parentScrollLockCount === 1) {
+let parentScrollLockCount$1 = 0;
+let parentScrollLocked$1 = [];
+const lockParentScroll$1 = getScrollElement => {
+  parentScrollLockCount$1 += 1;
+  if (parentScrollLockCount$1 === 1) {
     const targets = [document.body];
     const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
     if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
       targets.push(scrollEl);
     }
-    parentScrollLocked = targets.map(el => {
+    parentScrollLocked$1 = targets.map(el => {
       const prev = {
         overflow: el.style.overflow,
         overscrollBehavior: el.style.overscrollBehavior
@@ -208,28 +208,28 @@ const lockParentScroll = getScrollElement => {
     });
   }
   return () => {
-    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
-    if (parentScrollLockCount === 0) {
-      parentScrollLocked.forEach(({
+    parentScrollLockCount$1 = Math.max(0, parentScrollLockCount$1 - 1);
+    if (parentScrollLockCount$1 === 0) {
+      parentScrollLocked$1.forEach(({
         el,
         prev
       }) => {
         el.style.overflow = prev.overflow;
         el.style.overscrollBehavior = prev.overscrollBehavior;
       });
-      parentScrollLocked = [];
+      parentScrollLocked$1 = [];
     }
   };
 };
-const useLockParentScroll = (enabled, getScrollElement) => {
+const useLockParentScroll$1 = (enabled, getScrollElement) => {
   useEffect(() => {
     if (!enabled) {
       return undefined;
     }
-    return lockParentScroll(getScrollElement);
+    return lockParentScroll$1(getScrollElement);
   }, [enabled, getScrollElement]);
 };
-const sizeStyleVars = (size, hasFooter) => {
+const sizeStyleVars$1 = (size, hasFooter) => {
   const minBase = size === 'small' ? 300 : 500;
   const chrome = 48 + (hasFooter ? 58 : 0);
   const minHeight = `${Math.max(0, minBase - chrome)}px`;
@@ -268,23 +268,23 @@ const ModalOuter = ({
 }) => {
   const effectiveNoPadding = noPadding != null ? noPadding : bodyScroll === false;
   const bodyInner = /*#__PURE__*/jsx("div", {
-    className: classnames(style['modal-body-inner'], 'modal-body-inner', {
-      [style['no-padding']]: effectiveNoPadding
+    className: classnames(modalStyle['modal-body-inner'], 'modal-body-inner', {
+      [modalStyle['no-padding']]: effectiveNoPadding
     }),
     children: children
   });
-  const bodyClassName = classnames(style['modal-body'], 'modal-body');
+  const bodyClassName = classnames(modalStyle['modal-body'], 'modal-body');
   return /*#__PURE__*/jsxs("div", {
-    className: classnames(style['modal-outer'], 'modal-container', {
-      [style['is-mobile']]: isMobile,
-      [style['no-title']]: !title,
-      [style['no-footer']]: footer === null && footerButtons === undefined,
-      [style['no-padding']]: effectiveNoPadding
+    className: classnames(modalStyle['modal-outer'], 'modal-container', {
+      [modalStyle['is-mobile']]: isMobile,
+      [modalStyle['no-title']]: !title,
+      [modalStyle['no-footer']]: footer === null && footerButtons === undefined,
+      [modalStyle['no-padding']]: effectiveNoPadding
     }),
     "data-testid": "react-modal",
     children: [closable === false ? null : /*#__PURE__*/jsx(Button, {
       "data-testid": "react-modal-close-btn",
-      className: classnames(style['modal-close'], 'modal-close'),
+      className: classnames(modalStyle['modal-close'], 'modal-close'),
       type: "text",
       icon: /*#__PURE__*/jsx(CloseOutlined, {}),
       onClick: e => {
@@ -292,7 +292,7 @@ const ModalOuter = ({
         onClose && onClose();
       }
     }), title ? /*#__PURE__*/jsx("div", {
-      className: classnames(style['modal-title'], 'modal-title'),
+      className: classnames(modalStyle['modal-title'], 'modal-title'),
       children: title
     }) : null, bodyScroll !== false ? /*#__PURE__*/jsx(SimpleBar, {
       className: bodyClassName,
@@ -301,7 +301,7 @@ const ModalOuter = ({
       },
       children: bodyInner
     }) : /*#__PURE__*/jsx("div", {
-      className: classnames(bodyClassName, style['body-scroll-off']),
+      className: classnames(bodyClassName, modalStyle['body-scroll-off']),
       children: bodyInner
     }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsx(Footer, {
       footer: footer,
@@ -339,49 +339,51 @@ const computedCommonProps = _ref => {
       wrapClassName,
       classNames: propsClassNames,
       styles: propsStyles,
-      style: propsStyle
+      style: propsStyle,
+      modalRender
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const useMobileLayout = isMobile && mobileFullscreen !== false;
   const hasFooter = !(footer === null && footerButtons === undefined);
-  const sizeVars = sizeStyleVars(size, hasFooter);
+  const sizeVars = sizeStyleVars$1(size, hasFooter);
   const {
       width
     } = sizeVars,
-    cssVars = _objectWithoutPropertiesLoose(sizeVars, _excluded2);
+    cssVars = _objectWithoutPropertiesLoose(sizeVars, _excluded2$3);
   const runChildren = options => {
     const opts = Object.assign({}, options, {
       close: onClose
     });
-    return /*#__PURE__*/jsx(ModalOuter, {
-      title: renderWithOptions(title, opts),
+    const modalPanel = /*#__PURE__*/jsx(ModalOuter, {
+      title: renderWithOptions$1(title, opts),
       closable: closable,
       onClose: onClose,
       onConfirm: onConfirm,
       confirmText: confirmText,
       onCancel: onCancel,
       cancelText: cancelText,
-      footerButtons: renderWithOptions(footerButtons, opts),
+      footerButtons: renderWithOptions$1(footerButtons, opts),
       noPadding: noPadding,
-      footer: renderWithOptions(footer, opts),
+      footer: renderWithOptions$1(footer, opts),
       targetProps: opts,
       isMobile: useMobileLayout,
       bodyScroll: bodyScroll,
-      children: renderWithOptions(children, opts)
+      children: renderWithOptions$1(children, opts)
     });
+    return typeof modalRender === 'function' ? modalRender(modalPanel) : modalPanel;
   };
   return _extends({}, props, {
     icon: null,
     centered: !useMobileLayout,
     width: (_props$width = props.width) != null ? _props$width : useMobileLayout ? 'var(--kne-modal-viewport-width, 100vw)' : width,
-    wrapClassName: classnames(wrapClassName, style['modal-wrap'], useMobileLayout ? style['modal-wrap-fullscreen'] : style['modal-wrap-centered'], useMobileLayout && fixedModeClass),
+    wrapClassName: classnames(wrapClassName, modalStyle['modal-wrap'], useMobileLayout ? modalStyle['modal-wrap-fullscreen'] : modalStyle['modal-wrap-centered'], useMobileLayout && fixedModeClass, modalRender && modalStyle['modal-form-host']),
     classNames: Object.assign({}, propsClassNames, {
-      mask: classnames(propsClassNames == null ? void 0 : propsClassNames.mask, useMobileLayout && style['modal-mask-fullscreen'], useMobileLayout && fixedModeClass),
-      container: classnames(style['modal-container'], useMobileLayout && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.container),
-      body: classnames(style['modal-antd-body'], useMobileLayout && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.body),
-      footer: classnames(style['modal-antd-footer'], propsClassNames == null ? void 0 : propsClassNames.footer),
-      header: classnames(style['modal-antd-header'], propsClassNames == null ? void 0 : propsClassNames.header),
-      content: classnames(style['modal-container'], useMobileLayout && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.content)
+      mask: classnames(propsClassNames == null ? void 0 : propsClassNames.mask, useMobileLayout && modalStyle['modal-mask-fullscreen'], useMobileLayout && fixedModeClass),
+      container: classnames(modalStyle['modal-container'], useMobileLayout && modalStyle['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.container),
+      body: classnames(modalStyle['modal-antd-body'], useMobileLayout && modalStyle['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.body),
+      footer: classnames(modalStyle['modal-antd-footer'], propsClassNames == null ? void 0 : propsClassNames.footer),
+      header: classnames(modalStyle['modal-antd-header'], propsClassNames == null ? void 0 : propsClassNames.header),
+      content: classnames(modalStyle['modal-container'], useMobileLayout && modalStyle['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.content)
     }),
     title: null,
     maskClosable: Object.prototype.hasOwnProperty.call(props, 'maskClosable') ? props.maskClosable : false,
@@ -389,8 +391,8 @@ const computedCommonProps = _ref => {
     footer: null,
     closable: false,
     onCancel: onClose,
-    className: classnames(className, style['modal'], style[size], {
-      [style['is-mobile']]: useMobileLayout
+    className: classnames(className, modalStyle['modal'], modalStyle[size], {
+      [modalStyle['is-mobile']]: useMobileLayout
     }),
     style: Object.assign({}, cssVars, propsStyle, useMobileLayout ? {
       '--kne-modal-viewport-gutter': '0px',
@@ -435,18 +437,18 @@ const Modal = withLocale(_ref2 => {
       mobileFullscreen = true,
       bodyScroll = true
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
   const hostRef = useRef(null);
   const {
     isMobile,
     fixedModeClass,
     getPopupContainer,
     anchorRef
-  } = useMobilePopupMount(_extends({}, viewportPopupMountOptions, {
-    getPopupContainer: wrapCustomGetContainer(getContainer)
+  } = useMobilePopupMount(_extends({}, viewportPopupMountOptions$1, {
+    getPopupContainer: wrapCustomGetContainer$2(getContainer)
   }));
   const getScrollElement = useScrollElement();
-  useLockParentScroll(!!open, getScrollElement);
+  useLockParentScroll$1(!!open, getScrollElement);
   const setAnchorRef = node => {
     hostRef.current = node;
     anchorRef(node);
@@ -459,7 +461,7 @@ const Modal = withLocale(_ref2 => {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("span", {
       ref: setAnchorRef,
-      className: style['modal-host'],
+      className: modalStyle['modal-host'],
       "aria-hidden": "true"
     }), /*#__PURE__*/jsx(Modal$1, _extends({}, computedCommonProps(Object.assign({}, props, {
       size,
@@ -481,7 +483,7 @@ const useModal = () => {
   const {
     resolveMount,
     getPopupContainer
-  } = useMobilePopupMount(viewportPopupMountOptions);
+  } = useMobilePopupMount(viewportPopupMountOptions$1);
   const getScrollElement = useScrollElement();
   return props => {
     const anchor = typeof document !== 'undefined' ? document.activeElement : null;
@@ -489,7 +491,7 @@ const useModal = () => {
       isMobile,
       fixedModeClass
     } = resolveMount(anchor);
-    const unlock = lockParentScroll(getScrollElement);
+    const unlock = lockParentScroll$1(getScrollElement);
     const api = {};
     const {
         afterClose: userAfterClose,
@@ -527,8 +529,793 @@ const useModal = () => {
   };
 };
 
+var style = {"kne-responsive-boundary":"kne-react-modal_qwqLr","kne-responsive-scroll":"kne-react-modal_vmry7","drawer":"kne-react-modal_cDsbq","small":"kne-react-modal_3QgK-","is-mobile":"kne-react-modal_FFf73","large":"kne-react-modal_8lell","drawer-body-inner":"kne-react-modal_xgX4D","drawer-antd-header":"kne-react-modal_3EUxr","drawer-antd-footer":"kne-react-modal_2G81L","drawer-antd-body":"kne-react-modal_eKVMu","drawer-outer":"kne-react-modal_P3Cw8","no-title":"kne-react-modal_upRot","no-footer":"kne-react-modal_j4sGu","no-padding":"kne-react-modal_pg37M","drawer-title":"kne-react-modal_-hw5V","drawer-body":"kne-react-modal_nJj7Y","body-scroll-off":"kne-react-modal_2Wh1H","modal-footer-extra":"kne-react-modal_M4hy9","drawer-close":"kne-react-modal_dVh38","drawer-host":"kne-react-modal_Nsxi9","drawer-host-render":"kne-react-modal_iGDWP","drawer-panel-host":"kne-react-modal_A0h-2","drawer-panel-body":"kne-react-modal_E4tcc","drawer-form-host":"kne-react-modal_vKkQW","drawer-wrapper-mobile":"kne-react-modal_vsxOs","drawer-wrapper-mobile-vertical":"kne-react-modal_HG8Vz","drawer-root-mobile":"kne-react-modal_G-qXe"};
+
+const _excluded$5 = ["children", "footer", "footerButtons", "className", "size", "placement", "title", "onClose", "onConfirm", "confirmText", "onCancel", "cancelText", "closable", "noPadding", "bodyScroll", "isMobile", "fixedModeClass", "rootClassName", "classNames", "styles", "style", "width", "height", "modalRender", "drawerRender"],
+  _excluded2$2 = ["dimension"],
+  _excluded3 = ["size", "placement", "getContainer", "open", "bodyScroll"];
+const DrawerLocaleRoot = withLocale(({
+  children
+}) => children);
+const VIEWPORT_EXAMPLE_SELECTORS$2 = ['.example-driver-device-scroll'];
+const boundaryPopupMountOptions$1 = {
+  cover: 'boundary',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$2
+};
+const renderWithOptions = (value, options) => {
+  if (typeof value === 'function') {
+    return value(options);
+  }
+  return value;
+};
+const wrapCustomGetContainer$1 = customGetContainer => {
+  if (!customGetContainer) {
+    return undefined;
+  }
+  if (typeof customGetContainer === 'function') {
+    return triggerNode => customGetContainer(triggerNode) || null;
+  }
+  return () => customGetContainer;
+};
+const isVerticalPlacement = placement => placement === 'top' || placement === 'bottom';
+const findParentDrawerMountHost = node => {
+  if (!node || typeof node.closest !== 'function') {
+    return null;
+  }
+  const parentRoot = node.closest('.ant-drawer-root');
+  if (!parentRoot) {
+    return null;
+  }
+  return parentRoot.parentElement || (typeof document !== 'undefined' ? document.body : null);
+};
+const resolveDrawerGetContainer = ({
+  customGetContainer,
+  getPopupContainer,
+  getHostNode
+}) => {
+  const wrappedCustom = wrapCustomGetContainer$1(customGetContainer);
+  return triggerNode => {
+    if (wrappedCustom) {
+      const custom = wrappedCustom(triggerNode);
+      if (custom) {
+        return custom;
+      }
+    }
+    const from = triggerNode || (typeof getHostNode === 'function' ? getHostNode() : null);
+    const nestedHost = findParentDrawerMountHost(from);
+    if (nestedHost) {
+      return nestedHost;
+    }
+    return getPopupContainer(triggerNode);
+  };
+};
+let parentScrollLockCount = 0;
+let parentScrollLocked = [];
+const lockParentScroll = getScrollElement => {
+  parentScrollLockCount += 1;
+  if (parentScrollLockCount === 1) {
+    const targets = [document.body];
+    const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
+    if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
+      targets.push(scrollEl);
+    }
+    parentScrollLocked = targets.map(el => {
+      const prev = {
+        overflow: el.style.overflow,
+        overscrollBehavior: el.style.overscrollBehavior
+      };
+      el.style.overflow = 'hidden';
+      el.style.overscrollBehavior = 'none';
+      return {
+        el,
+        prev
+      };
+    });
+  }
+  return () => {
+    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
+    if (parentScrollLockCount === 0) {
+      parentScrollLocked.forEach(({
+        el,
+        prev
+      }) => {
+        el.style.overflow = prev.overflow;
+        el.style.overscrollBehavior = prev.overscrollBehavior;
+      });
+      parentScrollLocked = [];
+    }
+  };
+};
+const useLockParentScroll = (enabled, getScrollElement) => {
+  useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    return lockParentScroll(getScrollElement);
+  }, [enabled, getScrollElement]);
+};
+const sizeStyleVars = (size, hasFooter) => {
+  const minBase = size === 'small' ? 300 : 500;
+  const chrome = 48 + (hasFooter ? 69 : 0);
+  const minHeight = `${Math.max(0, minBase - chrome)}px`;
+  const largeDim = typeof window !== 'undefined' ? `${Math.min(window.innerWidth - 64, 1500)}px` : '1500px';
+  if (size === 'large') {
+    return {
+      dimension: largeDim,
+      '--kne-drawer-body-min-height': minHeight
+    };
+  }
+  if (size === 'small') {
+    return {
+      dimension: '600px',
+      '--kne-drawer-body-min-height': minHeight
+    };
+  }
+  return {
+    dimension: '1000px',
+    '--kne-drawer-body-min-height': minHeight
+  };
+};
+const DrawerOuter = ({
+  title,
+  footer,
+  footerButtons,
+  noPadding,
+  onClose,
+  closable,
+  onConfirm,
+  onCancel,
+  children,
+  targetProps,
+  cancelText,
+  confirmText,
+  isMobile,
+  bodyScroll
+}) => {
+  const effectiveNoPadding = noPadding != null ? noPadding : bodyScroll === false;
+  const bodyInner = /*#__PURE__*/jsx("div", {
+    className: classnames(style['drawer-body-inner'], 'drawer-body-inner', 'modal-body-inner', {
+      [style['no-padding']]: effectiveNoPadding
+    }),
+    children: children
+  });
+  const bodyClassName = classnames(style['drawer-body'], 'drawer-body', 'modal-body');
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(style['drawer-outer'], 'drawer-container', {
+      [style['is-mobile']]: isMobile,
+      [style['no-title']]: !title,
+      [style['no-footer']]: footer === null && footerButtons === undefined,
+      [style['no-padding']]: effectiveNoPadding
+    }),
+    "data-testid": "react-drawer",
+    children: [closable === false ? null : /*#__PURE__*/jsx(Button, {
+      "data-testid": "react-drawer-close-btn",
+      className: classnames(style['drawer-close'], 'drawer-close'),
+      type: "text",
+      icon: /*#__PURE__*/jsx(CloseOutlined, {}),
+      onClick: e => {
+        e.stopPropagation();
+        onClose && onClose();
+      }
+    }), title ? /*#__PURE__*/jsx("div", {
+      className: classnames(style['drawer-title'], 'drawer-title', 'modal-title'),
+      children: title
+    }) : null, bodyScroll !== false ? /*#__PURE__*/jsx(SimpleBar, {
+      className: bodyClassName,
+      style: {
+        height: 'var(--kne-drawer-body-height)'
+      },
+      children: bodyInner
+    }) : /*#__PURE__*/jsx("div", {
+      className: classnames(bodyClassName, style['body-scroll-off']),
+      children: bodyInner
+    }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsx(Footer, {
+      footer: footer,
+      footerButtons: footerButtons,
+      onConfirm: onConfirm,
+      confirmText: confirmText,
+      onCancel: onCancel,
+      cancelText: cancelText,
+      onClose: onClose,
+      targetProps: targetProps,
+      isMobile: isMobile
+    })]
+  });
+};
+const computedDrawerProps = _ref => {
+  let {
+      children,
+      footer,
+      footerButtons,
+      className,
+      size = 'default',
+      placement = 'right',
+      title,
+      onClose,
+      onConfirm,
+      confirmText,
+      onCancel,
+      cancelText,
+      closable,
+      noPadding,
+      bodyScroll = true,
+      isMobile,
+      fixedModeClass,
+      rootClassName,
+      classNames: propsClassNames,
+      styles: propsStyles,
+      style: propsStyle,
+      width: propsWidth,
+      height: propsHeight,
+      modalRender,
+      drawerRender
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  const vertical = isVerticalPlacement(placement);
+  const hasFooter = !(footer === null && footerButtons === undefined);
+  const _sizeStyleVars = sizeStyleVars(size, hasFooter),
+    {
+      dimension
+    } = _sizeStyleVars,
+    cssVars = _objectWithoutPropertiesLoose(_sizeStyleVars, _excluded2$2);
+  const sizeProp = vertical ? {
+    height: propsHeight != null ? propsHeight : dimension
+  } : {
+    width: propsWidth != null ? propsWidth : dimension
+  };
+  const runChildren = options => {
+    const opts = Object.assign({}, options, {
+      close: onClose
+    });
+    const drawerPanel = /*#__PURE__*/jsx("div", {
+      className: classnames(style['drawer-panel-host'], 'drawer-panel-host'),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(style['drawer-panel-body'], 'drawer-panel-body'),
+        children: /*#__PURE__*/jsx(DrawerOuter, {
+          title: renderWithOptions(title, opts),
+          closable: closable,
+          onClose: onClose,
+          onConfirm: onConfirm,
+          confirmText: confirmText,
+          onCancel: onCancel,
+          cancelText: cancelText,
+          footerButtons: renderWithOptions(footerButtons, opts),
+          noPadding: noPadding,
+          footer: renderWithOptions(footer, opts),
+          targetProps: opts,
+          isMobile: isMobile,
+          bodyScroll: bodyScroll,
+          children: renderWithOptions(children, opts)
+        })
+      })
+    });
+    return typeof modalRender === 'function' ? modalRender(drawerPanel) : drawerPanel;
+  };
+  const mobileWrapperClass = isMobile ? vertical ? style['drawer-wrapper-mobile-vertical'] : style['drawer-wrapper-mobile'] : null;
+  const panelLayoutStyles = {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 0
+  };
+  return _extends({}, props, drawerRender ? {
+    drawerRender
+  } : null, {
+    placement
+  }, sizeProp, {
+    title: null,
+    maskClosable: Object.prototype.hasOwnProperty.call(props, 'maskClosable') ? props.maskClosable : false,
+    destroyOnHidden: true,
+    footer: null,
+    closable: false,
+    onClose,
+    rootClassName: classnames(rootClassName, isMobile && style['drawer-root-mobile'], isMobile && fixedModeClass, modalRender && style['drawer-form-host'], drawerRender && style['drawer-host-render']),
+    classNames: Object.assign({}, propsClassNames, {
+      header: classnames(style['drawer-antd-header'], propsClassNames == null ? void 0 : propsClassNames.header),
+      footer: classnames(style['drawer-antd-footer'], propsClassNames == null ? void 0 : propsClassNames.footer),
+      body: classnames(style['drawer-antd-body'], isMobile && style['is-mobile'], propsClassNames == null ? void 0 : propsClassNames.body),
+      wrapper: classnames(propsClassNames == null ? void 0 : propsClassNames.wrapper, mobileWrapperClass),
+      mask: classnames(propsClassNames == null ? void 0 : propsClassNames.mask, isMobile && fixedModeClass)
+    }),
+    className: classnames(className, style['drawer'], style[size], {
+      [style['is-mobile']]: isMobile
+    }),
+    style: Object.assign({}, cssVars, propsStyle, vertical ? {
+      '--kne-drawer-viewport-height': dimension
+    } : null),
+    styles: _extends({}, propsStyles, {
+      body: _extends({
+        padding: 0
+      }, propsStyles == null ? void 0 : propsStyles.body, {
+        flex: '1 1 auto',
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+      }, isMobile ? {
+        height: '100%',
+        maxHeight: '100%'
+      } : null),
+      section: _extends({}, panelLayoutStyles, propsStyles == null ? void 0 : propsStyles.section, propsStyles == null ? void 0 : propsStyles.content),
+      wrapper: _extends({}, propsStyles == null ? void 0 : propsStyles.wrapper, vertical ? {
+        height: 'var(--kne-drawer-viewport-height, 100vh)',
+        maxHeight: '100%'
+      } : {
+        height: '100%'
+      }, isMobile && !vertical ? {
+        width: 'var(--kne-viewport-width, 100vw)',
+        maxWidth: '100%'
+      } : null, isMobile && vertical ? {
+        height: 'var(--kne-viewport-height, 100vh)',
+        maxHeight: '100%'
+      } : null)
+    }),
+    children: /*#__PURE__*/jsx(DrawerLocaleRoot, {
+      children: runChildren({})
+    })
+  });
+};
+const Drawer = withLocale(_ref2 => {
+  let {
+      size = 'default',
+      placement = 'right',
+      getContainer,
+      open,
+      bodyScroll = true
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+  const hostRef = useRef(null);
+  const {
+    isMobile,
+    fixedModeClass,
+    getPopupContainer,
+    anchorRef
+  } = useMobilePopupMount(_extends({}, boundaryPopupMountOptions$1, {
+    getPopupContainer: wrapCustomGetContainer$1(getContainer)
+  }));
+  const getScrollElement = useScrollElement();
+  useLockParentScroll(!!open, getScrollElement);
+  const setAnchorRef = node => {
+    hostRef.current = node;
+    anchorRef(node);
+  };
+  const getDrawerContainer = resolveDrawerGetContainer({
+    customGetContainer: getContainer,
+    getPopupContainer,
+    getHostNode: () => hostRef.current
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("span", {
+      ref: setAnchorRef,
+      className: style['drawer-host'],
+      "aria-hidden": "true"
+    }), /*#__PURE__*/jsx(Drawer$1, _extends({}, computedDrawerProps(Object.assign({}, props, {
+      size,
+      placement,
+      isMobile,
+      open,
+      fixedModeClass,
+      bodyScroll
+    })), {
+      open: open,
+      getContainer: getDrawerContainer
+    }))]
+  });
+});
+
+const usePatchElement = () => {
+  const [elements, setElements] = useState([]);
+  const patchElement = useCallback(element => {
+    setElements(originElements => [...originElements, element]);
+    return () => {
+      setElements(originElements => originElements.filter(ele => ele !== element));
+    };
+  }, []);
+  return [elements, patchElement];
+};
+
+const _excluded$4 = ["getContainer", "afterClose"],
+  _excluded2$1 = ["afterClose", "getContainer"];
+const VIEWPORT_EXAMPLE_SELECTORS$1 = ['.example-driver-device-scroll'];
+const boundaryPopupMountOptions = {
+  cover: 'boundary',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$1
+};
+const wrapCustomGetContainer = customGetContainer => {
+  if (!customGetContainer) {
+    return undefined;
+  }
+  if (typeof customGetContainer === 'function') {
+    return triggerNode => customGetContainer(triggerNode) || null;
+  }
+  return () => customGetContainer;
+};
+const drawerApiRef = {
+  current: null
+};
+let hookDrawerUuid = 0;
+const HookDrawer = /*#__PURE__*/forwardRef(({
+  config,
+  afterClose: hookAfterClose
+}, ref) => {
+  const [open, setOpen] = useState(true);
+  const [innerConfig, setInnerConfig] = useState(config);
+  const hostRef = useRef(null);
+  const {
+    getPopupContainer,
+    anchorRef
+  } = useMobilePopupMount(_extends({}, boundaryPopupMountOptions, {
+    getPopupContainer: wrapCustomGetContainer(innerConfig.getContainer)
+  }));
+  const close = () => {
+    setOpen(false);
+  };
+  useImperativeHandle(ref, () => ({
+    destroy: close,
+    update: newConfig => {
+      setInnerConfig(origin => Object.assign({}, origin, typeof newConfig === 'function' ? newConfig(origin) : newConfig));
+    }
+  }));
+  const {
+      getContainer,
+      afterClose: userAfterClose
+    } = innerConfig,
+    restConfig = _objectWithoutPropertiesLoose(innerConfig, _excluded$4);
+  const mergedAfterClose = (...args) => {
+    hookAfterClose && hookAfterClose(...args);
+    userAfterClose && userAfterClose(...args);
+  };
+  const drawerProps = computedDrawerProps(_extends({}, restConfig, {
+    onClose: close,
+    afterClose: mergedAfterClose
+  }));
+  const getDrawerContainer = resolveDrawerGetContainer({
+    customGetContainer: getContainer,
+    getPopupContainer,
+    getHostNode: () => hostRef.current
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("span", {
+      ref: node => {
+        hostRef.current = node;
+        anchorRef(node);
+      },
+      "aria-hidden": "true",
+      style: {
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        overflow: 'hidden'
+      }
+    }), /*#__PURE__*/jsx(Drawer$1, _extends({}, drawerProps, {
+      open: open,
+      getContainer: getDrawerContainer
+    }))]
+  });
+});
+const ElementsHolder = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const [elements, patchElement] = usePatchElement();
+  useImperativeHandle(ref, () => ({
+    patchElement
+  }), [patchElement]);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: elements
+  });
+}));
+const useDrawerHolder = () => {
+  const holderRef = useRef(null);
+  const [actionQueue, setActionQueue] = useState([]);
+  const {
+    resolveMount,
+    getPopupContainer
+  } = useMobilePopupMount(boundaryPopupMountOptions);
+  const getScrollElement = useScrollElement();
+  useEffect(() => {
+    if (actionQueue.length) {
+      const cloneQueue = [...actionQueue];
+      cloneQueue.forEach(action => action());
+      setActionQueue([]);
+    }
+  }, [actionQueue]);
+  const drawer = useCallback(props => {
+    var _holderRef$current2;
+    hookDrawerUuid += 1;
+    const drawerRef = /*#__PURE__*/createRef();
+    const api = {};
+    let closeFunc;
+    let unlock = () => {};
+    const runOpen = () => {
+      var _holderRef$current;
+      const anchor = typeof document !== 'undefined' ? document.activeElement : null;
+      const {
+        isMobile,
+        fixedModeClass
+      } = resolveMount(anchor);
+      unlock = lockParentScroll(getScrollElement);
+      const {
+          afterClose: userAfterClose,
+          getContainer: customGetContainer
+        } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
+      const drawerEl = /*#__PURE__*/jsx(HookDrawer, {
+        ref: drawerRef,
+        config: _extends({}, restProps, {
+          isMobile,
+          fixedModeClass,
+          getContainer: customGetContainer,
+          onClose: () => api.close(),
+          afterClose: (...args) => {
+            unlock();
+            userAfterClose && userAfterClose(...args);
+          }
+        }),
+        afterClose: () => {
+          closeFunc && closeFunc();
+        }
+      }, `react-drawer-${hookDrawerUuid}`);
+      closeFunc = (_holderRef$current = holderRef.current) == null ? void 0 : _holderRef$current.patchElement(drawerEl);
+    };
+    if ((_holderRef$current2 = holderRef.current) != null && _holderRef$current2.patchElement) {
+      runOpen();
+    } else {
+      setActionQueue(prev => [...prev, runOpen]);
+    }
+    api.close = () => {
+      if (drawerRef.current) {
+        drawerRef.current.destroy();
+      } else {
+        setActionQueue(prev => [...prev, () => {
+          var _drawerRef$current;
+          return (_drawerRef$current = drawerRef.current) == null ? void 0 : _drawerRef$current.destroy();
+        }]);
+      }
+    };
+    return api;
+  }, [getScrollElement, resolveMount]);
+  return [drawer, /*#__PURE__*/jsx(ElementsHolder, {
+    ref: holderRef
+  }, "drawer-elements-holder")];
+};
+const DrawerContextHolder = () => {
+  const [drawer, contextHolder] = useDrawerHolder();
+  drawerApiRef.current = drawer;
+  return contextHolder;
+};
+const useDrawer = () => {
+  if (!drawerApiRef.current) {
+    throw new Error('useDrawer requires <DrawerContextHolder /> mounted inside <App> before calling useDrawer()');
+  }
+  return drawerApiRef.current;
+};
+
+var confirmStyle = {"kne-responsive-boundary":"kne-react-modal_6tGX5","kne-responsive-scroll":"kne-react-modal_DOfki","confirm-modal-wrap":"kne-react-modal_NZArM","is-mobile":"kne-react-modal_PJp65","is-danger":"kne-react-modal_LUqb9","title-icon":"kne-react-modal_WAuWk","titleRow":"kne-react-modal_oEIMf","contentRow":"kne-react-modal_VFlnj","titleIcon":"kne-react-modal_UDO1-","title-icon-confirm":"kne-react-modal_w4spp","title-icon-info":"kne-react-modal_9DX59","title-icon-success":"kne-react-modal_pFvwL","title-icon-warning":"kne-react-modal_Wv7-o","title-icon-error":"kne-react-modal_0cNi0","titleText":"kne-react-modal_vDt06","contentText":"kne-react-modal_i15SX","has-title":"kne-react-modal_reDXC","has-icon":"kne-react-modal_Mpjjc","is-mobile-block":"kne-react-modal_C7-hV"};
+
+const _excluded$3 = ["type", "icon", "title", "danger", "wrapClassName", "message", "confirmType", "getContainer", "onConfirm", "onCancel", "confirmText", "cancelText", "afterClose", "zIndex"],
+  _excluded2 = ["afterClose"];
+const ConfirmLocaleRoot = withLocale(({
+  children
+}) => children);
+const VIEWPORT_EXAMPLE_SELECTORS = ['.example-driver-device-scroll'];
+const viewportPopupMountOptions = {
+  cover: 'viewport',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS
+};
+const ICON_BY_TYPE = {
+  info: InfoCircleFilled,
+  confirm: ExclamationCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  success: CheckCircleFilled
+};
+const getIconKind = (type, confirmType) => type === 'confirm' ? confirmType : type;
+const shouldShowDefaultIcon = ({
+  type,
+  danger,
+  icon
+}) => {
+  if (icon === false || icon === null) {
+    return false;
+  }
+  if (type === 'confirm') {
+    return !!danger;
+  }
+  return ['info', 'success', 'warning', 'error'].includes(type);
+};
+const getConfirmIconNode = ({
+  type,
+  confirmType: _confirmType = 'info',
+  danger,
+  icon
+}) => {
+  if (icon) {
+    return icon;
+  }
+  if (!shouldShowDefaultIcon({
+    type,
+    danger,
+    icon
+  })) {
+    return null;
+  }
+  const kind = getIconKind(type, _confirmType);
+  const IconComponent = ICON_BY_TYPE[kind] || ICON_BY_TYPE.info;
+  return /*#__PURE__*/jsx(IconComponent, {
+    className: classnames(confirmStyle['title-icon'], confirmStyle[`title-icon-${kind}`])
+  });
+};
+const buildConfirmContent = ({
+  type,
+  confirmType,
+  title,
+  message,
+  danger,
+  icon,
+  isMobile
+}) => {
+  const iconNode = getConfirmIconNode({
+    type,
+    confirmType,
+    danger,
+    icon
+  });
+  const mobileClass = isMobile ? confirmStyle['is-mobile-block'] : null;
+  return {
+    title: title ? /*#__PURE__*/jsxs("div", {
+      className: classnames(confirmStyle.titleRow, mobileClass),
+      onClick: e => {
+        e.stopPropagation();
+      },
+      children: [iconNode ? /*#__PURE__*/jsx("span", {
+        className: confirmStyle.titleIcon,
+        children: iconNode
+      }) : null, /*#__PURE__*/jsx("div", {
+        className: confirmStyle.titleText,
+        children: title
+      })]
+    }) : null,
+    content: /*#__PURE__*/jsxs("div", {
+      className: classnames(confirmStyle.contentRow, mobileClass, {
+        [confirmStyle['has-title']]: title,
+        [confirmStyle['has-icon']]: !!iconNode && title
+      }),
+      children: [!title && iconNode ? /*#__PURE__*/jsx("span", {
+        className: confirmStyle.titleIcon,
+        children: iconNode
+      }) : null, /*#__PURE__*/jsx("div", {
+        className: confirmStyle.contentText,
+        children: message
+      })]
+    })
+  };
+};
+const mapConfirmProps = (props, {
+  isMobile,
+  fixedModeClass,
+  getPopupContainer,
+  anchor,
+  unlock,
+  userAfterClose
+}) => {
+  var _otherProps$className;
+  const _maskClosable$props = _extends({
+      maskClosable: false
+    }, props),
+    {
+      type = 'confirm',
+      icon,
+      title,
+      danger,
+      wrapClassName,
+      message,
+      confirmType = 'info',
+      getContainer: customGetContainer,
+      onConfirm,
+      onCancel,
+      confirmText,
+      cancelText,
+      afterClose,
+      zIndex
+    } = _maskClosable$props,
+    otherProps = _objectWithoutPropertiesLoose(_maskClosable$props, _excluded$3);
+  const {
+    title: confirmTitle,
+    content
+  } = buildConfirmContent({
+    type,
+    confirmType,
+    title,
+    message,
+    danger,
+    icon,
+    isMobile
+  });
+  return {
+    modalMethod: type,
+    config: _extends({}, otherProps, {
+      zIndex: zIndex != null ? zIndex : 1100,
+      okText: confirmText != null ? confirmText : otherProps.okText,
+      cancelText: cancelText != null ? cancelText : otherProps.cancelText,
+      onOk: onConfirm != null ? onConfirm : otherProps.onOk,
+      onCancel: onCancel != null ? onCancel : otherProps.onCancel,
+      getContainer: resolveModalGetContainer({
+        customGetContainer,
+        getPopupContainer,
+        getHostNode: () => anchor
+      }),
+      centered: true,
+      afterClose: (...args) => {
+        unlock();
+        userAfterClose && userAfterClose(...args);
+        afterClose && afterClose(...args);
+      },
+      icon: null,
+      classNames: {
+        mask: classnames(isMobile && modalStyle['modal-mask-fullscreen'], isMobile && fixedModeClass, (_otherProps$className = otherProps.classNames) == null ? void 0 : _otherProps$className.mask)
+      },
+      wrapClassName: classnames(modalStyle['modal-wrap'], confirmStyle['confirm-modal-wrap'], wrapClassName, {
+        [confirmStyle['is-danger']]: danger,
+        [confirmStyle['is-mobile']]: isMobile,
+        [modalStyle['modal-wrap-centered']]: isMobile,
+        [fixedModeClass]: isMobile
+      }),
+      title: confirmTitle ? /*#__PURE__*/jsx(ConfirmLocaleRoot, {
+        children: confirmTitle
+      }) : null,
+      content: /*#__PURE__*/jsx(ConfirmLocaleRoot, {
+        children: content
+      })
+    })
+  };
+};
+const useConfirmModal = () => {
+  const {
+    modal
+  } = App.useApp();
+  const {
+    resolveMount,
+    getPopupContainer
+  } = useMobilePopupMount(viewportPopupMountOptions);
+  const getScrollElement = useScrollElement();
+  return props => {
+    const anchor = typeof document !== 'undefined' ? document.activeElement : null;
+    const {
+      isMobile,
+      fixedModeClass
+    } = resolveMount(anchor);
+    const unlock = lockParentScroll$1(getScrollElement);
+    const api = {};
+    const {
+        afterClose: userAfterClose
+      } = props,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded2);
+    const {
+      modalMethod,
+      config
+    } = mapConfirmProps(_extends({}, restProps, {
+      onClose: () => api.close()
+    }), {
+      isMobile,
+      fixedModeClass,
+      getPopupContainer,
+      anchor,
+      unlock,
+      userAfterClose
+    });
+    if (typeof modal[modalMethod] === 'function') {
+      const {
+        destroy
+      } = modal[modalMethod](config);
+      api.close = destroy;
+    } else {
+      unlock();
+      api.close = () => {};
+    }
+    return api;
+  };
+};
+
 const _excluded$2 = ["className", "inset", "children"];
-const ModalScrollRegion = _ref => {
+const ScrollRegion = _ref => {
   let {
       className,
       inset = false,
@@ -546,7 +1333,7 @@ const ModalScrollRegion = _ref => {
 };
 
 const _excluded$1 = ["className", "destroyOnHidden"];
-const ModalTabsLayout = _ref => {
+const TabsLayout = _ref => {
   let {
       className,
       destroyOnHidden = true
@@ -572,7 +1359,7 @@ const resolveColStyle = width => {
     minWidth: 0
   };
 };
-const ModalColumnsLayout = _ref => {
+const ColumnsLayout = _ref => {
   let {
       widths,
       className,
@@ -593,10 +1380,12 @@ const ModalColumnsLayout = _ref => {
 
 const createModalRender = modalDefaults => hostProps => /*#__PURE__*/jsx(Modal, _extends({}, modalDefaults, hostProps));
 
+const createDrawerRender = drawerDefaults => hostProps => /*#__PURE__*/jsx(Drawer, _extends({}, drawerDefaults, hostProps));
+
 const modalClassNames = {
   stepsForm: 'react-modal-steps-form',
   splitter: 'react-modal-splitter'
 };
 
-export { ModalColumnsLayout, ModalScrollRegion, ModalTabsLayout, createModalRender, Modal as default, modalClassNames, useModal };
+export { ColumnsLayout, Drawer, DrawerContextHolder, ScrollRegion, TabsLayout, createDrawerRender, createModalRender, Modal as default, modalClassNames, useConfirmModal, useDrawer, useModal };
 //# sourceMappingURL=index.modern.js.map