@activecollab/components 1.0.260 → 1.0.261

package/dist/cjs/components/CommandPallete/CommandPallete.js

@@ -1,35 +1,58 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CommandPallete = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Dialog = require("../Dialog");
 var _CommandPallete = require("./CommandPallete.styles");
 var _CommandPalleteHeader = require("./CommandPalleteHeader");
 var _CommandPalleteItem = require("./CommandPalleteItem");
 var _CommandPalleteList = require("./CommandPalleteList");
-var _excluded = ["children", "onChangeSearch", "search"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ModeContext = require("./context/ModeContext");
+var _excluded = ["children", "onChangeSearch", "search", "commands", "mode", "setMode"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var CommandPallete = function CommandPallete(_ref) {
   var children = _ref.children,
     onChangeSearch = _ref.onChangeSearch,
     search = _ref.search,
+    commands = _ref.commands,
+    mode = _ref.mode,
+    setMode = _ref.setMode,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // const [searchMode, setSearchMode] = useState<"project" | "id" | "default">(
-  //   "project"
-  // );
-
   var handleChange = function handleChange(e) {
     onChangeSearch(e.target.value);
   };
-  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, rest, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPallete, null, /*#__PURE__*/_react.default.createElement(_CommandPalleteHeader.CommandPalleteHeader, {
+  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, rest, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPallete, null, /*#__PURE__*/_react.default.createElement(_ModeContext.ModeContextProvider, {
+    value: {
+      mode: mode,
+      setMode: setMode
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CommandPalleteHeader.CommandPalleteHeader, {
     search: search,
-    handleChange: handleChange
-  }), children));
+    handleChange: handleChange,
+    onChangeSearch: onChangeSearch
+  })), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteWrapper, null, search.length > 0 ? /*#__PURE__*/_react.default.createElement(_CommandPalleteList.CommandPalleteList, {
+    visible: true
+  }, commands.map(function (command) {
+    if (command.visible) {
+      return /*#__PURE__*/_react.default.createElement(_CommandPalleteItem.CommandPalleteItem, {
+        className: "cp-item cp-command",
+        title: command.title,
+        key: command.title,
+        renderIcon: command.renderIcon
+      });
+    }
+    return null;
+  })) : null, _react.Children.toArray(children).map(function (child) {
+    var item = child;
+    return /*#__PURE__*/_react.default.cloneElement(item, {});
+  }))));
 };
 exports.CommandPallete = CommandPallete;
 CommandPallete.displayName = "CommandPallete";

package/dist/cjs/components/CommandPallete/CommandPallete.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","rest","handleChange","e","target","value","displayName","List","CommandPalleteList","Item","CommandPalleteItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, { ChangeEvent, PropsWithChildren } from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\n\nimport { StyledCommandPallete } from \"./CommandPallete.styles\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport { CommandPalleteItem } from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteProps extends DialogProps {\n  loading?: boolean;\n  onChangeSearch: (search: string) => void;\n  search: string;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  // const [searchMode, setSearchMode] = useState<\"project\" | \"id\" | \"default\">(\n  //   \"project\"\n  // );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  return (\n    <Dialog {...rest}>\n      <StyledCommandPallete>\n        <CommandPalleteHeader search={search} handleChange={handleChange} />\n        {children}\n      </StyledCommandPallete>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA0D;AAAA;AAAA;AAAA;AASnD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAKmB;EAAA,IAJ5CC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,MAAM,QAANA,MAAM;IACHC,IAAI;EAEP;EACA;EACA;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAgC,EAAK;IACzDJ,cAAc,CAACI,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAChC,CAAC;EAED,oBACE,6BAAC,cAAM,EAAKJ,IAAI,eACd,6BAAC,oCAAoB,qBACnB,6BAAC,0CAAoB;IAAC,MAAM,EAAED,MAAO;IAAC,YAAY,EAAEE;EAAa,EAAG,EACnEJ,QAAQ,CACY,CAChB;AAEb,CAAC;AAAC;AAEFD,cAAc,CAACS,WAAW,GAAG,gBAAgB;AAE7CT,cAAc,CAACU,IAAI,GAAGC,sCAAkB;AACxCX,cAAc,CAACY,IAAI,GAAGC,sCAAkB"}
+{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","commands","mode","setMode","rest","handleChange","e","target","value","length","map","command","visible","title","renderIcon","Children","toArray","child","item","React","cloneElement","displayName","List","CommandPalleteList","Item","CommandPalleteItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  Children,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\n\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport { CommandPalleteItem } from \"./CommandPalleteItem\";\nimport {\n  CommandPalleteList,\n  CommandPalleteListProps,\n} from \"./CommandPalleteList\";\nimport { ModeContextProvider } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  commands: { visible: boolean; title: string; renderIcon: () => ReactNode }[];\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  commands,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  return (\n    <Dialog {...rest}>\n      <StyledCommandPallete>\n        <ModeContextProvider value={{ mode, setMode }}>\n          <CommandPalleteHeader\n            search={search}\n            handleChange={handleChange}\n            onChangeSearch={onChangeSearch}\n          />\n        </ModeContextProvider>\n        <StyledCommandPalleteWrapper>\n          {/* COMMANDS */}\n          {search.length > 0 ? (\n            <CommandPalleteList visible={true}>\n              {commands.map((command) => {\n                if (command.visible) {\n                  return (\n                    <CommandPalleteItem\n                      className=\"cp-item cp-command\"\n                      title={command.title}\n                      key={command.title}\n                      renderIcon={command.renderIcon}\n                    />\n                  );\n                }\n                return null;\n              })}\n            </CommandPalleteList>\n          ) : null}\n          {/* COMMANDS */}\n\n          {/* LISTS AND ITEMS */}\n          {Children.toArray(children).map((child) => {\n            const item = child as ReactElement<CommandPalleteListProps>;\n            return React.cloneElement(item, {});\n          })}\n          {/* LISTS AND ITEMS */}\n        </StyledCommandPalleteWrapper>\n      </StyledCommandPallete>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\n"],"mappings":";;;;;;;AAAA;AAOA;AAEA;AAIA;AACA;AACA;AAIA;AAA4D;AAAA;AAAA;AAAA;AAAA;AAYrD,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAQmB;EAAA,IAP5CC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAEP,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAgC,EAAK;IACzDP,cAAc,CAACO,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAChC,CAAC;EAED,oBACE,6BAAC,cAAM,EAAKJ,IAAI,eACd,6BAAC,oCAAoB,qBACnB,6BAAC,gCAAmB;IAAC,KAAK,EAAE;MAAEF,IAAI,EAAJA,IAAI;MAAEC,OAAO,EAAPA;IAAQ;EAAE,gBAC5C,6BAAC,0CAAoB;IACnB,MAAM,EAAEH,MAAO;IACf,YAAY,EAAEK,YAAa;IAC3B,cAAc,EAAEN;EAAe,EAC/B,CACkB,eACtB,6BAAC,2CAA2B,QAEzBC,MAAM,CAACS,MAAM,GAAG,CAAC,gBAChB,6BAAC,sCAAkB;IAAC,OAAO,EAAE;EAAK,GAC/BR,QAAQ,CAACS,GAAG,CAAC,UAACC,OAAO,EAAK;IACzB,IAAIA,OAAO,CAACC,OAAO,EAAE;MACnB,oBACE,6BAAC,sCAAkB;QACjB,SAAS,EAAC,oBAAoB;QAC9B,KAAK,EAAED,OAAO,CAACE,KAAM;QACrB,GAAG,EAAEF,OAAO,CAACE,KAAM;QACnB,UAAU,EAAEF,OAAO,CAACG;MAAW,EAC/B;IAEN;IACA,OAAO,IAAI;EACb,CAAC,CAAC,CACiB,GACnB,IAAI,EAIPC,eAAQ,CAACC,OAAO,CAAClB,QAAQ,CAAC,CAACY,GAAG,CAAC,UAACO,KAAK,EAAK;IACzC,IAAMC,IAAI,GAAGD,KAA8C;IAC3D,oBAAOE,cAAK,CAACC,YAAY,CAACF,IAAI,EAAE,CAAC,CAAC,CAAC;EACrC,CAAC,CAAC,CAE0B,CACT,CAChB;AAEb,CAAC;AAAC;AAEFrB,cAAc,CAACwB,WAAW,GAAG,gBAAgB;AAE7CxB,cAAc,CAACyB,IAAI,GAAGC,sCAAkB;AACxC1B,cAAc,CAAC2B,IAAI,GAAGC,sCAAkB"}

package/dist/cjs/components/CommandPallete/CommandPallete.styles.js

@@ -3,45 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchIcon = exports.StyledParameter = exports.StyledInput = exports.StyledIcon = exports.StyledCommandPalleteList = exports.StyledCommandPalleteItem = exports.StyledCommandPalleteHeader = exports.StyledCommandPallete = exports.StyledActionWrapper = void 0;
+exports.StyledSearchIcon = exports.StyledParameter = exports.StyledInput = exports.StyledIcon = exports.StyledHeading = exports.StyledCommandPalleteWrapper = exports.StyledCommandPalleteList = exports.StyledCommandPalleteItem = exports.StyledCommandPalleteHeader = exports.StyledCommandPallete = exports.StyledActionWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FontStyle = require("../FontStyle");
+var _BreakPoints = require("../BreakPoints");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var StyledCommandPallete = _styledComponents.default.div.withConfig({
   displayName: "CommandPalletestyles__StyledCommandPallete",
   componentId: "sc-16m145d-0"
 })(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;"], _FontStyle.FontStyle);
 exports.StyledCommandPallete = StyledCommandPallete;
+var StyledCommandPalleteWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CommandPalletestyles__StyledCommandPalleteWrapper",
+  componentId: "sc-16m145d-1"
+})(["overflow-x:hidden;overflow-y:auto;max-height:450px;"]);
+exports.StyledCommandPalleteWrapper = StyledCommandPalleteWrapper;
 var StyledCommandPalleteHeader = _styledComponents.default.div.withConfig({
   displayName: "CommandPalletestyles__StyledCommandPalleteHeader",
-  componentId: "sc-16m145d-1"
-})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;"]);
+  componentId: "sc-16m145d-2"
+})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
 exports.StyledCommandPalleteHeader = StyledCommandPalleteHeader;
 var StyledSearchIcon = _styledComponents.default.div.withConfig({
   displayName: "CommandPalletestyles__StyledSearchIcon",
-  componentId: "sc-16m145d-2"
+  componentId: "sc-16m145d-3"
 })(["margin-right:8px;svg{vertical-align:middle;}"]);
 exports.StyledSearchIcon = StyledSearchIcon;
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "CommandPalletestyles__StyledInput",
-  componentId: "sc-16m145d-3"
-})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);flex:1;font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;::placeholder{color:var(--color-theme-transparent-500);}"]);
+  componentId: "sc-16m145d-4"
+})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::placeholder{color:var(--color-theme-transparent-500);}"], _BreakPoints.screen.sm);
 exports.StyledInput = StyledInput;
 var StyledParameter = _styledComponents.default.span.withConfig({
   displayName: "CommandPalletestyles__StyledParameter",
-  componentId: "sc-16m145d-4"
-})(["color:var(--color-theme-transparent-500);font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;margin-right:8px;"]);
+  componentId: "sc-16m145d-5"
+})(["color:var(--color-theme-transparent-500);margin-right:8px;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], _BreakPoints.screen.sm);
 exports.StyledParameter = StyledParameter;
 var StyledActionWrapper = _styledComponents.default.div.withConfig({
   displayName: "CommandPalletestyles__StyledActionWrapper",
-  componentId: "sc-16m145d-5"
+  componentId: "sc-16m145d-6"
 })(["align-items:center;display:flex;gap:8px;"]);
 exports.StyledActionWrapper = StyledActionWrapper;
-var StyledCommandPalleteItem = _styledComponents.default.li.withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPalleteItem",
-  componentId: "sc-16m145d-6"
-})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;&:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px;}&:hover{background-color:var(--color-theme-200);&::before{background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}}"]);
-exports.StyledCommandPalleteItem = StyledCommandPalleteItem;
 var StyledIcon = _styledComponents.default.div.withConfig({
   displayName: "CommandPalletestyles__StyledIcon",
   componentId: "sc-16m145d-7"
@@ -50,6 +51,18 @@ exports.StyledIcon = StyledIcon;
 var StyledCommandPalleteList = _styledComponents.default.ul.withConfig({
   displayName: "CommandPalletestyles__StyledCommandPalleteList",
   componentId: "sc-16m145d-8"
-})(["border-top:1px solid var(--color-theme-400);list-style-type:none;margin:0;padding:0;overflow:hidden;"]);
+})(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
 exports.StyledCommandPalleteList = StyledCommandPalleteList;
+var StyledHeading = _styledComponents.default.p.withConfig({
+  displayName: "CommandPalletestyles__StyledHeading",
+  componentId: "sc-16m145d-9"
+})(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
+
+// prettier-ignore
+exports.StyledHeading = StyledHeading;
+var StyledCommandPalleteItem = _styledComponents.default.li.withConfig({
+  displayName: "CommandPalletestyles__StyledCommandPalleteItem",
+  componentId: "sc-16m145d-10"
+})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;&:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px;}&:hover{background-color:var(--color-theme-200);&::before{background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}}"]);
+exports.StyledCommandPalleteItem = StyledCommandPalleteItem;
 //# sourceMappingURL=CommandPallete.styles.js.map

package/dist/cjs/components/CommandPallete/CommandPallete.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","StyledParameter","span","StyledActionWrapper","StyledCommandPalleteItem","li","StyledIcon","StyledCommandPalleteList","ul"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  flex: 1;\n  font-size: 32px;\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  line-height: 44px;\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  font-size: 32px;\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  line-height: 44px;\n  margin-right: 8px;\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  border-top: 1px solid var(--color-theme-400);\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;AAAC;AAEK,IAAMC,0BAA0B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAAC;AAEK,IAAMG,gBAAgB,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMI,WAAW,GAAGL,yBAAM,CAACM,KAAK;EAAA;EAAA;AAAA,oNAatC;AAAC;AAEK,IAAMC,eAAe,GAAGP,yBAAM,CAACQ,IAAI;EAAA;EAAA;AAAA,uIAOzC;AAAC;AAEK,IAAMC,mBAAmB,GAAGT,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMS,wBAAwB,GAAGV,yBAAM,CAACW,EAAE;EAAA;EAAA;AAAA,8XA2BhD;AAAC;AAEK,IAAMC,UAAU,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMY,wBAAwB,GAAGb,yBAAM,CAACc,EAAE;EAAA;EAAA;AAAA,4GAMhD;AAAC"}
+{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-theme-400);\n  }\n`;\n\nexport const StyledHeading = styled.p`\n  font-size: 12px;\n  margin-top: 12px;\n  margin-bottom: 4px;\n  font-weight: bold;\n  padding-left: 18px;\n  letter-spacing: 0.5px;\n  color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAwC;AAEjC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2DAIpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,+NAMnCC,mBAAM,CAACC,EAAE,CAUZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8IAItCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,EAAE;EAAA;EAAA;AAAA,8XA2BhD;AAAC"}

package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js

@@ -1,39 +1,91 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CommandPalleteHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _IconButton = require("../IconButton");
 var _Icons = require("../Icons");
 var _Loaders = require("../Loaders");
 var _Tooltip = require("../Tooltip");
 var _CommandPallete = require("./CommandPallete.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ModeContext = require("./context/ModeContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
   var search = _ref.search,
     handleChange = _ref.handleChange,
     _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? true : _ref$loading;
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onChangeSearch = _ref.onChangeSearch;
+  var inputRef = (0, _react.useRef)(null);
+  var _useModeContext = (0, _ModeContext.useModeContext)(),
+    mode = _useModeContext.mode,
+    setMode = _useModeContext.setMode;
+  var focusInput = function focusInput() {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  var clearInput = function clearInput() {
+    if (inputRef && inputRef.current) {
+      inputRef.current.value = "";
+      onChangeSearch("");
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteHeader, {
     className: "cp-header"
-  }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledParameter, null, "ID:"), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledInput, {
+  }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledParameter, null, "ID#:") : null, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledInput, {
+    ref: inputRef,
     autoFocus: true,
+    type: "text",
+    autoCapitalize: "none",
+    autoComplete: "none",
     value: search,
     onChange: handleChange,
-    placeholder: "Search or jump to"
-  }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_Loaders.SpinnerLoader, null) : null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    placeholder: mode === "id" ? "22" : "Search or jump to"
+  }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_Loaders.SpinnerLoader, {
+    style: {
+      marginRight: "4px"
+    }
+  }) : null, mode !== "id" && search.length === 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: "Search by ID",
     placement: "top"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
     variant: "text gray"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    title: "Close",
+  }, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, {
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter") {
+        setMode("id");
+        clearInput();
+        focusInput();
+      }
+    },
+    onClick: function onClick() {
+      setMode("id");
+      clearInput();
+      focusInput();
+    }
+  }))) : null, search.length > 0 || mode === "id" ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: mode === "id" ? "Close ID mode" : "Clear",
     placement: "top"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
-    variant: "text gray"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null)))));
+    variant: "text gray",
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter") {
+        setMode("default");
+        clearInput();
+        focusInput();
+      }
+    },
+    onClick: function onClick() {
+      setMode("default");
+      clearInput();
+      focusInput();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null))) : null));
 };
 exports.CommandPalleteHeader = CommandPalleteHeader;
 CommandPalleteHeader.displayName = "CommandPalleteItem";

package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = true,\n}: CommandPalleteHeaderProps) => {\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      <StyledParameter>ID:</StyledParameter>\n      <StyledInput\n        autoFocus\n        value={search}\n        onChange={handleChange}\n        placeholder=\"Search or jump to\"\n      />\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader /> : null}\n\n        <Tooltip title=\"Search by ID\" placement=\"top\">\n          <IconButton variant=\"text gray\">\n            <HashtagIcon />\n          </IconButton>\n        </Tooltip>\n\n        <Tooltip title=\"Close\" placement=\"top\">\n          <IconButton variant=\"text gray\">\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAMiC;AAS1B,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,OAIA;EAAA,IAH/BC,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IAAA,oBACZC,OAAO;IAAPA,OAAO,6BAAG,IAAI;EAEd,oBACE,6BAAC,0CAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,6BAAC,gCAAgB,qBACf,6BAAC,sBAAe,OAAG,CACF,eAEnB,6BAAC,+BAAe,cAAsB,eACtC,6BAAC,2BAAW;IACV,SAAS;IACT,KAAK,EAAEF,MAAO;IACd,QAAQ,EAAEC,YAAa;IACvB,WAAW,EAAC;EAAmB,EAC/B,eACF,6BAAC,mCAAmB,QACjBC,OAAO,gBAAG,6BAAC,sBAAa,OAAG,GAAG,IAAI,eAEnC,6BAAC,gBAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,6BAAC,sBAAU;IAAC,OAAO,EAAC;EAAW,gBAC7B,6BAAC,kBAAW,OAAG,CACJ,CACL,eAEV,6BAAC,gBAAO;IAAC,KAAK,EAAC,OAAO;IAAC,SAAS,EAAC;EAAK,gBACpC,6BAAC,sBAAU;IAAC,OAAO,EAAC;EAAW,gBAC7B,6BAAC,gBAAS,OAAG,CACF,CACL,CACU,CACK;AAEjC,CAAC;AAAC;AAEFH,oBAAoB,CAACI,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","focusInput","current","focus","clearInput","value","marginRight","length","e","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type=\"text\"\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={handleChange}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton variant=\"text gray\">\n              <HashtagIcon\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") {\n                    setMode(\"id\");\n                    clearInput();\n                    focusInput();\n                  }\n                }}\n                onClick={() => {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }}\n              />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}

package/dist/cjs/components/CommandPallete/CommandPalleteItem.js

@@ -4,17 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CommandPalleteItem = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _Icons = require("../Icons");
 var _Typography = require("../Typography/Typography");
 var _CommandPallete = require("./CommandPallete.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CommandPalleteItem = function CommandPalleteItem(_ref) {
-  var title = _ref.title;
+  var title = _ref.title,
+    renderIcon = _ref.renderIcon,
+    className = _ref.className;
+  var icon = renderIcon();
   return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteItem, {
-    className: "cp-item",
+    className: (0, _classnames.default)("cp-item", className),
     tabIndex: 1
-  }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.ProjectsIcon, null)), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+  }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledIcon, null, icon), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    overflow: "truncate",
+    whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary"
   }, title));

package/dist/cjs/components/CommandPallete/CommandPalleteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteItem.js","names":["CommandPalleteItem","title","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { ProjectsIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\n\nexport type Entity = \"project\" | \"task\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteItemProps {\n  title: string;\n}\n\nexport const CommandPalleteItem = ({ title }: CommandPalleteItemProps) => {\n  return (\n    <StyledCommandPalleteItem className=\"cp-item\" tabIndex={1}>\n      <StyledIcon>\n        <ProjectsIcon />\n      </StyledIcon>\n      <Typography variant=\"Body 1\" color=\"primary\">\n        {title}\n      </Typography>\n    </StyledCommandPalleteItem>\n  );\n};\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA+E;AASxE,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAA2C;EAAA,IAArCC,KAAK,QAALA,KAAK;EACxC,oBACE,6BAAC,wCAAwB;IAAC,SAAS,EAAC,SAAS;IAAC,QAAQ,EAAE;EAAE,gBACxD,6BAAC,0BAAU,qBACT,6BAAC,mBAAY,OAAG,CACL,eACb,6BAAC,sBAAU;IAAC,OAAO,EAAC,QAAQ;IAAC,KAAK,EAAC;EAAS,GACzCA,KAAK,CACK,CACY;AAE/B,CAAC;AAAC;AAEFD,kBAAkB,CAACE,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteItem.js","names":["CommandPalleteItem","title","renderIcon","className","icon","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { ReactNode } from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteItemProps {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n}\n\nexport const CommandPalleteItem = ({\n  title,\n  renderIcon,\n  className,\n}: CommandPalleteItemProps) => {\n  const icon = renderIcon();\n\n  return (\n    <StyledCommandPalleteItem\n      className={classNames(\"cp-item\", className)}\n      tabIndex={1}\n    >\n      <StyledIcon>{icon}</StyledIcon>\n      <Typography\n        overflow=\"truncate\"\n        whitespace=\"no-wrap\"\n        variant=\"Body 1\"\n        color=\"primary\"\n      >\n        {title}\n      </Typography>\n    </StyledCommandPalleteItem>\n  );\n};\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA+E;AASxE,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,IAH7BC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;EAET,IAAMC,IAAI,GAAGF,UAAU,EAAE;EAEzB,oBACE,6BAAC,wCAAwB;IACvB,SAAS,EAAE,IAAAG,mBAAU,EAAC,SAAS,EAAEF,SAAS,CAAE;IAC5C,QAAQ,EAAE;EAAE,gBAEZ,6BAAC,0BAAU,QAAEC,IAAI,CAAc,eAC/B,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdH,KAAK,CACK,CACY;AAE/B,CAAC;AAAC;AAEFD,kBAAkB,CAACM,WAAW,GAAG,oBAAoB"}

package/dist/cjs/components/CommandPallete/CommandPalleteList.js

@@ -8,11 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _CommandPallete = require("./CommandPallete.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CommandPalleteList = function CommandPalleteList(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteList, {
+  var children = _ref.children,
+    heading = _ref.heading,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible;
+  return visible ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteList, {
     className: "cp-list",
     tabIndex: -1
-  }, children);
+  }, heading ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledHeading, {
+    tabIndex: -1
+  }, heading) : null, children) : null;
 };
 exports.CommandPalleteList = CommandPalleteList;
 CommandPalleteList.displayName = "CommandPalleteList";

package/dist/cjs/components/CommandPallete/CommandPalleteList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteList.js","names":["CommandPalleteList","children","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteList.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { StyledCommandPalleteList } from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteListProps {}\n\nexport const CommandPalleteList = ({\n  children,\n}: PropsWithChildren<CommandPalleteListProps>) => {\n  return (\n    <StyledCommandPalleteList className=\"cp-list\" tabIndex={-1}>\n      {children}\n    </StyledCommandPalleteList>\n  );\n};\n\nCommandPalleteList.displayName = \"CommandPalleteList\";\n"],"mappings":";;;;;;AAAA;AACA;AAAmE;AAK5D,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAEmB;EAAA,IADhDC,QAAQ,QAARA,QAAQ;EAER,oBACE,6BAAC,wCAAwB;IAAC,SAAS,EAAC,SAAS;IAAC,QAAQ,EAAE,CAAC;EAAE,GACxDA,QAAQ,CACgB;AAE/B,CAAC;AAAC;AAEFD,kBAAkB,CAACE,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteList.js","names":["CommandPalleteList","children","heading","visible","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteList.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport {\n  StyledCommandPalleteList,\n  StyledHeading,\n} from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteListProps {\n  heading?: string;\n  visible?: boolean;\n}\n\nexport const CommandPalleteList = ({\n  children,\n  heading,\n  visible = false,\n}: PropsWithChildren<CommandPalleteListProps>) => {\n  return visible ? (\n    <StyledCommandPalleteList className=\"cp-list\" tabIndex={-1}>\n      {heading ? <StyledHeading tabIndex={-1}>{heading}</StyledHeading> : null}\n      {children}\n    </StyledCommandPalleteList>\n  ) : null;\n};\n\nCommandPalleteList.displayName = \"CommandPalleteList\";\n"],"mappings":";;;;;;AAAA;AACA;AAGiC;AAQ1B,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAImB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,KAAK;EAEf,OAAOA,OAAO,gBACZ,6BAAC,wCAAwB;IAAC,SAAS,EAAC,SAAS;IAAC,QAAQ,EAAE,CAAC;EAAE,GACxDD,OAAO,gBAAG,6BAAC,6BAAa;IAAC,QAAQ,EAAE,CAAC;EAAE,GAAEA,OAAO,CAAiB,GAAG,IAAI,EACvED,QAAQ,CACgB,GACzB,IAAI;AACV,CAAC;AAAC;AAEFD,kBAAkB,CAACI,WAAW,GAAG,oBAAoB"}

package/dist/cjs/components/CommandPallete/context/ModeContext.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModeContext = exports.default = exports.ModeContextProvider = void 0;
+var _react = require("react");
+var ModeContext = /*#__PURE__*/(0, _react.createContext)({
+  mode: "default",
+  setMode: function setMode() {
+    return null;
+  }
+});
+var ModeContextProvider = ModeContext.Provider;
+exports.ModeContextProvider = ModeContextProvider;
+var useModeContext = function useModeContext() {
+  return (0, _react.useContext)(ModeContext);
+};
+exports.useModeContext = useModeContext;
+var _default = ModeContext;
+exports.default = _default;
+//# sourceMappingURL=ModeContext.js.map

package/dist/cjs/components/CommandPallete/context/ModeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeContext.js","names":["ModeContext","createContext","mode","setMode","ModeContextProvider","Provider","useModeContext","useContext"],"sources":["../../../../../src/components/CommandPallete/context/ModeContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ninterface ModeContextProps {\n  mode: string;\n  setMode: (value: string) => void;\n}\n\nconst ModeContext = createContext<ModeContextProps>({\n  mode: \"default\",\n  setMode: () => null,\n});\n\nexport const ModeContextProvider = ModeContext.Provider;\n\nexport const useModeContext = (): ModeContextProps => useContext(ModeContext);\n\nexport default ModeContext;\n"],"mappings":";;;;;;AAAA;AAOA,IAAMA,WAAW,gBAAG,IAAAC,oBAAa,EAAmB;EAClDC,IAAI,EAAE,SAAS;EACfC,OAAO,EAAE;IAAA,OAAM,IAAI;EAAA;AACrB,CAAC,CAAC;AAEK,IAAMC,mBAAmB,GAAGJ,WAAW,CAACK,QAAQ;AAAC;AAEjD,IAAMC,cAAc,GAAG,SAAjBA,cAAc;EAAA,OAA2B,IAAAC,iBAAU,EAACP,WAAW,CAAC;AAAA;AAAC;AAAA,eAE/DA,WAAW;AAAA"}

package/dist/esm/components/CommandPallete/CommandPallete.d.ts

@@ -1,19 +1,27 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, ReactNode } from "react";
 import { DialogProps } from "../Dialog";
+import { CommandPalleteListProps } from "./CommandPalleteList";
 export interface CommandPalleteProps extends DialogProps {
-    loading?: boolean;
     onChangeSearch: (search: string) => void;
     search: string;
+    commands: {
+        visible: boolean;
+        title: string;
+        renderIcon: () => ReactNode;
+    }[];
+    mode: string;
+    setMode: (value: string) => void;
+    loading?: boolean;
 }
 export declare const CommandPallete: {
-    ({ children, onChangeSearch, search, ...rest }: PropsWithChildren<CommandPalleteProps>): JSX.Element;
+    ({ children, onChangeSearch, search, commands, mode, setMode, ...rest }: PropsWithChildren<CommandPalleteProps>): JSX.Element;
     displayName: string;
     List: {
-        ({ children, }: React.PropsWithChildren<import("./CommandPalleteList").CommandPalleteListProps>): JSX.Element;
+        ({ children, heading, visible, }: React.PropsWithChildren<CommandPalleteListProps>): JSX.Element | null;
         displayName: string;
     };
     Item: {
-        ({ title }: import("./CommandPalleteItem").CommandPalleteItemProps): JSX.Element;
+        ({ title, renderIcon, className, }: import("./CommandPalleteItem").CommandPalleteItemProps): JSX.Element;
         displayName: string;
     };
 };

package/dist/esm/components/CommandPallete/CommandPallete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAQhD,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc;oDAKxB,kBAAkB,mBAAmB,CAAC;;;;;;;;;;CAiBxC,CAAC"}
+{"version":3,"file":"CommandPallete.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,iBAAiB,EAEjB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAQhD,OAAO,EAEL,uBAAuB,EACxB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,SAAS,CAAA;KAAE,EAAE,CAAC;IAC7E,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc;6EAQxB,kBAAkB,mBAAmB,CAAC;;;;;;;;;;CA8CxC,CAAC"}

package/dist/esm/components/CommandPallete/CommandPallete.js

@@ -1,11 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onChangeSearch", "search"];
-import React from "react";
+var _excluded = ["children", "onChangeSearch", "search", "commands", "mode", "setMode"];
+import React, { Children } from "react";
 import { Dialog } from "../Dialog";
-import { StyledCommandPallete } from "./CommandPallete.styles";
+import { StyledCommandPallete, StyledCommandPalleteWrapper } from "./CommandPallete.styles";
 import { CommandPalleteHeader } from "./CommandPalleteHeader";
 import { CommandPalleteItem } from "./CommandPalleteItem";
 import { CommandPalleteList } from "./CommandPalleteList";
+import { ModeContextProvider } from "./context/ModeContext";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -13,18 +14,38 @@ export var CommandPallete = function CommandPallete(_ref) {
   var children = _ref.children,
     onChangeSearch = _ref.onChangeSearch,
     search = _ref.search,
+    commands = _ref.commands,
+    mode = _ref.mode,
+    setMode = _ref.setMode,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // const [searchMode, setSearchMode] = useState<"project" | "id" | "default">(
-  //   "project"
-  // );
-
   var handleChange = function handleChange(e) {
     onChangeSearch(e.target.value);
   };
-  return /*#__PURE__*/React.createElement(Dialog, rest, /*#__PURE__*/React.createElement(StyledCommandPallete, null, /*#__PURE__*/React.createElement(CommandPalleteHeader, {
+  return /*#__PURE__*/React.createElement(Dialog, rest, /*#__PURE__*/React.createElement(StyledCommandPallete, null, /*#__PURE__*/React.createElement(ModeContextProvider, {
+    value: {
+      mode: mode,
+      setMode: setMode
+    }
+  }, /*#__PURE__*/React.createElement(CommandPalleteHeader, {
     search: search,
-    handleChange: handleChange
-  }), children));
+    handleChange: handleChange,
+    onChangeSearch: onChangeSearch
+  })), /*#__PURE__*/React.createElement(StyledCommandPalleteWrapper, null, search.length > 0 ? /*#__PURE__*/React.createElement(CommandPalleteList, {
+    visible: true
+  }, commands.map(function (command) {
+    if (command.visible) {
+      return /*#__PURE__*/React.createElement(CommandPalleteItem, {
+        className: "cp-item cp-command",
+        title: command.title,
+        key: command.title,
+        renderIcon: command.renderIcon
+      });
+    }
+    return null;
+  })) : null, Children.toArray(children).map(function (child) {
+    var item = child;
+    return /*#__PURE__*/React.cloneElement(item, {});
+  }))));
 };
 CommandPallete.displayName = "CommandPallete";
 CommandPallete.List = CommandPalleteList;

package/dist/esm/components/CommandPallete/CommandPallete.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.js","names":["React","Dialog","StyledCommandPallete","CommandPalleteHeader","CommandPalleteItem","CommandPalleteList","CommandPallete","children","onChangeSearch","search","rest","handleChange","e","target","value","displayName","List","Item"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, { ChangeEvent, PropsWithChildren } from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\n\nimport { StyledCommandPallete } from \"./CommandPallete.styles\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport { CommandPalleteItem } from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteProps extends DialogProps {\n  loading?: boolean;\n  onChangeSearch: (search: string) => void;\n  search: string;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  // const [searchMode, setSearchMode] = useState<\"project\" | \"id\" | \"default\">(\n  //   \"project\"\n  // );\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  return (\n    <Dialog {...rest}>\n      <StyledCommandPallete>\n        <CommandPalleteHeader search={search} handleChange={handleChange} />\n        {children}\n      </StyledCommandPallete>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAA0C,OAAO;AAC7D,SAASC,MAAM,QAAqB,WAAW;AAE/C,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,kBAAkB,QAAQ,sBAAsB;;AAEzD;;AAOA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAKmB;EAAA,IAJ5CC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,MAAM,QAANA,MAAM;IACHC,IAAI;EAEP;EACA;EACA;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAgC,EAAK;IACzDJ,cAAc,CAACI,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAChC,CAAC;EAED,oBACE,oBAAC,MAAM,EAAKJ,IAAI,eACd,oBAAC,oBAAoB,qBACnB,oBAAC,oBAAoB;IAAC,MAAM,EAAED,MAAO;IAAC,YAAY,EAAEE;EAAa,EAAG,EACnEJ,QAAQ,CACY,CAChB;AAEb,CAAC;AAEDD,cAAc,CAACS,WAAW,GAAG,gBAAgB;AAE7CT,cAAc,CAACU,IAAI,GAAGX,kBAAkB;AACxCC,cAAc,CAACW,IAAI,GAAGb,kBAAkB"}
+{"version":3,"file":"CommandPallete.js","names":["React","Children","Dialog","StyledCommandPallete","StyledCommandPalleteWrapper","CommandPalleteHeader","CommandPalleteItem","CommandPalleteList","ModeContextProvider","CommandPallete","children","onChangeSearch","search","commands","mode","setMode","rest","handleChange","e","target","value","length","map","command","visible","title","renderIcon","toArray","child","item","cloneElement","displayName","List","Item"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  Children,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\n\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport { CommandPalleteItem } from \"./CommandPalleteItem\";\nimport {\n  CommandPalleteList,\n  CommandPalleteListProps,\n} from \"./CommandPalleteList\";\nimport { ModeContextProvider } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  commands: { visible: boolean; title: string; renderIcon: () => ReactNode }[];\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  commands,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  return (\n    <Dialog {...rest}>\n      <StyledCommandPallete>\n        <ModeContextProvider value={{ mode, setMode }}>\n          <CommandPalleteHeader\n            search={search}\n            handleChange={handleChange}\n            onChangeSearch={onChangeSearch}\n          />\n        </ModeContextProvider>\n        <StyledCommandPalleteWrapper>\n          {/* COMMANDS */}\n          {search.length > 0 ? (\n            <CommandPalleteList visible={true}>\n              {commands.map((command) => {\n                if (command.visible) {\n                  return (\n                    <CommandPalleteItem\n                      className=\"cp-item cp-command\"\n                      title={command.title}\n                      key={command.title}\n                      renderIcon={command.renderIcon}\n                    />\n                  );\n                }\n                return null;\n              })}\n            </CommandPalleteList>\n          ) : null}\n          {/* COMMANDS */}\n\n          {/* LISTS AND ITEMS */}\n          {Children.toArray(children).map((child) => {\n            const item = child as ReactElement<CommandPalleteListProps>;\n            return React.cloneElement(item, {});\n          })}\n          {/* LISTS AND ITEMS */}\n        </StyledCommandPalleteWrapper>\n      </StyledCommandPallete>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAEVC,QAAQ,QAIH,OAAO;AACd,SAASC,MAAM,QAAqB,WAAW;AAE/C,SACEC,oBAAoB,EACpBC,2BAA2B,QACtB,yBAAyB;AAChC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,SAASC,mBAAmB,QAAQ,uBAAuB;;AAE3D;;AAUA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc,OAQmB;EAAA,IAP5CC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAEP,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAAgC,EAAK;IACzDP,cAAc,CAACO,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;EAChC,CAAC;EAED,oBACE,oBAAC,MAAM,EAAKJ,IAAI,eACd,oBAAC,oBAAoB,qBACnB,oBAAC,mBAAmB;IAAC,KAAK,EAAE;MAAEF,IAAI,EAAJA,IAAI;MAAEC,OAAO,EAAPA;IAAQ;EAAE,gBAC5C,oBAAC,oBAAoB;IACnB,MAAM,EAAEH,MAAO;IACf,YAAY,EAAEK,YAAa;IAC3B,cAAc,EAAEN;EAAe,EAC/B,CACkB,eACtB,oBAAC,2BAA2B,QAEzBC,MAAM,CAACS,MAAM,GAAG,CAAC,gBAChB,oBAAC,kBAAkB;IAAC,OAAO,EAAE;EAAK,GAC/BR,QAAQ,CAACS,GAAG,CAAC,UAACC,OAAO,EAAK;IACzB,IAAIA,OAAO,CAACC,OAAO,EAAE;MACnB,oBACE,oBAAC,kBAAkB;QACjB,SAAS,EAAC,oBAAoB;QAC9B,KAAK,EAAED,OAAO,CAACE,KAAM;QACrB,GAAG,EAAEF,OAAO,CAACE,KAAM;QACnB,UAAU,EAAEF,OAAO,CAACG;MAAW,EAC/B;IAEN;IACA,OAAO,IAAI;EACb,CAAC,CAAC,CACiB,GACnB,IAAI,EAIPzB,QAAQ,CAAC0B,OAAO,CAACjB,QAAQ,CAAC,CAACY,GAAG,CAAC,UAACM,KAAK,EAAK;IACzC,IAAMC,IAAI,GAAGD,KAA8C;IAC3D,oBAAO5B,KAAK,CAAC8B,YAAY,CAACD,IAAI,EAAE,CAAC,CAAC,CAAC;EACrC,CAAC,CAAC,CAE0B,CACT,CAChB;AAEb,CAAC;AAEDpB,cAAc,CAACsB,WAAW,GAAG,gBAAgB;AAE7CtB,cAAc,CAACuB,IAAI,GAAGzB,kBAAkB;AACxCE,cAAc,CAACwB,IAAI,GAAG3B,kBAAkB"}

package/dist/esm/components/CommandPallete/CommandPallete.styles.d.ts

@@ -1,10 +1,12 @@
 export declare const StyledCommandPallete: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCommandPalleteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCommandPalleteHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSearchIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const StyledParameter: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledCommandPalleteItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCommandPalleteList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledHeading: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const StyledCommandPalleteItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 //# sourceMappingURL=CommandPallete.styles.d.ts.map

package/dist/esm/components/CommandPallete/CommandPallete.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,oEAMhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAavB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAO3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEA2BpC,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEAMpC,CAAC"}
+{"version":3,"file":"CommandPallete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,oEAMhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAgBvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAU3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB,mEA2BpC,CAAC"}

package/dist/esm/components/CommandPallete/CommandPallete.styles.js

@@ -1,33 +1,34 @@
 import styled from "styled-components";
 import { FontStyle } from "../FontStyle";
+import { screen } from "../BreakPoints";
 export var StyledCommandPallete = styled.div.withConfig({
   displayName: "CommandPalletestyles__StyledCommandPallete",
   componentId: "sc-16m145d-0"
 })(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;"], FontStyle);
+export var StyledCommandPalleteWrapper = styled.div.withConfig({
+  displayName: "CommandPalletestyles__StyledCommandPalleteWrapper",
+  componentId: "sc-16m145d-1"
+})(["overflow-x:hidden;overflow-y:auto;max-height:450px;"]);
 export var StyledCommandPalleteHeader = styled.div.withConfig({
   displayName: "CommandPalletestyles__StyledCommandPalleteHeader",
-  componentId: "sc-16m145d-1"
-})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;"]);
+  componentId: "sc-16m145d-2"
+})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;border-bottom:1px solid var(--color-theme-400);"]);
 export var StyledSearchIcon = styled.div.withConfig({
   displayName: "CommandPalletestyles__StyledSearchIcon",
-  componentId: "sc-16m145d-2"
+  componentId: "sc-16m145d-3"
 })(["margin-right:8px;svg{vertical-align:middle;}"]);
 export var StyledInput = styled.input.withConfig({
   displayName: "CommandPalletestyles__StyledInput",
-  componentId: "sc-16m145d-3"
-})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);flex:1;font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;::placeholder{color:var(--color-theme-transparent-500);}"]);
+  componentId: "sc-16m145d-4"
+})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::placeholder{color:var(--color-theme-transparent-500);}"], screen.sm);
 export var StyledParameter = styled.span.withConfig({
   displayName: "CommandPalletestyles__StyledParameter",
-  componentId: "sc-16m145d-4"
-})(["color:var(--color-theme-transparent-500);font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;margin-right:8px;"]);
+  componentId: "sc-16m145d-5"
+})(["color:var(--color-theme-transparent-500);margin-right:8px;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
 export var StyledActionWrapper = styled.div.withConfig({
   displayName: "CommandPalletestyles__StyledActionWrapper",
-  componentId: "sc-16m145d-5"
-})(["align-items:center;display:flex;gap:8px;"]);
-export var StyledCommandPalleteItem = styled.li.withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPalleteItem",
   componentId: "sc-16m145d-6"
-})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;&:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px;}&:hover{background-color:var(--color-theme-200);&::before{background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}}"]);
+})(["align-items:center;display:flex;gap:8px;"]);
 export var StyledIcon = styled.div.withConfig({
   displayName: "CommandPalletestyles__StyledIcon",
   componentId: "sc-16m145d-7"
@@ -35,5 +36,15 @@ export var StyledIcon = styled.div.withConfig({
 export var StyledCommandPalleteList = styled.ul.withConfig({
   displayName: "CommandPalletestyles__StyledCommandPalleteList",
   componentId: "sc-16m145d-8"
-})(["border-top:1px solid var(--color-theme-400);list-style-type:none;margin:0;padding:0;overflow:hidden;"]);
+})(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
+export var StyledHeading = styled.p.withConfig({
+  displayName: "CommandPalletestyles__StyledHeading",
+  componentId: "sc-16m145d-9"
+})(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
+
+// prettier-ignore
+export var StyledCommandPalleteItem = styled.li.withConfig({
+  displayName: "CommandPalletestyles__StyledCommandPalleteItem",
+  componentId: "sc-16m145d-10"
+})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;&:last-child{border-bottom-left-radius:10px;border-bottom-right-radius:10px;}&:hover{background-color:var(--color-theme-200);&::before{background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}}"]);
 //# sourceMappingURL=CommandPallete.styles.js.map

package/dist/esm/components/CommandPallete/CommandPallete.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.js","names":["styled","FontStyle","StyledCommandPallete","div","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","StyledParameter","span","StyledActionWrapper","StyledCommandPalleteItem","li","StyledIcon","StyledCommandPalleteList","ul"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  flex: 1;\n  font-size: 32px;\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  line-height: 44px;\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  font-size: 32px;\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  line-height: 44px;\n  margin-right: 8px;\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  border-top: 1px solid var(--color-theme-400);\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,oBAAoB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,+GAC1CF,SAAS,CAKZ;AAED,OAAO,IAAMG,0BAA0B,GAAGJ,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAED,OAAO,IAAME,gBAAgB,GAAGL,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMG,WAAW,GAAGN,MAAM,CAACO,KAAK;EAAA;EAAA;AAAA,oNAatC;AAED,OAAO,IAAMC,eAAe,GAAGR,MAAM,CAACS,IAAI;EAAA;EAAA;AAAA,uIAOzC;AAED,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMQ,wBAAwB,GAAGX,MAAM,CAACY,EAAE;EAAA;EAAA;AAAA,8XA2BhD;AAED,OAAO,IAAMC,UAAU,GAAGb,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGd,MAAM,CAACe,EAAE;EAAA;EAAA;AAAA,4GAMhD"}
+{"version":3,"file":"CommandPallete.styles.js","names":["styled","FontStyle","screen","StyledCommandPallete","div","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-theme-400);\n  }\n`;\n\nexport const StyledHeading = styled.p`\n  font-size: 12px;\n  margin-top: 12px;\n  margin-bottom: 4px;\n  font-weight: bold;\n  padding-left: 18px;\n  letter-spacing: 0.5px;\n  color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,IAAMC,oBAAoB,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,+GAC1CH,SAAS,CAKZ;AAED,OAAO,IAAMI,2BAA2B,GAAGL,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,2DAIpD;AAED,OAAO,IAAME,0BAA0B,GAAGN,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGP,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGR,MAAM,CAACS,KAAK;EAAA;EAAA;AAAA,+NAMnCP,MAAM,CAACQ,EAAE,CAUZ;AAED,OAAO,IAAMC,eAAe,GAAGX,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,8IAItCV,MAAM,CAACQ,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGb,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGd,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGf,MAAM,CAACgB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGjB,MAAM,CAACkB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGnB,MAAM,CAACoB,EAAE;EAAA;EAAA;AAAA,8XA2BhD"}

package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts

@@ -3,9 +3,10 @@ export interface CommandPalleteHeaderProps {
     search: string;
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
     loading?: boolean;
+    onChangeSearch: (value: string) => void;
 }
 export declare const CommandPalleteHeader: {
-    ({ search, handleChange, loading, }: CommandPalleteHeaderProps): JSX.Element;
+    ({ search, handleChange, loading, onChangeSearch, }: CommandPalleteHeaderProps): JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=CommandPalleteHeader.d.ts.map

package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAc3C,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB;yCAI9B,yBAAyB;;CA+B3B,CAAC"}
+{"version":3,"file":"CommandPalleteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAU,MAAM,OAAO,CAAC;AAenD,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB;yDAK9B,yBAAyB;;CAuF3B,CAAC"}

package/dist/esm/components/CommandPallete/CommandPalleteHeader.js

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useRef } from "react";
 import { IconButton } from "../IconButton";
 import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
 import { SpinnerLoader } from "../Loaders";
 import { Tooltip } from "../Tooltip";
 import { StyledActionWrapper, StyledCommandPalleteHeader, StyledInput, StyledParameter, StyledSearchIcon } from "./CommandPallete.styles";
+import { useModeContext } from "./context/ModeContext";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -11,25 +12,74 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
   var search = _ref.search,
     handleChange = _ref.handleChange,
     _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? true : _ref$loading;
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onChangeSearch = _ref.onChangeSearch;
+  var inputRef = useRef(null);
+  var _useModeContext = useModeContext(),
+    mode = _useModeContext.mode,
+    setMode = _useModeContext.setMode;
+  var focusInput = function focusInput() {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+  var clearInput = function clearInput() {
+    if (inputRef && inputRef.current) {
+      inputRef.current.value = "";
+      onChangeSearch("");
+    }
+  };
   return /*#__PURE__*/React.createElement(StyledCommandPalleteHeader, {
     className: "cp-header"
-  }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), /*#__PURE__*/React.createElement(StyledParameter, null, "ID:"), /*#__PURE__*/React.createElement(StyledInput, {
+  }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React.createElement(StyledInput, {
+    ref: inputRef,
     autoFocus: true,
+    type: "text",
+    autoCapitalize: "none",
+    autoComplete: "none",
     value: search,
     onChange: handleChange,
-    placeholder: "Search or jump to"
-  }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : null, /*#__PURE__*/React.createElement(Tooltip, {
+    placeholder: mode === "id" ? "22" : "Search or jump to"
+  }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, {
+    style: {
+      marginRight: "4px"
+    }
+  }) : null, mode !== "id" && search.length === 0 ? /*#__PURE__*/React.createElement(Tooltip, {
     title: "Search by ID",
     placement: "top"
   }, /*#__PURE__*/React.createElement(IconButton, {
     variant: "text gray"
-  }, /*#__PURE__*/React.createElement(HashtagIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Close",
+  }, /*#__PURE__*/React.createElement(HashtagIcon, {
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter") {
+        setMode("id");
+        clearInput();
+        focusInput();
+      }
+    },
+    onClick: function onClick() {
+      setMode("id");
+      clearInput();
+      focusInput();
+    }
+  }))) : null, search.length > 0 || mode === "id" ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: mode === "id" ? "Close ID mode" : "Clear",
     placement: "top"
   }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "text gray"
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)))));
+    variant: "text gray",
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter") {
+        setMode("default");
+        clearInput();
+        focusInput();
+      }
+    },
+    onClick: function onClick() {
+      setMode("default");
+      clearInput();
+      focusInput();
+    }
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
 };
 CommandPalleteHeader.displayName = "CommandPalleteItem";
 //# sourceMappingURL=CommandPalleteHeader.js.map

package/dist/esm/components/CommandPallete/CommandPalleteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["React","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","SpinnerLoader","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","CommandPalleteHeader","search","handleChange","loading","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = true,\n}: CommandPalleteHeaderProps) => {\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      <StyledParameter>ID:</StyledParameter>\n      <StyledInput\n        autoFocus\n        value={search}\n        onChange={handleChange}\n        placeholder=\"Search or jump to\"\n      />\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader /> : null}\n\n        <Tooltip title=\"Search by ID\" placement=\"top\">\n          <IconButton variant=\"text gray\">\n            <HashtagIcon />\n          </IconButton>\n        </Tooltip>\n\n        <Tooltip title=\"Close\" placement=\"top\">\n          <IconButton variant=\"text gray\">\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ,UAAU;AAClE,SAASC,aAAa,QAAQ,YAAY;AAC1C,SAASC,OAAO,QAAQ,YAAY;AACpC,SACEC,mBAAmB,EACnBC,0BAA0B,EAC1BC,WAAW,EACXC,eAAe,EACfC,gBAAgB,QACX,yBAAyB;;AAEhC;;AAOA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,OAIA;EAAA,IAH/BC,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IAAA,oBACZC,OAAO;IAAPA,OAAO,6BAAG,IAAI;EAEd,oBACE,oBAAC,0BAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,oBAAC,gBAAgB,qBACf,oBAAC,eAAe,OAAG,CACF,eAEnB,oBAAC,eAAe,cAAsB,eACtC,oBAAC,WAAW;IACV,SAAS;IACT,KAAK,EAAEF,MAAO;IACd,QAAQ,EAAEC,YAAa;IACvB,WAAW,EAAC;EAAmB,EAC/B,eACF,oBAAC,mBAAmB,QACjBC,OAAO,gBAAG,oBAAC,aAAa,OAAG,GAAG,IAAI,eAEnC,oBAAC,OAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,oBAAC,UAAU;IAAC,OAAO,EAAC;EAAW,gBAC7B,oBAAC,WAAW,OAAG,CACJ,CACL,eAEV,oBAAC,OAAO;IAAC,KAAK,EAAC,OAAO;IAAC,SAAS,EAAC;EAAK,gBACpC,oBAAC,UAAU;IAAC,OAAO,EAAC;EAAW,gBAC7B,oBAAC,SAAS,OAAG,CACF,CACL,CACU,CACK;AAEjC,CAAC;AAEDH,oBAAoB,CAACI,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["React","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","SpinnerLoader","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","useModeContext","CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","mode","setMode","focusInput","current","focus","clearInput","value","marginRight","length","e","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type=\"text\"\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={handleChange}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton variant=\"text gray\">\n              <HashtagIcon\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") {\n                    setMode(\"id\");\n                    clearInput();\n                    focusInput();\n                  }\n                }}\n                onClick={() => {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }}\n              />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}

package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
-export declare type Entity = "project" | "task";
+import { ReactNode } from "react";
 export interface CommandPalleteItemProps {
     title: string;
+    renderIcon: () => ReactNode;
+    className?: string;
 }
 export declare const CommandPalleteItem: {
-    ({ title }: CommandPalleteItemProps): JSX.Element;
+    ({ title, renderIcon, className, }: CommandPalleteItemProps): JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=CommandPalleteItem.d.ts.map

package/dist/esm/components/CommandPallete/CommandPalleteItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"names":[],"mappings":";AAKA,oBAAY,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAGxC,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB;gBAAe,uBAAuB;;CAWpE,CAAC"}
+{"version":3,"file":"CommandPalleteItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB;wCAI5B,uBAAuB;;CAmBzB,CAAC"}

package/dist/esm/components/CommandPallete/CommandPalleteItem.js

@@ -1,13 +1,21 @@
+import classNames from "classnames";
 import React from "react";
-import { ProjectsIcon } from "../Icons";
 import { Typography } from "../Typography/Typography";
 import { StyledCommandPalleteItem, StyledIcon } from "./CommandPallete.styles";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
 export var CommandPalleteItem = function CommandPalleteItem(_ref) {
-  var title = _ref.title;
+  var title = _ref.title,
+    renderIcon = _ref.renderIcon,
+    className = _ref.className;
+  var icon = renderIcon();
   return /*#__PURE__*/React.createElement(StyledCommandPalleteItem, {
-    className: "cp-item",
+    className: classNames("cp-item", className),
     tabIndex: 1
-  }, /*#__PURE__*/React.createElement(StyledIcon, null, /*#__PURE__*/React.createElement(ProjectsIcon, null)), /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(StyledIcon, null, icon), /*#__PURE__*/React.createElement(Typography, {
+    overflow: "truncate",
+    whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary"
   }, title));

package/dist/esm/components/CommandPallete/CommandPalleteItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteItem.js","names":["React","ProjectsIcon","Typography","StyledCommandPalleteItem","StyledIcon","CommandPalleteItem","title","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { ProjectsIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\n\nexport type Entity = \"project\" | \"task\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteItemProps {\n  title: string;\n}\n\nexport const CommandPalleteItem = ({ title }: CommandPalleteItemProps) => {\n  return (\n    <StyledCommandPalleteItem className=\"cp-item\" tabIndex={1}>\n      <StyledIcon>\n        <ProjectsIcon />\n      </StyledIcon>\n      <Typography variant=\"Body 1\" color=\"primary\">\n        {title}\n      </Typography>\n    </StyledCommandPalleteItem>\n  );\n};\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,UAAU;AACvC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,wBAAwB,EAAEC,UAAU,QAAQ,yBAAyB;AAS9E,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAA2C;EAAA,IAArCC,KAAK,QAALA,KAAK;EACxC,oBACE,oBAAC,wBAAwB;IAAC,SAAS,EAAC,SAAS;IAAC,QAAQ,EAAE;EAAE,gBACxD,oBAAC,UAAU,qBACT,oBAAC,YAAY,OAAG,CACL,eACb,oBAAC,UAAU;IAAC,OAAO,EAAC,QAAQ;IAAC,KAAK,EAAC;EAAS,GACzCA,KAAK,CACK,CACY;AAE/B,CAAC;AAEDD,kBAAkB,CAACE,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteItem.js","names":["classNames","React","Typography","StyledCommandPalleteItem","StyledIcon","CommandPalleteItem","title","renderIcon","className","icon","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { ReactNode } from \"react\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPalleteItem, StyledIcon } from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteItemProps {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n}\n\nexport const CommandPalleteItem = ({\n  title,\n  renderIcon,\n  className,\n}: CommandPalleteItemProps) => {\n  const icon = renderIcon();\n\n  return (\n    <StyledCommandPalleteItem\n      className={classNames(\"cp-item\", className)}\n      tabIndex={1}\n    >\n      <StyledIcon>{icon}</StyledIcon>\n      <Typography\n        overflow=\"truncate\"\n        whitespace=\"no-wrap\"\n        variant=\"Body 1\"\n        color=\"primary\"\n      >\n        {title}\n      </Typography>\n    </StyledCommandPalleteItem>\n  );\n};\n\nCommandPalleteItem.displayName = \"CommandPalleteItem\";\n"],"mappings":"AAAA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAqB,OAAO;AACxC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,wBAAwB,EAAEC,UAAU,QAAQ,yBAAyB;;AAE9E;;AAOA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,IAH7BC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;EAET,IAAMC,IAAI,GAAGF,UAAU,EAAE;EAEzB,oBACE,oBAAC,wBAAwB;IACvB,SAAS,EAAEP,UAAU,CAAC,SAAS,EAAEQ,SAAS,CAAE;IAC5C,QAAQ,EAAE;EAAE,gBAEZ,oBAAC,UAAU,QAAEC,IAAI,CAAc,eAC/B,oBAAC,UAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAEdH,KAAK,CACK,CACY;AAE/B,CAAC;AAEDD,kBAAkB,CAACK,WAAW,GAAG,oBAAoB"}

package/dist/esm/components/CommandPallete/CommandPalleteList.d.ts

@@ -1,8 +1,10 @@
 import { PropsWithChildren } from "react";
 export interface CommandPalleteListProps {
+    heading?: string;
+    visible?: boolean;
 }
 export declare const CommandPalleteList: {
-    ({ children, }: PropsWithChildren<CommandPalleteListProps>): JSX.Element;
+    ({ children, heading, visible, }: PropsWithChildren<CommandPalleteListProps>): JSX.Element | null;
     displayName: string;
 };
 //# sourceMappingURL=CommandPalleteList.d.ts.map

package/dist/esm/components/CommandPallete/CommandPalleteList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteList.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,uBAAuB;CAAG;AAE3C,eAAO,MAAM,kBAAkB;oBAE5B,kBAAkB,uBAAuB,CAAC;;CAM5C,CAAC"}
+{"version":3,"file":"CommandPalleteList.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB;sCAI5B,kBAAkB,uBAAuB,CAAC;;CAO5C,CAAC"}

package/dist/esm/components/CommandPallete/CommandPalleteList.js

@@ -1,14 +1,19 @@
 import React from "react";
-import { StyledCommandPalleteList } from "./CommandPallete.styles";
+import { StyledCommandPalleteList, StyledHeading } from "./CommandPallete.styles";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 export var CommandPalleteList = function CommandPalleteList(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(StyledCommandPalleteList, {
+  var children = _ref.children,
+    heading = _ref.heading,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible;
+  return visible ? /*#__PURE__*/React.createElement(StyledCommandPalleteList, {
     className: "cp-list",
     tabIndex: -1
-  }, children);
+  }, heading ? /*#__PURE__*/React.createElement(StyledHeading, {
+    tabIndex: -1
+  }, heading) : null, children) : null;
 };
 CommandPalleteList.displayName = "CommandPalleteList";
 //# sourceMappingURL=CommandPalleteList.js.map

package/dist/esm/components/CommandPallete/CommandPalleteList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteList.js","names":["React","StyledCommandPalleteList","CommandPalleteList","children","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteList.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { StyledCommandPalleteList } from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteListProps {}\n\nexport const CommandPalleteList = ({\n  children,\n}: PropsWithChildren<CommandPalleteListProps>) => {\n  return (\n    <StyledCommandPalleteList className=\"cp-list\" tabIndex={-1}>\n      {children}\n    </StyledCommandPalleteList>\n  );\n};\n\nCommandPalleteList.displayName = \"CommandPalleteList\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SAASC,wBAAwB,QAAQ,yBAAyB;;AAElE;;AAGA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAEmB;EAAA,IADhDC,QAAQ,QAARA,QAAQ;EAER,oBACE,oBAAC,wBAAwB;IAAC,SAAS,EAAC,SAAS;IAAC,QAAQ,EAAE,CAAC;EAAE,GACxDA,QAAQ,CACgB;AAE/B,CAAC;AAEDD,kBAAkB,CAACE,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteList.js","names":["React","StyledCommandPalleteList","StyledHeading","CommandPalleteList","children","heading","visible","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteList.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport {\n  StyledCommandPalleteList,\n  StyledHeading,\n} from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteListProps {\n  heading?: string;\n  visible?: boolean;\n}\n\nexport const CommandPalleteList = ({\n  children,\n  heading,\n  visible = false,\n}: PropsWithChildren<CommandPalleteListProps>) => {\n  return visible ? (\n    <StyledCommandPalleteList className=\"cp-list\" tabIndex={-1}>\n      {heading ? <StyledHeading tabIndex={-1}>{heading}</StyledHeading> : null}\n      {children}\n    </StyledCommandPalleteList>\n  ) : null;\n};\n\nCommandPalleteList.displayName = \"CommandPalleteList\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SACEC,wBAAwB,EACxBC,aAAa,QACR,yBAAyB;;AAEhC;;AAMA,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,OAImB;EAAA,IAHhDC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,KAAK;EAEf,OAAOA,OAAO,gBACZ,oBAAC,wBAAwB;IAAC,SAAS,EAAC,SAAS;IAAC,QAAQ,EAAE,CAAC;EAAE,GACxDD,OAAO,gBAAG,oBAAC,aAAa;IAAC,QAAQ,EAAE,CAAC;EAAE,GAAEA,OAAO,CAAiB,GAAG,IAAI,EACvED,QAAQ,CACgB,GACzB,IAAI;AACV,CAAC;AAEDD,kBAAkB,CAACI,WAAW,GAAG,oBAAoB"}

package/dist/esm/components/CommandPallete/context/ModeContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ModeContextProps {
+    mode: string;
+    setMode: (value: string) => void;
+}
+declare const ModeContext: import("react").Context<ModeContextProps>;
+export declare const ModeContextProvider: import("react").Provider<ModeContextProps>;
+export declare const useModeContext: () => ModeContextProps;
+export default ModeContext;
+//# sourceMappingURL=ModeContext.d.ts.map

package/dist/esm/components/CommandPallete/context/ModeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/CommandPallete/context/ModeContext.tsx"],"names":[],"mappings":";AAEA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,WAAW,2CAGf,CAAC;AAEH,eAAO,MAAM,mBAAmB,4CAAuB,CAAC;AAExD,eAAO,MAAM,cAAc,QAAO,gBAA2C,CAAC;AAE9E,eAAe,WAAW,CAAC"}

package/dist/esm/components/CommandPallete/context/ModeContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+var ModeContext = /*#__PURE__*/createContext({
+  mode: "default",
+  setMode: function setMode() {
+    return null;
+  }
+});
+export var ModeContextProvider = ModeContext.Provider;
+export var useModeContext = function useModeContext() {
+  return useContext(ModeContext);
+};
+export default ModeContext;
+//# sourceMappingURL=ModeContext.js.map

package/dist/esm/components/CommandPallete/context/ModeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeContext.js","names":["createContext","useContext","ModeContext","mode","setMode","ModeContextProvider","Provider","useModeContext"],"sources":["../../../../../src/components/CommandPallete/context/ModeContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ninterface ModeContextProps {\n  mode: string;\n  setMode: (value: string) => void;\n}\n\nconst ModeContext = createContext<ModeContextProps>({\n  mode: \"default\",\n  setMode: () => null,\n});\n\nexport const ModeContextProvider = ModeContext.Provider;\n\nexport const useModeContext = (): ModeContextProps => useContext(ModeContext);\n\nexport default ModeContext;\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAOjD,IAAMC,WAAW,gBAAGF,aAAa,CAAmB;EAClDG,IAAI,EAAE,SAAS;EACfC,OAAO,EAAE;IAAA,OAAM,IAAI;EAAA;AACrB,CAAC,CAAC;AAEF,OAAO,IAAMC,mBAAmB,GAAGH,WAAW,CAACI,QAAQ;AAEvD,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAc;EAAA,OAA2BN,UAAU,CAACC,WAAW,CAAC;AAAA;AAE7E,eAAeA,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@activecollab/components",
-  "version": "1.0.260",
+  "version": "1.0.261",
   "description": "ActiveCollab Components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",