@nextui-org/react 1.0.1-alpha.50 → 1.0.1-alpha.51

package/umd/nextui.js

@@ -965,6 +965,7 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   "Avatar": () => (/* reexport */ src_avatar),
+  "Backdrop": () => (/* reexport */ backdrop),
   "Button": () => (/* reexport */ src_button),
   "Card": () => (/* reexport */ src_card),
   "Checkbox": () => (/* reexport */ src_checkbox),
@@ -994,6 +995,7 @@ __webpack_require__.d(__webpack_exports__, {
   "useClickAway": () => (/* reexport */ src_use_click_away),
   "useCurrentState": () => (/* reexport */ src_use_current_state),
   "useInput": () => (/* reexport */ src_use_input),
+  "useKeyboard": () => (/* reexport */ src_use_keyboard),
   "useModal": () => (/* reexport */ use_modal),
   "usePortal": () => (/* reexport */ src_use_portal),
   "useRealShape": () => (/* reexport */ src_use_real_shape),
@@ -1647,6 +1649,202 @@ const useInput = initialValue => {
 ;// CONCATENATED MODULE: ./src/use-input/index.ts
 
 /* harmony default export */ const src_use_input = (use_input);
+;// CONCATENATED MODULE: ./src/use-keyboard/codes.ts
+/**
+ * KeyBinding Codes
+ * The content of this file is based on the design of the open source project "microsoft/vscode",
+ *   Copyright (c) Microsoft Corporation. All rights reserved.
+ *
+ * We inherit the KeyMod values from "microsoft/vscode",
+ * but use the Browser's KeyboardEvent event implementation, and all values are used only as identification.
+ */
+let KeyCode;
+
+(function (KeyCode) {
+  KeyCode[KeyCode["Unknown"] = 0] = "Unknown";
+  KeyCode[KeyCode["Backspace"] = 8] = "Backspace";
+  KeyCode[KeyCode["Tab"] = 9] = "Tab";
+  KeyCode[KeyCode["Enter"] = 13] = "Enter";
+  KeyCode[KeyCode["Shift"] = 16] = "Shift";
+  KeyCode[KeyCode["Ctrl"] = 17] = "Ctrl";
+  KeyCode[KeyCode["Alt"] = 18] = "Alt";
+  KeyCode[KeyCode["PauseBreak"] = 19] = "PauseBreak";
+  KeyCode[KeyCode["CapsLock"] = 20] = "CapsLock";
+  KeyCode[KeyCode["Escape"] = 27] = "Escape";
+  KeyCode[KeyCode["Space"] = 32] = "Space";
+  KeyCode[KeyCode["PageUp"] = 33] = "PageUp";
+  KeyCode[KeyCode["PageDown"] = 34] = "PageDown";
+  KeyCode[KeyCode["End"] = 35] = "End";
+  KeyCode[KeyCode["Home"] = 36] = "Home";
+  KeyCode[KeyCode["LeftArrow"] = 37] = "LeftArrow";
+  KeyCode[KeyCode["UpArrow"] = 38] = "UpArrow";
+  KeyCode[KeyCode["RightArrow"] = 39] = "RightArrow";
+  KeyCode[KeyCode["DownArrow"] = 40] = "DownArrow";
+  KeyCode[KeyCode["Insert"] = 45] = "Insert";
+  KeyCode[KeyCode["Delete"] = 46] = "Delete";
+  KeyCode[KeyCode["KEY_0"] = 48] = "KEY_0";
+  KeyCode[KeyCode["KEY_1"] = 49] = "KEY_1";
+  KeyCode[KeyCode["KEY_2"] = 50] = "KEY_2";
+  KeyCode[KeyCode["KEY_3"] = 51] = "KEY_3";
+  KeyCode[KeyCode["KEY_4"] = 52] = "KEY_4";
+  KeyCode[KeyCode["KEY_5"] = 53] = "KEY_5";
+  KeyCode[KeyCode["KEY_6"] = 54] = "KEY_6";
+  KeyCode[KeyCode["KEY_7"] = 55] = "KEY_7";
+  KeyCode[KeyCode["KEY_8"] = 56] = "KEY_8";
+  KeyCode[KeyCode["KEY_9"] = 57] = "KEY_9";
+  KeyCode[KeyCode["KEY_A"] = 65] = "KEY_A";
+  KeyCode[KeyCode["KEY_B"] = 66] = "KEY_B";
+  KeyCode[KeyCode["KEY_C"] = 67] = "KEY_C";
+  KeyCode[KeyCode["KEY_D"] = 68] = "KEY_D";
+  KeyCode[KeyCode["KEY_E"] = 69] = "KEY_E";
+  KeyCode[KeyCode["KEY_F"] = 70] = "KEY_F";
+  KeyCode[KeyCode["KEY_G"] = 71] = "KEY_G";
+  KeyCode[KeyCode["KEY_H"] = 72] = "KEY_H";
+  KeyCode[KeyCode["KEY_I"] = 73] = "KEY_I";
+  KeyCode[KeyCode["KEY_J"] = 74] = "KEY_J";
+  KeyCode[KeyCode["KEY_K"] = 75] = "KEY_K";
+  KeyCode[KeyCode["KEY_L"] = 76] = "KEY_L";
+  KeyCode[KeyCode["KEY_M"] = 77] = "KEY_M";
+  KeyCode[KeyCode["KEY_N"] = 78] = "KEY_N";
+  KeyCode[KeyCode["KEY_O"] = 79] = "KEY_O";
+  KeyCode[KeyCode["KEY_P"] = 80] = "KEY_P";
+  KeyCode[KeyCode["KEY_Q"] = 81] = "KEY_Q";
+  KeyCode[KeyCode["KEY_R"] = 82] = "KEY_R";
+  KeyCode[KeyCode["KEY_S"] = 83] = "KEY_S";
+  KeyCode[KeyCode["KEY_T"] = 84] = "KEY_T";
+  KeyCode[KeyCode["KEY_U"] = 85] = "KEY_U";
+  KeyCode[KeyCode["KEY_V"] = 86] = "KEY_V";
+  KeyCode[KeyCode["KEY_W"] = 87] = "KEY_W";
+  KeyCode[KeyCode["KEY_X"] = 88] = "KEY_X";
+  KeyCode[KeyCode["KEY_Y"] = 89] = "KEY_Y";
+  KeyCode[KeyCode["KEY_Z"] = 90] = "KEY_Z";
+  KeyCode[KeyCode["Meta"] = 91] = "Meta";
+  KeyCode[KeyCode["F1"] = 112] = "F1";
+  KeyCode[KeyCode["F2"] = 113] = "F2";
+  KeyCode[KeyCode["F3"] = 114] = "F3";
+  KeyCode[KeyCode["F4"] = 115] = "F4";
+  KeyCode[KeyCode["F5"] = 116] = "F5";
+  KeyCode[KeyCode["F6"] = 117] = "F6";
+  KeyCode[KeyCode["F7"] = 118] = "F7";
+  KeyCode[KeyCode["F8"] = 119] = "F8";
+  KeyCode[KeyCode["F9"] = 120] = "F9";
+  KeyCode[KeyCode["F10"] = 121] = "F10";
+  KeyCode[KeyCode["F11"] = 122] = "F11";
+  KeyCode[KeyCode["F12"] = 123] = "F12";
+  KeyCode[KeyCode["NumLock"] = 144] = "NumLock";
+  KeyCode[KeyCode["ScrollLock"] = 145] = "ScrollLock";
+  KeyCode[KeyCode["Equal"] = 187] = "Equal";
+  KeyCode[KeyCode["Minus"] = 189] = "Minus";
+  KeyCode[KeyCode["Backquote"] = 192] = "Backquote";
+  KeyCode[KeyCode["Backslash"] = 220] = "Backslash";
+})(KeyCode || (KeyCode = {}));
+
+let KeyMod;
+
+(function (KeyMod) {
+  KeyMod[KeyMod["CtrlCmd"] = 2048] = "CtrlCmd";
+  KeyMod[KeyMod["Shift"] = 1024] = "Shift";
+  KeyMod[KeyMod["Alt"] = 512] = "Alt";
+  KeyMod[KeyMod["WinCtrl"] = 256] = "WinCtrl";
+})(KeyMod || (KeyMod = {}));
+;// CONCATENATED MODULE: ./src/use-keyboard/helper.ts
+
+
+/* istanbul ignore next */
+
+const getCtrlKeysByPlatform = () => {
+  return {
+    CtrlCmd: isMac() ? 'metaKey' : 'ctrlKey',
+    WinCtrl: isMac() ? 'ctrlKey' : 'metaKey'
+  };
+};
+const getActiveModMap = bindings => {
+  const modBindings = bindings.filter(item => !!KeyMod[item]);
+  const activeModMap = {
+    CtrlCmd: false,
+    Shift: false,
+    Alt: false,
+    WinCtrl: false
+  };
+  modBindings.forEach(code => {
+    const modKey = KeyMod[code];
+    activeModMap[modKey] = true;
+  });
+  return activeModMap;
+};
+;// CONCATENATED MODULE: ./src/use-keyboard/use-keyboard.ts
+
+
+
+
+const useKeyboard = (handler, keyBindings, options = {}) => {
+  const bindings = Array.isArray(keyBindings) ? keyBindings : [keyBindings];
+  const {
+    disableGlobalEvent = false,
+    capture = false,
+    stopPropagation = false,
+    preventDefault = true,
+    event = 'keydown'
+  } = options;
+  const activeModMap = getActiveModMap(bindings);
+  const keyCode = bindings.filter(item => !KeyMod[item])[0];
+  const {
+    CtrlCmd,
+    WinCtrl
+  } = getCtrlKeysByPlatform();
+
+  const eventHandler = event => {
+    if (activeModMap.Shift && !event.shiftKey) return;
+    if (activeModMap.Alt && !event.altKey) return;
+    if (activeModMap.CtrlCmd && !event[CtrlCmd]) return;
+    if (activeModMap.WinCtrl && !event[WinCtrl]) return;
+    if (keyCode && event.keyCode !== keyCode) return;
+
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    if (preventDefault) {
+      event.preventDefault();
+    }
+
+    handler && handler(event);
+  };
+
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    if (!disableGlobalEvent) {
+      document.addEventListener(event, eventHandler);
+    }
+
+    return () => {
+      document.removeEventListener(event, eventHandler);
+    };
+  }, [disableGlobalEvent]);
+
+  const elementBindingHandler = (elementEventType, isCapture = false) => {
+    if (elementEventType !== event) return () => {};
+    if (isCapture !== capture) return () => {};
+    return e => eventHandler(e);
+  };
+
+  return {
+    bindings: {
+      onKeyDown: elementBindingHandler('keydown'),
+      onKeyDownCapture: elementBindingHandler('keydown', true),
+      onKeyPress: elementBindingHandler('keypress'),
+      onKeyPressCapture: elementBindingHandler('keypress', true),
+      onKeyUp: elementBindingHandler('keyup'),
+      onKeyUpCapture: elementBindingHandler('keyup', true)
+    }
+  };
+};
+
+/* harmony default export */ const use_keyboard = (useKeyboard);
+;// CONCATENATED MODULE: ./src/use-keyboard/index.ts
+
+
+
+/* harmony default export */ const src_use_keyboard = (use_keyboard);
 // EXTERNAL MODULE: ../../node_modules/styled-jsx/style.js
 var styled_jsx_style = __webpack_require__(746);
 ;// CONCATENATED MODULE: ./src/utils/prop-types.ts
@@ -7409,6 +7607,12 @@ const ModalWrapper = ({
   const modalContent = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   const tabStart = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   const tabEnd = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  const [rendered, setRendered] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    setTimeout(() => {
+      setRendered(true);
+    }, 300);
+  }, []);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
     if (!visible) return;
     const activeElement = document.activeElement;
@@ -7450,48 +7654,49 @@ const ModalWrapper = ({
       onKeyDown: onKeyDown,
       ref: modalContent,
       ...props,
-      className: styled_jsx_style["default"].dynamic([["799561454", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || clsx('modal-wrapper', {
+      className: styled_jsx_style["default"].dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || clsx('modal-wrapper', {
         fullscreen: fullScreen,
         'with-close-button': closeButton,
-        'modal-rebound': rebound
+        'modal-rebound': rebound,
+        rendered
       }, className) || ""),
       children: [/*#__PURE__*/(0,jsx_dev_runtime.jsxDEV)("div", {
         tabIndex: 0,
         "aria-hidden": "true",
         ref: tabStart,
-        className: styled_jsx_style["default"].dynamic([["799561454", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
+        className: styled_jsx_style["default"].dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
       }, void 0, false, {
         fileName: modal_wrapper_jsxFileName,
-        lineNumber: 95,
+        lineNumber: 103,
         columnNumber: 9
       }, undefined), closeButton && /*#__PURE__*/(0,jsx_dev_runtime.jsxDEV)(modal_close_button, {
         onClick: handleClose
       }, void 0, false, {
         fileName: modal_wrapper_jsxFileName,
-        lineNumber: 101,
+        lineNumber: 109,
         columnNumber: 25
       }, undefined), children, /*#__PURE__*/(0,jsx_dev_runtime.jsxDEV)("div", {
         tabIndex: 0,
         "aria-hidden": "true",
         ref: tabEnd,
-        className: styled_jsx_style["default"].dynamic([["799561454", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
+        className: styled_jsx_style["default"].dynamic([["1270377280", [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + "hide-tab"
       }, void 0, false, {
         fileName: modal_wrapper_jsxFileName,
-        lineNumber: 103,
+        lineNumber: 111,
         columnNumber: 9
       }, undefined), /*#__PURE__*/(0,jsx_dev_runtime.jsxDEV)(styled_jsx_style["default"], {
-        id: "799561454",
-        dynamic: [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap],
-        children: `.modal-wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;height:-webkit-fit-content(20em);height:-moz-fit-content(20em);height:fit-content(20em);max-height:${scroll ? 'calc(100vh - 200px)' : 'inherit'};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:${theme.palette.background};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};opacity:0;outline:none;-webkit-transform:translate3d(0px,20px,0px) scale(1.02);-ms-transform:translate3d(0px,20px,0px) scale(1.02);transform:translate3d(0px,20px,0px) scale(1.02);-webkit-transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1) 0s, -webkit-transform 0.25s cubic-bezier(0.4,0,0.2,1) 0s;-webkit-transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.25s cubic-bezier(0.4,0,0.2,1) 0s;transition:opacity 0.25s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.25s cubic-bezier(0.4,0,0.2,1) 0s;}.modal-rebound.__jsx-style-dynamic-selector:not(.fullscreen){-webkit-animation:rebound-__jsx-style-dynamic-selector 0.25s ease;animation:rebound-__jsx-style-dynamic-selector 0.25s ease;}.modal-wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,20px,0px) scale(1.02);-ms-transform:translate3d(0px,20px,0px) scale(1.02);transform:translate3d(0px,20px,0px) scale(1.02);}.modal-wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px) scale(1);-ms-transform:translate3d(0px,0px,0px) scale(1);transform:translate3d(0px,0px,0px) scale(1);}.modal-wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px) scale(1);-ms-transform:translate3d(0px,0px,0px) scale(1);transform:translate3d(0px,0px,0px) scale(1);}.modal-wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,20px,0px) scale(1.02);-ms-transform:translate3d(0px,20px,0px) scale(1.02);transform:translate3d(0px,20px,0px) scale(1.02);}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}.fullscreen.__jsx-style-dynamic-selector{width:100%;height:100%;max-height:100%;}.with-close-button.__jsx-style-dynamic-selector{padding-top:${theme.layout.gap};}.fullscreen.__jsx-style-dynamic-selector .close-icon{top:${theme.layout.gap};right:calc(${theme.layout.gap} * 0.5);}.fullscreen.__jsx-style-dynamic-selector .close-icon svg{width:24px;height:24px;}@-webkit-keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}`
+        id: "1270377280",
+        dynamic: [scroll ? 'calc(100vh - 200px)' : 'inherit', theme.type === 'light' ? theme.palette.background : theme.palette.accents_1, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, theme.layout.gap, theme.layout.gap, theme.layout.gap],
+        children: `.modal-wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;height:-webkit-fit-content(20em);height:-moz-fit-content(20em);height:fit-content(20em);max-height:${scroll ? 'calc(100vh - 200px)' : 'inherit'};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:${theme.type === 'light' ? theme.palette.background : theme.palette.accents_1};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};outline:none;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}.fullscreen.__jsx-style-dynamic-selector{width:100%;height:100%;max-height:100%;}.modal-rebound.__jsx-style-dynamic-selector:not(.fullscreen){-webkit-animation-duration:250ms;animation-duration:250ms;-webkit-animation-name:rebound-__jsx-style-dynamic-selector;animation-name:rebound-__jsx-style-dynamic-selector;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.modal-wrapper-enter.__jsx-style-dynamic-selector:not(.rendered){-webkit-animation-name:appearance-in-__jsx-style-dynamic-selector;animation-name:appearance-in-__jsx-style-dynamic-selector;-webkit-animation-duration:200ms;animation-duration:200ms;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-direction:normal;animation-direction:normal;}.modal-wrapper-leave.__jsx-style-dynamic-selector{-webkit-animation-name:appearance-out-__jsx-style-dynamic-selector;animation-name:appearance-out-__jsx-style-dynamic-selector;-webkit-animation-duration:50ms;animation-duration:50ms;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;}.with-close-button.__jsx-style-dynamic-selector{padding-top:${theme.layout.gap};}.fullscreen.__jsx-style-dynamic-selector .close-icon{top:${theme.layout.gap};right:calc(${theme.layout.gap} * 0.5);}.fullscreen.__jsx-style-dynamic-selector .close-icon svg{width:24px;height:24px;}@-webkit-keyframes appearance-in-__jsx-style-dynamic-selector{0%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}60%{opacity:0.75;-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes appearance-in-__jsx-style-dynamic-selector{0%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}60%{opacity:0.75;-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@-webkit-keyframes appearance-out-__jsx-style-dynamic-selector{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}100%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}}@keyframes appearance-out-__jsx-style-dynamic-selector{0%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}100%{opacity:0;-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}}@-webkit-keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}@keyframes rebound-__jsx-style-dynamic-selector{0%{-webkit-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);}40%{-webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);}80%{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}`
       }, void 0, false, void 0, undefined)]
     }, void 0, true, {
       fileName: modal_wrapper_jsxFileName,
-      lineNumber: 78,
+      lineNumber: 85,
       columnNumber: 7
     }, undefined)
   }, void 0, false, {
     fileName: modal_wrapper_jsxFileName,
-    lineNumber: 71,
+    lineNumber: 78,
     columnNumber: 5
   }, undefined);
 };
@@ -7560,7 +7765,7 @@ const Backdrop = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react
         className: styled_jsx_style["default"].dynamic([["903909204", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max]]]) + " " + (clsx('layer', blur ? 'layer-blur' : 'layer-default') || "")
       }, void 0, false, {
         fileName: backdrop_jsxFileName,
-        lineNumber: 75,
+        lineNumber: 74,
         columnNumber: 11
       }, undefined), /*#__PURE__*/(0,jsx_dev_runtime.jsxDEV)("div", {
         onClick: childrenClickHandler,
@@ -7569,7 +7774,7 @@ const Backdrop = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react
         children: children
       }, void 0, false, {
         fileName: backdrop_jsxFileName,
-        lineNumber: 78,
+        lineNumber: 77,
         columnNumber: 11
       }, undefined), /*#__PURE__*/(0,jsx_dev_runtime.jsxDEV)(styled_jsx_style["default"], {
         id: "903909204",
@@ -7578,12 +7783,12 @@ const Backdrop = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react
       }, void 0, false, void 0, undefined)]
     }, void 0, true, {
       fileName: backdrop_jsxFileName,
-      lineNumber: 67,
+      lineNumber: 66,
       columnNumber: 9
     }, undefined)
   }, void 0, false, {
     fileName: backdrop_jsxFileName,
-    lineNumber: 60,
+    lineNumber: 59,
     columnNumber: 7
   }, undefined);
 });
@@ -7598,202 +7803,6 @@ if (__DEV__) {
 const modal_context_defaultContext = {};
 const ModalContext = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createContext(modal_context_defaultContext);
 const useModalContext = () => React.useContext(ModalContext);
-;// CONCATENATED MODULE: ./src/use-keyboard/codes.ts
-/**
- * KeyBinding Codes
- * The content of this file is based on the design of the open source project "microsoft/vscode",
- *   Copyright (c) Microsoft Corporation. All rights reserved.
- *
- * We inherit the KeyMod values from "microsoft/vscode",
- * but use the Browser's KeyboardEvent event implementation, and all values are used only as identification.
- */
-let KeyCode;
-
-(function (KeyCode) {
-  KeyCode[KeyCode["Unknown"] = 0] = "Unknown";
-  KeyCode[KeyCode["Backspace"] = 8] = "Backspace";
-  KeyCode[KeyCode["Tab"] = 9] = "Tab";
-  KeyCode[KeyCode["Enter"] = 13] = "Enter";
-  KeyCode[KeyCode["Shift"] = 16] = "Shift";
-  KeyCode[KeyCode["Ctrl"] = 17] = "Ctrl";
-  KeyCode[KeyCode["Alt"] = 18] = "Alt";
-  KeyCode[KeyCode["PauseBreak"] = 19] = "PauseBreak";
-  KeyCode[KeyCode["CapsLock"] = 20] = "CapsLock";
-  KeyCode[KeyCode["Escape"] = 27] = "Escape";
-  KeyCode[KeyCode["Space"] = 32] = "Space";
-  KeyCode[KeyCode["PageUp"] = 33] = "PageUp";
-  KeyCode[KeyCode["PageDown"] = 34] = "PageDown";
-  KeyCode[KeyCode["End"] = 35] = "End";
-  KeyCode[KeyCode["Home"] = 36] = "Home";
-  KeyCode[KeyCode["LeftArrow"] = 37] = "LeftArrow";
-  KeyCode[KeyCode["UpArrow"] = 38] = "UpArrow";
-  KeyCode[KeyCode["RightArrow"] = 39] = "RightArrow";
-  KeyCode[KeyCode["DownArrow"] = 40] = "DownArrow";
-  KeyCode[KeyCode["Insert"] = 45] = "Insert";
-  KeyCode[KeyCode["Delete"] = 46] = "Delete";
-  KeyCode[KeyCode["KEY_0"] = 48] = "KEY_0";
-  KeyCode[KeyCode["KEY_1"] = 49] = "KEY_1";
-  KeyCode[KeyCode["KEY_2"] = 50] = "KEY_2";
-  KeyCode[KeyCode["KEY_3"] = 51] = "KEY_3";
-  KeyCode[KeyCode["KEY_4"] = 52] = "KEY_4";
-  KeyCode[KeyCode["KEY_5"] = 53] = "KEY_5";
-  KeyCode[KeyCode["KEY_6"] = 54] = "KEY_6";
-  KeyCode[KeyCode["KEY_7"] = 55] = "KEY_7";
-  KeyCode[KeyCode["KEY_8"] = 56] = "KEY_8";
-  KeyCode[KeyCode["KEY_9"] = 57] = "KEY_9";
-  KeyCode[KeyCode["KEY_A"] = 65] = "KEY_A";
-  KeyCode[KeyCode["KEY_B"] = 66] = "KEY_B";
-  KeyCode[KeyCode["KEY_C"] = 67] = "KEY_C";
-  KeyCode[KeyCode["KEY_D"] = 68] = "KEY_D";
-  KeyCode[KeyCode["KEY_E"] = 69] = "KEY_E";
-  KeyCode[KeyCode["KEY_F"] = 70] = "KEY_F";
-  KeyCode[KeyCode["KEY_G"] = 71] = "KEY_G";
-  KeyCode[KeyCode["KEY_H"] = 72] = "KEY_H";
-  KeyCode[KeyCode["KEY_I"] = 73] = "KEY_I";
-  KeyCode[KeyCode["KEY_J"] = 74] = "KEY_J";
-  KeyCode[KeyCode["KEY_K"] = 75] = "KEY_K";
-  KeyCode[KeyCode["KEY_L"] = 76] = "KEY_L";
-  KeyCode[KeyCode["KEY_M"] = 77] = "KEY_M";
-  KeyCode[KeyCode["KEY_N"] = 78] = "KEY_N";
-  KeyCode[KeyCode["KEY_O"] = 79] = "KEY_O";
-  KeyCode[KeyCode["KEY_P"] = 80] = "KEY_P";
-  KeyCode[KeyCode["KEY_Q"] = 81] = "KEY_Q";
-  KeyCode[KeyCode["KEY_R"] = 82] = "KEY_R";
-  KeyCode[KeyCode["KEY_S"] = 83] = "KEY_S";
-  KeyCode[KeyCode["KEY_T"] = 84] = "KEY_T";
-  KeyCode[KeyCode["KEY_U"] = 85] = "KEY_U";
-  KeyCode[KeyCode["KEY_V"] = 86] = "KEY_V";
-  KeyCode[KeyCode["KEY_W"] = 87] = "KEY_W";
-  KeyCode[KeyCode["KEY_X"] = 88] = "KEY_X";
-  KeyCode[KeyCode["KEY_Y"] = 89] = "KEY_Y";
-  KeyCode[KeyCode["KEY_Z"] = 90] = "KEY_Z";
-  KeyCode[KeyCode["Meta"] = 91] = "Meta";
-  KeyCode[KeyCode["F1"] = 112] = "F1";
-  KeyCode[KeyCode["F2"] = 113] = "F2";
-  KeyCode[KeyCode["F3"] = 114] = "F3";
-  KeyCode[KeyCode["F4"] = 115] = "F4";
-  KeyCode[KeyCode["F5"] = 116] = "F5";
-  KeyCode[KeyCode["F6"] = 117] = "F6";
-  KeyCode[KeyCode["F7"] = 118] = "F7";
-  KeyCode[KeyCode["F8"] = 119] = "F8";
-  KeyCode[KeyCode["F9"] = 120] = "F9";
-  KeyCode[KeyCode["F10"] = 121] = "F10";
-  KeyCode[KeyCode["F11"] = 122] = "F11";
-  KeyCode[KeyCode["F12"] = 123] = "F12";
-  KeyCode[KeyCode["NumLock"] = 144] = "NumLock";
-  KeyCode[KeyCode["ScrollLock"] = 145] = "ScrollLock";
-  KeyCode[KeyCode["Equal"] = 187] = "Equal";
-  KeyCode[KeyCode["Minus"] = 189] = "Minus";
-  KeyCode[KeyCode["Backquote"] = 192] = "Backquote";
-  KeyCode[KeyCode["Backslash"] = 220] = "Backslash";
-})(KeyCode || (KeyCode = {}));
-
-let KeyMod;
-
-(function (KeyMod) {
-  KeyMod[KeyMod["CtrlCmd"] = 2048] = "CtrlCmd";
-  KeyMod[KeyMod["Shift"] = 1024] = "Shift";
-  KeyMod[KeyMod["Alt"] = 512] = "Alt";
-  KeyMod[KeyMod["WinCtrl"] = 256] = "WinCtrl";
-})(KeyMod || (KeyMod = {}));
-;// CONCATENATED MODULE: ./src/use-keyboard/helper.ts
-
-
-/* istanbul ignore next */
-
-const getCtrlKeysByPlatform = () => {
-  return {
-    CtrlCmd: isMac() ? 'metaKey' : 'ctrlKey',
-    WinCtrl: isMac() ? 'ctrlKey' : 'metaKey'
-  };
-};
-const getActiveModMap = bindings => {
-  const modBindings = bindings.filter(item => !!KeyMod[item]);
-  const activeModMap = {
-    CtrlCmd: false,
-    Shift: false,
-    Alt: false,
-    WinCtrl: false
-  };
-  modBindings.forEach(code => {
-    const modKey = KeyMod[code];
-    activeModMap[modKey] = true;
-  });
-  return activeModMap;
-};
-;// CONCATENATED MODULE: ./src/use-keyboard/use-keyboard.ts
-
-
-
-
-const useKeyboard = (handler, keyBindings, options = {}) => {
-  const bindings = Array.isArray(keyBindings) ? keyBindings : [keyBindings];
-  const {
-    disableGlobalEvent = false,
-    capture = false,
-    stopPropagation = false,
-    preventDefault = true,
-    event = 'keydown'
-  } = options;
-  const activeModMap = getActiveModMap(bindings);
-  const keyCode = bindings.filter(item => !KeyMod[item])[0];
-  const {
-    CtrlCmd,
-    WinCtrl
-  } = getCtrlKeysByPlatform();
-
-  const eventHandler = event => {
-    if (activeModMap.Shift && !event.shiftKey) return;
-    if (activeModMap.Alt && !event.altKey) return;
-    if (activeModMap.CtrlCmd && !event[CtrlCmd]) return;
-    if (activeModMap.WinCtrl && !event[WinCtrl]) return;
-    if (keyCode && event.keyCode !== keyCode) return;
-
-    if (stopPropagation) {
-      event.stopPropagation();
-    }
-
-    if (preventDefault) {
-      event.preventDefault();
-    }
-
-    handler && handler(event);
-  };
-
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
-    if (!disableGlobalEvent) {
-      document.addEventListener(event, eventHandler);
-    }
-
-    return () => {
-      document.removeEventListener(event, eventHandler);
-    };
-  }, [disableGlobalEvent]);
-
-  const elementBindingHandler = (elementEventType, isCapture = false) => {
-    if (elementEventType !== event) return () => {};
-    if (isCapture !== capture) return () => {};
-    return e => eventHandler(e);
-  };
-
-  return {
-    bindings: {
-      onKeyDown: elementBindingHandler('keydown'),
-      onKeyDownCapture: elementBindingHandler('keydown', true),
-      onKeyPress: elementBindingHandler('keypress'),
-      onKeyPressCapture: elementBindingHandler('keypress', true),
-      onKeyUp: elementBindingHandler('keyup'),
-      onKeyUpCapture: elementBindingHandler('keyup', true)
-    }
-  };
-};
-
-/* harmony default export */ const use_keyboard = (useKeyboard);
-;// CONCATENATED MODULE: ./src/use-keyboard/index.ts
-
-
-
-/* harmony default export */ const src_use_keyboard = (use_keyboard);
 ;// CONCATENATED MODULE: ./src/modal/modal.tsx
 var modal_jsxFileName = "/home/runner/work/nextui/nextui/packages/nextui/src/modal/modal.tsx";
 
@@ -8152,6 +8161,8 @@ const useModal = (initialVisible = false) => {
 
 
 
+
+