impact-ui 4.0.0-alpha.11 → 4.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/ChevronLeftOutlined.js +4 -0
- package/dist/_virtual/CloseRounded.js +4 -0
- package/dist/_virtual/FilterAltOutlined.js +4 -0
- package/dist/_virtual/KeyboardRounded.js +4 -0
- package/dist/_virtual/index14.js +2 -2
- package/dist/_virtual/index15.js +2 -2
- package/dist/_virtual/index3.js +4 -2
- package/dist/_virtual/index4.js +3 -3
- package/dist/_virtual/index5.js +2 -4
- package/dist/components/Chatbot/Chatbot.types.d.ts +16 -1
- package/dist/components/Chatbot/Chatbot.types.d.ts.map +1 -1
- package/dist/components/Chatbot/index.d.ts +1 -1
- package/dist/components/Chatbot/index.d.ts.map +1 -1
- package/dist/components/Chatbot/index.js +53 -1
- package/dist/components/DateRangePicker/dateRangePickerDropdown.d.ts.map +1 -1
- package/dist/components/DateRangePicker/dateRangePickerDropdown.js +3 -4
- package/dist/components/DateRangePicker/dateRangePickerInput.d.ts +2 -1
- package/dist/components/DateRangePicker/dateRangePickerInput.d.ts.map +1 -1
- package/dist/components/DateRangePicker/dateRangePickerInput.js +8 -3
- package/dist/components/DateRangePicker/index.d.ts.map +1 -1
- package/dist/components/DateRangePicker/index.js +5 -9
- package/dist/components/FilterPanel/index.d.ts.map +1 -1
- package/dist/components/FilterPanel/index.js +32 -0
- package/dist/components/FiltersStrip/index.d.ts.map +1 -1
- package/dist/components/FiltersStrip/index.js +2 -2
- package/dist/components/KeyboardShortCuts/Keycombo.d.ts +12 -0
- package/dist/components/KeyboardShortCuts/Keycombo.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/Keycombo.js +20 -0
- package/dist/components/KeyboardShortCuts/ShortcutLandingPage.d.ts +7 -0
- package/dist/components/KeyboardShortCuts/ShortcutLandingPage.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/ShortcutLandingPage.js +69 -0
- package/dist/components/KeyboardShortCuts/ShortcutModal.d.ts +7 -0
- package/dist/components/KeyboardShortCuts/ShortcutModal.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/ShortcutModal.js +167 -0
- package/dist/components/KeyboardShortCuts/StarOutlineIcon.d.ts +3 -0
- package/dist/components/KeyboardShortCuts/StarOutlineIcon.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/allSetBox.d.ts +6 -0
- package/dist/components/KeyboardShortCuts/allSetBox.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/allSetBox.js +32 -0
- package/dist/components/KeyboardShortCuts/index.d.ts +14 -0
- package/dist/components/KeyboardShortCuts/index.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/index.js +187 -0
- package/dist/components/KeyboardShortCuts/screen2.d.ts +4 -0
- package/dist/components/KeyboardShortCuts/screen2.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/screen2.js +19 -0
- package/dist/components/KeyboardShortCuts/screen3.d.ts +4 -0
- package/dist/components/KeyboardShortCuts/screen3.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/screen3.js +19 -0
- package/dist/components/KeyboardShortCuts/tutorial.d.ts +7 -0
- package/dist/components/KeyboardShortCuts/tutorial.d.ts.map +1 -0
- package/dist/components/KeyboardShortCuts/tutorial.js +161 -0
- package/dist/components/MonthPicker/DefaultYearSelect.js +10 -0
- package/dist/components/MonthPicker/constants.js +4 -0
- package/dist/components/MonthPicker/index.js +324 -0
- package/dist/components/MonthRangePicker/MonthRangePicker.types.d.ts +30 -0
- package/dist/components/MonthRangePicker/MonthRangePicker.types.d.ts.map +1 -0
- package/dist/components/MonthRangePicker/constants.d.ts +2 -0
- package/dist/components/MonthRangePicker/constants.d.ts.map +1 -0
- package/dist/components/MonthRangePicker/constants.js +4 -0
- package/dist/components/MonthRangePicker/index.d.ts +22 -0
- package/dist/components/MonthRangePicker/index.d.ts.map +1 -0
- package/dist/components/MonthRangePicker/index.js +613 -0
- package/dist/components/Select/SearchFilter.d.ts.map +1 -1
- package/dist/components/Select/SearchFilter.js +140 -28
- package/dist/components/Select/Select.types.d.ts +43 -1
- package/dist/components/Select/Select.types.d.ts.map +1 -1
- package/dist/components/Select/dropdown.d.ts +1 -1
- package/dist/components/Select/dropdown.d.ts.map +1 -1
- package/dist/components/Select/dropdown.js +3 -2
- package/dist/components/Select/hooks/index.d.ts +3 -0
- package/dist/components/Select/hooks/index.d.ts.map +1 -1
- package/dist/components/Select/hooks/useKeyboardNavigation.d.ts +22 -0
- package/dist/components/Select/hooks/useKeyboardNavigation.d.ts.map +1 -0
- package/dist/components/Select/hooks/useKeyboardNavigation.js +160 -0
- package/dist/components/Select/hooks/useScrollIntoView.d.ts +11 -0
- package/dist/components/Select/hooks/useScrollIntoView.d.ts.map +1 -0
- package/dist/components/Select/hooks/useScrollIntoView.js +28 -0
- package/dist/components/Select/hooks/useTypeahead.d.ts +11 -0
- package/dist/components/Select/hooks/useTypeahead.d.ts.map +1 -0
- package/dist/components/Select/hooks/useTypeahead.js +41 -0
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +521 -148
- package/dist/components/Select/menuList.d.ts +2 -7
- package/dist/components/Select/menuList.d.ts.map +1 -1
- package/dist/components/Select/menuList.js +68 -16
- package/dist/components/Select/utils.d.ts +2 -2
- package/dist/components/Select/utils.d.ts.map +1 -1
- package/dist/components/Select/utils.js +3 -32
- package/dist/components/Shortcuts/ShortcutContext.d.ts +3 -0
- package/dist/components/Shortcuts/ShortcutContext.d.ts.map +1 -0
- package/dist/components/Shortcuts/ShortcutContext.js +5 -0
- package/dist/components/Shortcuts/ShortcutHint.d.ts +9 -0
- package/dist/components/Shortcuts/ShortcutHint.d.ts.map +1 -0
- package/dist/components/Shortcuts/ShortcutHint.js +33 -0
- package/dist/components/Shortcuts/ShortcutScope.d.ts +9 -0
- package/dist/components/Shortcuts/ShortcutScope.d.ts.map +1 -0
- package/dist/components/Shortcuts/ShortcutScope.js +10 -0
- package/dist/components/Shortcuts/ShortcutsConfigContext.d.ts +7 -0
- package/dist/components/Shortcuts/ShortcutsConfigContext.d.ts.map +1 -0
- package/dist/components/Shortcuts/ShortcutsConfigContext.js +8 -0
- package/dist/components/Shortcuts/ShortcutsProvider.d.ts +9 -0
- package/dist/components/Shortcuts/ShortcutsProvider.d.ts.map +1 -0
- package/dist/components/Shortcuts/ShortcutsProvider.js +18 -0
- package/dist/components/Shortcuts/index.d.ts +13 -0
- package/dist/components/Shortcuts/index.d.ts.map +1 -0
- package/dist/components/Shortcuts/useShortcut.d.ts +6 -0
- package/dist/components/Shortcuts/useShortcut.d.ts.map +1 -0
- package/dist/components/Shortcuts/useShortcut.js +92 -0
- package/dist/components/Shortcuts/useShortcutScope.d.ts +5 -0
- package/dist/components/Shortcuts/useShortcutScope.d.ts.map +1 -0
- package/dist/components/Shortcuts/useShortcutScope.js +25 -0
- package/dist/components/Sidebar/index.d.ts.map +1 -1
- package/dist/components/Sidebar/index.js +55 -1
- package/dist/components/Table/AdvanceSortModal.d.ts +8 -0
- package/dist/components/Table/AdvanceSortModal.d.ts.map +1 -0
- package/dist/components/Table/AdvanceSortModal.js +285 -0
- package/dist/components/Table/Table.types.d.ts +13 -0
- package/dist/components/Table/Table.types.d.ts.map +1 -1
- package/dist/components/Table/TableImpl.d.ts.map +1 -1
- package/dist/components/Table/TableImpl.js +186 -63
- package/dist/components/Table/actionBar.d.ts +12 -0
- package/dist/components/Table/actionBar.d.ts.map +1 -0
- package/dist/components/Table/actionBar.js +44 -0
- package/dist/components/Table/tableHeader.d.ts +6 -1
- package/dist/components/Table/tableHeader.d.ts.map +1 -1
- package/dist/components/Table/tableHeader.js +11 -2
- package/dist/components/Table/tableMoreOptions.d.ts +3 -1
- package/dist/components/Table/tableMoreOptions.d.ts.map +1 -1
- package/dist/components/Table/tableMoreOptions.js +26 -1
- package/dist/components/TableChat/components/TextEditor/Mention.d.ts.map +1 -1
- package/dist/components/TableChat/components/TextEditor/Mention.js +2 -1
- package/dist/components/TableOld/AgGridHeader.d.ts +12 -0
- package/dist/components/TableOld/AgGridHeader.d.ts.map +1 -0
- package/dist/components/TableOld/actionBar.d.ts +7 -0
- package/dist/components/TableOld/actionBar.d.ts.map +1 -0
- package/dist/components/TableOld/index.d.ts +3 -0
- package/dist/components/TableOld/index.d.ts.map +1 -0
- package/dist/components/TableOld/mockData.d.ts +39 -0
- package/dist/components/TableOld/mockData.d.ts.map +1 -0
- package/dist/components/TableOld/tableFunctions.d.ts +56 -0
- package/dist/components/TableOld/tableFunctions.d.ts.map +1 -0
- package/dist/components/TableOld/tableHeader.d.ts +48 -0
- package/dist/components/TableOld/tableHeader.d.ts.map +1 -0
- package/dist/components/TableOld/tableIcons.d.ts +3 -0
- package/dist/components/TableOld/tableIcons.d.ts.map +1 -0
- package/dist/components/TableOld/tablePagination.d.ts +8 -0
- package/dist/components/TableOld/tablePagination.d.ts.map +1 -0
- package/dist/components/TableOld/tableSettings.d.ts +11 -0
- package/dist/components/TableOld/tableSettings.d.ts.map +1 -0
- package/dist/components/YearSelect/index.js +83 -0
- package/dist/components/index.d.ts +8 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +35 -3
- package/dist/mcp-component-registry.json +7 -1
- package/dist/node_modules/@mui/icons-material/ChevronLeftOutlined.js +17 -0
- package/dist/node_modules/@mui/icons-material/CloseRounded.js +17 -0
- package/dist/node_modules/@mui/icons-material/FilterAltOutlined.js +17 -0
- package/dist/node_modules/@mui/icons-material/KeyboardRounded.js +17 -0
- package/dist/node_modules/@mui/system/colorManipulator.js +2 -2
- package/dist/node_modules/call-bind/index.js +1 -1
- package/dist/node_modules/is-symbol/index.js +1 -1
- package/dist/node_modules/react-is/index.js +1 -1
- package/dist/utils/shortcuts/ShortcutManager.d.ts +34 -0
- package/dist/utils/shortcuts/ShortcutManager.d.ts.map +1 -0
- package/dist/utils/shortcuts/ShortcutManager.js +159 -0
- package/dist/utils/shortcuts/constants.d.ts +10 -0
- package/dist/utils/shortcuts/constants.d.ts.map +1 -0
- package/dist/utils/shortcuts/constants.js +46 -0
- package/dist/utils/shortcuts/format.d.ts +3 -0
- package/dist/utils/shortcuts/format.d.ts.map +1 -0
- package/dist/utils/shortcuts/format.js +27 -0
- package/dist/utils/shortcuts/index.d.ts +8 -0
- package/dist/utils/shortcuts/index.d.ts.map +1 -0
- package/dist/utils/shortcuts/match.d.ts +9 -0
- package/dist/utils/shortcuts/match.d.ts.map +1 -0
- package/dist/utils/shortcuts/match.js +52 -0
- package/dist/utils/shortcuts/parse.d.ts +10 -0
- package/dist/utils/shortcuts/parse.d.ts.map +1 -0
- package/dist/utils/shortcuts/parse.js +50 -0
- package/dist/utils/shortcuts/platform.d.ts +2 -0
- package/dist/utils/shortcuts/platform.d.ts.map +1 -0
- package/dist/utils/shortcuts/platform.js +5 -0
- package/dist/utils/shortcuts/shortcuts.test.d.ts +2 -0
- package/dist/utils/shortcuts/shortcuts.test.d.ts.map +1 -0
- package/dist/utils/shortcuts/types.d.ts +50 -0
- package/dist/utils/shortcuts/types.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
const Keys = ({ firstSymbol, firstText, secondText }) => {
|
|
3
|
+
return /* @__PURE__ */ jsxs("div", { className: "keys", children: [
|
|
4
|
+
/* @__PURE__ */ jsx("div", { className: "button-outer", children: /* @__PURE__ */ jsxs("div", { className: "button-inner", children: [
|
|
5
|
+
/* @__PURE__ */ jsx("span", { className: "key-symbol", children: firstSymbol }),
|
|
6
|
+
/* @__PURE__ */ jsx("span", { className: "key-text", children: firstText })
|
|
7
|
+
] }) }),
|
|
8
|
+
/* @__PURE__ */ jsx("div", { className: "button-outer single-key", children: /* @__PURE__ */ jsx("div", { className: "button-inner", children: /* @__PURE__ */ jsx("span", { className: "key-text", children: secondText }) }) })
|
|
9
|
+
] });
|
|
10
|
+
};
|
|
11
|
+
const KeyCombo = ({ firstSymbol, firstText, secondText, description }) => {
|
|
12
|
+
return /* @__PURE__ */ jsxs("div", { className: "keycombo-container-wrapper", children: [
|
|
13
|
+
/* @__PURE__ */ jsx("div", { className: "keycombo-container", children: /* @__PURE__ */ jsx(Keys, { firstSymbol, firstText, secondText }) }),
|
|
14
|
+
/* @__PURE__ */ jsx("div", { className: "keycombo-description", children: description })
|
|
15
|
+
] });
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
KeyCombo,
|
|
19
|
+
Keys
|
|
20
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
export declare const ShortcutLandingPage: ({ playEntrance, setIsShowShortCutLandingPage, setIsShowShortCutModal, }: {
|
|
3
|
+
playEntrance?: boolean | undefined;
|
|
4
|
+
setIsShowShortCutLandingPage: any;
|
|
5
|
+
setIsShowShortCutModal: any;
|
|
6
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=ShortcutLandingPage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShortcutLandingPage.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortCuts/ShortcutLandingPage.tsx"],"names":[],"mappings":"AASA,OAAO,iCAAiC,CAAC;AA6BzC,eAAO,MAAM,mBAAmB,GAAI;;;;CAInC,4CAcA,CAAC"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}@keyframes shortcut-section-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slide-in-from-right{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-from-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}@keyframes dot-fill{0%{width:0}to{width:100%}}@keyframes shortcut-card-enter-1{0%{opacity:0;transform:translateY(20px) rotate(-8deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}}@keyframes shortcut-card-enter-2{0%{opacity:0;transform:translateY(20px) rotate(4deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(4deg) scale(1)}}@keyframes shortcut-card-enter-3{0%{opacity:0;transform:translateY(20px) rotate(-1deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(-1deg) scale(1)}}.keyboard-shortcuts-container-wrapper{background-color:#fff;background-image:radial-gradient(circle,#f7f7f799 2px,#0000 0),radial-gradient(circle,#f7f7f799 2px,#0000 0);background-size:18px 18px;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;left:50%;padding:40px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:999999}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container{align-items:center;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:space-between}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header{align-items:center;display:flex;flex-direction:column;gap:8px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription{align-items:center;display:flex;flex-direction:column;gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-title{color:#0d152c;font-size:32px;font-weight:800;line-height:48px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-description{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center;text-transform:capitalize;width:302px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section{align-items:center;display:flex;flex-direction:column;gap:8px;overflow:hidden}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide{height:452px;will-change:opacity,transform}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide--forward{animation:slide-in-from-right .38s cubic-bezier(.22,1,.36,1) both}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide--backward{animation:slide-in-from-left .38s cubic-bezier(.22,1,.36,1) both}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper{align-items:center;display:flex;gap:10px;justify-content:center}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button{background-color:#d9dde7;border-radius:5px;cursor:pointer;flex-shrink:0;height:10px;overflow:hidden;position:relative;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .2s;width:10px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button.active{background-color:#d9dde7;width:32px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button.active:after{animation:dot-fill var(--dot-duration,2s) linear forwards;background-color:#4259ee;border-radius:5px;content:"";height:100%;inset-block:0;left:0;position:absolute}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer .page-footer-buttons{align-items:center;display:flex;gap:12px}.keyboard-shortcuts-container-wrapper .screen2-container,.keyboard-shortcuts-container-wrapper .screen3-container{display:flex;flex-direction:column;gap:24px}.keyboard-shortcuts-container-wrapper .screen2-container .screen-video,.keyboard-shortcuts-container-wrapper .screen3-container .screen-video{height:295px;width:520px}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper .keycombo-container,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper .keycombo-container{align-items:center;background-color:#b3bdf8;border-radius:10px;display:flex;gap:8px;height:72px;justify-content:center;padding:8px}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper .keycombo-description,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper .keycombo-description{color:#60697d;font-size:16px;font-weight:800;line-height:24px;text-align:center}.shortcut-landing-page{align-items:center;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;display:flex;flex-direction:column;height:600px;justify-content:space-between;padding:40px;position:relative;width:500px}.shortcut-landing-page-content{height:452px;margin:0 auto;max-width:100%;position:relative;width:520px}.shortcut-landing-page-content .shortcut-landing-page-content-item{align-items:flex-start;border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;height:160px;overflow:hidden;padding:24px;position:absolute;width:270px}.shortcut-landing-page-content .shortcut-landing-page-content-item .background-image{background:none;height:100px;left:122px;mix-blend-mode:plus-lighter;opacity:.2;pointer-events:none;position:absolute;top:69px;width:146px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;position:relative;width:100%;z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon{align-items:center;background:#fff;border-radius:8px;display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon svg{display:block}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-panel .content-header-icon svg{color:#26ab1a;height:24px;width:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-panel .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-filter .content-header-icon svg{color:#ee42cc}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-filter .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-keyboard .content-header-icon svg{color:#4259ee}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-keyboard .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons{align-items:center;display:flex;gap:4px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item{align-items:center;background:#fff;border-radius:4px;box-sizing:border-box;display:flex;justify-content:center;max-height:24px;min-height:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item--modifier{border:1px solid #c3c8d4;padding:2px 10px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item--letter{border:1px solid #d9dde7;padding:2px 12px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item .content-header-buttons-item-text{color:#1f2b4d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-plus{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-1{background:linear-gradient(180deg,#e8ffe7,#fff);border-left:1px solid #38d331;border-right:1px solid #38d331;border-top:1px solid #38d331;box-shadow:0 -10px 22px #38d33112;left:10px;top:18px;transform:rotate(-8deg);z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-1 .background-image{transform:rotate(8deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-2{background:linear-gradient(180deg,#ffeef4,#fff);border-left:1px solid #ee42cc;border-right:1px solid #ee42cc;border-top:1px solid #ee42cc;box-shadow:0 -10px 22px #ee42cc12;left:239.64px;top:141.78px;transform:rotate(4deg);z-index:2}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-2 .background-image{transform:rotate(9deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-3{background:linear-gradient(180deg,#eef0ff,#fff);border-left:1px solid #4259ee;border-right:1px solid #4259ee;border-top:1px solid #4259ee;box-shadow:0 -24px 22px #4259ee12;left:1px;top:286.32px;transform:rotate(-1deg);z-index:3}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-3 .background-image{transform:rotate(8deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content{display:flex;flex-direction:column;gap:6px;position:relative;width:100%;z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-1{animation:shortcut-card-enter-1 .4s cubic-bezier(.22,1,.36,1) .2s both;will-change:opacity,transform}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-2{animation:shortcut-card-enter-2 .4s cubic-bezier(.22,1,.36,1) .3s both;will-change:opacity,transform}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-3{animation:shortcut-card-enter-3 .4s cubic-bezier(.22,1,.36,1) .4s both;will-change:opacity,transform}.tab-items{border-radius:8px}.tab-items,.tab-items .ia-tabContainer{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.tab-items .impact-tab-panel{flex:1;min-height:0;overflow-y:auto}.modal-overlay{-webkit-align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;transition:opacity 225ms cubic-bezier(.4,0,.2,1)}.keyboard-shortcuts-overlay,.modal-overlay,.tutorial-overlay{background-color:#0d152ccc;bottom:0;left:0;position:fixed;right:0;top:0;-webkit-tap-highlight-color:transparent;opacity:1;z-index:9999}.keyboard-shortcuts-overlay,.tutorial-overlay{pointer-events:auto;transition:opacity .5s ease-in-out}.keyboard-shortcuts-overlay.overlay--hidden,.tutorial-overlay.overlay--hidden{opacity:0;pointer-events:none}.close-icon-container{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.close-icon-container:focus-visible{box-shadow:0 0 4px #0000001f;outline:none}.close-icon-container svg{height:18px;width:18px}.modal-wrapper{border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;flex-direction:column;left:50%;max-height:620px;min-height:400px;position:fixed;top:50%;transform:translate(-50%,-50%);width:800px;z-index:9999}.modal-wrapper .close-icon-container{right:-10px;top:-10px}.modal-wrapper .modal-content{background:linear-gradient(300deg,#4259ee -225%,#fff 30%);border-radius:12px 12px 0 0;display:flex;flex:1;flex-direction:column;gap:16px;margin-bottom:48px;min-height:0;overflow:hidden;padding:16px 16px 0}.modal-wrapper .modal-content .search-bar{height:36px}.modal-wrapper .modal-content .search-bar .impact-input-wrapper,.modal-wrapper .modal-content .search-bar .impact_inputbox_container_with_icons{height:100%;width:100%}.modal-wrapper .modal-content .tab-items .impact-tab-panel{margin-top:8px}.modal-wrapper .modal-content .list-container{display:flex;flex-direction:column;gap:8px}.modal-wrapper .modal-content .list-container .list-item{align-items:center;border-bottom:1px solid #eff2fa;display:flex;justify-content:space-between;padding:0 12px 8px}.modal-wrapper .modal-content .list-container .list-item .list-item-content{display:flex;flex-direction:column;gap:2px}.modal-wrapper .modal-content .list-container .list-item .list-item-content .list-item-title{color:#0d152c;font-size:14px;font-weight:500;line-height:21px;text-transform:capitalize}.modal-wrapper .modal-content .list-container .list-item .list-item-content .list-item-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}.modal-wrapper .modal-content .list-container .list-item .list-item-keys{display:flex;gap:8px}.modal-wrapper .modal-footer{align-items:center;background-color:#fff;border-radius:0 0 8px 8px;border-top:1px solid #d9dde7;bottom:0;display:flex;height:48px;justify-content:flex-end;left:0;padding:12px 16px;position:absolute;right:0}.modal-wrapper .modal-footer .modal-footer-content-left{align-items:center;display:flex;gap:12px}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-buttons{align-items:center;display:flex;gap:8px}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-seperator{border:1px solid #d9dde7;height:16px;margin:4px;width:0}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-text{color:#60697d;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.modal-wrapper .modal-footer .modal-footer-content-right{align-items:center;display:flex;gap:12px}.modal-wrapper .modal-footer .modal-footer-content-right-text{color:#60697d;cursor:pointer;font-size:14px;font-weight:500;line-height:20px}.keycap{align-items:center;background-color:#f8f9fb;border:1px solid #c3c8d4;border-radius:4px;cursor:pointer;display:flex;height:24px;justify-content:center;min-width:34px;padding:2px 10px}.keycap .keycap-label{color:#1f2b4d;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header.shortcut-landing-entrance-header{animation:shortcut-section-enter .4s cubic-bezier(.22,1,.36,1) 0s both;will-change:opacity,transform}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer.shortcut-landing-entrance-footer{animation:shortcut-section-enter .4s cubic-bezier(.22,1,.36,1) .6s both;will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer.shortcut-landing-entrance-footer,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header.shortcut-landing-entrance-header,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen-slide{animation:none!important;opacity:1;transform:none}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .button.active:after{animation:none!important;width:100%}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item{animation:none!important;opacity:1}}.keys{align-items:center;display:flex;gap:8px}.keys .button-outer{background:#000;border-radius:5px;display:flex;height:55px;justify-content:flex-end;position:relative;width:80px}.keys .button-outer:before{bottom:0;left:2px;transform:rotate(-51.34deg);transform-origin:left center;width:9px}.keys .button-outer:after,.keys .button-outer:before{background:#fff;content:"";filter:blur(.5px);height:1px;position:absolute}.keys .button-outer:after{bottom:1px;right:1px;transform:rotate(79deg);transform-origin:right center;width:6px}.keys .button-outer .button-inner{align-items:flex-end;background:linear-gradient(180deg,#404040 10.91%,#222);border:1px solid #404040;border-radius:5px;display:flex;flex-direction:column;height:49px;justify-content:space-between;padding:8px;width:74px}.keys .button-outer .button-inner:before{background:#fff;content:"";filter:blur(.5px);height:5px;left:2px;position:absolute;top:1px;transform:rotate(-55.34deg);transform-origin:left top;width:1px}.keys .button-outer .button-inner .key-symbol,.keys .button-outer .button-inner .key-text{color:#fff;font-family:SF Compact;font-size:12px;font-weight:400;text-align:right}.keys .button-outer.single-key{height:55px;width:55px}.keys .button-outer.single-key .button-inner{align-items:center;height:49px;justify-content:center;width:49px}.keys .button-outer.single-key .key-text{font-size:27px;text-align:center}.keys.keycombo-section-buttons{align-items:center;display:flex;gap:8px}.tutorial-modal-wrapper{align-items:center;border:1px solid #4259eeb3;border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;flex-direction:column;gap:16px;padding:12px;position:fixed;transition:all .8s ease-in-out;width:max-content;z-index:999999}.tutorial-modal-wrapper:before{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#4259ee0f;border-radius:12px;content:"";top:0;right:0;bottom:0;left:0;position:absolute;z-index:0}.tutorial-modal-wrapper.tutorial-modal--step-0{left:84px;top:8px}.tutorial-modal-wrapper.tutorial-modal--step-1{left:80px;top:calc(100% - 5px);transform:translateY(-100%)}.tutorial-modal-wrapper.tutorial-modal--step-2{left:calc(100% - 205px);top:73px;transform:translate(-100%)}.tutorial-modal-wrapper .tutorial-arrow--left-top{top:17px}.tutorial-modal-wrapper .tutorial-arrow--left,.tutorial-modal-wrapper .tutorial-arrow--left-top{border-bottom:10px solid #0000;border-right:17px solid #4259ee;border-top:10px solid #0000;left:-17px;position:absolute;z-index:1}.tutorial-modal-wrapper .tutorial-arrow--left{top:50%;transform:translateY(-50%)}.tutorial-modal-wrapper .tutorial-arrow--top-right{border-bottom:17px solid #4259ee;border-left:10px solid #0000;border-right:10px solid #0000;position:absolute;right:51px;top:-17px;z-index:1}.tutorial-modal-wrapper .top-section{align-items:center;background-color:#fff;border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;gap:16px;padding:8px;position:relative;z-index:1}.tutorial-modal-wrapper .top-section .top-section-content{align-items:center;display:flex;gap:8px}.tutorial-modal-wrapper .top-section .top-section-content .loader{display:flex}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container{display:flex;flex-direction:row}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container .ia-loader-small{height:16px;width:16px}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container .ia-loader-small .ia-loader-inner{height:12px;width:12px}.tutorial-modal-wrapper .top-section .top-section-content .loader .lottie-iframe{height:16px;width:16px}.tutorial-modal-wrapper .top-section .top-section-content .top-section-text{color:#1f2b4d;font-size:14px;font-weight:700;line-height:21px;text-align:center;text-transform:capitalize}.tutorial-modal-wrapper .top-section .top-section-buttons{margin-left:auto}.tutorial-modal-wrapper .bottom-section{align-items:center;align-self:stretch;display:flex;justify-content:space-between;position:relative;z-index:1}.tutorial-modal-wrapper .bottom-section .bottom-section-text{color:#1f2b4d;cursor:pointer;font-size:14px;font-weight:700;line-height:21px;text-align:center;text-transform:capitalize}.tutorial-modal-wrapper .bottom-section .bottom-section-text:hover{color:#4259ee}.progress-bar,.tutorial-modal-wrapper .bottom-section .bottom-section-progress{align-items:center;display:flex}.progress-bar .progress-line{border-top:4px solid #c3c8d4;height:0;transition:border-color .3s ease;width:76px}.progress-bar .progress-line--active{border-color:#4259ee}.progress-bar .progress-step{align-items:center;background-color:#fff;border:1px solid #7a8294;border-radius:50%;color:#7a8294;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:20px;justify-content:center;transition:all .3s ease;width:20px}.progress-bar .progress-step svg{height:6px;width:7px}.progress-bar .progress-step--active{border-color:#4259ee;color:#4259ee}.progress-bar .progress-step--completed{background-color:#4259ee;border-color:#4259ee;color:#fff}.progress-bar .progress-step .step-number{color:#7a8294;font-size:14px;font-weight:500;line-height:20px;text-align:center}.progress-bar .progress-step .step-number--active{color:#4259ee}.all-set-box-wrapper{bottom:24px;left:50%;position:fixed;transform:translate(-50%)}.all-set-box-wrapper .close-icon-container{right:-10px;top:-10px;z-index:9}.all-set-box-wrapper .all-set-box-content{-webkit-backdrop-filter:blur(21px);backdrop-filter:blur(21px);background:linear-gradient(132deg,#3bb273 -250.62%,#3bb27300 66.76%);border:2px solid #3bb273;border-radius:12px;box-shadow:inset -5px -5px 250px #ffffff05;display:flex;flex-direction:column;gap:2px;padding:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container{align-items:center;display:flex;gap:2px;height:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container .all-set-box-content-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container .all-set-box-content-animation{height:36px;overflow:visible;transform:translate(-2px,-6px) scale(2);width:36px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-description{color:#0d152c;font-size:14px;font-weight:500;line-height:20px}@media screen and (max-width:1512px){.keyboard-shortcuts-container-wrapper{padding:30px}.keyboard-shortcuts-container-wrapper .close-icon-container svg{height:14px;width:14px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container{gap:24px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide{height:339px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header{gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription{gap:2px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-title{font-size:24px;line-height:36px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-description{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section{gap:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content{height:339px;width:390px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item{gap:16px;height:120px;padding:18px;width:202px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item.item-2{left:183px;top:106.33px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item.item-3{top:214.75px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon{height:24px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content{gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-title{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-description{font-size:10px;line-height:14px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .screen-video,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .screen-video{height:222px;width:390px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper{gap:16px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-description,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-description{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container{gap:6px;height:54px;padding:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys{gap:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer{height:40px;width:60px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:before,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:before{width:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:after,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:after{width:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner{height:36px;padding:6px;width:56px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner:before,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner:before{height:3px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-text,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-text{font-size:9px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key{height:40px;width:40px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner{align-items:center;height:36px;justify-content:center;width:36px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-text,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-text{font-size:20px}}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import default_1$2 from "../../node_modules/@mui/icons-material/Add.js";
|
|
4
|
+
import default_1 from "../../node_modules/@mui/icons-material/FilterAltOutlined.js";
|
|
5
|
+
import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardRounded.js";
|
|
6
|
+
import { getAssetUrl } from "../../utils/assetBase.js";
|
|
7
|
+
import { isMac } from "../../utils/shortcuts/platform.js";
|
|
8
|
+
|
|
9
|
+
const PanelViewIcon = getAssetUrl("icons/panelView.svg");
|
|
10
|
+
const CARD_ITEMS = [
|
|
11
|
+
{
|
|
12
|
+
id: "item-1",
|
|
13
|
+
title: "Side navigation",
|
|
14
|
+
description: "Quick way to toggle the sidebar menu",
|
|
15
|
+
iconType: "panel",
|
|
16
|
+
shortcutLetter: "B"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
id: "item-2",
|
|
20
|
+
title: "Filter",
|
|
21
|
+
description: "Instantly opens or closes the filtering panel",
|
|
22
|
+
iconType: "filter",
|
|
23
|
+
shortcutLetter: "F"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
id: "item-3",
|
|
27
|
+
title: "Shortcut Setting",
|
|
28
|
+
description: "Instant access to the keyboard shortcut settings",
|
|
29
|
+
iconType: "keyboard",
|
|
30
|
+
shortcutLetter: "K"
|
|
31
|
+
}
|
|
32
|
+
];
|
|
33
|
+
const ShortcutLandingPage = ({
|
|
34
|
+
playEntrance = false,
|
|
35
|
+
setIsShowShortCutLandingPage,
|
|
36
|
+
setIsShowShortCutModal
|
|
37
|
+
}) => {
|
|
38
|
+
return /* @__PURE__ */ jsx(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
className: `shortcut-landing-page-content${playEntrance ? " shortcut-landing-entrance" : ""}`,
|
|
42
|
+
children: CARD_ITEMS.map((card) => /* @__PURE__ */ jsxs("div", { className: `shortcut-landing-page-content-item ${card.id}`, children: [
|
|
43
|
+
/* @__PURE__ */ jsx("div", { className: "background-image" }),
|
|
44
|
+
/* @__PURE__ */ jsx(ShortcutHeader, { iconType: card.iconType, shortcutLetter: card.shortcutLetter }),
|
|
45
|
+
/* @__PURE__ */ jsx(ShortcutContent, { contentDescription: card.description, contentHeader: card.title })
|
|
46
|
+
] }, card.id))
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
const ShortcutHeader = ({ iconType, shortcutLetter }) => {
|
|
51
|
+
const modifierLabel = iconType === "filter" ? isMac ? "⌥" : "Alt" : isMac ? "⌘" : "Ctrl";
|
|
52
|
+
return /* @__PURE__ */ jsxs("div", { className: `content-header header-${iconType}`, children: [
|
|
53
|
+
/* @__PURE__ */ jsx("div", { className: "content-header-icon", children: iconType === "filter" ? /* @__PURE__ */ jsx(default_1, { sx: { fontSize: 24 } }) : iconType === "keyboard" ? /* @__PURE__ */ jsx(default_1$1, { sx: { fontSize: 24 } }) : /* @__PURE__ */ jsx("img", { alt: "", src: PanelViewIcon }) }),
|
|
54
|
+
/* @__PURE__ */ jsxs("div", { className: "content-header-buttons", children: [
|
|
55
|
+
/* @__PURE__ */ jsx("div", { className: "content-header-buttons-item content-header-buttons-item--modifier", children: /* @__PURE__ */ jsx("span", { className: "content-header-buttons-item-text", children: modifierLabel }) }),
|
|
56
|
+
/* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "content-header-plus", children: /* @__PURE__ */ jsx(default_1$2, { sx: { fontSize: 16, color: "#60697d" } }) }),
|
|
57
|
+
/* @__PURE__ */ jsx("div", { className: "content-header-buttons-item content-header-buttons-item--letter", children: /* @__PURE__ */ jsx("span", { className: "content-header-buttons-item-text", children: shortcutLetter }) })
|
|
58
|
+
] })
|
|
59
|
+
] });
|
|
60
|
+
};
|
|
61
|
+
const ShortcutContent = ({ contentHeader, contentDescription }) => {
|
|
62
|
+
return /* @__PURE__ */ jsxs("div", { className: "content-content", children: [
|
|
63
|
+
/* @__PURE__ */ jsx("span", { className: "content-content-header-title", children: contentHeader }),
|
|
64
|
+
/* @__PURE__ */ jsx("span", { className: "content-content-header-description", children: contentDescription })
|
|
65
|
+
] });
|
|
66
|
+
};
|
|
67
|
+
export {
|
|
68
|
+
ShortcutLandingPage
|
|
69
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShortcutModal.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortCuts/ShortcutModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,iCAAiC,CAAC;AA8HzC,eAAO,MAAM,aAAa,GAAI;;;;CAAiC,mDA4D9D,CAAC"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}@keyframes shortcut-section-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slide-in-from-right{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-from-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}@keyframes dot-fill{0%{width:0}to{width:100%}}@keyframes shortcut-card-enter-1{0%{opacity:0;transform:translateY(20px) rotate(-8deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}}@keyframes shortcut-card-enter-2{0%{opacity:0;transform:translateY(20px) rotate(4deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(4deg) scale(1)}}@keyframes shortcut-card-enter-3{0%{opacity:0;transform:translateY(20px) rotate(-1deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(-1deg) scale(1)}}.keyboard-shortcuts-container-wrapper{background-color:#fff;background-image:radial-gradient(circle,#f7f7f799 2px,#0000 0),radial-gradient(circle,#f7f7f799 2px,#0000 0);background-size:18px 18px;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;left:50%;padding:40px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:999999}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container{align-items:center;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:space-between}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header{align-items:center;display:flex;flex-direction:column;gap:8px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription{align-items:center;display:flex;flex-direction:column;gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-title{color:#0d152c;font-size:32px;font-weight:800;line-height:48px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-description{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center;text-transform:capitalize;width:302px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section{align-items:center;display:flex;flex-direction:column;gap:8px;overflow:hidden}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide{height:452px;will-change:opacity,transform}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide--forward{animation:slide-in-from-right .38s cubic-bezier(.22,1,.36,1) both}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide--backward{animation:slide-in-from-left .38s cubic-bezier(.22,1,.36,1) both}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper{align-items:center;display:flex;gap:10px;justify-content:center}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button{background-color:#d9dde7;border-radius:5px;cursor:pointer;flex-shrink:0;height:10px;overflow:hidden;position:relative;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .2s;width:10px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button.active{background-color:#d9dde7;width:32px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button.active:after{animation:dot-fill var(--dot-duration,2s) linear forwards;background-color:#4259ee;border-radius:5px;content:"";height:100%;inset-block:0;left:0;position:absolute}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer .page-footer-buttons{align-items:center;display:flex;gap:12px}.keyboard-shortcuts-container-wrapper .screen2-container,.keyboard-shortcuts-container-wrapper .screen3-container{display:flex;flex-direction:column;gap:24px}.keyboard-shortcuts-container-wrapper .screen2-container .screen-video,.keyboard-shortcuts-container-wrapper .screen3-container .screen-video{height:295px;width:520px}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper .keycombo-container,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper .keycombo-container{align-items:center;background-color:#b3bdf8;border-radius:10px;display:flex;gap:8px;height:72px;justify-content:center;padding:8px}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper .keycombo-description,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper .keycombo-description{color:#60697d;font-size:16px;font-weight:800;line-height:24px;text-align:center}.shortcut-landing-page{align-items:center;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;display:flex;flex-direction:column;height:600px;justify-content:space-between;padding:40px;position:relative;width:500px}.shortcut-landing-page-content{height:452px;margin:0 auto;max-width:100%;position:relative;width:520px}.shortcut-landing-page-content .shortcut-landing-page-content-item{align-items:flex-start;border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;height:160px;overflow:hidden;padding:24px;position:absolute;width:270px}.shortcut-landing-page-content .shortcut-landing-page-content-item .background-image{background:none;height:100px;left:122px;mix-blend-mode:plus-lighter;opacity:.2;pointer-events:none;position:absolute;top:69px;width:146px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;position:relative;width:100%;z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon{align-items:center;background:#fff;border-radius:8px;display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon svg{display:block}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-panel .content-header-icon svg{color:#26ab1a;height:24px;width:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-panel .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-filter .content-header-icon svg{color:#ee42cc}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-filter .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-keyboard .content-header-icon svg{color:#4259ee}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-keyboard .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons{align-items:center;display:flex;gap:4px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item{align-items:center;background:#fff;border-radius:4px;box-sizing:border-box;display:flex;justify-content:center;max-height:24px;min-height:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item--modifier{border:1px solid #c3c8d4;padding:2px 10px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item--letter{border:1px solid #d9dde7;padding:2px 12px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item .content-header-buttons-item-text{color:#1f2b4d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-plus{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-1{background:linear-gradient(180deg,#e8ffe7,#fff);border-left:1px solid #38d331;border-right:1px solid #38d331;border-top:1px solid #38d331;box-shadow:0 -10px 22px #38d33112;left:10px;top:18px;transform:rotate(-8deg);z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-1 .background-image{transform:rotate(8deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-2{background:linear-gradient(180deg,#ffeef4,#fff);border-left:1px solid #ee42cc;border-right:1px solid #ee42cc;border-top:1px solid #ee42cc;box-shadow:0 -10px 22px #ee42cc12;left:239.64px;top:141.78px;transform:rotate(4deg);z-index:2}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-2 .background-image{transform:rotate(9deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-3{background:linear-gradient(180deg,#eef0ff,#fff);border-left:1px solid #4259ee;border-right:1px solid #4259ee;border-top:1px solid #4259ee;box-shadow:0 -24px 22px #4259ee12;left:1px;top:286.32px;transform:rotate(-1deg);z-index:3}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-3 .background-image{transform:rotate(8deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content{display:flex;flex-direction:column;gap:6px;position:relative;width:100%;z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-1{animation:shortcut-card-enter-1 .4s cubic-bezier(.22,1,.36,1) .2s both;will-change:opacity,transform}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-2{animation:shortcut-card-enter-2 .4s cubic-bezier(.22,1,.36,1) .3s both;will-change:opacity,transform}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-3{animation:shortcut-card-enter-3 .4s cubic-bezier(.22,1,.36,1) .4s both;will-change:opacity,transform}.tab-items{border-radius:8px}.tab-items,.tab-items .ia-tabContainer{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.tab-items .impact-tab-panel{flex:1;min-height:0;overflow-y:auto}.modal-overlay{-webkit-align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;transition:opacity 225ms cubic-bezier(.4,0,.2,1)}.keyboard-shortcuts-overlay,.modal-overlay,.tutorial-overlay{background-color:#0d152ccc;bottom:0;left:0;position:fixed;right:0;top:0;-webkit-tap-highlight-color:transparent;opacity:1;z-index:9999}.keyboard-shortcuts-overlay,.tutorial-overlay{pointer-events:auto;transition:opacity .5s ease-in-out}.keyboard-shortcuts-overlay.overlay--hidden,.tutorial-overlay.overlay--hidden{opacity:0;pointer-events:none}.close-icon-container{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.close-icon-container:focus-visible{box-shadow:0 0 4px #0000001f;outline:none}.close-icon-container svg{height:18px;width:18px}.modal-wrapper{border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;flex-direction:column;left:50%;max-height:620px;min-height:400px;position:fixed;top:50%;transform:translate(-50%,-50%);width:800px;z-index:9999}.modal-wrapper .close-icon-container{right:-10px;top:-10px}.modal-wrapper .modal-content{background:linear-gradient(300deg,#4259ee -225%,#fff 30%);border-radius:12px 12px 0 0;display:flex;flex:1;flex-direction:column;gap:16px;margin-bottom:48px;min-height:0;overflow:hidden;padding:16px 16px 0}.modal-wrapper .modal-content .search-bar{height:36px}.modal-wrapper .modal-content .search-bar .impact-input-wrapper,.modal-wrapper .modal-content .search-bar .impact_inputbox_container_with_icons{height:100%;width:100%}.modal-wrapper .modal-content .tab-items .impact-tab-panel{margin-top:8px}.modal-wrapper .modal-content .list-container{display:flex;flex-direction:column;gap:8px}.modal-wrapper .modal-content .list-container .list-item{align-items:center;border-bottom:1px solid #eff2fa;display:flex;justify-content:space-between;padding:0 12px 8px}.modal-wrapper .modal-content .list-container .list-item .list-item-content{display:flex;flex-direction:column;gap:2px}.modal-wrapper .modal-content .list-container .list-item .list-item-content .list-item-title{color:#0d152c;font-size:14px;font-weight:500;line-height:21px;text-transform:capitalize}.modal-wrapper .modal-content .list-container .list-item .list-item-content .list-item-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}.modal-wrapper .modal-content .list-container .list-item .list-item-keys{display:flex;gap:8px}.modal-wrapper .modal-footer{align-items:center;background-color:#fff;border-radius:0 0 8px 8px;border-top:1px solid #d9dde7;bottom:0;display:flex;height:48px;justify-content:flex-end;left:0;padding:12px 16px;position:absolute;right:0}.modal-wrapper .modal-footer .modal-footer-content-left{align-items:center;display:flex;gap:12px}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-buttons{align-items:center;display:flex;gap:8px}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-seperator{border:1px solid #d9dde7;height:16px;margin:4px;width:0}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-text{color:#60697d;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.modal-wrapper .modal-footer .modal-footer-content-right{align-items:center;display:flex;gap:12px}.modal-wrapper .modal-footer .modal-footer-content-right-text{color:#60697d;cursor:pointer;font-size:14px;font-weight:500;line-height:20px}.keycap{align-items:center;background-color:#f8f9fb;border:1px solid #c3c8d4;border-radius:4px;cursor:pointer;display:flex;height:24px;justify-content:center;min-width:34px;padding:2px 10px}.keycap .keycap-label{color:#1f2b4d;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header.shortcut-landing-entrance-header{animation:shortcut-section-enter .4s cubic-bezier(.22,1,.36,1) 0s both;will-change:opacity,transform}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer.shortcut-landing-entrance-footer{animation:shortcut-section-enter .4s cubic-bezier(.22,1,.36,1) .6s both;will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer.shortcut-landing-entrance-footer,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header.shortcut-landing-entrance-header,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen-slide{animation:none!important;opacity:1;transform:none}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .button.active:after{animation:none!important;width:100%}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item{animation:none!important;opacity:1}}.keys{align-items:center;display:flex;gap:8px}.keys .button-outer{background:#000;border-radius:5px;display:flex;height:55px;justify-content:flex-end;position:relative;width:80px}.keys .button-outer:before{bottom:0;left:2px;transform:rotate(-51.34deg);transform-origin:left center;width:9px}.keys .button-outer:after,.keys .button-outer:before{background:#fff;content:"";filter:blur(.5px);height:1px;position:absolute}.keys .button-outer:after{bottom:1px;right:1px;transform:rotate(79deg);transform-origin:right center;width:6px}.keys .button-outer .button-inner{align-items:flex-end;background:linear-gradient(180deg,#404040 10.91%,#222);border:1px solid #404040;border-radius:5px;display:flex;flex-direction:column;height:49px;justify-content:space-between;padding:8px;width:74px}.keys .button-outer .button-inner:before{background:#fff;content:"";filter:blur(.5px);height:5px;left:2px;position:absolute;top:1px;transform:rotate(-55.34deg);transform-origin:left top;width:1px}.keys .button-outer .button-inner .key-symbol,.keys .button-outer .button-inner .key-text{color:#fff;font-family:SF Compact;font-size:12px;font-weight:400;text-align:right}.keys .button-outer.single-key{height:55px;width:55px}.keys .button-outer.single-key .button-inner{align-items:center;height:49px;justify-content:center;width:49px}.keys .button-outer.single-key .key-text{font-size:27px;text-align:center}.keys.keycombo-section-buttons{align-items:center;display:flex;gap:8px}.tutorial-modal-wrapper{align-items:center;border:1px solid #4259eeb3;border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;flex-direction:column;gap:16px;padding:12px;position:fixed;transition:all .8s ease-in-out;width:max-content;z-index:999999}.tutorial-modal-wrapper:before{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#4259ee0f;border-radius:12px;content:"";top:0;right:0;bottom:0;left:0;position:absolute;z-index:0}.tutorial-modal-wrapper.tutorial-modal--step-0{left:84px;top:8px}.tutorial-modal-wrapper.tutorial-modal--step-1{left:80px;top:calc(100% - 5px);transform:translateY(-100%)}.tutorial-modal-wrapper.tutorial-modal--step-2{left:calc(100% - 205px);top:73px;transform:translate(-100%)}.tutorial-modal-wrapper .tutorial-arrow--left-top{top:17px}.tutorial-modal-wrapper .tutorial-arrow--left,.tutorial-modal-wrapper .tutorial-arrow--left-top{border-bottom:10px solid #0000;border-right:17px solid #4259ee;border-top:10px solid #0000;left:-17px;position:absolute;z-index:1}.tutorial-modal-wrapper .tutorial-arrow--left{top:50%;transform:translateY(-50%)}.tutorial-modal-wrapper .tutorial-arrow--top-right{border-bottom:17px solid #4259ee;border-left:10px solid #0000;border-right:10px solid #0000;position:absolute;right:51px;top:-17px;z-index:1}.tutorial-modal-wrapper .top-section{align-items:center;background-color:#fff;border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;gap:16px;padding:8px;position:relative;z-index:1}.tutorial-modal-wrapper .top-section .top-section-content{align-items:center;display:flex;gap:8px}.tutorial-modal-wrapper .top-section .top-section-content .loader{display:flex}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container{display:flex;flex-direction:row}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container .ia-loader-small{height:16px;width:16px}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container .ia-loader-small .ia-loader-inner{height:12px;width:12px}.tutorial-modal-wrapper .top-section .top-section-content .loader .lottie-iframe{height:16px;width:16px}.tutorial-modal-wrapper .top-section .top-section-content .top-section-text{color:#1f2b4d;font-size:14px;font-weight:700;line-height:21px;text-align:center;text-transform:capitalize}.tutorial-modal-wrapper .top-section .top-section-buttons{margin-left:auto}.tutorial-modal-wrapper .bottom-section{align-items:center;align-self:stretch;display:flex;justify-content:space-between;position:relative;z-index:1}.tutorial-modal-wrapper .bottom-section .bottom-section-text{color:#1f2b4d;cursor:pointer;font-size:14px;font-weight:700;line-height:21px;text-align:center;text-transform:capitalize}.tutorial-modal-wrapper .bottom-section .bottom-section-text:hover{color:#4259ee}.progress-bar,.tutorial-modal-wrapper .bottom-section .bottom-section-progress{align-items:center;display:flex}.progress-bar .progress-line{border-top:4px solid #c3c8d4;height:0;transition:border-color .3s ease;width:76px}.progress-bar .progress-line--active{border-color:#4259ee}.progress-bar .progress-step{align-items:center;background-color:#fff;border:1px solid #7a8294;border-radius:50%;color:#7a8294;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:20px;justify-content:center;transition:all .3s ease;width:20px}.progress-bar .progress-step svg{height:6px;width:7px}.progress-bar .progress-step--active{border-color:#4259ee;color:#4259ee}.progress-bar .progress-step--completed{background-color:#4259ee;border-color:#4259ee;color:#fff}.progress-bar .progress-step .step-number{color:#7a8294;font-size:14px;font-weight:500;line-height:20px;text-align:center}.progress-bar .progress-step .step-number--active{color:#4259ee}.all-set-box-wrapper{bottom:24px;left:50%;position:fixed;transform:translate(-50%)}.all-set-box-wrapper .close-icon-container{right:-10px;top:-10px;z-index:9}.all-set-box-wrapper .all-set-box-content{-webkit-backdrop-filter:blur(21px);backdrop-filter:blur(21px);background:linear-gradient(132deg,#3bb273 -250.62%,#3bb27300 66.76%);border:2px solid #3bb273;border-radius:12px;box-shadow:inset -5px -5px 250px #ffffff05;display:flex;flex-direction:column;gap:2px;padding:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container{align-items:center;display:flex;gap:2px;height:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container .all-set-box-content-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container .all-set-box-content-animation{height:36px;overflow:visible;transform:translate(-2px,-6px) scale(2);width:36px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-description{color:#0d152c;font-size:14px;font-weight:500;line-height:20px}@media screen and (max-width:1512px){.keyboard-shortcuts-container-wrapper{padding:30px}.keyboard-shortcuts-container-wrapper .close-icon-container svg{height:14px;width:14px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container{gap:24px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide{height:339px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header{gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription{gap:2px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-title{font-size:24px;line-height:36px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-description{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section{gap:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content{height:339px;width:390px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item{gap:16px;height:120px;padding:18px;width:202px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item.item-2{left:183px;top:106.33px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item.item-3{top:214.75px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon{height:24px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content{gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-title{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-description{font-size:10px;line-height:14px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .screen-video,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .screen-video{height:222px;width:390px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper{gap:16px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-description,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-description{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container{gap:6px;height:54px;padding:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys{gap:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer{height:40px;width:60px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:before,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:before{width:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:after,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:after{width:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner{height:36px;padding:6px;width:56px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner:before,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner:before{height:3px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-text,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-text{font-size:9px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key{height:40px;width:40px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner{align-items:center;height:36px;justify-content:center;width:36px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-text,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-text{font-size:20px}}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useMemo } from "react";
|
|
4
|
+
import default_1 from "../../node_modules/@mui/icons-material/CloseRounded.js";
|
|
5
|
+
import default_1$1 from "../../node_modules/@mui/icons-material/Search.js";
|
|
6
|
+
import { isMac } from "../../utils/shortcuts/platform.js";
|
|
7
|
+
import { Input } from "../Input/index.js";
|
|
8
|
+
import { Tabs } from "../Tabs/index.js";
|
|
9
|
+
|
|
10
|
+
const ITEM_HEIGHT = 57;
|
|
11
|
+
const CHROME_HEIGHT = 172;
|
|
12
|
+
const MIN_HEIGHT = 400;
|
|
13
|
+
const MAX_HEIGHT = 620;
|
|
14
|
+
const Keycap = ({ label }) => {
|
|
15
|
+
return /* @__PURE__ */ jsx("div", { className: "keycap", children: /* @__PURE__ */ jsx("span", { className: "keycap-label", children: label }) });
|
|
16
|
+
};
|
|
17
|
+
const filterShortcuts = (shortcuts, searchValue) => {
|
|
18
|
+
if (!searchValue) return shortcuts;
|
|
19
|
+
const term = searchValue.toLowerCase();
|
|
20
|
+
return shortcuts.filter(
|
|
21
|
+
(s) => s.title.toLowerCase().includes(term) || s.description.toLowerCase().includes(term)
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
const ShortcutList = ({ shortcuts, searchValue }) => {
|
|
25
|
+
const filtered = filterShortcuts(shortcuts, searchValue);
|
|
26
|
+
return /* @__PURE__ */ jsx("div", { className: "list-container", children: filtered.map((shortcut, index) => /* @__PURE__ */ jsxs("div", { className: "list-item", children: [
|
|
27
|
+
/* @__PURE__ */ jsxs("div", { className: "list-item-content", children: [
|
|
28
|
+
/* @__PURE__ */ jsx("div", { className: "list-item-title", children: shortcut.title }),
|
|
29
|
+
/* @__PURE__ */ jsx("div", { className: "list-item-description", children: shortcut.description })
|
|
30
|
+
] }),
|
|
31
|
+
/* @__PURE__ */ jsx("div", { className: "list-item-keys", children: shortcut.keys.map((key, keyIndex) => /* @__PURE__ */ jsx(Keycap, { label: key }, keyIndex)) })
|
|
32
|
+
] }, index)) });
|
|
33
|
+
};
|
|
34
|
+
const navigationShortcuts = [
|
|
35
|
+
{
|
|
36
|
+
title: "Copy Cells",
|
|
37
|
+
description: "Copy selected cells to clipboard ",
|
|
38
|
+
keys: [isMac ? "⌘" : "Ctrl", "C"]
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
title: "Paste cells",
|
|
42
|
+
description: "Paste clipboard Content to Selected cells",
|
|
43
|
+
keys: [isMac ? "⌘" : "Ctrl", "V"]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
title: "Select all rows",
|
|
47
|
+
description: "Select all rows in the table",
|
|
48
|
+
keys: [isMac ? "⌘" : "Ctrl", "A"]
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
title: "Copy Cells",
|
|
52
|
+
description: "Copy selected cells to clipboard ",
|
|
53
|
+
keys: [isMac ? "⌘" : "Ctrl", "C"]
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
title: "Paste cells",
|
|
57
|
+
description: "Paste clipboard Content to Selected cells",
|
|
58
|
+
keys: [isMac ? "⌘" : "Ctrl", "V"]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
title: "Select all rows",
|
|
62
|
+
description: "Select all rows in the table",
|
|
63
|
+
keys: [isMac ? "⌘" : "Ctrl", "A"]
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
title: "Copy Cells",
|
|
67
|
+
description: "Copy selected cells to clipboard ",
|
|
68
|
+
keys: [isMac ? "⌘" : "Ctrl", "C"]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
title: "Paste cells",
|
|
72
|
+
description: "Paste clipboard Content to Selected cells",
|
|
73
|
+
keys: [isMac ? "⌘" : "Ctrl", "V"]
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
title: "Select all rows",
|
|
77
|
+
description: "Select all rows in the table",
|
|
78
|
+
keys: [isMac ? "⌘" : "Ctrl", "A"]
|
|
79
|
+
}
|
|
80
|
+
];
|
|
81
|
+
const tableShortcuts = [
|
|
82
|
+
{
|
|
83
|
+
title: "Copy Cells",
|
|
84
|
+
description: "Copy selected cells to clipboard ",
|
|
85
|
+
keys: [isMac ? "⌘" : "Ctrl", "C"]
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
title: "Paste cells",
|
|
89
|
+
description: "Paste clipboard Content to Selected cells",
|
|
90
|
+
keys: [isMac ? "⌘" : "Ctrl", "V"]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
title: "Select all rows",
|
|
94
|
+
description: "Select all rows in the table",
|
|
95
|
+
keys: [isMac ? "⌘" : "Ctrl", "A"]
|
|
96
|
+
}
|
|
97
|
+
];
|
|
98
|
+
const viewShortcuts = [
|
|
99
|
+
{
|
|
100
|
+
title: "Copy Cells",
|
|
101
|
+
description: "Copy selected cells to clipboard ",
|
|
102
|
+
keys: [isMac ? "⌘" : "Ctrl", "C"]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
title: "Paste cells",
|
|
106
|
+
description: "Paste clipboard Content to Selected cells",
|
|
107
|
+
keys: [isMac ? "⌘" : "Ctrl", "V"]
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
title: "Select all rows",
|
|
111
|
+
description: "Select all rows in the table",
|
|
112
|
+
keys: [isMac ? "⌘" : "Ctrl", "A"]
|
|
113
|
+
}
|
|
114
|
+
];
|
|
115
|
+
const ShortcutModal = ({ open, onClose, shortcutGroups }) => {
|
|
116
|
+
const [activeTab, setActiveTab] = useState("opt1");
|
|
117
|
+
const [searchValue, setSearchValue] = useState("");
|
|
118
|
+
const modalHeight = useMemo(() => {
|
|
119
|
+
const maxItems = Math.max(
|
|
120
|
+
navigationShortcuts.length,
|
|
121
|
+
tableShortcuts.length,
|
|
122
|
+
viewShortcuts.length
|
|
123
|
+
);
|
|
124
|
+
return Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, maxItems * ITEM_HEIGHT + CHROME_HEIGHT));
|
|
125
|
+
}, []);
|
|
126
|
+
return open ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
127
|
+
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "modal-overlay" }),
|
|
128
|
+
/* @__PURE__ */ jsxs("div", { className: "modal-wrapper", style: { height: modalHeight }, children: [
|
|
129
|
+
/* @__PURE__ */ jsx("div", { className: "close-icon-container", onClick: onClose, children: /* @__PURE__ */ jsx(default_1, { fontSize: "small", sx: { color: "#60697D" } }) }),
|
|
130
|
+
/* @__PURE__ */ jsxs("div", { className: "modal-content", children: [
|
|
131
|
+
/* @__PURE__ */ jsx("div", { className: "search-bar", children: /* @__PURE__ */ jsx(
|
|
132
|
+
Input,
|
|
133
|
+
{
|
|
134
|
+
id: "",
|
|
135
|
+
leftIcon: /* @__PURE__ */ jsx(default_1$1, { fontSize: "small" }),
|
|
136
|
+
name: "",
|
|
137
|
+
placeholder: "Search",
|
|
138
|
+
type: "text",
|
|
139
|
+
value: searchValue,
|
|
140
|
+
onChange: (e) => {
|
|
141
|
+
setSearchValue(e.target.value);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
) }),
|
|
145
|
+
/* @__PURE__ */ jsx("div", { className: "tab-items", children: /* @__PURE__ */ jsx(
|
|
146
|
+
Tabs,
|
|
147
|
+
{
|
|
148
|
+
orientation: "horizontal",
|
|
149
|
+
tabNames: shortcutGroups,
|
|
150
|
+
tabPanels: shortcutGroups == null ? void 0 : shortcutGroups.map((tab) => /* @__PURE__ */ jsx(ShortcutList, { searchValue, shortcuts: tab.data })),
|
|
151
|
+
value: activeTab,
|
|
152
|
+
onChange: (e, value) => {
|
|
153
|
+
setActiveTab(value);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
) })
|
|
157
|
+
] }),
|
|
158
|
+
/* @__PURE__ */ jsx("div", { className: "modal-footer", children: /* @__PURE__ */ jsxs("div", { className: "modal-footer-content-right", children: [
|
|
159
|
+
/* @__PURE__ */ jsx("div", { className: "modal-footer-content-right-button", children: /* @__PURE__ */ jsx(Keycap, { label: "esc" }) }),
|
|
160
|
+
/* @__PURE__ */ jsx("span", { className: "modal-footer-content-right-text", children: "Close" })
|
|
161
|
+
] }) })
|
|
162
|
+
] })
|
|
163
|
+
] }) : null;
|
|
164
|
+
};
|
|
165
|
+
export {
|
|
166
|
+
ShortcutModal
|
|
167
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StarOutlineIcon.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortCuts/StarOutlineIcon.tsx"],"names":[],"mappings":"AAIA,sGAAsG;AACtG,eAAO,MAAM,eAAe,GAAI,UAAK,4CAOpC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"allSetBox.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortCuts/allSetBox.tsx"],"names":[],"mappings":"AAQA,OAAO,iCAAiC,CAAC;AAEzC,eAAO,MAAM,SAAS,GAAI;;;CAA2C,4CA0BpE,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900";*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}@keyframes shortcut-section-enter{0%{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slide-in-from-right{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-from-left{0%{opacity:0;transform:translate(-48px)}to{opacity:1;transform:translate(0)}}@keyframes dot-fill{0%{width:0}to{width:100%}}@keyframes shortcut-card-enter-1{0%{opacity:0;transform:translateY(20px) rotate(-8deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}}@keyframes shortcut-card-enter-2{0%{opacity:0;transform:translateY(20px) rotate(4deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(4deg) scale(1)}}@keyframes shortcut-card-enter-3{0%{opacity:0;transform:translateY(20px) rotate(-1deg) scale(.98)}to{opacity:1;transform:translateY(0) rotate(-1deg) scale(1)}}.keyboard-shortcuts-container-wrapper{background-color:#fff;background-image:radial-gradient(circle,#f7f7f799 2px,#0000 0),radial-gradient(circle,#f7f7f799 2px,#0000 0);background-size:18px 18px;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;left:50%;padding:40px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:999999}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container{align-items:center;display:flex;flex-direction:column;gap:32px;height:100%;justify-content:space-between}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header{align-items:center;display:flex;flex-direction:column;gap:8px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription{align-items:center;display:flex;flex-direction:column;gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-title{color:#0d152c;font-size:32px;font-weight:800;line-height:48px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-description{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center;text-transform:capitalize;width:302px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section{align-items:center;display:flex;flex-direction:column;gap:8px;overflow:hidden}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide{height:452px;will-change:opacity,transform}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide--forward{animation:slide-in-from-right .38s cubic-bezier(.22,1,.36,1) both}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide--backward{animation:slide-in-from-left .38s cubic-bezier(.22,1,.36,1) both}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper{align-items:center;display:flex;gap:10px;justify-content:center}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button{background-color:#d9dde7;border-radius:5px;cursor:pointer;flex-shrink:0;height:10px;overflow:hidden;position:relative;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .2s;width:10px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button.active{background-color:#d9dde7;width:32px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .button-carousel-wrapper .button.active:after{animation:dot-fill var(--dot-duration,2s) linear forwards;background-color:#4259ee;border-radius:5px;content:"";height:100%;inset-block:0;left:0;position:absolute}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer .page-footer-buttons{align-items:center;display:flex;gap:12px}.keyboard-shortcuts-container-wrapper .screen2-container,.keyboard-shortcuts-container-wrapper .screen3-container{display:flex;flex-direction:column;gap:24px}.keyboard-shortcuts-container-wrapper .screen2-container .screen-video,.keyboard-shortcuts-container-wrapper .screen3-container .screen-video{height:295px;width:520px}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper .keycombo-container,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper .keycombo-container{align-items:center;background-color:#b3bdf8;border-radius:10px;display:flex;gap:8px;height:72px;justify-content:center;padding:8px}.keyboard-shortcuts-container-wrapper .screen2-container .keycombo-container-wrapper .keycombo-description,.keyboard-shortcuts-container-wrapper .screen3-container .keycombo-container-wrapper .keycombo-description{color:#60697d;font-size:16px;font-weight:800;line-height:24px;text-align:center}.shortcut-landing-page{align-items:center;border-radius:12px;box-shadow:0 0 30px 6px #0000001a;display:flex;flex-direction:column;height:600px;justify-content:space-between;padding:40px;position:relative;width:500px}.shortcut-landing-page-content{height:452px;margin:0 auto;max-width:100%;position:relative;width:520px}.shortcut-landing-page-content .shortcut-landing-page-content-item{align-items:flex-start;border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;height:160px;overflow:hidden;padding:24px;position:absolute;width:270px}.shortcut-landing-page-content .shortcut-landing-page-content-item .background-image{background:none;height:100px;left:122px;mix-blend-mode:plus-lighter;opacity:.2;pointer-events:none;position:absolute;top:69px;width:146px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;position:relative;width:100%;z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon{align-items:center;background:#fff;border-radius:8px;display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon svg{display:block}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-panel .content-header-icon svg{color:#26ab1a;height:24px;width:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-panel .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-filter .content-header-icon svg{color:#ee42cc}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-filter .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-keyboard .content-header-icon svg{color:#4259ee}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header.header-keyboard .content-header-icon svg path{fill:currentColor}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons{align-items:center;display:flex;gap:4px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item{align-items:center;background:#fff;border-radius:4px;box-sizing:border-box;display:flex;justify-content:center;max-height:24px;min-height:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item--modifier{border:1px solid #c3c8d4;padding:2px 10px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item--letter{border:1px solid #d9dde7;padding:2px 12px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-buttons-item .content-header-buttons-item-text{color:#1f2b4d;font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:20px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-plus{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-1{background:linear-gradient(180deg,#e8ffe7,#fff);border-left:1px solid #38d331;border-right:1px solid #38d331;border-top:1px solid #38d331;box-shadow:0 -10px 22px #38d33112;left:10px;top:18px;transform:rotate(-8deg);z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-1 .background-image{transform:rotate(8deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-2{background:linear-gradient(180deg,#ffeef4,#fff);border-left:1px solid #ee42cc;border-right:1px solid #ee42cc;border-top:1px solid #ee42cc;box-shadow:0 -10px 22px #ee42cc12;left:239.64px;top:141.78px;transform:rotate(4deg);z-index:2}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-2 .background-image{transform:rotate(9deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-3{background:linear-gradient(180deg,#eef0ff,#fff);border-left:1px solid #4259ee;border-right:1px solid #4259ee;border-top:1px solid #4259ee;box-shadow:0 -24px 22px #4259ee12;left:1px;top:286.32px;transform:rotate(-1deg);z-index:3}.shortcut-landing-page-content .shortcut-landing-page-content-item.item-3 .background-image{transform:rotate(8deg)}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content{display:flex;flex-direction:column;gap:6px;position:relative;width:100%;z-index:1}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-1{animation:shortcut-card-enter-1 .4s cubic-bezier(.22,1,.36,1) .2s both;will-change:opacity,transform}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-2{animation:shortcut-card-enter-2 .4s cubic-bezier(.22,1,.36,1) .3s both;will-change:opacity,transform}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item.item-3{animation:shortcut-card-enter-3 .4s cubic-bezier(.22,1,.36,1) .4s both;will-change:opacity,transform}.tab-items{border-radius:8px}.tab-items,.tab-items .ia-tabContainer{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.tab-items .impact-tab-panel{flex:1;min-height:0;overflow-y:auto}.modal-overlay{-webkit-align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;transition:opacity 225ms cubic-bezier(.4,0,.2,1)}.keyboard-shortcuts-overlay,.modal-overlay,.tutorial-overlay{background-color:#0d152ccc;bottom:0;left:0;position:fixed;right:0;top:0;-webkit-tap-highlight-color:transparent;opacity:1;z-index:9999}.keyboard-shortcuts-overlay,.tutorial-overlay{pointer-events:auto;transition:opacity .5s ease-in-out}.keyboard-shortcuts-overlay.overlay--hidden,.tutorial-overlay.overlay--hidden{opacity:0;pointer-events:none}.close-icon-container{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 4px #0000001f;cursor:pointer;display:flex;justify-content:center;padding:6px;position:absolute;right:12px;top:12px}.close-icon-container:focus-visible{box-shadow:0 0 4px #0000001f;outline:none}.close-icon-container svg{height:18px;width:18px}.modal-wrapper{border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;flex-direction:column;left:50%;max-height:620px;min-height:400px;position:fixed;top:50%;transform:translate(-50%,-50%);width:800px;z-index:9999}.modal-wrapper .close-icon-container{right:-10px;top:-10px}.modal-wrapper .modal-content{background:linear-gradient(300deg,#4259ee -225%,#fff 30%);border-radius:12px 12px 0 0;display:flex;flex:1;flex-direction:column;gap:16px;margin-bottom:48px;min-height:0;overflow:hidden;padding:16px 16px 0}.modal-wrapper .modal-content .search-bar{height:36px}.modal-wrapper .modal-content .search-bar .impact-input-wrapper,.modal-wrapper .modal-content .search-bar .impact_inputbox_container_with_icons{height:100%;width:100%}.modal-wrapper .modal-content .tab-items .impact-tab-panel{margin-top:8px}.modal-wrapper .modal-content .list-container{display:flex;flex-direction:column;gap:8px}.modal-wrapper .modal-content .list-container .list-item{align-items:center;border-bottom:1px solid #eff2fa;display:flex;justify-content:space-between;padding:0 12px 8px}.modal-wrapper .modal-content .list-container .list-item .list-item-content{display:flex;flex-direction:column;gap:2px}.modal-wrapper .modal-content .list-container .list-item .list-item-content .list-item-title{color:#0d152c;font-size:14px;font-weight:500;line-height:21px;text-transform:capitalize}.modal-wrapper .modal-content .list-container .list-item .list-item-content .list-item-description{color:#7a8294;font-size:12px;font-weight:500;line-height:16px;text-transform:capitalize}.modal-wrapper .modal-content .list-container .list-item .list-item-keys{display:flex;gap:8px}.modal-wrapper .modal-footer{align-items:center;background-color:#fff;border-radius:0 0 8px 8px;border-top:1px solid #d9dde7;bottom:0;display:flex;height:48px;justify-content:flex-end;left:0;padding:12px 16px;position:absolute;right:0}.modal-wrapper .modal-footer .modal-footer-content-left{align-items:center;display:flex;gap:12px}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-buttons{align-items:center;display:flex;gap:8px}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-seperator{border:1px solid #d9dde7;height:16px;margin:4px;width:0}.modal-wrapper .modal-footer .modal-footer-content-left .modal-footer-content-left-text{color:#60697d;font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.modal-wrapper .modal-footer .modal-footer-content-right{align-items:center;display:flex;gap:12px}.modal-wrapper .modal-footer .modal-footer-content-right-text{color:#60697d;cursor:pointer;font-size:14px;font-weight:500;line-height:20px}.keycap{align-items:center;background-color:#f8f9fb;border:1px solid #c3c8d4;border-radius:4px;cursor:pointer;display:flex;height:24px;justify-content:center;min-width:34px;padding:2px 10px}.keycap .keycap-label{color:#1f2b4d;font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header.shortcut-landing-entrance-header{animation:shortcut-section-enter .4s cubic-bezier(.22,1,.36,1) 0s both;will-change:opacity,transform}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer.shortcut-landing-entrance-footer{animation:shortcut-section-enter .4s cubic-bezier(.22,1,.36,1) .6s both;will-change:opacity,transform}@media (prefers-reduced-motion:reduce){.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-footer.shortcut-landing-entrance-footer,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header.shortcut-landing-entrance-header,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen-slide{animation:none!important;opacity:1;transform:none}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .button.active:after{animation:none!important;width:100%}.shortcut-landing-page-content.shortcut-landing-entrance .shortcut-landing-page-content-item{animation:none!important;opacity:1}}.keys{align-items:center;display:flex;gap:8px}.keys .button-outer{background:#000;border-radius:5px;display:flex;height:55px;justify-content:flex-end;position:relative;width:80px}.keys .button-outer:before{bottom:0;left:2px;transform:rotate(-51.34deg);transform-origin:left center;width:9px}.keys .button-outer:after,.keys .button-outer:before{background:#fff;content:"";filter:blur(.5px);height:1px;position:absolute}.keys .button-outer:after{bottom:1px;right:1px;transform:rotate(79deg);transform-origin:right center;width:6px}.keys .button-outer .button-inner{align-items:flex-end;background:linear-gradient(180deg,#404040 10.91%,#222);border:1px solid #404040;border-radius:5px;display:flex;flex-direction:column;height:49px;justify-content:space-between;padding:8px;width:74px}.keys .button-outer .button-inner:before{background:#fff;content:"";filter:blur(.5px);height:5px;left:2px;position:absolute;top:1px;transform:rotate(-55.34deg);transform-origin:left top;width:1px}.keys .button-outer .button-inner .key-symbol,.keys .button-outer .button-inner .key-text{color:#fff;font-family:SF Compact;font-size:12px;font-weight:400;text-align:right}.keys .button-outer.single-key{height:55px;width:55px}.keys .button-outer.single-key .button-inner{align-items:center;height:49px;justify-content:center;width:49px}.keys .button-outer.single-key .key-text{font-size:27px;text-align:center}.keys.keycombo-section-buttons{align-items:center;display:flex;gap:8px}.tutorial-modal-wrapper{align-items:center;border:1px solid #4259eeb3;border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;flex-direction:column;gap:16px;padding:12px;position:fixed;transition:all .8s ease-in-out;width:max-content;z-index:999999}.tutorial-modal-wrapper:before{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#4259ee0f;border-radius:12px;content:"";top:0;right:0;bottom:0;left:0;position:absolute;z-index:0}.tutorial-modal-wrapper.tutorial-modal--step-0{left:84px;top:8px}.tutorial-modal-wrapper.tutorial-modal--step-1{left:80px;top:calc(100% - 5px);transform:translateY(-100%)}.tutorial-modal-wrapper.tutorial-modal--step-2{left:calc(100% - 205px);top:73px;transform:translate(-100%)}.tutorial-modal-wrapper .tutorial-arrow--left-top{top:17px}.tutorial-modal-wrapper .tutorial-arrow--left,.tutorial-modal-wrapper .tutorial-arrow--left-top{border-bottom:10px solid #0000;border-right:17px solid #4259ee;border-top:10px solid #0000;left:-17px;position:absolute;z-index:1}.tutorial-modal-wrapper .tutorial-arrow--left{top:50%;transform:translateY(-50%)}.tutorial-modal-wrapper .tutorial-arrow--top-right{border-bottom:17px solid #4259ee;border-left:10px solid #0000;border-right:10px solid #0000;position:absolute;right:51px;top:-17px;z-index:1}.tutorial-modal-wrapper .top-section{align-items:center;background-color:#fff;border-radius:12px;box-shadow:0 0 18px 8px #0000000f;display:flex;gap:16px;padding:8px;position:relative;z-index:1}.tutorial-modal-wrapper .top-section .top-section-content{align-items:center;display:flex;gap:8px}.tutorial-modal-wrapper .top-section .top-section-content .loader{display:flex}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container{display:flex;flex-direction:row}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container .ia-loader-small{height:16px;width:16px}.tutorial-modal-wrapper .top-section .top-section-content .loader .ia-loader-container .ia-loader-small .ia-loader-inner{height:12px;width:12px}.tutorial-modal-wrapper .top-section .top-section-content .loader .lottie-iframe{height:16px;width:16px}.tutorial-modal-wrapper .top-section .top-section-content .top-section-text{color:#1f2b4d;font-size:14px;font-weight:700;line-height:21px;text-align:center;text-transform:capitalize}.tutorial-modal-wrapper .top-section .top-section-buttons{margin-left:auto}.tutorial-modal-wrapper .bottom-section{align-items:center;align-self:stretch;display:flex;justify-content:space-between;position:relative;z-index:1}.tutorial-modal-wrapper .bottom-section .bottom-section-text{color:#1f2b4d;cursor:pointer;font-size:14px;font-weight:700;line-height:21px;text-align:center;text-transform:capitalize}.tutorial-modal-wrapper .bottom-section .bottom-section-text:hover{color:#4259ee}.progress-bar,.tutorial-modal-wrapper .bottom-section .bottom-section-progress{align-items:center;display:flex}.progress-bar .progress-line{border-top:4px solid #c3c8d4;height:0;transition:border-color .3s ease;width:76px}.progress-bar .progress-line--active{border-color:#4259ee}.progress-bar .progress-step{align-items:center;background-color:#fff;border:1px solid #7a8294;border-radius:50%;color:#7a8294;display:flex;flex-shrink:0;font-size:12px;font-weight:600;height:20px;justify-content:center;transition:all .3s ease;width:20px}.progress-bar .progress-step svg{height:6px;width:7px}.progress-bar .progress-step--active{border-color:#4259ee;color:#4259ee}.progress-bar .progress-step--completed{background-color:#4259ee;border-color:#4259ee;color:#fff}.progress-bar .progress-step .step-number{color:#7a8294;font-size:14px;font-weight:500;line-height:20px;text-align:center}.progress-bar .progress-step .step-number--active{color:#4259ee}.all-set-box-wrapper{bottom:24px;left:50%;position:fixed;transform:translate(-50%)}.all-set-box-wrapper .close-icon-container{right:-10px;top:-10px;z-index:9}.all-set-box-wrapper .all-set-box-content{-webkit-backdrop-filter:blur(21px);backdrop-filter:blur(21px);background:linear-gradient(132deg,#3bb273 -250.62%,#3bb27300 66.76%);border:2px solid #3bb273;border-radius:12px;box-shadow:inset -5px -5px 250px #ffffff05;display:flex;flex-direction:column;gap:2px;padding:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container{align-items:center;display:flex;gap:2px;height:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container .all-set-box-content-title{color:#0d152c;font-size:16px;font-weight:800;line-height:24px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-title-container .all-set-box-content-animation{height:36px;overflow:visible;transform:translate(-2px,-6px) scale(2);width:36px}.all-set-box-wrapper .all-set-box-content .all-set-box-content-description{color:#0d152c;font-size:14px;font-weight:500;line-height:20px}@media screen and (max-width:1512px){.keyboard-shortcuts-container-wrapper{padding:30px}.keyboard-shortcuts-container-wrapper .close-icon-container svg{height:14px;width:14px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container{gap:24px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section .screen-slide{height:339px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header{gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription{gap:2px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-title{font-size:24px;line-height:36px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .page-header .page-header-title-discription .page-header-description{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .middle-section{gap:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content{height:339px;width:390px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item{gap:16px;height:120px;padding:18px;width:202px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item.item-2{left:183px;top:106.33px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item.item-3{top:214.75px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-header .content-header-icon{height:24px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content{gap:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-title{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .shortcut-landing-page-content .shortcut-landing-page-content-item .content-content .content-content-header-description{font-size:10px;line-height:14px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .screen-video,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .screen-video{height:222px;width:390px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper{gap:16px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-description,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-description{font-size:12px;line-height:18px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container{gap:6px;height:54px;padding:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys{gap:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer{height:40px;width:60px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:before,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:before{width:6px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:after,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer:after{width:4px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner{height:36px;padding:6px;width:56px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner:before,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner:before{height:3px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-text,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer .button-inner .key-text{font-size:9px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key{height:40px;width:40px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner{align-items:center;height:36px;justify-content:center;width:36px}.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen2-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-text,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-symbol,.keyboard-shortcuts-container-wrapper .keyboard-shortcuts-container .screen3-container .keycombo-container-wrapper .keycombo-container .keys .button-outer.single-key .button-inner .key-text{font-size:20px}}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import default_1 from "../../node_modules/@mui/icons-material/CloseRounded.js";
|
|
4
|
+
|
|
5
|
+
const AllSetBox = ({ setShowAllSetBoxState, onCloseAllSetBox }) => {
|
|
6
|
+
const onClose = () => {
|
|
7
|
+
setShowAllSetBoxState(false);
|
|
8
|
+
onCloseAllSetBox == null ? void 0 : onCloseAllSetBox();
|
|
9
|
+
};
|
|
10
|
+
return /* @__PURE__ */ jsxs("div", { className: "all-set-box-wrapper", children: [
|
|
11
|
+
/* @__PURE__ */ jsx("div", { className: "close-icon-container", onClick: onClose, children: /* @__PURE__ */ jsx(default_1, { fontSize: "small", sx: { color: "#60697D" } }) }),
|
|
12
|
+
/* @__PURE__ */ jsxs("div", { className: "all-set-box-content", children: [
|
|
13
|
+
/* @__PURE__ */ jsxs("div", { className: "all-set-box-content-title-container", children: [
|
|
14
|
+
/* @__PURE__ */ jsx("span", { className: "all-set-box-content-title", children: " You're All Set! " }),
|
|
15
|
+
/* @__PURE__ */ jsx(
|
|
16
|
+
"iframe",
|
|
17
|
+
{
|
|
18
|
+
className: "all-set-box-content-animation",
|
|
19
|
+
src: "https://lottie.host/embed/80299b46-0a77-4568-ad18-d6cd9f735d6c/6aSfdN3qx6.lottie"
|
|
20
|
+
}
|
|
21
|
+
)
|
|
22
|
+
] }),
|
|
23
|
+
/* @__PURE__ */ jsxs("span", { className: "all-set-box-content-description", children: [
|
|
24
|
+
" ",
|
|
25
|
+
"Keyboard shortcuts are now at your fingertips. Enjoy a faster, smoother workflow."
|
|
26
|
+
] })
|
|
27
|
+
] })
|
|
28
|
+
] });
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
AllSetBox
|
|
32
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
|
|
2
|
+
export declare const KeyboardShortcuts: ({ showLandingPage, showTutorial, showAllSetBox, onRemindMeLater, onClose, screen2VideoSrc, screen3VideoSrc, onSkipClick, onCloseAllSetBox, }: {
|
|
3
|
+
showLandingPage?: boolean | undefined;
|
|
4
|
+
showTutorial?: boolean | undefined;
|
|
5
|
+
showAllSetBox?: boolean | undefined;
|
|
6
|
+
onRemindMeLater?: (() => void) | undefined;
|
|
7
|
+
onClose?: (() => void) | undefined;
|
|
8
|
+
screen2VideoSrc: any;
|
|
9
|
+
screen3VideoSrc: any;
|
|
10
|
+
onSkipClick?: (() => void) | undefined;
|
|
11
|
+
onCloseAllSetBox?: (() => void) | undefined;
|
|
12
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { ShortcutModal } from './ShortcutModal';
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortCuts/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,iCAAiC,CAAC;AAMzC,eAAO,MAAM,iBAAiB,GAAI;;;;;;;;;;CAUjC,4CAwKA,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
|