@activecollab/components 1.0.277 → 1.0.279

package/dist/cjs/components/{CommandPallete/CommandPallete.js → CommandPalette/CommandPalette.js}

@@ -4,14 +4,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommandPallete = void 0;
+exports.CommandPalette = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Dialog = require("../Dialog");
-var _CommandPallete = require("./CommandPallete.styles");
-var _CommandPalleteCommandItem = require("./CommandPalleteCommandItem");
-var _CommandPalleteHeader = require("./CommandPalleteHeader");
-var _CommandPalleteItem = require("./CommandPalleteItem");
-var _CommandPalleteList = require("./CommandPalleteList");
+var _CommandPalette = require("./CommandPalette.styles");
+var _CommandPaletteCommandItem = require("./CommandPaletteCommandItem");
+var _CommandPaletteHeader = require("./CommandPaletteHeader");
+var _CommandPaletteItem = require("./CommandPaletteItem");
+var _CommandPaletteList = require("./CommandPaletteList");
 var _context = require("./context");
 var _deepChildrenMap = require("../../utils/deepChildrenMap");
 var _excluded = ["children", "onChangeSearch", "search", "mode", "setMode"];
@@ -28,7 +28,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 CommandPalette = function CommandPalette(_ref) {
   var children = _ref.children,
     onChangeSearch = _ref.onChangeSearch,
     search = _ref.search,
@@ -63,10 +63,10 @@ var CommandPallete = function CommandPallete(_ref) {
     var items = (0, _deepChildrenMap.deepMap)(children, function (child) {
       var item = child;
       var clonedElement;
-      if (item && item.type === _CommandPalleteList.CommandPalleteList) {
+      if (item && item.type === _CommandPaletteList.CommandPaletteList) {
         clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread({}, item.props));
       }
-      if (item && item.type === _CommandPalleteCommandItem.CommandPalleteCommandItem) {
+      if (item && item.type === _CommandPaletteCommandItem.CommandPaletteCommandItem) {
         clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
           index: itemsLength,
           selected: selected
@@ -74,7 +74,7 @@ var CommandPallete = function CommandPallete(_ref) {
         itemsLength++;
         commandsLength++;
       }
-      if (item && item.type === _CommandPalleteItem.CommandPalleteItem) {
+      if (item && item.type === _CommandPaletteItem.CommandPaletteItem) {
         clonedElement = /*#__PURE__*/(0, _react.cloneElement)(item, _objectSpread(_objectSpread({}, item.props), {}, {
           index: itemsLength,
           selected: selected
@@ -130,7 +130,7 @@ var CommandPallete = function CommandPallete(_ref) {
       selected: selected,
       setSelected: setSelected
     }
-  }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPallete, {
+  }, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPalette, {
     onKeyDown: function onKeyDown(e) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -156,17 +156,17 @@ var CommandPallete = function CommandPallete(_ref) {
       mode: mode,
       setMode: setMode
     }
-  }, /*#__PURE__*/_react.default.createElement(_CommandPalleteHeader.CommandPalleteHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_CommandPaletteHeader.CommandPaletteHeader, {
     handleChange: handleChange,
     commandsLength: filterChildren.commandsLength,
     itemsLength: filterChildren.itemsLength
-  })), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteWrapper, {
+  })), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteWrapper, {
     ref: listWrapperRef
   }, filterChildren.items)))));
 };
-exports.CommandPallete = CommandPallete;
-CommandPallete.displayName = "CommandPallete";
-CommandPallete.List = _CommandPalleteList.CommandPalleteList;
-CommandPallete.Item = _CommandPalleteItem.CommandPalleteItem;
-CommandPallete.CommandItem = _CommandPalleteCommandItem.CommandPalleteCommandItem;
-//# sourceMappingURL=CommandPallete.js.map
+exports.CommandPalette = CommandPalette;
+CommandPalette.displayName = "CommandPalette";
+CommandPalette.List = _CommandPaletteList.CommandPaletteList;
+CommandPalette.Item = _CommandPaletteItem.CommandPaletteItem;
+CommandPalette.CommandItem = _CommandPaletteCommandItem.CommandPaletteCommandItem;
+//# sourceMappingURL=CommandPalette.js.map

package/dist/cjs/components/{CommandPallete/CommandPallete.js.map → CommandPalette/CommandPalette.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.js","names":["CommandPallete","children","onChangeSearch","search","mode","setMode","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPalleteList","cloneElement","props","CommandPalleteCommandItem","index","CommandPalleteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPallete/CommandPallete.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPallete,\n  StyledCommandPalleteWrapper,\n} from \"./CommandPallete.styles\";\nimport { CommandPalleteCommandItem } from \"./CommandPalleteCommandItem\";\nimport { CommandPalleteHeader } from \"./CommandPalleteHeader\";\nimport {\n  CommandPalleteItem,\n  CommandPalleteItemProps,\n} from \"./CommandPalleteItem\";\nimport { CommandPalleteList } from \"./CommandPalleteList\";\n\nimport {\n  ModeContextProvider,\n  SelectedContextProvider,\n  SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPalleteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPallete = ({\n  children,\n  onChangeSearch,\n  search,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPalleteProps>) => {\n  const [selected, setSelected] = useState<number>(0);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  const scrollToTop = () => {\n    listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n  };\n\n  const scrollToBottom = () => {\n    listWrapperRef.current?.scrollTo({\n      top: listWrapperRef.current.scrollHeight,\n      behavior: \"smooth\",\n    });\n  };\n\n  const filterChildren = useMemo(() => {\n    let itemsLength = 0;\n    let commandsLength = 0;\n\n    const items = deepMap(children, (child) => {\n      const item = child as ReactElement<CommandPalleteItemProps>;\n      let clonedElement;\n\n      if (item && item.type === CommandPalleteList) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n        });\n      }\n\n      if (item && item.type === CommandPalleteCommandItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index: itemsLength,\n          selected,\n        });\n\n        itemsLength++;\n        commandsLength++;\n      }\n\n      if (item && item.type === CommandPalleteItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index: itemsLength,\n          selected,\n        });\n\n        itemsLength++;\n      }\n\n      return clonedElement;\n    });\n\n    return { items, itemsLength, commandsLength };\n  }, [children, selected]);\n\n  const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n    const items = document.querySelectorAll(\".cp-item\");\n\n    let index = 0;\n    let newIndex = 0;\n    let newItem: Element | null = null;\n\n    if (direction === \"down\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = index === items.length - 1 ? 0 : index + 1;\n    } else if (direction === \"up\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = !index ? items.length - 1 : index - 1;\n    } else {\n      setSelected(0);\n    }\n\n    newItem = items[newIndex];\n\n    if (newItem && typeof newIndex === \"number\") {\n      setSelected(newIndex);\n\n      newItem.scrollIntoView({\n        behavior: \"smooth\",\n        block: newIndex ? \"center\" : \"end\",\n      });\n    }\n  };\n\n  return (\n    <Dialog {...rest}>\n      <SearchContextProvider value={{ search, onChangeSearch }}>\n        <SelectedContextProvider value={{ selected: selected, setSelected }}>\n          <StyledCommandPallete\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowDown\") {\n                e.preventDefault();\n                handleChangeSelected(\"down\");\n              }\n\n              if (e.key === \"ArrowUp\") {\n                e.preventDefault();\n                handleChangeSelected(\"up\");\n              }\n\n              if (e.key === \"End\") {\n                e.preventDefault();\n                scrollToBottom();\n                setSelected(filterChildren.itemsLength - 1);\n              }\n\n              if (e.key === \"Home\") {\n                e.preventDefault();\n                scrollToTop();\n                setSelected(0);\n              }\n            }}\n          >\n            <ModeContextProvider value={{ mode, setMode }}>\n              <CommandPalleteHeader\n                handleChange={handleChange}\n                commandsLength={filterChildren.commandsLength}\n                itemsLength={filterChildren.itemsLength}\n              />\n            </ModeContextProvider>\n\n            <StyledCommandPalleteWrapper ref={listWrapperRef}>\n              {filterChildren.items}\n            </StyledCommandPalleteWrapper>\n          </StyledCommandPallete>\n        </SelectedContextProvider>\n      </SearchContextProvider>\n    </Dialog>\n  );\n};\n\nCommandPallete.displayName = \"CommandPallete\";\n\nCommandPallete.List = CommandPalleteList;\nCommandPallete.Item = CommandPalleteItem;\nCommandPallete.CommandItem = CommandPalleteCommandItem;\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.js","names":["CommandPalette","children","onChangeSearch","search","mode","setMode","rest","useState","selected","setSelected","listWrapperRef","useRef","handleChange","e","target","value","scrollToTop","current","scrollTo","top","behavior","scrollToBottom","scrollHeight","filterChildren","useMemo","itemsLength","commandsLength","items","deepMap","child","item","clonedElement","type","CommandPaletteList","cloneElement","props","CommandPaletteCommandItem","index","CommandPaletteItem","handleChangeSelected","direction","document","querySelectorAll","newIndex","newItem","forEach","_","i","length","scrollIntoView","block","key","preventDefault","displayName","List","Item","CommandItem"],"sources":["../../../../src/components/CommandPalette/CommandPalette.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  cloneElement,\n  PropsWithChildren,\n  ReactElement,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Dialog, DialogProps } from \"../Dialog\";\nimport {\n  StyledCommandPalette,\n  StyledCommandPaletteWrapper,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteCommandItem } from \"./CommandPaletteCommandItem\";\nimport { CommandPaletteHeader } from \"./CommandPaletteHeader\";\nimport {\n  CommandPaletteItem,\n  CommandPaletteItemProps,\n} from \"./CommandPaletteItem\";\nimport { CommandPaletteList } from \"./CommandPaletteList\";\n\nimport {\n  ModeContextProvider,\n  SelectedContextProvider,\n  SearchContextProvider,\n} from \"./context\";\n\nimport { deepMap } from \"../../utils/deepChildrenMap\";\n\nexport interface CommandPaletteProps extends DialogProps {\n  onChangeSearch: (search: string) => void;\n  search: string;\n  mode: string;\n  setMode: (value: string) => void;\n  loading?: boolean;\n}\n\nexport const CommandPalette = ({\n  children,\n  onChangeSearch,\n  search,\n  mode,\n  setMode,\n  ...rest\n}: PropsWithChildren<CommandPaletteProps>) => {\n  const [selected, setSelected] = useState<number>(0);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChangeSearch(e.target.value);\n  };\n\n  const scrollToTop = () => {\n    listWrapperRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n  };\n\n  const scrollToBottom = () => {\n    listWrapperRef.current?.scrollTo({\n      top: listWrapperRef.current.scrollHeight,\n      behavior: \"smooth\",\n    });\n  };\n\n  const filterChildren = useMemo(() => {\n    let itemsLength = 0;\n    let commandsLength = 0;\n\n    const items = deepMap(children, (child) => {\n      const item = child as ReactElement<CommandPaletteItemProps>;\n      let clonedElement;\n\n      if (item && item.type === CommandPaletteList) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n        });\n      }\n\n      if (item && item.type === CommandPaletteCommandItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index: itemsLength,\n          selected,\n        });\n\n        itemsLength++;\n        commandsLength++;\n      }\n\n      if (item && item.type === CommandPaletteItem) {\n        clonedElement = cloneElement(item, {\n          ...item.props,\n          index: itemsLength,\n          selected,\n        });\n\n        itemsLength++;\n      }\n\n      return clonedElement;\n    });\n\n    return { items, itemsLength, commandsLength };\n  }, [children, selected]);\n\n  const handleChangeSelected = (direction?: \"up\" | \"down\") => {\n    const items = document.querySelectorAll(\".cp-item\");\n\n    let index = 0;\n    let newIndex = 0;\n    let newItem: Element | null = null;\n\n    if (direction === \"down\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = index === items.length - 1 ? 0 : index + 1;\n    } else if (direction === \"up\") {\n      items.forEach((_, i) => {\n        if (i === selected) {\n          index = i;\n        }\n      });\n\n      newIndex = !index ? items.length - 1 : index - 1;\n    } else {\n      setSelected(0);\n    }\n\n    newItem = items[newIndex];\n\n    if (newItem && typeof newIndex === \"number\") {\n      setSelected(newIndex);\n\n      newItem.scrollIntoView({\n        behavior: \"smooth\",\n        block: newIndex ? \"center\" : \"end\",\n      });\n    }\n  };\n\n  return (\n    <Dialog {...rest}>\n      <SearchContextProvider value={{ search, onChangeSearch }}>\n        <SelectedContextProvider value={{ selected: selected, setSelected }}>\n          <StyledCommandPalette\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowDown\") {\n                e.preventDefault();\n                handleChangeSelected(\"down\");\n              }\n\n              if (e.key === \"ArrowUp\") {\n                e.preventDefault();\n                handleChangeSelected(\"up\");\n              }\n\n              if (e.key === \"End\") {\n                e.preventDefault();\n                scrollToBottom();\n                setSelected(filterChildren.itemsLength - 1);\n              }\n\n              if (e.key === \"Home\") {\n                e.preventDefault();\n                scrollToTop();\n                setSelected(0);\n              }\n            }}\n          >\n            <ModeContextProvider value={{ mode, setMode }}>\n              <CommandPaletteHeader\n                handleChange={handleChange}\n                commandsLength={filterChildren.commandsLength}\n                itemsLength={filterChildren.itemsLength}\n              />\n            </ModeContextProvider>\n\n            <StyledCommandPaletteWrapper ref={listWrapperRef}>\n              {filterChildren.items}\n            </StyledCommandPaletteWrapper>\n          </StyledCommandPalette>\n        </SelectedContextProvider>\n      </SearchContextProvider>\n    </Dialog>\n  );\n};\n\nCommandPalette.displayName = \"CommandPalette\";\n\nCommandPalette.List = CommandPaletteList;\nCommandPalette.Item = CommandPaletteItem;\nCommandPalette.CommandItem = CommandPaletteCommandItem;\n"],"mappings":"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"}

package/dist/cjs/components/{CommandPallete/CommandPallete.styles.js → CommandPalette/CommandPalette.styles.js}

@@ -3,67 +3,67 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSpinnerLoader = exports.StyledSearchIcon = exports.StyledParameter = exports.StyledInput = exports.StyledIcon = exports.StyledHeading = exports.StyledCommandPalleteWrapper = exports.StyledCommandPalleteList = exports.StyledCommandPalleteItem = exports.StyledCommandPalleteHeader = exports.StyledCommandPalleteCommandItem = exports.StyledCommandPallete = exports.StyledActionWrapper = void 0;
+exports.StyledSpinnerLoader = exports.StyledSearchIcon = exports.StyledParameter = exports.StyledInput = exports.StyledIcon = exports.StyledHeading = exports.StyledCommandPaletteWrapper = exports.StyledCommandPaletteList = exports.StyledCommandPaletteItem = exports.StyledCommandPaletteHeader = exports.StyledCommandPaletteCommandItem = exports.StyledCommandPalette = exports.StyledActionWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _FontStyle = require("../FontStyle");
 var _BreakPoints = require("../BreakPoints");
 var _Loaders = require("../Loaders");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var StyledCommandPallete = _styledComponents.default.div.withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPallete",
-  componentId: "sc-16m145d-0"
+var StyledCommandPalette = _styledComponents.default.div.withConfig({
+  displayName: "CommandPalettestyles__StyledCommandPalette",
+  componentId: "sc-na3mad-0"
 })(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;mark{background-color:var(--color-primary-300);color:var(--color-theme-900);}"], _FontStyle.FontStyle);
-exports.StyledCommandPallete = StyledCommandPallete;
-var StyledCommandPalleteWrapper = _styledComponents.default.div.withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPalleteWrapper",
-  componentId: "sc-16m145d-1"
+exports.StyledCommandPalette = StyledCommandPalette;
+var StyledCommandPaletteWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
+  componentId: "sc-na3mad-1"
 })(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){padding-bottom:8px;padding-top:8px;}"]);
-exports.StyledCommandPalleteWrapper = StyledCommandPalleteWrapper;
-var StyledCommandPalleteHeader = _styledComponents.default.div.withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPalleteHeader",
-  componentId: "sc-16m145d-2"
+exports.StyledCommandPaletteWrapper = StyledCommandPaletteWrapper;
+var StyledCommandPaletteHeader = _styledComponents.default.div.withConfig({
+  displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
+  componentId: "sc-na3mad-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;
+exports.StyledCommandPaletteHeader = StyledCommandPaletteHeader;
 var StyledSearchIcon = _styledComponents.default.div.withConfig({
-  displayName: "CommandPalletestyles__StyledSearchIcon",
-  componentId: "sc-16m145d-3"
+  displayName: "CommandPalettestyles__StyledSearchIcon",
+  componentId: "sc-na3mad-3"
 })(["margin-right:8px;svg{vertical-align:middle;}"]);
 exports.StyledSearchIcon = StyledSearchIcon;
 var StyledInput = _styledComponents.default.input.withConfig({
-  displayName: "CommandPalletestyles__StyledInput",
-  componentId: "sc-16m145d-4"
+  displayName: "CommandPalettestyles__StyledInput",
+  componentId: "sc-na3mad-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;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], _BreakPoints.screen.sm);
 exports.StyledInput = StyledInput;
 var StyledParameter = _styledComponents.default.span.withConfig({
-  displayName: "CommandPalletestyles__StyledParameter",
-  componentId: "sc-16m145d-5"
+  displayName: "CommandPalettestyles__StyledParameter",
+  componentId: "sc-na3mad-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-6"
+  displayName: "CommandPalettestyles__StyledActionWrapper",
+  componentId: "sc-na3mad-6"
 })(["align-items:center;display:flex;gap:8px;"]);
 exports.StyledActionWrapper = StyledActionWrapper;
 var StyledIcon = _styledComponents.default.div.withConfig({
-  displayName: "CommandPalletestyles__StyledIcon",
-  componentId: "sc-16m145d-7"
+  displayName: "CommandPalettestyles__StyledIcon",
+  componentId: "sc-na3mad-7"
 })(["margin-right:8px;svg{vertical-align:middle;}"]);
 exports.StyledIcon = StyledIcon;
-var StyledCommandPalleteList = _styledComponents.default.ul.withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPalleteList",
-  componentId: "sc-16m145d-8"
+var StyledCommandPaletteList = _styledComponents.default.ul.withConfig({
+  displayName: "CommandPalettestyles__StyledCommandPaletteList",
+  componentId: "sc-na3mad-8"
 })(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
-exports.StyledCommandPalleteList = StyledCommandPalleteList;
+exports.StyledCommandPaletteList = StyledCommandPaletteList;
 var StyledHeading = _styledComponents.default.p.withConfig({
-  displayName: "CommandPalletestyles__StyledHeading",
-  componentId: "sc-16m145d-9"
+  displayName: "CommandPalettestyles__StyledHeading",
+  componentId: "sc-na3mad-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"
+var StyledCommandPaletteItem = _styledComponents.default.li.withConfig({
+  displayName: "CommandPalettestyles__StyledCommandPaletteItem",
+  componentId: "sc-na3mad-10"
 })(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;background-color:", ";&:focus{background-color:var(--color-theme-200);}&::before{display:", ";background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}&:focus{outline:none;}"], function (_ref) {
   var $selected = _ref.$selected;
   return $selected ? "var(--color-theme-200)" : "transparent";
@@ -71,15 +71,15 @@ var StyledCommandPalleteItem = _styledComponents.default.li.withConfig({
   var $selected = _ref2.$selected;
   return $selected ? "block" : "none";
 });
-exports.StyledCommandPalleteItem = StyledCommandPalleteItem;
-var StyledCommandPalleteCommandItem = (0, _styledComponents.default)(StyledCommandPalleteItem).withConfig({
-  displayName: "CommandPalletestyles__StyledCommandPalleteCommandItem",
-  componentId: "sc-16m145d-11"
+exports.StyledCommandPaletteItem = StyledCommandPaletteItem;
+var StyledCommandPaletteCommandItem = (0, _styledComponents.default)(StyledCommandPaletteItem).withConfig({
+  displayName: "CommandPalettestyles__StyledCommandPaletteCommandItem",
+  componentId: "sc-na3mad-11"
 })(["user-select:none;"]);
-exports.StyledCommandPalleteCommandItem = StyledCommandPalleteCommandItem;
+exports.StyledCommandPaletteCommandItem = StyledCommandPaletteCommandItem;
 var StyledSpinnerLoader = (0, _styledComponents.default)(_Loaders.SpinnerLoader).withConfig({
-  displayName: "CommandPalletestyles__StyledSpinnerLoader",
-  componentId: "sc-16m145d-12"
+  displayName: "CommandPalettestyles__StyledSpinnerLoader",
+  componentId: "sc-na3mad-12"
 })(["margin-right:4px;"]);
 exports.StyledSpinnerLoader = StyledSpinnerLoader;
-//# sourceMappingURL=CommandPallete.styles.js.map
+//# sourceMappingURL=CommandPalette.styles.js.map

package/dist/cjs/components/{CommandPallete/CommandPallete.styles.js.map → CommandPalette/CommandPalette.styles.js.map}

@@ -1 +1 @@
-{"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","$selected","StyledCommandPalleteCommandItem","StyledSpinnerLoader","SpinnerLoader"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\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  mark {\n    background-color: var(--color-primary-300);\n    color: var(--color-theme-900);\n  }\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n\n  &:not(:empty) {\n    padding-bottom: 8px;\n    padding-top: 8px;\n  }\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  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ::selection {\n    background: var(--color-primary-300);\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<{$selected: boolean}>`\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  background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n  &:focus {\n    background-color: var(--color-theme-200);\n  }\n\n  &::before {\n    display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n    background-color: var(--color-primary);\n    content: \"\";\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 2px;\n    }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledCommandPalleteCommandItem = styled(StyledCommandPalleteItem)`\n  user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n  margin-right: 4px;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6GASpD;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,wZAMnCC,mBAAM,CAACC,EAAE,CAwBZ;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,2WAS3B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAAC;AAEK,IAAMC,+BAA+B,GAAG,IAAArB,yBAAM,EAACkB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAAC;AAEK,IAAMI,mBAAmB,GAAG,IAAAtB,yBAAM,EAACuB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC"}
+{"version":3,"file":"CommandPalette.styles.js","names":["StyledCommandPalette","styled","div","FontStyle","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","li","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { SpinnerLoader } from \"../Loaders\";\n\nexport const StyledCommandPalette = 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  mark {\n    background-color: var(--color-primary-300);\n    color: var(--color-theme-900);\n  }\n`;\n\nexport const StyledCommandPaletteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n\n  &:not(:empty) {\n    padding-bottom: 8px;\n    padding-top: 8px;\n  }\n`;\n\nexport const StyledCommandPaletteHeader = 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  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ::selection {\n    background: var(--color-primary-300);\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 StyledCommandPaletteList = 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 StyledCommandPaletteItem = styled.li<{$selected: boolean}>`\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  background-color: ${({$selected}) => $selected ? \"var(--color-theme-200)\" : \"transparent\"};\n\n  &:focus {\n    background-color: var(--color-theme-200);\n  }\n\n  &::before {\n    display: ${({$selected}) => $selected ? \"block\" : \"none\"};\n    background-color: var(--color-primary);\n    content: \"\";\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 2px;\n    }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem)`\n  user-select: none;\n`;\n\nexport const StyledSpinnerLoader = styled(SpinnerLoader)`\n  margin-right: 4px;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAA2C;AAEpC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6GASpD;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,wZAMnCC,mBAAM,CAACC,EAAE,CAwBZ;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,2WAS3B;EAAA,IAAEC,SAAS,QAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5E;EAAA,IAAEA,SAAS,SAATA,SAAS;EAAA,OAAMA,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAAC;AAEK,IAAMC,+BAA+B,GAAG,IAAArB,yBAAM,EAACkB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAAC;AAEK,IAAMI,mBAAmB,GAAG,IAAAtB,yBAAM,EAACuB,sBAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAAC"}

package/dist/cjs/components/{CommandPallete/CommandPalleteCommandItem.js → CommandPalette/CommandPaletteCommandItem.js}

@@ -4,13 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommandPalleteCommandItem = void 0;
+exports.CommandPaletteCommandItem = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icons = require("../Icons");
 var _Typography = require("../Typography/Typography");
-var _CommandPallete = require("./CommandPallete.styles");
+var _CommandPalette = require("./CommandPalette.styles");
 var _context = require("./context");
 var _excluded = ["title", "renderIcon", "className", "index"];
 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); }
@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 CommandPalleteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     renderIcon = _ref.renderIcon,
     className = _ref.className,
@@ -32,24 +32,24 @@ var CommandPalleteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
   var onMouseEnter = function onMouseEnter() {
     setSelected(index);
   };
-  return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteCommandItem, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteCommandItem, _extends({}, rest, {
     ref: ref,
     className: (0, _classnames.default)("cp-item cp-command", className),
     tabIndex: 1,
     "aria-selected": selected === index,
     onMouseEnter: onMouseEnter,
     $selected: index === selected
-  }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledIcon, null, icon), /*#__PURE__*/_react.default.createElement(_StyledTypography, {
+  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledIcon, null, icon), /*#__PURE__*/_react.default.createElement(_StyledTypography, {
     overflow: "truncate",
     whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary"
   }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
 });
-exports.CommandPalleteCommandItem = CommandPalleteCommandItem;
-CommandPalleteCommandItem.displayName = "CommandPalleteCommandItem";
+exports.CommandPaletteCommandItem = CommandPaletteCommandItem;
+CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
 var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
-  displayName: "CommandPalleteCommandItem___StyledTypography",
-  componentId: "sc-12i2mxl-0"
+  displayName: "CommandPaletteCommandItem___StyledTypography",
+  componentId: "sc-1t486ve-0"
 })(["flex:1;"]);
-//# sourceMappingURL=CommandPalleteCommandItem.js.map
+//# sourceMappingURL=CommandPaletteCommandItem.js.map

package/dist/cjs/components/{CommandPallete/CommandPalleteCommandItem.js.map → CommandPalette/CommandPaletteCommandItem.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteCommandItem.js","names":["CommandPalleteCommandItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseEnter","classNames","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n  StyledCommandPalleteCommandItem,\n  StyledIcon,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPalleteCommandItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPalleteCommandItem = forwardRef(\n  (\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      ...rest\n    }: CommandPalleteCommandItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseEnter = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPalleteCommandItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item cp-command\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseEnter={onMouseEnter}\n        $selected={index === selected}\n      >\n        <StyledIcon>{icon}</StyledIcon>\n        <Typography\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant=\"Body 1\"\n          color=\"primary\"\n          css={`\n            flex: 1;\n          `}\n        >\n          {title}\n        </Typography>\n        <ArrowRightIcon />\n      </StyledCommandPalleteCommandItem>\n    );\n  }\n);\n\nCommandPalleteCommandItem.displayName = \"CommandPalleteCommandItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AAIA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,yBAAyB,gBAAG,IAAAC,iBAAU,EACjD,gBAQEC,GAAuB,EACpB;EAAA,IAPDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,+CAA+B,eAC1BC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,oBAAoB,EAAER,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,YAAY,EAAEM,YAAa;IAC3B,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,6BAAC,qBAAc,OAAG,CACc;AAEtC,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACc,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"file":"CommandPaletteCommandItem.js","names":["CommandPaletteCommandItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","onMouseEnter","classNames","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n  StyledCommandPaletteCommandItem,\n  StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPaletteCommandItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title: string;\n  renderIcon: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPaletteCommandItem = forwardRef(\n  (\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      ...rest\n    }: CommandPaletteCommandItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseEnter = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPaletteCommandItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item cp-command\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseEnter={onMouseEnter}\n        $selected={index === selected}\n      >\n        <StyledIcon>{icon}</StyledIcon>\n        <Typography\n          overflow=\"truncate\"\n          whitespace=\"no-wrap\"\n          variant=\"Body 1\"\n          color=\"primary\"\n          css={`\n            flex: 1;\n          `}\n        >\n          {title}\n        </Typography>\n        <ArrowRightIcon />\n      </StyledCommandPaletteCommandItem>\n    );\n  }\n);\n\nCommandPaletteCommandItem.displayName = \"CommandPaletteCommandItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AAIA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWxC,IAAMA,yBAAyB,gBAAG,IAAAC,iBAAU,EACjD,gBAQEC,GAAuB,EACpB;EAAA,IAPDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,IAAI;EAIT,IAAMC,IAAI,GAAGJ,UAAU,EAAE;EACzB,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,+CAA+B,eAC1BC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAW,mBAAU,EAAC,oBAAoB,EAAER,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,YAAY,EAAEM,YAAa;IAC3B,SAAS,EAAEN,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,6BAAC,qBAAc,OAAG,CACc;AAEtC,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACc,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}

package/dist/cjs/components/{CommandPallete/CommandPalleteHeader.js → CommandPalette/CommandPaletteHeader.js}

@@ -4,19 +4,19 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommandPalleteHeader = void 0;
+exports.CommandPaletteHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _IconButton = require("../IconButton");
 var _Icons = require("../Icons");
 var _Tooltip = require("../Tooltip");
-var _CommandPallete = require("./CommandPallete.styles");
+var _CommandPalette = require("./CommandPalette.styles");
 var _context = require("./context");
 var _ModeContext = require("./context/ModeContext");
 var _SearchContext = require("./context/SearchContext");
 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 isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
+var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
   var handleChange = _ref.handleChange,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -55,9 +55,9 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
       }
     }
   }, [search, commandsLength, itemsLength, setSelected]);
-  return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteHeader, {
+  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
     className: "cp-header"
-  }, /*#__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, {
+  }, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, "ID#:") : null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledInput, {
     ref: inputRef,
     autoFocus: true,
     placeholder: mode === "id" ? "22" : "Search or jump to",
@@ -98,7 +98,7 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
         !isChrome && onChangeSearch(pastedText.slice(1));
       }
     }
-  }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledSpinnerLoader, {
+  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSpinnerLoader, {
     "aria-busy": true,
     "aria-label": "Loading...",
     "aria-valuemax": 100,
@@ -140,6 +140,6 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null))) : null));
 };
-exports.CommandPalleteHeader = CommandPalleteHeader;
-CommandPalleteHeader.displayName = "CommandPalleteItem";
-//# sourceMappingURL=CommandPalleteHeader.js.map
+exports.CommandPaletteHeader = CommandPaletteHeader;
+CommandPaletteHeader.displayName = "CommandPaletteItem";
+//# sourceMappingURL=CommandPaletteHeader.js.map

package/dist/cjs/components/{CommandPallete/CommandPalleteHeader.js.map → CommandPalette/CommandPaletteHeader.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["isChrome","test","navigator","userAgent","vendor","CommandPalleteHeader","handleChange","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","checkIfNumber","event","regex","RegExp","key","match","preventDefault","useEffect","length","e","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","slice","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPallete.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nconst isChrome =\n  /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);\n\nexport interface CommandPalleteHeaderProps {\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPalleteHeader = ({\n  handleChange,\n  loading = false,\n  commandsLength,\n  itemsLength,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n  const { setSelected, selected } = useSelectedContext();\n  const { search, onChangeSearch } = useSearchContext();\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      onChangeSearch(\"\");\n    }\n  };\n\n  const checkIfNumber = (event: KeyboardEvent<HTMLInputElement>) => {\n    const regex = new RegExp(\n      /(^\\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/\n    );\n\n    return !event.key.match(regex) && event.preventDefault();\n  };\n\n  useEffect(() => {\n    if (search.length > 0) {\n      if (itemsLength > commandsLength) {\n        setSelected(commandsLength);\n      } else {\n        setSelected(0);\n      }\n    }\n  }, [search, commandsLength, itemsLength, setSelected]);\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        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Backspace\" &&\n            mode !== \"default\" &&\n            search.length === 0\n          ) {\n            setMode(\"default\");\n          }\n\n          if (mode === \"id\" && !isChrome) {\n            checkIfNumber(e);\n          }\n\n          if (e.key === \"Enter\") {\n            const selectedItem = document.querySelectorAll(\".cp-item\")[\n              selected\n            ] as HTMLElement;\n\n            if (itemsLength > 0) {\n              selectedItem.click();\n            }\n          }\n        }}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n            !isChrome && onChangeSearch(pastedText.slice(1));\n          }\n        }}\n      />\n\n      <StyledActionWrapper>\n        {loading ? (\n          <StyledSpinnerLoader\n            aria-busy={true}\n            aria-label=\"Loading...\"\n            aria-valuemax={100}\n            aria-valuemin={0}\n            role=\"progressbar\"\n          />\n        ) : 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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"}
+{"version":3,"file":"CommandPaletteHeader.js","names":["isChrome","test","navigator","userAgent","vendor","CommandPaletteHeader","handleChange","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","checkIfNumber","event","regex","RegExp","key","match","preventDefault","useEffect","length","e","selectedItem","document","querySelectorAll","click","inputText","target","value","startsWith","pastedText","clipboardData","getData","slice","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useRef, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPaletteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\n\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nconst isChrome =\n  /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);\n\nexport interface CommandPaletteHeaderProps {\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n  handleChange,\n  loading = false,\n  commandsLength,\n  itemsLength,\n}: CommandPaletteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n  const { setSelected, selected } = useSelectedContext();\n  const { search, onChangeSearch } = useSearchContext();\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      onChangeSearch(\"\");\n    }\n  };\n\n  const checkIfNumber = (event: KeyboardEvent<HTMLInputElement>) => {\n    const regex = new RegExp(\n      /(^\\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight)/\n    );\n\n    return !event.key.match(regex) && event.preventDefault();\n  };\n\n  useEffect(() => {\n    if (search.length > 0) {\n      if (itemsLength > commandsLength) {\n        setSelected(commandsLength);\n      } else {\n        setSelected(0);\n      }\n    }\n  }, [search, commandsLength, itemsLength, setSelected]);\n\n  return (\n    <StyledCommandPaletteHeader 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        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Backspace\" &&\n            mode !== \"default\" &&\n            search.length === 0\n          ) {\n            setMode(\"default\");\n          }\n\n          if (mode === \"id\" && !isChrome) {\n            checkIfNumber(e);\n          }\n\n          if (e.key === \"Enter\") {\n            const selectedItem = document.querySelectorAll(\".cp-item\")[\n              selected\n            ] as HTMLElement;\n\n            if (itemsLength > 0) {\n              selectedItem.click();\n            }\n          }\n        }}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n            !isChrome && onChangeSearch(pastedText.slice(1));\n          }\n        }}\n      />\n\n      <StyledActionWrapper>\n        {loading ? (\n          <StyledSpinnerLoader\n            aria-busy={true}\n            aria-label=\"Loading...\"\n            aria-valuemax={100}\n            aria-valuemin={0}\n            role=\"progressbar\"\n          />\n        ) : 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    </StyledCommandPaletteHeader>\n  );\n};\n\nCommandPaletteHeader.displayName = \"CommandPaletteItem\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAQA;AAEA;AACA;AAA2D;AAAA;AAE3D,IAAMA,QAAQ,GACZ,QAAQ,CAACC,IAAI,CAACC,SAAS,CAACC,SAAS,CAAC,IAAI,YAAY,CAACF,IAAI,CAACC,SAAS,CAACE,MAAM,CAAC;AASpE,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,OAKA;EAAA,IAJ/BC,YAAY,QAAZA,YAAY;IAAA,oBACZC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,WAAW,QAAXA,WAAW;EAEX,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,sBAA0B,IAAAC,2BAAc,GAAE;IAAlCC,IAAI,mBAAJA,IAAI;IAAEC,OAAO,mBAAPA,OAAO;EACrB,0BAAkC,IAAAC,2BAAkB,GAAE;IAA9CC,WAAW,uBAAXA,WAAW;IAAEC,QAAQ,uBAARA,QAAQ;EAC7B,wBAAmC,IAAAC,+BAAgB,GAAE;IAA7CC,MAAM,qBAANA,MAAM;IAAEC,cAAc,qBAAdA,cAAc;EAE9B,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAIX,QAAQ,IAAIA,QAAQ,CAACY,OAAO,EAAE;MAChCZ,QAAQ,CAACY,OAAO,CAACC,KAAK,EAAE;IAC1B;EACF,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAId,QAAQ,IAAIA,QAAQ,CAACY,OAAO,EAAE;MAChCF,cAAc,CAAC,EAAE,CAAC;IACpB;EACF,CAAC;EAED,IAAMK,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAAsC,EAAK;IAChE,IAAMC,KAAK,GAAG,IAAIC,MAAM,CACtB,qDAAqD,CACtD;IAED,OAAO,CAACF,KAAK,CAACG,GAAG,CAACC,KAAK,CAACH,KAAK,CAAC,IAAID,KAAK,CAACK,cAAc,EAAE;EAC1D,CAAC;EAED,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIb,MAAM,CAACc,MAAM,GAAG,CAAC,EAAE;MACrB,IAAIxB,WAAW,GAAGD,cAAc,EAAE;QAChCQ,WAAW,CAACR,cAAc,CAAC;MAC7B,CAAC,MAAM;QACLQ,WAAW,CAAC,CAAC,CAAC;MAChB;IACF;EACF,CAAC,EAAE,CAACG,MAAM,EAAEX,cAAc,EAAEC,WAAW,EAAEO,WAAW,CAAC,CAAC;EAEtD,oBACE,6BAAC,0CAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,6BAAC,gCAAgB,qBACf,6BAAC,sBAAe,OAAG,CACF,EAElBH,IAAI,KAAK,IAAI,gBAAG,6BAAC,+BAAe,eAAuB,GAAG,IAAI,eAE/D,6BAAC,2BAAW;IACV,GAAG,EAAEH,QAAS;IACd,SAAS;IACT,WAAW,EAAEG,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,mBAAoB;IACxD,IAAI,EAAEA,IAAI,KAAK,IAAI,GAAG,QAAQ,GAAG,MAAO;IACxC,qBAAkB,MAAM;IACxB,cAAc,EAAC,MAAM;IACrB,YAAY,EAAC,KAAK;IAClB,WAAW,EAAC,KAAK;IACjB,IAAI,EAAC,UAAU;IACf,UAAU,EAAE,KAAM;IAClB,KAAK,EAAEM,MAAO;IACd,SAAS,EAAE,mBAACe,CAAC,EAAK;MAChB,IACEA,CAAC,CAACL,GAAG,KAAK,WAAW,IACrBhB,IAAI,KAAK,SAAS,IAClBM,MAAM,CAACc,MAAM,KAAK,CAAC,EACnB;QACAnB,OAAO,CAAC,SAAS,CAAC;MACpB;MAEA,IAAID,IAAI,KAAK,IAAI,IAAI,CAACb,QAAQ,EAAE;QAC9ByB,aAAa,CAACS,CAAC,CAAC;MAClB;MAEA,IAAIA,CAAC,CAACL,GAAG,KAAK,OAAO,EAAE;QACrB,IAAMM,YAAY,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,UAAU,CAAC,CACxDpB,QAAQ,CACM;QAEhB,IAAIR,WAAW,GAAG,CAAC,EAAE;UACnB0B,YAAY,CAACG,KAAK,EAAE;QACtB;MACF;IACF,CAAE;IACF,QAAQ,EAAE,kBAACJ,CAAC,EAAK;MACf,IAAMK,SAAS,GAAGL,CAAC,CAACM,MAAM,CAACC,KAAK;MAEhC,IAAIF,SAAS,CAACG,UAAU,CAAC,GAAG,CAAC,EAAE;QAC7B5B,OAAO,CAAC,IAAI,CAAC;QACbU,UAAU,EAAE;MACd;MAEAlB,YAAY,CAAC4B,CAAC,CAAC;IACjB,CAAE;IACF,OAAO,EAAE,iBAACA,CAAC,EAAK;MACd,IAAMS,UAAU,GAAGT,CAAC,CAACU,aAAa,CAACC,OAAO,CAAC,MAAM,CAAC;MAElD,IAAIF,UAAU,CAACD,UAAU,CAAC,GAAG,CAAC,EAAE;QAC9B5B,OAAO,CAAC,IAAI,CAAC;QACb,CAACd,QAAQ,IAAIoB,cAAc,CAACuB,UAAU,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC;MAClD;IACF;EAAE,EACF,eAEF,6BAAC,mCAAmB,QACjBvC,OAAO,gBACN,6BAAC,mCAAmB;IAClB,aAAW,IAAK;IAChB,cAAW,YAAY;IACvB,iBAAe,GAAI;IACnB,iBAAe,CAAE;IACjB,IAAI,EAAC;EAAa,EAClB,GACA,IAAI,EAEPM,IAAI,KAAK,IAAI,IAAIM,MAAM,CAACc,MAAM,KAAK,CAAC,gBACnC,6BAAC,gBAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,6BAAC,sBAAU;IACT,UAAU,EAAE,oBAACC,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACL,GAAG,KAAK,OAAO,EAAE;QACrBf,OAAO,CAAC,IAAI,CAAC;QACbU,UAAU,EAAE;QACZH,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbP,OAAO,CAAC,IAAI,CAAC;MACbU,UAAU,EAAE;MACZH,UAAU,EAAE;IACd,CAAE;IACF,OAAO,EAAC;EAAW,gBAEnB,6BAAC,kBAAW,OAAG,CACJ,CACL,GACR,IAAI,EAEPF,MAAM,CAACc,MAAM,GAAG,CAAC,IAAIpB,IAAI,KAAK,IAAI,gBACjC,6BAAC,gBAAO;IACN,KAAK,EAAEA,IAAI,KAAK,IAAI,GAAG,eAAe,GAAG,OAAQ;IACjD,SAAS,EAAC;EAAK,gBAEf,6BAAC,sBAAU;IACT,OAAO,EAAC,WAAW;IACnB,UAAU,EAAE,oBAACqB,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACL,GAAG,KAAK,OAAO,EAAE;QACrBf,OAAO,CAAC,SAAS,CAAC;QAClBU,UAAU,EAAE;QACZH,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbP,OAAO,CAAC,SAAS,CAAC;MAClBU,UAAU,EAAE;MACZH,UAAU,EAAE;IACd;EAAE,gBAEF,6BAAC,gBAAS,OAAG,CACF,CACL,GACR,IAAI,CACY,CACK;AAEjC,CAAC;AAAC;AAEFhB,oBAAoB,CAAC0C,WAAW,GAAG,oBAAoB"}

package/dist/cjs/components/{CommandPallete/CommandPalleteItem.js → CommandPalette/CommandPaletteItem.js}

@@ -4,12 +4,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommandPalleteItem = void 0;
+exports.CommandPaletteItem = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _findHighlightSearch = require("../../utils/findHighlightSearch");
+var _findHighlightedSearch = require("../../utils/findHighlightedSearch");
 var _Typography = require("../Typography/Typography");
-var _CommandPallete = require("./CommandPallete.styles");
+var _CommandPalette = require("./CommandPalette.styles");
 var _context = require("./context");
 var _SearchContext = require("./context/SearchContext");
 var _excluded = ["title", "renderIcon", "className", "index"];
@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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 CommandPalleteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     renderIcon = _ref.renderIcon,
     className = _ref.className,
@@ -34,23 +34,23 @@ var CommandPalleteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
   var onMouseEnter = function onMouseEnter() {
     setSelected(index);
   };
-  return /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledCommandPalleteItem, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItem, _extends({}, rest, {
     ref: ref,
     className: (0, _classnames.default)("cp-item", className),
     tabIndex: 1,
     "aria-selected": selected === index,
     onMouseEnter: onMouseEnter,
     $selected: index === selected
-  }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledIcon, null, icon), search && title ? /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledIcon, null, icon), search && title ? /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     overflow: "truncate",
     whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary",
     dangerouslySetInnerHTML: {
-      __html: (0, _findHighlightSearch.findHiglightSearch)(search, title)
+      __html: (0, _findHighlightedSearch.findHighlightedSearch)(search, title)
     }
   }) : null);
 });
-exports.CommandPalleteItem = CommandPalleteItem;
-CommandPalleteItem.displayName = "CommandPalleteItem";
-//# sourceMappingURL=CommandPalleteItem.js.map
+exports.CommandPaletteItem = CommandPaletteItem;
+CommandPaletteItem.displayName = "CommandPaletteItem";
+//# sourceMappingURL=CommandPaletteItem.js.map

package/dist/cjs/components/CommandPalette/CommandPaletteItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteItem.js","names":["CommandPaletteItem","forwardRef","ref","title","renderIcon","className","index","rest","icon","useSelectedContext","selected","setSelected","useSearchContext","search","onMouseEnter","classNames","__html","findHighlightedSearch","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { findHighlightedSearch } from \"../../utils/findHighlightedSearch\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledCommandPaletteItem, StyledIcon } from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\n\nexport interface CommandPaletteItemProps\n  extends ComponentPropsWithoutRef<\"li\"> {\n  title?: string;\n  renderIcon?: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n}\n\nexport const CommandPaletteItem = forwardRef(\n  (\n    { title, renderIcon, className, index, ...rest }: CommandPaletteItemProps,\n    ref: Ref<HTMLLIElement>\n  ) => {\n    const icon = renderIcon && renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n    const { search } = useSearchContext();\n\n    const onMouseEnter = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <StyledCommandPaletteItem\n        {...rest}\n        ref={ref}\n        className={classNames(\"cp-item\", className)}\n        tabIndex={1}\n        aria-selected={selected === index}\n        onMouseEnter={onMouseEnter}\n        $selected={index === selected}\n      >\n        <StyledIcon>{icon}</StyledIcon>\n        {search && title ? (\n          <Typography\n            overflow=\"truncate\"\n            whitespace=\"no-wrap\"\n            variant=\"Body 1\"\n            color=\"primary\"\n            dangerouslySetInnerHTML={{\n              __html: findHighlightedSearch(search, title),\n            }}\n          />\n        ) : null}\n      </StyledCommandPaletteItem>\n    );\n  }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AACA;AAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpD,IAAMA,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBAEEC,GAAuB,EACpB;EAAA,IAFDC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,IAAI;EAG9C,IAAMC,IAAI,GAAGJ,UAAU,IAAIA,UAAU,EAAE;EACvC,0BAAkC,IAAAK,2BAAkB,GAAE;IAA9CC,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAC7B,wBAAmB,IAAAC,+BAAgB,GAAE;IAA7BC,MAAM,qBAANA,MAAM;EAEd,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBH,WAAW,CAACL,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6BAAC,wCAAwB,eACnBC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAE,IAAAa,mBAAU,EAAC,SAAS,EAAEV,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeK,QAAQ,KAAKJ,KAAM;IAClC,YAAY,EAAEQ,YAAa;IAC3B,SAAS,EAAER,KAAK,KAAKI;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,EAC9BK,MAAM,IAAIV,KAAK,gBACd,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC,SAAS;IACf,uBAAuB,EAAE;MACvBa,MAAM,EAAE,IAAAC,4CAAqB,EAACJ,MAAM,EAAEV,KAAK;IAC7C;EAAE,EACF,GACA,IAAI,CACiB;AAE/B,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACkB,WAAW,GAAG,oBAAoB"}

package/dist/cjs/components/{CommandPallete/CommandPalleteList.js → CommandPalette/CommandPaletteList.js}

@@ -3,23 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommandPalleteList = void 0;
+exports.CommandPaletteList = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _CommandPallete = require("./CommandPallete.styles");
+var _CommandPalette = require("./CommandPalette.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var CommandPalleteList = function CommandPalleteList(_ref) {
+var CommandPaletteList = function CommandPaletteList(_ref) {
   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, {
+  return visible ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteList, {
     className: "cp-list",
     tabIndex: -1,
     role: "listbox"
-  }, heading ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledHeading, {
+  }, heading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledHeading, {
     tabIndex: -1
   }, heading) : null, children) : null;
 };
-exports.CommandPalleteList = CommandPalleteList;
-CommandPalleteList.displayName = "CommandPalleteList";
-//# sourceMappingURL=CommandPalleteList.js.map
+exports.CommandPaletteList = CommandPaletteList;
+CommandPaletteList.displayName = "CommandPaletteList";
+//# sourceMappingURL=CommandPaletteList.js.map

package/dist/cjs/components/CommandPalette/CommandPaletteList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteList.js","names":["CommandPaletteList","children","heading","visible","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteList.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport {\n  StyledCommandPaletteList,\n  StyledHeading,\n} from \"./CommandPalette.styles\";\n\nexport interface CommandPaletteListProps {\n  heading?: string;\n  visible?: boolean;\n}\n\nexport const CommandPaletteList = ({\n  children,\n  heading,\n  visible = false,\n}: PropsWithChildren<CommandPaletteListProps>) => {\n  return visible ? (\n    <StyledCommandPaletteList className=\"cp-list\" tabIndex={-1} role=\"listbox\">\n      {heading ? <StyledHeading tabIndex={-1}>{heading}</StyledHeading> : null}\n\n      {children}\n    </StyledCommandPaletteList>\n  ) : null;\n};\n\nCommandPaletteList.displayName = \"CommandPaletteList\";\n"],"mappings":";;;;;;AAAA;AACA;AAGiC;AAO1B,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,CAAE;IAAC,IAAI,EAAC;EAAS,GACvED,OAAO,gBAAG,6BAAC,6BAAa;IAAC,QAAQ,EAAE,CAAC;EAAE,GAAEA,OAAO,CAAiB,GAAG,IAAI,EAEvED,QAAQ,CACgB,GACzB,IAAI;AACV,CAAC;AAAC;AAEFD,kBAAkB,CAACI,WAAW,GAAG,oBAAoB"}