@activecollab/components 1.0.260 → 1.0.262

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\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;AAWrD,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,90 @@
 "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, {
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === "Enter") {
+        setMode("id");
+        clearInput();
+        focusInput();
+      }
+    },
+    onClick: function onClick() {
+      setMode("id");
+      clearInput();
+      focusInput();
+    },
     variant: "text gray"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    title: "Close",
+  }, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, null))) : 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",
+    onKeyPress: function onKeyPress(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\n              onKeyPress={(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              variant=\"text gray\"\n            >\n              <HashtagIcon />\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              onKeyPress={(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/cjs/components/Links/Link.js

@@ -48,7 +48,9 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     variant: variant,
     size: size,
     $iconOnly: children instanceof Object && !(children instanceof Array)
-  }, args), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledLinkElements, {
+  }, args, {
+    tabIndex: 1
+  }), children instanceof Array ? /*#__PURE__*/_react.default.createElement(_Styles.StyledLinkElements, {
     className: "c-link__elements"
   }, children.map(function (value, index) {
     return value ? /*#__PURE__*/_react.default.createElement(_Styles.StyledLinkElement, {

package/dist/cjs/components/Links/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n  /** Children type of node or string */\n  children: ReactNode | string;\n  /** Variant Buttons */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\";\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n  /** Disabled prop */\n  disabled?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n  props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = \"a\">(\n    {\n      as,\n      children,\n      variant = \"contained\",\n      size,\n      disabled = false,\n      className,\n      ...args\n    }: LinkProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n\n    return (\n      <StyledLink\n        ref={ref}\n        as={Component}\n        disabled={disabled}\n        className={classNames(\"c-link\", className, {\n          \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-link--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-link--dark_transparent\": variant === \"dark transparent\",\n          \"c-link--circle_raised\": variant === \"circle raised\",\n          \"c-link--big\": size === \"big\",\n          \"c-link--small\": size === \"small\",\n          \"c-link--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n          \"c-link--disabled\": disabled,\n        })}\n        variant={variant}\n        size={size}\n        $iconOnly={children instanceof Object && !(children instanceof Array)}\n        {...args}\n      >\n        {children instanceof Array ? (\n          <StyledLinkElements className=\"c-link__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledLinkElement\n                  className=\"c-link__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledLinkElement>\n              ) : null\n            )}\n          </StyledLinkElements>\n        ) : (\n          children\n        )}\n      </StyledLink>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoC7E;AACA;AACA;AACO,IAAMA,IAA8C,gBAAG,IAAAC,iBAAU,EACtE,gBAUEC,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,6BAAC,kBAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAE,IAAAI,mBAAU,EAAC,QAAQ,EAAEH,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK,CAAC;MAC5D,kBAAkB,EAAEN;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK;EAAE,GAClEJ,IAAI,GAEPL,QAAQ,YAAYS,KAAK,gBACxB,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CT,QAAQ,CAACU,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,yBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBX,QACD,CACU;AAEjB,CAAC,CACF;AAAC;AAEFJ,IAAI,CAACiB,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n  /** Children type of node or string */\n  children: ReactNode | string;\n  /** Variant Buttons */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\"\n    | \"text link-primary\"\n    | \"text link-default\";\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n  /** Disabled prop */\n  disabled?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n  props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = \"a\">(\n    {\n      as,\n      children,\n      variant = \"contained\",\n      size,\n      disabled = false,\n      className,\n      ...args\n    }: LinkProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n\n    return (\n      <StyledLink\n        ref={ref}\n        as={Component}\n        disabled={disabled}\n        className={classNames(\"c-link\", className, {\n          \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-link--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-link--dark_transparent\": variant === \"dark transparent\",\n          \"c-link--circle_raised\": variant === \"circle raised\",\n          \"c-link--big\": size === \"big\",\n          \"c-link--small\": size === \"small\",\n          \"c-link--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n          \"c-link--disabled\": disabled,\n        })}\n        variant={variant}\n        size={size}\n        $iconOnly={children instanceof Object && !(children instanceof Array)}\n        {...args}\n        tabIndex={1}\n      >\n        {children instanceof Array ? (\n          <StyledLinkElements className=\"c-link__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledLinkElement\n                  className=\"c-link__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledLinkElement>\n              ) : null\n            )}\n          </StyledLinkElements>\n        ) : (\n          children\n        )}\n      </StyledLink>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC7E;AACA;AACA;AACO,IAAMA,IAA8C,gBAAG,IAAAC,iBAAU,EACtE,gBAUEC,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,6BAAC,kBAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAE,IAAAI,mBAAU,EAAC,QAAQ,EAAEH,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK,CAAC;MAC5D,kBAAkB,EAAEN;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK;EAAE,GAClEJ,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYS,KAAK,gBACxB,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CT,QAAQ,CAACU,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,yBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBX,QACD,CACU;AAEjB,CAAC,CACF;AAAC;AAEFJ,IAAI,CAACiB,WAAW,GAAG,MAAM"}

package/dist/cjs/components/Links/Styles.js

@@ -18,7 +18,7 @@ exports.StyledLinkElement = StyledLinkElement;
 var StyledLink = _styledComponents.default.a.withConfig({
   displayName: "Styles__StyledLink",
   componentId: "sc-1c1jdox-1"
-})(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
+})(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
   "WebkitFontSmoothing": "antialiased",
   "MozOsxFontSmoothing": "grayscale",
   "fontWeight": "500",
@@ -49,6 +49,10 @@ var StyledLink = _styledComponents.default.a.withConfig({
   return props.variant === "dark transparent" && (0, _styledComponents.css)(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
 }, function (props) {
   return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
+}, function (props) {
+  return props.variant === "text link-primary" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
+}, function (props) {
+  return props.variant === "text link-default" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-500);text-decoration:underline var(--color-theme-500);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
 }, function (props) {
   return props.$iconOnly && (0, _styledComponents.css)(["padding:0;width:32px;", " ", ""], props.size === "small" && (0, _styledComponents.css)(["radius:16px;width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:20px;width:40px;"]));
 }, function (props) {

package/dist/cjs/components/Links/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-primary\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-primary);\n      text-decoration: underline var(--color-primary);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-default\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-theme-500);\n      text-decoration: underline var(--color-theme-500);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}

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;AAG9B,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"}