@popsure/dirty-swan 0.62.3 → 0.63.0

package/dist/esm/components/modal/genericModal/index.js

@@ -1,15 +1,11 @@
-import { b as __assign, c as __rest } from '../../../tslib.es6-CVlKGIvp.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React from 'react';
-import React__default, { useState, useCallback, useEffect, createContext, PureComponent, useRef } from 'react';
-import { s as styleInject } from '../../../style-inject.es-tgCJW-Cu.js';
-import { c as classNames } from '../../../index-DLQEsiym.js';
+import { useState, useCallback, useEffect } from 'react';
+import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
+import { c as classNames } from '../../../index-6ea95111.js';
 import { Button } from '../../button/index.js';
 import XIcon from '../../icon/icons/X.js';
-import { g as getDefaultExportFromCjs } from '../../../_commonjsHelpers-BFTU3MAI.js';
-import { r as requirePropTypes } from '../../../index-DuaJiEiT.js';
+import '../../../tslib.es6-a39f91fc.js';
 import '../../icon/IconWrapper/IconWrapper.js';
-import '../../../index-hWqCLhoS.js';
 
 var useOnClose = function (onClose, isOpen, dismissable) {
     var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
@@ -31,9 +27,12 @@ var useOnClose = function (onClose, isOpen, dismissable) {
         handleOnClose();
     }, [dismissable, handleOnClose]);
     var handleEscKey = useCallback(function (e) {
-        if (e.code !== 'Escape' || !dismissable || !isOpen) {
+        if (e.code !== 'Escape')
+            return;
+        if (!dismissable)
+            return null;
+        if (!isOpen)
             return null;
-        }
         handleOnClose();
     }, [isOpen, dismissable, handleOnClose]);
     useEffect(function () {
@@ -63,1793 +62,29 @@ var useOnClose = function (onClose, isOpen, dismissable) {
         handleContainerClick: handleContainerClick,
         handleOnCloseAnimationEnded: handleOnCloseAnimationEnded,
         handleOnClose: handleOnClose,
-        handleOnOverlayClick: handleOnOverlayClick,
+        handleOnOverlayClick: handleOnOverlayClick
     };
 };
 
-var css_248z = "@keyframes style-module_fade-in__f_VRg {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n    visibility: hidden;\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n    visibility: visible;\n  }\n}\n@keyframes style-module_fade-out__1tEwS {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n    visibility: visible;\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n    visibility: hidden;\n  }\n}\n.style-module_overlay__2f00R {\n  z-index: 1000;\n  overflow: hidden;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__f_VRg 0.3s both;\n}\n.style-module_overlayClose__1p313 {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__1tEwS 0.3s both;\n}\n\n.style-module_header__284Rz {\n  position: sticky;\n  top: 0;\n}\n\n.style-module_closeButton__1AbX8 {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n}\n\n.style-module_body__QtlTn {\n  flex-grow: 1;\n  overflow: auto;\n  background: linear-gradient(#fff 30%, #fff), linear-gradient(#fff, #fff 70%), linear-gradient(#e7e7ed 30%, #e7e7ed), linear-gradient(#e7e7ed, #e7e7ed 70%);\n  background-repeat: no-repeat;\n  background-size: 100% 1px;\n  background-attachment: local, local, scroll, scroll;\n}\n\n.style-module_footer__Sh5bv {\n  position: sticky;\n  bottom: 0;\n  border-top: 1px solid #e7e7ed;\n}";
-var styles = {"overlay":"style-module_overlay__2f00R","overlayClose":"style-module_overlayClose__1p313","header":"style-module_header__284Rz","closeButton":"style-module_closeButton__1AbX8","body":"style-module_body__QtlTn","footer":"style-module_footer__Sh5bv"};
+var css_248z = "@keyframes style-module_fade-in__f_VRg {\n  0% {\n    background-color: rgba(0, 0, 0, 0);\n    visibility: hidden;\n  }\n  100% {\n    background-color: rgba(0, 0, 0, 0.3);\n    visibility: visible;\n  }\n}\n@keyframes style-module_fade-out__1tEwS {\n  from {\n    background-color: rgba(0, 0, 0, 0.3);\n    visibility: visible;\n  }\n  to {\n    background-color: rgba(0, 0, 0, 0);\n    visibility: hidden;\n  }\n}\n.style-module_overlay__2f00R {\n  z-index: 1000;\n  overflow: auto;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  animation: style-module_fade-in__f_VRg 0.3s both;\n}\n.style-module_overlayClose__1p313 {\n  animation-delay: 0.1s;\n  animation: style-module_fade-out__1tEwS 0.3s both;\n}\n\n.style-module_header__284Rz {\n  position: sticky;\n  top: 0;\n}\n\n.style-module_closeButton__1AbX8 {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n}\n\n.style-module_body__QtlTn {\n  flex-grow: 1;\n  overflow: auto;\n  background: linear-gradient(#fff 30%, #fff), linear-gradient(#fff, #fff 70%), linear-gradient(#ededf2 30%, #ededf2), linear-gradient(#ededf2, #ededf2 70%);\n  background-repeat: no-repeat;\n  background-size: 100% 1px;\n  background-attachment: local, local, scroll, scroll;\n}\n\n.style-module_footer__Sh5bv {\n  position: sticky;\n  bottom: 0;\n  border-top: 1px solid #ededf2;\n}";
+var styles = {"overlay":"style-module_overlay__2f00R","fade-in":"style-module_fade-in__f_VRg","overlayClose":"style-module_overlayClose__1p313","fade-out":"style-module_fade-out__1tEwS","header":"style-module_header__284Rz","closeButton":"style-module_closeButton__1AbX8","body":"style-module_body__QtlTn","footer":"style-module_footer__Sh5bv"};
 styleInject(css_248z);
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-var propTypesExports = requirePropTypes();
-var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
-
-/**
- * defines a focus group
- */
-var FOCUS_GROUP = 'data-focus-lock';
-/**
- * disables element discovery inside a group marked by key
- */
-var FOCUS_DISABLED = 'data-focus-lock-disabled';
-/**
- * allows uncontrolled focus within the marked area, effectively disabling focus lock for it's content
- */
-var FOCUS_ALLOW = 'data-no-focus-lock';
-/**
- * instructs autofocus engine to pick default autofocus inside a given node
- * can be set on the element or container
- */
-var FOCUS_AUTO = 'data-autofocus-inside';
-/**
- * instructs autofocus to ignore elements within a given node
- * can be set on the element or container
- */
-var FOCUS_NO_AUTOFOCUS = 'data-no-autofocus';
-
-/**
- * Assigns a value for a given ref, no matter of the ref format
- * @param {RefObject} ref - a callback function or ref object
- * @param value - a new value
- *
- * @see https://github.com/theKashey/use-callback-ref#assignref
- * @example
- * const refObject = useRef();
- * const refFn = (ref) => {....}
- *
- * assignRef(refObject, "refValue");
- * assignRef(refFn, "refValue");
- */
-function assignRef(ref, value) {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref) {
-        ref.current = value;
-    }
-    return ref;
-}
-
-/**
- * creates a MutableRef with ref change callback
- * @param initialValue - initial ref value
- * @param {Function} callback - a callback to run when value changes
- *
- * @example
- * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue);
- * ref.current = 1;
- * // prints 0 -> 1
- *
- * @see https://reactjs.org/docs/hooks-reference.html#useref
- * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref
- * @returns {MutableRefObject}
- */
-function useCallbackRef(initialValue, callback) {
-    var ref = useState(function () { return ({
-        // value
-        value: initialValue,
-        // last callback
-        callback: callback,
-        // "memoized" public interface
-        facade: {
-            get current() {
-                return ref.value;
-            },
-            set current(value) {
-                var last = ref.value;
-                if (last !== value) {
-                    ref.value = value;
-                    ref.callback(value, last);
-                }
-            },
-        },
-    }); })[0];
-    // update callback
-    ref.callback = callback;
-    return ref.facade;
-}
-
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-var currentValues = new WeakMap();
-/**
- * Merges two or more refs together providing a single interface to set their value
- * @param {RefObject|Ref} refs
- * @returns {MutableRefObject} - a new ref, which translates all changes to {refs}
- *
- * @see {@link mergeRefs} a version without buit-in memoization
- * @see https://github.com/theKashey/use-callback-ref#usemergerefs
- * @example
- * const Component = React.forwardRef((props, ref) => {
- *   const ownRef = useRef();
- *   const domRef = useMergeRefs([ref, ownRef]); // 👈 merge together
- *   return <div ref={domRef}>...</div>
- * }
- */
-function useMergeRefs(refs, defaultValue) {
-    var callbackRef = useCallbackRef(null, function (newValue) {
-        return refs.forEach(function (ref) { return assignRef(ref, newValue); });
-    });
-    // handle refs changes - added or removed
-    useIsomorphicLayoutEffect(function () {
-        var oldValue = currentValues.get(callbackRef);
-        if (oldValue) {
-            var prevRefs_1 = new Set(oldValue);
-            var nextRefs_1 = new Set(refs);
-            var current_1 = callbackRef.current;
-            prevRefs_1.forEach(function (ref) {
-                if (!nextRefs_1.has(ref)) {
-                    assignRef(ref, null);
-                }
-            });
-            nextRefs_1.forEach(function (ref) {
-                if (!prevRefs_1.has(ref)) {
-                    assignRef(ref, current_1);
-                }
-            });
-        }
-        currentValues.set(callbackRef, refs);
-    }, [refs]);
-    return callbackRef;
-}
-
-var hiddenGuard = {
-  width: '1px',
-  height: '0px',
-  padding: 0,
-  overflow: 'hidden',
-  position: 'fixed',
-  top: '1px',
-  left: '1px'
-};
-process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node
-} : {};
-
-function ItoI(a) {
-    return a;
-}
-function innerCreateMedium(defaults, middleware) {
-    if (middleware === void 0) { middleware = ItoI; }
-    var buffer = [];
-    var assigned = false;
-    var medium = {
-        read: function () {
-            if (assigned) {
-                throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');
-            }
-            if (buffer.length) {
-                return buffer[buffer.length - 1];
-            }
-            return defaults;
-        },
-        useMedium: function (data) {
-            var item = middleware(data, assigned);
-            buffer.push(item);
-            return function () {
-                buffer = buffer.filter(function (x) { return x !== item; });
-            };
-        },
-        assignSyncMedium: function (cb) {
-            assigned = true;
-            while (buffer.length) {
-                var cbs = buffer;
-                buffer = [];
-                cbs.forEach(cb);
-            }
-            buffer = {
-                push: function (x) { return cb(x); },
-                filter: function () { return buffer; },
-            };
-        },
-        assignMedium: function (cb) {
-            assigned = true;
-            var pendingQueue = [];
-            if (buffer.length) {
-                var cbs = buffer;
-                buffer = [];
-                cbs.forEach(cb);
-                pendingQueue = buffer;
-            }
-            var executeQueue = function () {
-                var cbs = pendingQueue;
-                pendingQueue = [];
-                cbs.forEach(cb);
-            };
-            var cycle = function () { return Promise.resolve().then(executeQueue); };
-            cycle();
-            buffer = {
-                push: function (x) {
-                    pendingQueue.push(x);
-                    cycle();
-                },
-                filter: function (filter) {
-                    pendingQueue = pendingQueue.filter(filter);
-                    return buffer;
-                },
-            };
-        },
-    };
-    return medium;
-}
-function createMedium(defaults, middleware) {
-    if (middleware === void 0) { middleware = ItoI; }
-    return innerCreateMedium(defaults, middleware);
-}
-// eslint-disable-next-line @typescript-eslint/ban-types
-function createSidecarMedium(options) {
-    if (options === void 0) { options = {}; }
-    var medium = innerCreateMedium(null);
-    medium.options = __assign({ async: true, ssr: false }, options);
-    return medium;
-}
-
-var mediumFocus = createMedium({}, function (_ref) {
-  var target = _ref.target,
-    currentTarget = _ref.currentTarget;
-  return {
-    target: target,
-    currentTarget: currentTarget
-  };
-});
-var mediumBlur = createMedium();
-var mediumEffect = createMedium();
-var mediumSidecar = createSidecarMedium({
-  async: true,
-  ssr: typeof document !== 'undefined'
-});
-
-var focusScope = /*#__PURE__*/createContext(undefined);
-
-var emptyArray = [];
-var FocusLock = /*#__PURE__*/React.forwardRef(function FocusLockUI(props, parentRef) {
-  var _extends2;
-  var _React$useState = React.useState(),
-    realObserved = _React$useState[0],
-    setObserved = _React$useState[1];
-  var observed = React.useRef();
-  var isActive = React.useRef(false);
-  var originalFocusedElement = React.useRef(null);
-  var _React$useState2 = React.useState({}),
-    update = _React$useState2[1];
-  var children = props.children,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$noFocusGuards = props.noFocusGuards,
-    noFocusGuards = _props$noFocusGuards === void 0 ? false : _props$noFocusGuards,
-    _props$persistentFocu = props.persistentFocus,
-    persistentFocus = _props$persistentFocu === void 0 ? false : _props$persistentFocu,
-    _props$crossFrame = props.crossFrame,
-    crossFrame = _props$crossFrame === void 0 ? true : _props$crossFrame,
-    _props$autoFocus = props.autoFocus,
-    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
-    allowTextSelection = props.allowTextSelection,
-    group = props.group,
-    className = props.className,
-    whiteList = props.whiteList,
-    hasPositiveIndices = props.hasPositiveIndices,
-    _props$shards = props.shards,
-    shards = _props$shards === void 0 ? emptyArray : _props$shards,
-    _props$as = props.as,
-    Container = _props$as === void 0 ? 'div' : _props$as,
-    _props$lockProps = props.lockProps,
-    containerProps = _props$lockProps === void 0 ? {} : _props$lockProps,
-    SideCar = props.sideCar,
-    _props$returnFocus = props.returnFocus,
-    shouldReturnFocus = _props$returnFocus === void 0 ? false : _props$returnFocus,
-    focusOptions = props.focusOptions,
-    onActivationCallback = props.onActivation,
-    onDeactivationCallback = props.onDeactivation;
-  var _React$useState3 = React.useState({}),
-    id = _React$useState3[0];
-  var onActivation = React.useCallback(function (_ref) {
-    var captureFocusRestore = _ref.captureFocusRestore;
-    if (!originalFocusedElement.current) {
-      var _document;
-      var activeElement = (_document = document) == null ? void 0 : _document.activeElement;
-      originalFocusedElement.current = activeElement;
-      if (activeElement !== document.body) {
-        originalFocusedElement.current = captureFocusRestore(activeElement);
-      }
-    }
-    if (observed.current && onActivationCallback) {
-      onActivationCallback(observed.current);
-    }
-    isActive.current = true;
-    update();
-  }, [onActivationCallback]);
-  var onDeactivation = React.useCallback(function () {
-    isActive.current = false;
-    if (onDeactivationCallback) {
-      onDeactivationCallback(observed.current);
-    }
-    update();
-  }, [onDeactivationCallback]);
-  var returnFocus = React.useCallback(function (allowDefer) {
-    var focusRestore = originalFocusedElement.current;
-    if (focusRestore) {
-      var returnFocusTo = (typeof focusRestore === 'function' ? focusRestore() : focusRestore) || document.body;
-      var howToReturnFocus = typeof shouldReturnFocus === 'function' ? shouldReturnFocus(returnFocusTo) : shouldReturnFocus;
-      if (howToReturnFocus) {
-        var returnFocusOptions = typeof howToReturnFocus === 'object' ? howToReturnFocus : undefined;
-        originalFocusedElement.current = null;
-        if (allowDefer) {
-          Promise.resolve().then(function () {
-            return returnFocusTo.focus(returnFocusOptions);
-          });
-        } else {
-          returnFocusTo.focus(returnFocusOptions);
-        }
-      }
-    }
-  }, [shouldReturnFocus]);
-  var onFocus = React.useCallback(function (event) {
-    if (isActive.current) {
-      mediumFocus.useMedium(event);
-    }
-  }, []);
-  var onBlur = mediumBlur.useMedium;
-  var setObserveNode = React.useCallback(function (newObserved) {
-    if (observed.current !== newObserved) {
-      observed.current = newObserved;
-      setObserved(newObserved);
-    }
-  }, []);
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof allowTextSelection !== 'undefined') {
-      console.warn('React-Focus-Lock: allowTextSelection is deprecated and enabled by default');
-    }
-    React.useEffect(function () {
-      if (!observed.current && typeof Container !== 'string') {
-        console.error('FocusLock: could not obtain ref to internal node');
-      }
-    }, []);
-  }
-  var lockProps = _extends((_extends2 = {}, _extends2[FOCUS_DISABLED] = disabled && 'disabled', _extends2[FOCUS_GROUP] = group, _extends2), containerProps);
-  var hasLeadingGuards = noFocusGuards !== true;
-  var hasTailingGuards = hasLeadingGuards && noFocusGuards !== 'tail';
-  var mergedRef = useMergeRefs([parentRef, setObserveNode]);
-  var focusScopeValue = React.useMemo(function () {
-    return {
-      observed: observed,
-      shards: shards,
-      enabled: !disabled,
-      active: isActive.current
-    };
-  }, [disabled, isActive.current, shards, realObserved]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasLeadingGuards && [
-  /*#__PURE__*/
-  React.createElement("div", {
-    key: "guard-first",
-    "data-focus-guard": true,
-    tabIndex: disabled ? -1 : 0,
-    style: hiddenGuard
-  }), hasPositiveIndices ? /*#__PURE__*/React.createElement("div", {
-    key: "guard-nearest",
-    "data-focus-guard": true,
-    tabIndex: disabled ? -1 : 1,
-    style: hiddenGuard
-  }) : null], !disabled && /*#__PURE__*/React.createElement(SideCar, {
-    id: id,
-    sideCar: mediumSidecar,
-    observed: realObserved,
-    disabled: disabled,
-    persistentFocus: persistentFocus,
-    crossFrame: crossFrame,
-    autoFocus: autoFocus,
-    whiteList: whiteList,
-    shards: shards,
-    onActivation: onActivation,
-    onDeactivation: onDeactivation,
-    returnFocus: returnFocus,
-    focusOptions: focusOptions,
-    noFocusGuards: noFocusGuards
-  }), /*#__PURE__*/React.createElement(Container, _extends({
-    ref: mergedRef
-  }, lockProps, {
-    className: className,
-    onBlur: onBlur,
-    onFocus: onFocus
-  }), /*#__PURE__*/React.createElement(focusScope.Provider, {
-    value: focusScopeValue
-  }, children)), hasTailingGuards && /*#__PURE__*/React.createElement("div", {
-    "data-focus-guard": true,
-    tabIndex: disabled ? -1 : 0,
-    style: hiddenGuard
-  }));
-});
-FocusLock.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: propTypesExports.node,
-  disabled: propTypesExports.bool,
-  returnFocus: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.object, propTypesExports.func]),
-  focusOptions: propTypesExports.object,
-  noFocusGuards: propTypesExports.bool,
-  hasPositiveIndices: propTypesExports.bool,
-  allowTextSelection: propTypesExports.bool,
-  autoFocus: propTypesExports.bool,
-  persistentFocus: propTypesExports.bool,
-  crossFrame: propTypesExports.bool,
-  group: propTypesExports.string,
-  className: propTypesExports.string,
-  whiteList: propTypesExports.func,
-  shards: propTypesExports.arrayOf(propTypesExports.any),
-  as: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.func, propTypesExports.object]),
-  lockProps: propTypesExports.object,
-  onActivation: propTypesExports.func,
-  onDeactivation: propTypesExports.func,
-  sideCar: propTypesExports.any.isRequired
-} : {};
-
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
-}
-
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-}
-
-function _typeof(o) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
-
-function toPrimitive(t, r) {
-  if ("object" != _typeof(t) || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r);
-    if ("object" != _typeof(i)) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-
-function toPropertyKey(t) {
-  var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : i + "";
-}
-
-function _defineProperty(e, r, t) {
-  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-    value: t,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }) : e[r] = t, e;
-}
-
-function withSideEffect(reducePropsToState, handleStateChangeOnClient) {
-  if (process.env.NODE_ENV !== "production") {
-    if (typeof reducePropsToState !== 'function') {
-      throw new Error('Expected reducePropsToState to be a function.');
-    }
-
-    if (typeof handleStateChangeOnClient !== 'function') {
-      throw new Error('Expected handleStateChangeOnClient to be a function.');
-    }
-  }
-
-  function getDisplayName(WrappedComponent) {
-    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
-  }
-
-  return function wrap(WrappedComponent) {
-    if (process.env.NODE_ENV !== "production") {
-      if (typeof WrappedComponent !== 'function') {
-        throw new Error('Expected WrappedComponent to be a React component.');
-      }
-    }
-
-    var mountedInstances = [];
-    var state;
-
-    function emitChange() {
-      state = reducePropsToState(mountedInstances.map(function (instance) {
-        return instance.props;
-      }));
-      handleStateChangeOnClient(state);
-    }
-
-    var SideEffect = /*#__PURE__*/function (_PureComponent) {
-      _inheritsLoose(SideEffect, _PureComponent);
-
-      function SideEffect() {
-        return _PureComponent.apply(this, arguments) || this;
-      }
-
-      // Try to use displayName of wrapped component
-      SideEffect.peek = function peek() {
-        return state;
-      };
-
-      var _proto = SideEffect.prototype;
-
-      _proto.componentDidMount = function componentDidMount() {
-        mountedInstances.push(this);
-        emitChange();
-      };
-
-      _proto.componentDidUpdate = function componentDidUpdate() {
-        emitChange();
-      };
-
-      _proto.componentWillUnmount = function componentWillUnmount() {
-        var index = mountedInstances.indexOf(this);
-        mountedInstances.splice(index, 1);
-        emitChange();
-      };
-
-      _proto.render = function render() {
-        return /*#__PURE__*/React__default.createElement(WrappedComponent, this.props);
-      };
-
-      return SideEffect;
-    }(PureComponent);
-
-    _defineProperty(SideEffect, "displayName", "SideEffect(" + getDisplayName(WrappedComponent) + ")");
-
-    return SideEffect;
-  };
-}
-
-/*
-IE11 support
- */
-var toArray = function (a) {
-    var ret = Array(a.length);
-    for (var i = 0; i < a.length; ++i) {
-        ret[i] = a[i];
-    }
-    return ret;
-};
-var asArray = function (a) { return (Array.isArray(a) ? a : [a]); };
-var getFirst = function (a) { return (Array.isArray(a) ? a[0] : a); };
-
-var isElementHidden = function (node) {
-    // we can measure only "elements"
-    // consider others as "visible"
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-        return false;
-    }
-    var computedStyle = window.getComputedStyle(node, null);
-    if (!computedStyle || !computedStyle.getPropertyValue) {
-        return false;
-    }
-    return (computedStyle.getPropertyValue('display') === 'none' || computedStyle.getPropertyValue('visibility') === 'hidden');
-};
-var getParentNode = function (node) {
-    // DOCUMENT_FRAGMENT_NODE can also point on ShadowRoot. In this case .host will point on the next node
-    return node.parentNode && node.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
-        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            node.parentNode.host
-        : node.parentNode;
-};
-var isTopNode = function (node) {
-    // @ts-ignore
-    return node === document || (node && node.nodeType === Node.DOCUMENT_NODE);
-};
-var isInert = function (node) { return node.hasAttribute('inert'); };
-/**
- * @see https://github.com/testing-library/jest-dom/blob/main/src/to-be-visible.js
- */
-var isVisibleUncached = function (node, checkParent) {
-    return !node || isTopNode(node) || (!isElementHidden(node) && !isInert(node) && checkParent(getParentNode(node)));
-};
-var isVisibleCached = function (visibilityCache, node) {
-    var cached = visibilityCache.get(node);
-    if (cached !== undefined) {
-        return cached;
-    }
-    var result = isVisibleUncached(node, isVisibleCached.bind(undefined, visibilityCache));
-    visibilityCache.set(node, result);
-    return result;
-};
-var isAutoFocusAllowedUncached = function (node, checkParent) {
-    return node && !isTopNode(node) ? (isAutoFocusAllowed(node) ? checkParent(getParentNode(node)) : false) : true;
-};
-var isAutoFocusAllowedCached = function (cache, node) {
-    var cached = cache.get(node);
-    if (cached !== undefined) {
-        return cached;
-    }
-    var result = isAutoFocusAllowedUncached(node, isAutoFocusAllowedCached.bind(undefined, cache));
-    cache.set(node, result);
-    return result;
-};
-var getDataset = function (node) {
-    // @ts-ignore
-    return node.dataset;
-};
-var isHTMLButtonElement = function (node) { return node.tagName === 'BUTTON'; };
-var isHTMLInputElement = function (node) { return node.tagName === 'INPUT'; };
-var isRadioElement = function (node) {
-    return isHTMLInputElement(node) && node.type === 'radio';
-};
-var notHiddenInput = function (node) {
-    return !((isHTMLInputElement(node) || isHTMLButtonElement(node)) && (node.type === 'hidden' || node.disabled));
-};
-var isAutoFocusAllowed = function (node) {
-    var attribute = node.getAttribute(FOCUS_NO_AUTOFOCUS);
-    return ![true, 'true', ''].includes(attribute);
-};
-var isGuard = function (node) { var _a; return Boolean(node && ((_a = getDataset(node)) === null || _a === void 0 ? void 0 : _a.focusGuard)); };
-var isNotAGuard = function (node) { return !isGuard(node); };
-var isDefined = function (x) { return Boolean(x); };
-
-var tabSort = function (a, b) {
-    var aTab = Math.max(0, a.tabIndex);
-    var bTab = Math.max(0, b.tabIndex);
-    var tabDiff = aTab - bTab;
-    var indexDiff = a.index - b.index;
-    if (tabDiff) {
-        if (!aTab) {
-            return 1;
-        }
-        if (!bTab) {
-            return -1;
-        }
-    }
-    return tabDiff || indexDiff;
-};
-var getTabIndex = function (node) {
-    if (node.tabIndex < 0) {
-        // all "focusable" elements are already preselected
-        // but some might have implicit negative tabIndex
-        // return 0 for <audio without tabIndex attribute - it is "tabbable"
-        if (!node.hasAttribute('tabindex')) {
-            return 0;
-        }
-    }
-    return node.tabIndex;
-};
-var orderByTabIndex = function (nodes, filterNegative, keepGuards) {
-    return toArray(nodes)
-        .map(function (node, index) {
-        var tabIndex = getTabIndex(node);
-        return {
-            node: node,
-            index: index,
-            tabIndex: keepGuards && tabIndex === -1 ? ((node.dataset || {}).focusGuard ? 0 : -1) : tabIndex,
-        };
-    })
-        .filter(function (data) { return !filterNegative || data.tabIndex >= 0; })
-        .sort(tabSort);
-};
-
-/**
- * list of the object to be considered as focusable
- */
-var tabbables = [
-    'button:enabled',
-    'select:enabled',
-    'textarea:enabled',
-    'input:enabled',
-    // elements with explicit roles will also use explicit tabindex
-    // '[role="button"]',
-    'a[href]',
-    'area[href]',
-    'summary',
-    'iframe',
-    'object',
-    'embed',
-    'audio[controls]',
-    'video[controls]',
-    '[tabindex]',
-    '[contenteditable]',
-    '[autofocus]',
-];
-
-var queryTabbables = tabbables.join(',');
-var queryGuardTabbables = "".concat(queryTabbables, ", [data-focus-guard]");
-var getFocusablesWithShadowDom = function (parent, withGuards) {
-    return toArray((parent.shadowRoot || parent).children).reduce(function (acc, child) {
-        return acc.concat(child.matches(withGuards ? queryGuardTabbables : queryTabbables) ? [child] : [], getFocusablesWithShadowDom(child));
-    }, []);
-};
-var getFocusablesWithIFrame = function (parent, withGuards) {
-    var _a;
-    // contentDocument of iframe will be null if current origin cannot access it
-    if (parent instanceof HTMLIFrameElement && ((_a = parent.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
-        return getFocusables([parent.contentDocument.body], withGuards);
-    }
-    return [parent];
-};
-var getFocusables = function (parents, withGuards) {
-    return parents.reduce(function (acc, parent) {
-        var _a;
-        var focusableWithShadowDom = getFocusablesWithShadowDom(parent, withGuards);
-        var focusableWithIframes = (_a = []).concat.apply(_a, focusableWithShadowDom.map(function (node) { return getFocusablesWithIFrame(node, withGuards); }));
-        return acc.concat(
-        // add all tabbables inside and within shadow DOMs in DOM order
-        focusableWithIframes, 
-        // add if node is tabbable itself
-        parent.parentNode
-            ? toArray(parent.parentNode.querySelectorAll(queryTabbables)).filter(function (node) { return node === parent; })
-            : []);
-    }, []);
-};
-/**
- * return a list of focusable nodes within an area marked as "auto-focusable"
- * @param parent
- */
-var getParentAutofocusables = function (parent) {
-    var parentFocus = parent.querySelectorAll("[".concat(FOCUS_AUTO, "]"));
-    return toArray(parentFocus)
-        .map(function (node) { return getFocusables([node]); })
-        .reduce(function (acc, nodes) { return acc.concat(nodes); }, []);
-};
-
-/**
- * given list of focusable elements keeps the ones user can interact with
- * @param nodes
- * @param visibilityCache
- */
-var filterFocusable = function (nodes, visibilityCache) {
-    return toArray(nodes)
-        .filter(function (node) { return isVisibleCached(visibilityCache, node); })
-        .filter(function (node) { return notHiddenInput(node); });
-};
-var filterAutoFocusable = function (nodes, cache) {
-    if (cache === void 0) { cache = new Map(); }
-    return toArray(nodes).filter(function (node) { return isAutoFocusAllowedCached(cache, node); });
-};
-/**
- * !__WARNING__! Low level API.
- * @returns all tabbable nodes
- *
- * @see {@link getFocusableNodes} to get any focusable element
- *
- * @param topNodes - array of top level HTMLElements to search inside
- * @param visibilityCache - an cache to store intermediate measurements. Expected to be a fresh `new Map` on every call
- */
-var getTabbableNodes = function (topNodes, visibilityCache, withGuards) {
-    return orderByTabIndex(filterFocusable(getFocusables(topNodes, withGuards), visibilityCache), true, withGuards);
-};
-/**
- * !__WARNING__! Low level API.
- *
- * @returns anything "focusable", not only tabbable. The difference is in `tabIndex=-1`
- * (without guards, as long as they are not expected to be ever focused)
- *
- * @see {@link getTabbableNodes} to get only tabble nodes element
- *
- * @param topNodes - array of top level HTMLElements to search inside
- * @param visibilityCache - an cache to store intermediate measurements. Expected to be a fresh `new Map` on every call
- */
-var getFocusableNodes = function (topNodes, visibilityCache) {
-    return orderByTabIndex(filterFocusable(getFocusables(topNodes), visibilityCache), false);
-};
-/**
- * return list of nodes which are expected to be auto-focused
- * @param topNode
- * @param visibilityCache
- */
-var parentAutofocusables = function (topNode, visibilityCache) {
-    return filterFocusable(getParentAutofocusables(topNode), visibilityCache);
-};
-/*
- * Determines if element is contained in scope, including nested shadow DOMs
- */
-var contains = function (scope, element) {
-    if (scope.shadowRoot) {
-        return contains(scope.shadowRoot, element);
-    }
-    else {
-        if (Object.getPrototypeOf(scope).contains !== undefined &&
-            Object.getPrototypeOf(scope).contains.call(scope, element)) {
-            return true;
-        }
-        return toArray(scope.children).some(function (child) {
-            var _a;
-            if (child instanceof HTMLIFrameElement) {
-                var iframeBody = (_a = child.contentDocument) === null || _a === void 0 ? void 0 : _a.body;
-                if (iframeBody) {
-                    return contains(iframeBody, element);
-                }
-                return false;
-            }
-            return contains(child, element);
-        });
-    }
-};
-
-/**
- * in case of multiple nodes nested inside each other
- * keeps only top ones
- * this is O(nlogn)
- * @param nodes
- * @returns {*}
- */
-var filterNested = function (nodes) {
-    var contained = new Set();
-    var l = nodes.length;
-    for (var i = 0; i < l; i += 1) {
-        for (var j = i + 1; j < l; j += 1) {
-            var position = nodes[i].compareDocumentPosition(nodes[j]);
-            /* eslint-disable no-bitwise */
-            if ((position & Node.DOCUMENT_POSITION_CONTAINED_BY) > 0) {
-                contained.add(j);
-            }
-            if ((position & Node.DOCUMENT_POSITION_CONTAINS) > 0) {
-                contained.add(i);
-            }
-            /* eslint-enable */
-        }
-    }
-    return nodes.filter(function (_, index) { return !contained.has(index); });
-};
-/**
- * finds top most parent for a node
- * @param node
- * @returns {*}
- */
-var getTopParent = function (node) {
-    return node.parentNode ? getTopParent(node.parentNode) : node;
-};
-/**
- * returns all "focus containers" inside a given node
- * @param node - node or nodes to look inside
- * @returns Element[]
- */
-var getAllAffectedNodes = function (node) {
-    var nodes = asArray(node);
-    return nodes.filter(Boolean).reduce(function (acc, currentNode) {
-        var group = currentNode.getAttribute(FOCUS_GROUP);
-        acc.push.apply(acc, (group
-            ? filterNested(toArray(getTopParent(currentNode).querySelectorAll("[".concat(FOCUS_GROUP, "=\"").concat(group, "\"]:not([").concat(FOCUS_DISABLED, "=\"disabled\"])"))))
-            : [currentNode]));
-        return acc;
-    }, []);
-};
-
-var safeProbe = function (cb) {
-    try {
-        return cb();
-    }
-    catch (e) {
-        return undefined;
-    }
-};
-
-/**
- * returns active element from document or from nested shadowdoms
- */
-/**
- * returns current active element. If the active element is a "container" itself(shadowRoot or iframe) returns active element inside it
- * @param [inDocument]
- */
-var getActiveElement = function (inDocument) {
-    if (inDocument === void 0) { inDocument = document; }
-    if (!inDocument || !inDocument.activeElement) {
-        return undefined;
-    }
-    var activeElement = inDocument.activeElement;
-    return (activeElement.shadowRoot
-        ? getActiveElement(activeElement.shadowRoot)
-        : activeElement instanceof HTMLIFrameElement && safeProbe(function () { return activeElement.contentWindow.document; })
-            ? getActiveElement(activeElement.contentWindow.document)
-            : activeElement);
-};
-
-var focusInFrame = function (frame, activeElement) { return frame === activeElement; };
-var focusInsideIframe = function (topNode, activeElement) {
-    return Boolean(toArray(topNode.querySelectorAll('iframe')).some(function (node) { return focusInFrame(node, activeElement); }));
-};
-/**
- * @returns {Boolean} true, if the current focus is inside given node or nodes.
- * Supports nodes hidden inside shadowDom
- */
-var focusInside = function (topNode, activeElement) {
-    // const activeElement = document && getActiveElement();
-    if (activeElement === void 0) { activeElement = getActiveElement(getFirst(topNode).ownerDocument); }
-    if (!activeElement || (activeElement.dataset && activeElement.dataset.focusGuard)) {
-        return false;
-    }
-    return getAllAffectedNodes(topNode).some(function (node) {
-        return contains(node, activeElement) || focusInsideIframe(node, activeElement);
-    });
-};
-
-/**
- * checks if focus is hidden FROM the focus-lock
- * ie contained inside a node focus-lock shall ignore
- *
- * This is a utility function coupled with {@link FOCUS_ALLOW} constant
- *
- * @returns {boolean} focus is currently is in "allow" area
- */
-var focusIsHidden = function (inDocument) {
-    if (inDocument === void 0) { inDocument = document; }
-    var activeElement = getActiveElement(inDocument);
-    if (!activeElement) {
-        return false;
-    }
-    // this does not support setting FOCUS_ALLOW within shadow dom
-    return toArray(inDocument.querySelectorAll("[".concat(FOCUS_ALLOW, "]"))).some(function (node) { return contains(node, activeElement); });
-};
-
-var findSelectedRadio = function (node, nodes) {
-    return nodes
-        .filter(isRadioElement)
-        .filter(function (el) { return el.name === node.name; })
-        .filter(function (el) { return el.checked; })[0] || node;
-};
-var correctNode = function (node, nodes) {
-    if (isRadioElement(node) && node.name) {
-        return findSelectedRadio(node, nodes);
-    }
-    return node;
-};
-/**
- * giving a set of radio inputs keeps only selected (tabbable) ones
- * @param nodes
- */
-var correctNodes = function (nodes) {
-    // IE11 has no Set(array) constructor
-    var resultSet = new Set();
-    nodes.forEach(function (node) { return resultSet.add(correctNode(node, nodes)); });
-    // using filter to support IE11
-    return nodes.filter(function (node) { return resultSet.has(node); });
-};
-
-var pickFirstFocus = function (nodes) {
-    if (nodes[0] && nodes.length > 1) {
-        return correctNode(nodes[0], nodes);
-    }
-    return nodes[0];
-};
-var pickFocusable = function (nodes, node) {
-    return nodes.indexOf(correctNode(node, nodes));
-};
-
-var NEW_FOCUS = 'NEW_FOCUS';
-/**
- * Main solver for the "find next focus" question
- * @param innerNodes - used to control "return focus"
- * @param innerTabbables - used to control "autofocus"
- * @param outerNodes
- * @param activeElement
- * @param lastNode
- * @returns {number|string|undefined|*}
- */
-var newFocus = function (innerNodes, innerTabbables, outerNodes, activeElement, lastNode) {
-    var cnt = innerNodes.length;
-    var firstFocus = innerNodes[0];
-    var lastFocus = innerNodes[cnt - 1];
-    var isOnGuard = isGuard(activeElement);
-    // focus is inside
-    if (activeElement && innerNodes.indexOf(activeElement) >= 0) {
-        return undefined;
-    }
-    var activeIndex = activeElement !== undefined ? outerNodes.indexOf(activeElement) : -1;
-    var lastIndex = lastNode ? outerNodes.indexOf(lastNode) : activeIndex;
-    var lastNodeInside = lastNode ? innerNodes.indexOf(lastNode) : -1;
-    // no active focus (or focus is on the body)
-    if (activeIndex === -1) {
-        // known fallback
-        if (lastNodeInside !== -1) {
-            return lastNodeInside;
-        }
-        return NEW_FOCUS;
-    }
-    // new focus, nothing to calculate
-    if (lastNodeInside === -1) {
-        return NEW_FOCUS;
-    }
-    var indexDiff = activeIndex - lastIndex;
-    var firstNodeIndex = outerNodes.indexOf(firstFocus);
-    var lastNodeIndex = outerNodes.indexOf(lastFocus);
-    var correctedNodes = correctNodes(outerNodes);
-    var correctedIndex = activeElement !== undefined ? correctedNodes.indexOf(activeElement) : -1;
-    var correctedIndexDiff = correctedIndex - (lastNode ? correctedNodes.indexOf(lastNode) : activeIndex);
-    // old focus
-    if (!indexDiff && lastNodeInside >= 0) {
-        return lastNodeInside;
-    }
-    // no tabbable elements, autofocus is not possible
-    if (innerTabbables.length === 0) {
-        // an edge case with no tabbable elements
-        // return the last focusable one
-        // with some probability this will prevent focus from cycling across the lock, but there is no tabbale elements to cycle to
-        return lastNodeInside;
-    }
-    var returnFirstNode = pickFocusable(innerNodes, innerTabbables[0]);
-    var returnLastNode = pickFocusable(innerNodes, innerTabbables[innerTabbables.length - 1]);
-    // first element
-    if (activeIndex <= firstNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {
-        return returnLastNode;
-    }
-    // last element
-    if (activeIndex >= lastNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {
-        return returnFirstNode;
-    }
-    // jump out, but not on the guard
-    if (indexDiff && Math.abs(correctedIndexDiff) > 1) {
-        return lastNodeInside;
-    }
-    // focus above lock
-    if (activeIndex <= firstNodeIndex) {
-        return returnLastNode;
-    }
-    // focus below lock
-    if (activeIndex > lastNodeIndex) {
-        return returnFirstNode;
-    }
-    // index is inside tab order, but outside Lock
-    if (indexDiff) {
-        if (Math.abs(indexDiff) > 1) {
-            return lastNodeInside;
-        }
-        return (cnt + lastNodeInside + indexDiff) % cnt;
-    }
-    // do nothing
-    return undefined;
-};
-
-var findAutoFocused = function (autoFocusables) {
-    return function (node) {
-        var _a;
-        var autofocus = (_a = getDataset(node)) === null || _a === void 0 ? void 0 : _a.autofocus;
-        return (
-        // @ts-expect-error
-        node.autofocus ||
-            //
-            (autofocus !== undefined && autofocus !== 'false') ||
-            //
-            autoFocusables.indexOf(node) >= 0);
-    };
-};
-var pickAutofocus = function (nodesIndexes, orderedNodes, groups) {
-    var nodes = nodesIndexes.map(function (_a) {
-        var node = _a.node;
-        return node;
-    });
-    var autoFocusable = filterAutoFocusable(nodes.filter(findAutoFocused(groups)));
-    if (autoFocusable && autoFocusable.length) {
-        return pickFirstFocus(autoFocusable);
-    }
-    return pickFirstFocus(filterAutoFocusable(orderedNodes));
-};
-
-var getParents = function (node, parents) {
-    if (parents === void 0) { parents = []; }
-    parents.push(node);
-    if (node.parentNode) {
-        getParents(node.parentNode.host || node.parentNode, parents);
-    }
-    return parents;
-};
-/**
- * finds a parent for both nodeA and nodeB
- * @param nodeA
- * @param nodeB
- * @returns {boolean|*}
- */
-var getCommonParent = function (nodeA, nodeB) {
-    var parentsA = getParents(nodeA);
-    var parentsB = getParents(nodeB);
-    // tslint:disable-next-line:prefer-for-of
-    for (var i = 0; i < parentsA.length; i += 1) {
-        var currentParent = parentsA[i];
-        if (parentsB.indexOf(currentParent) >= 0) {
-            return currentParent;
-        }
-    }
-    return false;
-};
-var getTopCommonParent = function (baseActiveElement, leftEntry, rightEntries) {
-    var activeElements = asArray(baseActiveElement);
-    var leftEntries = asArray(leftEntry);
-    var activeElement = activeElements[0];
-    var topCommon = false;
-    leftEntries.filter(Boolean).forEach(function (entry) {
-        topCommon = getCommonParent(topCommon || entry, entry) || topCommon;
-        rightEntries.filter(Boolean).forEach(function (subEntry) {
-            var common = getCommonParent(activeElement, subEntry);
-            if (common) {
-                if (!topCommon || contains(common, topCommon)) {
-                    topCommon = common;
-                }
-                else {
-                    topCommon = getCommonParent(common, topCommon);
-                }
-            }
-        });
-    });
-    // TODO: add assert here?
-    return topCommon;
-};
-/**
- * return list of nodes which are expected to be autofocused inside a given top nodes
- * @param entries
- * @param visibilityCache
- */
-var allParentAutofocusables = function (entries, visibilityCache) {
-    return entries.reduce(function (acc, node) { return acc.concat(parentAutofocusables(node, visibilityCache)); }, []);
-};
-
-var reorderNodes = function (srcNodes, dstNodes) {
-    var remap = new Map();
-    // no Set(dstNodes) for IE11 :(
-    dstNodes.forEach(function (entity) { return remap.set(entity.node, entity); });
-    // remap to dstNodes
-    return srcNodes.map(function (node) { return remap.get(node); }).filter(isDefined);
-};
-/**
- * contains the main logic of the `focus-lock` package.
- *
- * ! you probably dont need this function !
- *
- * given top node(s) and the last active element returns the element to be focused next
- * @returns element which should be focused to move focus inside
- * @param topNode
- * @param lastNode
- */
-var focusSolver = function (topNode, lastNode) {
-    var activeElement = getActiveElement(asArray(topNode).length > 0 ? document : getFirst(topNode).ownerDocument);
-    var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);
-    var commonParent = getTopCommonParent(activeElement || topNode, topNode, entries);
-    var visibilityCache = new Map();
-    var anyFocusable = getFocusableNodes(entries, visibilityCache);
-    var innerElements = anyFocusable.filter(function (_a) {
-        var node = _a.node;
-        return isNotAGuard(node);
-    });
-    if (!innerElements[0]) {
-        return undefined;
-    }
-    var outerNodes = getFocusableNodes([commonParent], visibilityCache).map(function (_a) {
-        var node = _a.node;
-        return node;
-    });
-    var orderedInnerElements = reorderNodes(outerNodes, innerElements);
-    // collect inner focusable and separately tabbables
-    var innerFocusables = orderedInnerElements.map(function (_a) {
-        var node = _a.node;
-        return node;
-    });
-    var innerTabbable = orderedInnerElements.filter(function (_a) {
-        var tabIndex = _a.tabIndex;
-        return tabIndex >= 0;
-    }).map(function (_a) {
-        var node = _a.node;
-        return node;
-    });
-    var newId = newFocus(innerFocusables, innerTabbable, outerNodes, activeElement, lastNode);
-    if (newId === NEW_FOCUS) {
-        var focusNode = 
-        // first try only tabbable, and the fallback to all focusable, as long as at least one element should be picked for focus
-        pickAutofocus(anyFocusable, innerTabbable, allParentAutofocusables(entries, visibilityCache)) ||
-            pickAutofocus(anyFocusable, innerFocusables, allParentAutofocusables(entries, visibilityCache));
-        if (focusNode) {
-            return { node: focusNode };
-        }
-        else {
-            console.warn('focus-lock: cannot find any node to move focus into');
-            return undefined;
-        }
-    }
-    if (newId === undefined) {
-        return newId;
-    }
-    return orderedInnerElements[newId];
-};
-
-/**
- * traverses all related nodes (including groups) returning a list of all nodes(outer and internal) with meta information
- * This is low-level API!
- * @returns list of focusable elements inside a given top(!) node.
- * @see {@link getFocusableNodes} providing a simpler API
- */
-var expandFocusableNodes = function (topNode) {
-    var entries = getAllAffectedNodes(topNode).filter(isNotAGuard);
-    var commonParent = getTopCommonParent(topNode, topNode, entries);
-    var outerNodes = orderByTabIndex(getFocusables([commonParent], true), true, true);
-    var innerElements = getFocusables(entries, false);
-    return outerNodes.map(function (_a) {
-        var node = _a.node, index = _a.index;
-        return ({
-            node: node,
-            index: index,
-            lockItem: innerElements.indexOf(node) >= 0,
-            guard: isGuard(node),
-        });
-    });
-};
-
-var focusOn = function (target, focusOptions) {
-    if (!target) {
-        // not clear how, but is possible https://github.com/theKashey/focus-lock/issues/53
-        return;
-    }
-    if ('focus' in target) {
-        target.focus(focusOptions);
-    }
-    if ('contentWindow' in target && target.contentWindow) {
-        target.contentWindow.focus();
-    }
-};
-
-var guardCount = 0;
-var lockDisabled = false;
-/**
- * The main functionality of the focus-lock package
- *
- * Contains focus at a given node.
- * The last focused element will help to determine which element(first or last) should be focused.
- * The found element will be focused.
- *
- * This is one time action (move), not a persistent focus-lock
- *
- * HTML markers (see {@link import('./constants').FOCUS_AUTO} constants) can control autofocus
- * @see {@link focusSolver} for the same functionality without autofocus
- */
-var moveFocusInside = function (topNode, lastNode, options) {
-    if (options === void 0) { options = {}; }
-    var focusable = focusSolver(topNode, lastNode);
-    // global local side effect to countain recursive lock activation and resolve focus-fighting
-    if (lockDisabled) {
-        return;
-    }
-    if (focusable) {
-        /** +FOCUS-FIGHTING prevention **/
-        if (guardCount > 2) {
-            // we have recursive entered back the lock activation
-            console.error('FocusLock: focus-fighting detected. Only one focus management system could be active. ' +
-                'See https://github.com/theKashey/focus-lock/#focus-fighting');
-            lockDisabled = true;
-            setTimeout(function () {
-                lockDisabled = false;
-            }, 1);
-            return;
-        }
-        guardCount++;
-        focusOn(focusable.node, options.focusOptions);
-        guardCount--;
-    }
-};
-
-function weakRef(value) {
-    if (!value)
-        return null;
-    // #68 Safari 14.1 dont have it yet
-    // FIXME: remove in 2025
-    if (typeof WeakRef === 'undefined') {
-        return function () { return value || null; };
-    }
-    var w = value ? new WeakRef(value) : null;
-    return function () { return (w === null || w === void 0 ? void 0 : w.deref()) || null; };
-}
-var recordElementLocation = function (element) {
-    if (!element) {
-        return null;
-    }
-    var stack = [];
-    var currentElement = element;
-    while (currentElement && currentElement !== document.body) {
-        stack.push({
-            current: weakRef(currentElement),
-            parent: weakRef(currentElement.parentElement),
-            left: weakRef(currentElement.previousElementSibling),
-            right: weakRef(currentElement.nextElementSibling),
-        });
-        currentElement = currentElement.parentElement;
-    }
-    return {
-        element: weakRef(element),
-        stack: stack,
-        ownerDocument: element.ownerDocument,
-    };
-};
-var restoreFocusTo = function (location) {
-    var _a, _b, _c, _d, _e;
-    if (!location) {
-        return undefined;
-    }
-    var stack = location.stack, ownerDocument = location.ownerDocument;
-    var visibilityCache = new Map();
-    for (var _i = 0, stack_1 = stack; _i < stack_1.length; _i++) {
-        var line = stack_1[_i];
-        var parent_1 = (_a = line.parent) === null || _a === void 0 ? void 0 : _a.call(line);
-        // is it still here?
-        if (parent_1 && ownerDocument.contains(parent_1)) {
-            var left = (_b = line.left) === null || _b === void 0 ? void 0 : _b.call(line);
-            var savedCurrent = line.current();
-            var current = parent_1.contains(savedCurrent) ? savedCurrent : undefined;
-            var right = (_c = line.right) === null || _c === void 0 ? void 0 : _c.call(line);
-            var focusables = getTabbableNodes([parent_1], visibilityCache);
-            var aim = 
-            // that is element itself
-            (_e = (_d = current !== null && current !== void 0 ? current : 
-            // or something in it's place
-            left === null || left === void 0 ? void 0 : left.nextElementSibling) !== null && _d !== void 0 ? _d : 
-            // or somebody to the right, still close enough
-            right) !== null && _e !== void 0 ? _e : 
-            // or somebody to the left, something?
-            left;
-            while (aim) {
-                for (var _f = 0, focusables_1 = focusables; _f < focusables_1.length; _f++) {
-                    var focusable = focusables_1[_f];
-                    if (aim === null || aim === void 0 ? void 0 : aim.contains(focusable.node)) {
-                        return focusable.node;
-                    }
-                }
-                aim = aim.nextElementSibling;
-            }
-            if (focusables.length) {
-                // if parent contains a focusable - move there
-                return focusables[0].node;
-            }
-        }
-    }
-    // nothing matched
-    return undefined;
-};
-/**
- * Captures the current focused element to restore focus as close as possible in the future
- * Handles situations where the focused element is removed from the DOM or no longer focusable
- * moving focus to the closest focusable element
- * @param targetElement - element where focus should be restored
- * @returns a function returning a new element to focus
- */
-var captureFocusRestore = function (targetElement) {
-    var location = recordElementLocation(targetElement);
-    return function () {
-        return restoreFocusTo(location);
-    };
-};
-
-/**
- * for a given `element` in a given `scope` returns focusable siblings
- * @param element - base element
- * @param scope - common parent. Can be document, but better to narrow it down for performance reasons
- * @returns {prev,next} - references to a focusable element before and after
- * @returns undefined - if operation is not applicable
- */
-var getRelativeFocusable = function (element, scope, useTabbables) {
-    if (!element || !scope) {
-        console.error('no element or scope given');
-        return {};
-    }
-    var shards = asArray(scope);
-    if (shards.every(function (shard) { return !contains(shard, element); })) {
-        console.error('Active element is not contained in the scope');
-        return {};
-    }
-    var focusables = useTabbables
-        ? getTabbableNodes(shards, new Map())
-        : getFocusableNodes(shards, new Map());
-    var current = focusables.findIndex(function (_a) {
-        var node = _a.node;
-        return node === element;
-    });
-    if (current === -1) {
-        // an edge case, when anchor element is not found
-        return undefined;
-    }
-    return {
-        prev: focusables[current - 1],
-        next: focusables[current + 1],
-        first: focusables[0],
-        last: focusables[focusables.length - 1],
-    };
-};
-var getBoundary = function (shards, useTabbables) {
-    var set = useTabbables
-        ? getTabbableNodes(asArray(shards), new Map())
-        : getFocusableNodes(asArray(shards), new Map());
-    return {
-        first: set[0],
-        last: set[set.length - 1],
-    };
-};
-var defaultOptions = function (options) {
-    return Object.assign({
-        scope: document.body,
-        cycle: true,
-        onlyTabbable: true,
-    }, options);
-};
-var moveFocus = function (fromElement, options, cb) {
-    if (options === void 0) { options = {}; }
-    var newOptions = defaultOptions(options);
-    var solution = getRelativeFocusable(fromElement, newOptions.scope, newOptions.onlyTabbable);
-    if (!solution) {
-        return;
-    }
-    var target = cb(solution, newOptions.cycle);
-    if (target) {
-        focusOn(target.node, newOptions.focusOptions);
-    }
-};
-/**
- * focuses next element in the tab-order
- * @param fromElement - common parent to scope active element search or tab cycle order
- * @param {FocusNextOptions} [options] - focus options
- */
-var focusNextElement = function (fromElement, options) {
-    if (options === void 0) { options = {}; }
-    moveFocus(fromElement, options, function (_a, cycle) {
-        var next = _a.next, first = _a.first;
-        return next || (cycle && first);
-    });
-};
-/**
- * focuses prev element in the tab order
- * @param fromElement - common parent to scope active element search or tab cycle order
- * @param {FocusNextOptions} [options] - focus options
- */
-var focusPrevElement = function (fromElement, options) {
-    if (options === void 0) { options = {}; }
-    moveFocus(fromElement, options, function (_a, cycle) {
-        var prev = _a.prev, last = _a.last;
-        return prev || (cycle && last);
-    });
-};
-var pickBoundary = function (scope, options, what) {
-    var _a;
-    var boundary = getBoundary(scope, (_a = options.onlyTabbable) !== null && _a !== void 0 ? _a : true);
-    var node = boundary[what];
-    if (node) {
-        focusOn(node.node, options.focusOptions);
-    }
-};
-/**
- * focuses first element in the tab-order
- * @param {FocusNextOptions} options - focus options
- */
-var focusFirstElement = function (scope, options) {
-    if (options === void 0) { options = {}; }
-    pickBoundary(scope, options, 'first');
-};
-/**
- * focuses last element in the tab order
- * @param {FocusNextOptions} options - focus options
- */
-var focusLastElement = function (scope, options) {
-    if (options === void 0) { options = {}; }
-    pickBoundary(scope, options, 'last');
-};
-
-function deferAction(action) {
-  setTimeout(action, 1);
-}
-var extractRef = function extractRef(ref) {
-  return ref && 'current' in ref ? ref.current : ref;
-};
-
-var focusOnBody = function focusOnBody() {
-  return document && document.activeElement === document.body;
-};
-var isFreeFocus = function isFreeFocus() {
-  return focusOnBody() || focusIsHidden();
-};
-var lastActiveTrap = null;
-var lastActiveFocus = null;
-var tryRestoreFocus = function tryRestoreFocus() {
-  return null;
-};
-var lastPortaledElement = null;
-var focusWasOutsideWindow = false;
-var windowFocused = false;
-var defaultWhitelist = function defaultWhitelist() {
-  return true;
-};
-var focusWhitelisted = function focusWhitelisted(activeElement) {
-  return (lastActiveTrap.whiteList || defaultWhitelist)(activeElement);
-};
-var recordPortal = function recordPortal(observerNode, portaledElement) {
-  lastPortaledElement = {
-    observerNode: observerNode,
-    portaledElement: portaledElement
-  };
-};
-var focusIsPortaledPair = function focusIsPortaledPair(element) {
-  return lastPortaledElement && lastPortaledElement.portaledElement === element;
-};
-function autoGuard(startIndex, end, step, allNodes) {
-  var lastGuard = null;
-  var i = startIndex;
-  do {
-    var item = allNodes[i];
-    if (item.guard) {
-      if (item.node.dataset.focusAutoGuard) {
-        lastGuard = item;
-      }
-    } else if (item.lockItem) {
-      if (i !== startIndex) {
-        return;
-      }
-      lastGuard = null;
-    } else {
-      break;
-    }
-  } while ((i += step) !== end);
-  if (lastGuard) {
-    lastGuard.node.tabIndex = 0;
-  }
-}
-var focusWasOutside = function focusWasOutside(crossFrameOption) {
-  if (crossFrameOption) {
-    return Boolean(focusWasOutsideWindow);
-  }
-  return focusWasOutsideWindow === 'meanwhile';
-};
-var checkInHost = function checkInHost(check, el, boundary) {
-  return el && (el.host === check && (!el.activeElement || boundary.contains(el.activeElement)) || el.parentNode && checkInHost(check, el.parentNode, boundary));
-};
-var withinHost = function withinHost(activeElement, workingArea) {
-  return workingArea.some(function (area) {
-    return checkInHost(activeElement, area, area);
-  });
-};
-var getNodeFocusables = function getNodeFocusables(nodes) {
-  return getFocusableNodes(nodes, new Map());
-};
-var isNotFocusable = function isNotFocusable(node) {
-  return !getNodeFocusables([node.parentNode]).some(function (el) {
-    return el.node === node;
-  });
-};
-var activateTrap = function activateTrap() {
-  var result = false;
-  if (lastActiveTrap) {
-    var _lastActiveTrap = lastActiveTrap,
-      observed = _lastActiveTrap.observed,
-      persistentFocus = _lastActiveTrap.persistentFocus,
-      autoFocus = _lastActiveTrap.autoFocus,
-      shards = _lastActiveTrap.shards,
-      crossFrame = _lastActiveTrap.crossFrame,
-      focusOptions = _lastActiveTrap.focusOptions,
-      noFocusGuards = _lastActiveTrap.noFocusGuards;
-    var workingNode = observed || lastPortaledElement && lastPortaledElement.portaledElement;
-    if (focusOnBody() && lastActiveFocus) {
-      if (!document.body.contains(lastActiveFocus) || isNotFocusable(lastActiveFocus)) {
-        lastActiveFocus = null;
-        var newTarget = tryRestoreFocus();
-        if (newTarget) {
-          newTarget.focus();
-        }
-      }
-    }
-    var activeElement = document && document.activeElement;
-    if (workingNode) {
-      var workingArea = [workingNode].concat(shards.map(extractRef).filter(Boolean));
-      var shouldForceRestoreFocus = function shouldForceRestoreFocus() {
-        if (!focusWasOutside(crossFrame) || !noFocusGuards || !lastActiveFocus || windowFocused) {
-          return false;
-        }
-        var nodes = getNodeFocusables(workingArea);
-        var lastIndex = nodes.findIndex(function (_ref) {
-          var node = _ref.node;
-          return node === lastActiveFocus;
-        });
-        return lastIndex === 0 || lastIndex === nodes.length - 1;
-      };
-      if (!activeElement || focusWhitelisted(activeElement)) {
-        if (persistentFocus || shouldForceRestoreFocus() || !isFreeFocus() || !lastActiveFocus && autoFocus) {
-          if (workingNode && !(focusInside(workingArea) || activeElement && withinHost(activeElement, workingArea) || focusIsPortaledPair(activeElement))) {
-            if (document && !lastActiveFocus && activeElement && !autoFocus) {
-              if (activeElement.blur) {
-                activeElement.blur();
-              }
-              document.body.focus();
-            } else {
-              result = moveFocusInside(workingArea, lastActiveFocus, {
-                focusOptions: focusOptions
-              });
-              lastPortaledElement = {};
-            }
-          }
-          focusWasOutsideWindow = false;
-          lastActiveFocus = document && document.activeElement;
-          tryRestoreFocus = captureFocusRestore(lastActiveFocus);
-        }
-      }
-      if (document && activeElement !== document.activeElement && document.querySelector('[data-focus-auto-guard]')) {
-        var newActiveElement = document && document.activeElement;
-        var allNodes = expandFocusableNodes(workingArea);
-        var focusedIndex = allNodes.map(function (_ref2) {
-          var node = _ref2.node;
-          return node;
-        }).indexOf(newActiveElement);
-        if (focusedIndex > -1) {
-          allNodes.filter(function (_ref3) {
-            var guard = _ref3.guard,
-              node = _ref3.node;
-            return guard && node.dataset.focusAutoGuard;
-          }).forEach(function (_ref4) {
-            var node = _ref4.node;
-            return node.removeAttribute('tabIndex');
-          });
-          autoGuard(focusedIndex, allNodes.length, 1, allNodes);
-          autoGuard(focusedIndex, -1, -1, allNodes);
-        }
-      }
-    }
-  }
-  return result;
-};
-var onTrap = function onTrap(event) {
-  if (activateTrap() && event) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-var onBlur = function onBlur() {
-  return deferAction(activateTrap);
-};
-var onFocus = function onFocus(event) {
-  var source = event.target;
-  var currentNode = event.currentTarget;
-  if (!currentNode.contains(source)) {
-    recordPortal(currentNode, source);
-  }
-};
-var FocusWatcher = function FocusWatcher() {
-  return null;
-};
-process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node.isRequired
-} : {};
-var onWindowFocus = function onWindowFocus() {
-  windowFocused = true;
-};
-var onWindowBlur = function onWindowBlur() {
-  windowFocused = false;
-  focusWasOutsideWindow = 'just';
-  deferAction(function () {
-    focusWasOutsideWindow = 'meanwhile';
-  });
-};
-var attachHandler = function attachHandler() {
-  document.addEventListener('focusin', onTrap);
-  document.addEventListener('focusout', onBlur);
-  window.addEventListener('focus', onWindowFocus);
-  window.addEventListener('blur', onWindowBlur);
-};
-var detachHandler = function detachHandler() {
-  document.removeEventListener('focusin', onTrap);
-  document.removeEventListener('focusout', onBlur);
-  window.removeEventListener('focus', onWindowFocus);
-  window.removeEventListener('blur', onWindowBlur);
-};
-function reducePropsToState(propsList) {
-  return propsList.filter(function (_ref6) {
-    var disabled = _ref6.disabled;
-    return !disabled;
-  });
-}
-var focusLockAPI = {
-  moveFocusInside: moveFocusInside,
-  focusInside: focusInside,
-  focusNextElement: focusNextElement,
-  focusPrevElement: focusPrevElement,
-  focusFirstElement: focusFirstElement,
-  focusLastElement: focusLastElement,
-  captureFocusRestore: captureFocusRestore
-};
-function handleStateChangeOnClient(traps) {
-  var trap = traps.slice(-1)[0];
-  if (trap && !lastActiveTrap) {
-    attachHandler();
-  }
-  var lastTrap = lastActiveTrap;
-  var sameTrap = lastTrap && trap && trap.id === lastTrap.id;
-  lastActiveTrap = trap;
-  if (lastTrap && !sameTrap) {
-    lastTrap.onDeactivation();
-    if (!traps.filter(function (_ref7) {
-      var id = _ref7.id;
-      return id === lastTrap.id;
-    }).length) {
-      lastTrap.returnFocus(!trap);
-    }
-  }
-  if (trap) {
-    lastActiveFocus = null;
-    if (!sameTrap || lastTrap.observed !== trap.observed) {
-      trap.onActivation(focusLockAPI);
-    }
-    activateTrap();
-    deferAction(activateTrap);
-  } else {
-    detachHandler();
-    lastActiveFocus = null;
-  }
-}
-mediumFocus.assignSyncMedium(onFocus);
-mediumBlur.assignMedium(onBlur);
-mediumEffect.assignMedium(function (cb) {
-  return cb(focusLockAPI);
-});
-var FocusTrap = withSideEffect(reducePropsToState, handleStateChangeOnClient)(FocusWatcher);
-
-var FocusLockCombination = /*#__PURE__*/React.forwardRef(function FocusLockUICombination(props, ref) {
-  return /*#__PURE__*/React.createElement(FocusLock, _extends({
-    sideCar: FocusTrap,
-    ref: ref
-  }, props));
-});
-var _ref = FocusLock.propTypes || {};
-  _ref.sideCar;
-  var propTypes = _objectWithoutPropertiesLoose(_ref, ["sideCar"]);
-FocusLockCombination.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
-
-var InnerModal = function (_a) {
+var GenericModal = function (_a) {
     var _b;
     var _c, _d;
-    var title = _a.title, children = _a.children, classNames$1 = _a.classNames, _e = _a.dismissible, dismissible = _e === void 0 ? true : _e, footer = _a.footer, _f = _a.titleSize, titleSize = _f === void 0 ? 'default' : _f, isClosing = _a.isClosing, onModalScroll = _a.onModalScroll, handleContainerClick = _a.handleContainerClick, handleOnCloseAnimationEnded = _a.handleOnCloseAnimationEnded, handleOnClose = _a.handleOnClose, handleOnOverlayClick = _a.handleOnOverlayClick;
-    var modalBodyRef = useRef(null);
-    useEffect(function () {
-        if (!modalBodyRef.current || !onModalScroll) {
-            return;
-        }
-        var handleOnScroll = function () {
-            if (modalBodyRef.current) {
-                onModalScroll(modalBodyRef.current.scrollTop, modalBodyRef.current);
-            }
-        };
-        modalBodyRef.current.addEventListener('scroll', handleOnScroll);
-        return function () {
-            var _a;
-            (_a = modalBodyRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleOnScroll);
-        };
-    }, []);
-    return (jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.overlay, styles.overlay, (_b = {},
+    var title = _a.title, isOpen = _a.isOpen, children = _a.children, onClose = _a.onClose, classNames$1 = _a.classNames, _e = _a.dismissible, dismissible = _e === void 0 ? true : _e, footer = _a.footer, _f = _a.titleSize, titleSize = _f === void 0 ? 'default' : _f;
+    var _g = useOnClose(onClose, isOpen, dismissible), isClosing = _g.isClosing, isVisible = _g.isVisible, handleContainerClick = _g.handleContainerClick, handleOnCloseAnimationEnded = _g.handleOnCloseAnimationEnded, handleOnClose = _g.handleOnClose, handleOnOverlayClick = _g.handleOnOverlayClick;
+    return !isVisible ? null : (jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.overlay, styles.overlay, (_b = {},
             _b[styles.overlayClose] = isClosing,
             _b)), onAnimationEnd: handleOnCloseAnimationEnded, onClick: handleOnOverlayClick, children: jsx("div", { className: typeof (classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) === 'string'
                 ? classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper
-                : (_c = classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) === null || _c === void 0 ? void 0 : _c.call(classNames$1, { isClosing: isClosing }), children: jsx(FocusLockCombination, { returnFocus: true, className: "m-auto", children: jsxs("div", { "aria-modal": "true", role: "dialog", className: typeof (classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container) === 'string'
-                        ? classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container
-                        : (_d = classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container) === null || _d === void 0 ? void 0 : _d.call(classNames$1, { isClosing: isClosing }), onClick: handleContainerClick, children: [jsxs("div", { className: classNames('bg-white d-flex ai-center w100 px24 pt24 pb16', styles.header, {
-                                'jc-between': !!title,
-                                'jc-end': !title,
-                            }), children: [title && (jsx("div", { className: classNames(styles.title, titleSize === 'small' ? 'p-h4' : 'p-h2', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title), children: title })), dismissible && (jsx(Button, { hideLabel: true, leftIcon: jsx(XIcon, { color: "neutral-800", className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.closeButtonIcon }), onClick: handleOnClose, type: "button", variant: "textBlack", className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.closeButton, 'p0', styles.closeButton), children: "Close modal" }))] }), jsx("div", { className: classNames('w100', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.body, styles.body), ref: modalBodyRef, children: children }), footer && (jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.footer, 'w100 bg-white', styles.footer), children: jsx("div", { className: "p24 pt16 pb32", children: footer }) }))] }) }) }) }));
-};
-var GenericModal = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, _a = props.dismissible, dismissible = _a === void 0 ? true : _a;
-    var _b = useOnClose(onClose, isOpen, dismissible), isVisible = _b.isVisible, rest = __rest(_b, ["isVisible"]);
-    if (!isVisible) {
-        return null;
-    }
-    return jsx(InnerModal, __assign({}, props, { isVisible: isVisible }, rest));
+                : (_c = classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) === null || _c === void 0 ? void 0 : _c.call(classNames$1, { isClosing: isClosing }), children: jsxs("div", { className: typeof (classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container) === 'string'
+                    ? classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container
+                    : (_d = classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.container) === null || _d === void 0 ? void 0 : _d.call(classNames$1, { isClosing: isClosing }), onClick: handleContainerClick, children: [jsxs("div", { className: classNames('bg-white d-flex ai-center w100 px24 pt24 pb16', styles.header, {
+                            'jc-between': !!title,
+                            'jc-end': !title,
+                        }), children: [title && (jsx("div", { className: classNames(styles.title, titleSize === 'small' ? 'p-h4' : 'p-h2'), children: title })), dismissible && (jsx(Button, { hideLabel: true, leftIcon: jsx(XIcon, { color: "grey-700" }), onClick: handleOnClose, type: "button", variant: "textColor", className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.closeButton, 'p0', styles.closeButton), children: "Close modal" }))] }), jsx("div", { className: classNames('w100', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.body, styles.body), children: children }), footer && (jsx("div", { className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.footer, 'w100 bg-white', styles.footer), children: jsx("div", { className: "px24 py16", children: footer }) }))] }) }) }));
 };
 
 export { GenericModal };