@activecollab/components 2.0.90 → 2.0.92

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

@@ -1,57 +1,50 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSpinnerLoader = exports.StyledSearchIcon = exports.StyledParameter = exports.StyledInput = exports.StyledIcon = exports.StyledHeading = exports.StyledCommandPaletteWrapper = exports.StyledCommandPaletteList = exports.StyledCommandPaletteItemLoader = exports.StyledCommandPaletteItem = exports.StyledCommandPaletteHeader = exports.StyledCommandPaletteCommandItem = exports.StyledCommandPalette = exports.StyledActionWrapper = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _BreakPoints = require("../BreakPoints");
-var _FontStyle = require("../FontStyle");
-var _Loaders = require("../Loaders");
-const StyledCommandPalette = exports.StyledCommandPalette = _styledComponents.default.div.withConfig({
+import styled from "styled-components";
+import { screen } from "../BreakPoints";
+import { FontStyle } from "../FontStyle";
+import { SpinnerLoader } from "../Loaders";
+export const StyledCommandPalette = styled.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);
-const StyledCommandPaletteWrapper = exports.StyledCommandPaletteWrapper = _styledComponents.default.div.withConfig({
+})(["", " 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);
+export const StyledCommandPaletteWrapper = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
   componentId: "sc-na3mad-1"
 })(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){border-top:1px solid var(--color-theme-400);padding-bottom:8px;padding-top:8px;}"]);
-const StyledCommandPaletteHeader = exports.StyledCommandPaletteHeader = _styledComponents.default.div.withConfig({
+export const StyledCommandPaletteHeader = styled.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;"]);
-const StyledSearchIcon = exports.StyledSearchIcon = _styledComponents.default.div.withConfig({
+export const StyledSearchIcon = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledSearchIcon",
   componentId: "sc-na3mad-3"
 })(["margin-right:8px;svg{vertical-align:middle;}"]);
-const StyledInput = exports.StyledInput = _styledComponents.default.input.withConfig({
+export const StyledInput = styled.input.withConfig({
   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=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], _BreakPoints.screen.sm);
-const StyledParameter = exports.StyledParameter = _styledComponents.default.span.withConfig({
+})(["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=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
+export const StyledParameter = styled.span.withConfig({
   displayName: "CommandPalettestyles__StyledParameter",
   componentId: "sc-na3mad-5"
-})(["color:var(--color-theme-transparent-500);margin-right:8px;flex-shrink:0;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], _BreakPoints.screen.sm);
-const StyledActionWrapper = exports.StyledActionWrapper = _styledComponents.default.div.withConfig({
+})(["color:var(--color-theme-transparent-500);margin-right:8px;flex-shrink:0;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
+export const StyledActionWrapper = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledActionWrapper",
   componentId: "sc-na3mad-6"
 })(["align-items:center;display:flex;gap:8px;"]);
-const StyledIcon = exports.StyledIcon = _styledComponents.default.div.withConfig({
+export const StyledIcon = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledIcon",
   componentId: "sc-na3mad-7"
 })(["margin-right:8px;svg{vertical-align:middle;}"]);
-const StyledCommandPaletteList = exports.StyledCommandPaletteList = _styledComponents.default.ul.withConfig({
+export const StyledCommandPaletteList = styled.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);}"]);
-const StyledHeading = exports.StyledHeading = _styledComponents.default.p.withConfig({
+export const StyledHeading = styled.p.withConfig({
   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
-const StyledCommandPaletteItem = exports.StyledCommandPaletteItem = _styledComponents.default.a.withConfig({
+export const StyledCommandPaletteItem = styled.a.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;}"], _ref => {
@@ -65,15 +58,15 @@ const StyledCommandPaletteItem = exports.StyledCommandPaletteItem = _styledCompo
   } = _ref2;
   return $selected ? "block" : "none";
 });
-const StyledCommandPaletteCommandItem = exports.StyledCommandPaletteCommandItem = (0, _styledComponents.default)(StyledCommandPaletteItem).withConfig({
+export const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem).withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteCommandItem",
   componentId: "sc-na3mad-11"
 })(["user-select:none;"]);
-const StyledSpinnerLoader = exports.StyledSpinnerLoader = (0, _styledComponents.default)(_Loaders.SpinnerLoader).withConfig({
+export const StyledSpinnerLoader = styled(SpinnerLoader).withConfig({
   displayName: "CommandPalettestyles__StyledSpinnerLoader",
   componentId: "sc-na3mad-12"
 })(["margin-right:4px;"]);
-const StyledCommandPaletteItemLoader = exports.StyledCommandPaletteItemLoader = _styledComponents.default.div.withConfig({
+export const StyledCommandPaletteItemLoader = styled.div.withConfig({
   displayName: "CommandPalettestyles__StyledCommandPaletteItemLoader",
   componentId: "sc-na3mad-13"
 })(["align-items:center;display:flex;gap:8px;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;pointer-events:none;user-select:none;"]);

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.styles.js","names":["_styledComponents","_interopRequireDefault","require","_BreakPoints","_FontStyle","_Loaders","StyledCommandPalette","exports","styled","div","withConfig","displayName","componentId","FontStyle","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","_ref","$selected","_ref2","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader","StyledCommandPaletteItemLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\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    border-top: 1px solid var(--color-theme-400);\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`;\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=\"search\"]::-webkit-search-decoration,\n  &[type=\"search\"]::-webkit-search-cancel-button,\n  &[type=\"search\"]::-webkit-search-results-button,\n  &[type=\"search\"]::-webkit-search-results-decoration {\n    -webkit-appearance: none;\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  flex-shrink: 0;\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.a<{$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\nexport const StyledCommandPaletteItemLoader = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  pointer-events: none;\n  user-select: none;\n`;\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAEO,MAAMI,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4LAC1CC,oBAAS,CAUZ;AAEM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yJAUpD;AAEM,MAAMG,0BAA0B,GAAAR,OAAA,CAAAQ,0BAAA,GAAGP,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kHAOnD;AAEM,MAAMI,gBAAgB,GAAAT,OAAA,CAAAS,gBAAA,GAAGR,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oDAMzC;AAEM,MAAMK,WAAW,GAAAV,OAAA,CAAAU,WAAA,GAAGT,yBAAM,CAACU,KAAK,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wnBAMnCO,mBAAM,CAACC,EAAE,CA+BZ;AAEM,MAAMC,eAAe,GAAAd,OAAA,CAAAc,eAAA,GAAGb,yBAAM,CAACc,IAAI,CAAAZ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4JAKtCO,mBAAM,CAACC,EAAE,CAMZ;AAEM,MAAMG,mBAAmB,GAAAhB,OAAA,CAAAgB,mBAAA,GAAGf,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAI5C;AAEM,MAAMY,UAAU,GAAAjB,OAAA,CAAAiB,UAAA,GAAGhB,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oDAMnC;AAEM,MAAMa,wBAAwB,GAAAlB,OAAA,CAAAkB,wBAAA,GAAGjB,yBAAM,CAACkB,EAAE,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iIAShD;AAEM,MAAMe,aAAa,GAAApB,OAAA,CAAAoB,aAAA,GAAGnB,yBAAM,CAACoB,CAAC,CAAAlB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8IAQpC;;AAED;AACO,MAAMiB,wBAAwB,GAAAtB,OAAA,CAAAsB,wBAAA,GAAGrB,yBAAM,CAACsB,CAAC,CAAApB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2WAS1BmB,IAAA;EAAA,IAAC;IAACC;EAAS,CAAC,GAAAD,IAAA;EAAA,OAAKC,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5EC,KAAA;EAAA,IAAC;IAACD;EAAS,CAAC,GAAAC,KAAA;EAAA,OAAKD,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAEM,MAAME,+BAA+B,GAAA3B,OAAA,CAAA2B,+BAAA,GAAG,IAAA1B,yBAAM,EAACqB,wBAAwB,CAAC,CAAAnB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAE9E;AAEM,MAAMuB,mBAAmB,GAAA5B,OAAA,CAAA4B,mBAAA,GAAG,IAAA3B,yBAAM,EAAC4B,sBAAa,CAAC,CAAA1B,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAEvD;AAEM,MAAMyB,8BAA8B,GAAA9B,OAAA,CAAA8B,8BAAA,GAAG7B,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+JAUvD"}
+{"version":3,"file":"CommandPalette.styles.js","names":["styled","screen","FontStyle","SpinnerLoader","StyledCommandPalette","div","withConfig","displayName","componentId","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","_ref","$selected","_ref2","StyledCommandPaletteCommandItem","StyledSpinnerLoader","StyledCommandPaletteItemLoader"],"sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\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    border-top: 1px solid var(--color-theme-400);\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`;\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=\"search\"]::-webkit-search-decoration,\n  &[type=\"search\"]::-webkit-search-cancel-button,\n  &[type=\"search\"]::-webkit-search-results-button,\n  &[type=\"search\"]::-webkit-search-results-decoration {\n    -webkit-appearance: none;\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  flex-shrink: 0;\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.a<{$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\nexport const StyledCommandPaletteItemLoader = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  pointer-events: none;\n  user-select: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,MAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4LAC1CN,SAAS,CAUZ;AAED,OAAO,MAAMO,2BAA2B,GAAGT,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yJAUpD;AAED,OAAO,MAAME,0BAA0B,GAAGV,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kHAOnD;AAED,OAAO,MAAMG,gBAAgB,GAAGX,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oDAMzC;AAED,OAAO,MAAMI,WAAW,GAAGZ,MAAM,CAACa,KAAK,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wnBAMnCP,MAAM,CAACa,EAAE,CA+BZ;AAED,OAAO,MAAMC,eAAe,GAAGf,MAAM,CAACgB,IAAI,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4JAKtCP,MAAM,CAACa,EAAE,CAMZ;AAED,OAAO,MAAMG,mBAAmB,GAAGjB,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAI5C;AAED,OAAO,MAAMU,UAAU,GAAGlB,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oDAMnC;AAED,OAAO,MAAMW,wBAAwB,GAAGnB,MAAM,CAACoB,EAAE,CAAAd,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,iIAShD;AAED,OAAO,MAAMa,aAAa,GAAGrB,MAAM,CAACsB,CAAC,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,MAAMe,wBAAwB,GAAGvB,MAAM,CAACwB,CAAC,CAAAlB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2WAS1BiB,IAAA;EAAA,IAAC;IAACC;EAAS,CAAC,GAAAD,IAAA;EAAA,OAAKC,SAAS,GAAG,wBAAwB,GAAG,aAAa;AAAA,GAO5EC,KAAA;EAAA,IAAC;IAACD;EAAS,CAAC,GAAAC,KAAA;EAAA,OAAKD,SAAS,GAAG,OAAO,GAAG,MAAM;AAAA,EAY3D;AAED,OAAO,MAAME,+BAA+B,GAAG5B,MAAM,CAACuB,wBAAwB,CAAC,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAE9E;AAED,OAAO,MAAMqB,mBAAmB,GAAG7B,MAAM,CAACG,aAAa,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yBAEvD;AAED,OAAO,MAAMsB,8BAA8B,GAAG9B,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+JAUvD"}

package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js

@@ -1,21 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CommandPaletteCommandItem = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _CommandPalette = require("./CommandPalette.styles");
-var _context = require("./context");
-var _Icons = require("../Icons");
-var _Typography = require("../Typography/Typography");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CommandPaletteCommandItem = exports.CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled from "styled-components";
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import { StyledCommandPaletteCommandItem, StyledIcon } from "./CommandPalette.styles";
+import { useSelectedContext } from "./context";
+import { ArrowRightIcon } from "../Icons";
+import { Typography } from "../Typography/Typography";
+export const CommandPaletteCommandItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     title,
     renderIcon,
@@ -29,27 +20,27 @@ const CommandPaletteCommandItem = exports.CommandPaletteCommandItem = /*#__PURE_
   const {
     selected,
     setSelected
-  } = (0, _context.useSelectedContext)();
+  } = useSelectedContext();
   const onMouseEnter = () => {
     setSelected(index);
   };
-  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteCommandItem, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
     as: Component,
     ref: ref,
-    className: (0, _classnames.default)("cp-item cp-command", className),
+    className: classNames("cp-item cp-command", className),
     tabIndex: 1,
     "aria-selected": selected === index,
     onMouseEnter: onMouseEnter,
     $selected: index === selected
-  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledIcon, null, icon), /*#__PURE__*/_react.default.createElement(_StyledTypography, {
+  }), /*#__PURE__*/React.createElement(StyledIcon, null, icon), /*#__PURE__*/React.createElement(_StyledTypography, {
     overflow: "truncate",
     whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary"
-  }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null)));
+  }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null)));
 });
 CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
-var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
+var _StyledTypography = _styled(Typography).withConfig({
   displayName: "CommandPaletteCommandItem___StyledTypography",
   componentId: "sc-1t486ve-0"
 })(["flex:1;"]);

package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteCommandItem.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_CommandPalette","_context","_Icons","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CommandPaletteCommandItem","exports","forwardRef","_ref","ref","title","renderIcon","className","index","as","rest","Component","icon","selected","setSelected","useSelectedContext","onMouseEnter","createElement","StyledCommandPaletteCommandItem","_extends2","classNames","tabIndex","$selected","StyledIcon","_StyledTypography","overflow","whitespace","variant","color","ArrowRightIcon","displayName","_styledComponents","Typography","withConfig","componentId"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  StyledCommandPaletteCommandItem,\n  StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteItemProps } from \"./CommandPaletteItem\";\nimport { useSelectedContext } from \"./context\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface CommandPaletteCommandItemProps\n  extends CommandPaletteItemProps {\n  title: string;\n  renderIcon: () => ReactNode;\n}\n\nexport type PolymorphicCommandPaletteCommandItemProps<C extends ElementType> =\n  PolymorphicComponentPropsWithRef<C, CommandPaletteCommandItemProps>;\n\nexport type CommandPaletteComponent = <\n  C extends ElementType = typeof CommandPaletteCommandItem\n>(\n  props: PolymorphicCommandPaletteCommandItemProps<C>\n) => ReactElement | ReactNode | null;\n\nexport const CommandPaletteCommandItem: CommandPaletteComponent & {\n  displayName?: string;\n} = forwardRef(\n  <C extends ElementType = typeof CommandPaletteCommandItem>(\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      as,\n      ...rest\n    }: PolymorphicCommandPaletteCommandItemProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseEnter = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <li>\n        <StyledCommandPaletteCommandItem\n          {...rest}\n          as={Component}\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      </li>\n    );\n  }\n);\n\nCommandPaletteCommandItem.displayName = \"CommandPaletteCommandItem\";\n"],"mappings":"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"}
+{"version":3,"file":"CommandPaletteCommandItem.js","names":["React","forwardRef","classNames","StyledCommandPaletteCommandItem","StyledIcon","useSelectedContext","ArrowRightIcon","Typography","CommandPaletteCommandItem","_ref","ref","title","renderIcon","className","index","as","rest","Component","icon","selected","setSelected","onMouseEnter","createElement","_extends","tabIndex","$selected","_StyledTypography","overflow","whitespace","variant","color","displayName","_styled","withConfig","componentId"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, ReactElement, ReactNode } from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  StyledCommandPaletteCommandItem,\n  StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteItemProps } from \"./CommandPaletteItem\";\nimport { useSelectedContext } from \"./context\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface CommandPaletteCommandItemProps\n  extends CommandPaletteItemProps {\n  title: string;\n  renderIcon: () => ReactNode;\n}\n\nexport type PolymorphicCommandPaletteCommandItemProps<C extends ElementType> =\n  PolymorphicComponentPropsWithRef<C, CommandPaletteCommandItemProps>;\n\nexport type CommandPaletteComponent = <\n  C extends ElementType = typeof CommandPaletteCommandItem\n>(\n  props: PolymorphicCommandPaletteCommandItemProps<C>\n) => ReactElement | ReactNode | null;\n\nexport const CommandPaletteCommandItem: CommandPaletteComponent & {\n  displayName?: string;\n} = forwardRef(\n  <C extends ElementType = typeof CommandPaletteCommandItem>(\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      as,\n      ...rest\n    }: PolymorphicCommandPaletteCommandItemProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n    const icon = renderIcon();\n    const { selected, setSelected } = useSelectedContext();\n\n    const onMouseEnter = () => {\n      setSelected(index as number);\n    };\n\n    return (\n      <li>\n        <StyledCommandPaletteCommandItem\n          {...rest}\n          as={Component}\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      </li>\n    );\n  }\n);\n\nCommandPaletteCommandItem.displayName = \"CommandPaletteCommandItem\";\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAiBC,UAAU,QAAiC,OAAO;AAE/E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,+BAA+B,EAC/BC,UAAU,QACL,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,WAAW;AAK9C,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AAiBrD,OAAO,MAAMC,yBAEZ,gBAAGP,UAAU,CACZ,CAAAQ,IAAA,EASEC,GAAuB,KACpB;EAAA,IATH;IACEC,KAAK;IACLC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,EAAE;IACF,GAAGC;EACyC,CAAC,GAAAP,IAAA;EAG/C,MAAMQ,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,MAAMG,IAAI,GAAGN,UAAU,CAAC,CAAC;EACzB,MAAM;IAAEO,QAAQ;IAAEC;EAAY,CAAC,GAAGf,kBAAkB,CAAC,CAAC;EAEtD,MAAMgB,YAAY,GAAGA,CAAA,KAAM;IACzBD,WAAW,CAACN,KAAe,CAAC;EAC9B,CAAC;EAED,oBACEd,KAAA,CAAAsB,aAAA,0BACEtB,KAAA,CAAAsB,aAAA,CAACnB,+BAA+B,EAAAoB,QAAA,KAC1BP,IAAI;IACRD,EAAE,EAAEE,SAAU;IACdP,GAAG,EAAEA,GAAI;IACTG,SAAS,EAAEX,UAAU,CAAC,oBAAoB,EAAEW,SAAS,CAAE;IACvDW,QAAQ,EAAE,CAAE;IACZ,iBAAeL,QAAQ,KAAKL,KAAM;IAClCO,YAAY,EAAEA,YAAa;IAC3BI,SAAS,EAAEX,KAAK,KAAKK;EAAS,iBAE9BnB,KAAA,CAAAsB,aAAA,CAAClB,UAAU,QAAEc,IAAiB,CAAC,eAC/BlB,KAAA,CAAAsB,aAAA,CAAAI,iBAAA;IACEC,QAAQ,EAAC,UAAU;IACnBC,UAAU,EAAC,SAAS;IACpBC,OAAO,EAAC,QAAQ;IAChBC,KAAK,EAAC;EAAS,GAKdnB,KACS,CAAC,eACbX,KAAA,CAAAsB,aAAA,CAAChB,cAAc,MAAE,CACc,CAC/B,CAAC;AAET,CACF,CAAC;AAEDE,yBAAyB,CAACuB,WAAW,GAAG,2BAA2B;AAAC,IAAAL,iBAAA,GAAAM,OAAA,CAAAzB,UAAA,EAAA0B,UAAA;EAAAF,WAAA;EAAAG,WAAA;AAAA"}

package/dist/esm/components/CommandPalette/CommandPaletteHeader.js

@@ -1,39 +1,31 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CommandPaletteHeader = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CommandPalette = require("./CommandPalette.styles");
-var _context = require("./context");
-var _ModeContext = require("./context/ModeContext");
-var _SearchContext = require("./context/SearchContext");
-var _IconButton = require("../IconButton");
-var _Icons = require("../Icons");
-var _Tooltip = require("../Tooltip");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CommandPaletteHeader = _ref => {
+import React, { useEffect, useMemo, useRef } from "react";
+import { StyledActionWrapper, StyledCommandPaletteHeader, StyledInput, StyledParameter, StyledSearchIcon, StyledSpinnerLoader } from "./CommandPalette.styles";
+import { useSelectedContext } from "./context";
+import { useModeContext } from "./context/ModeContext";
+import { useSearchContext } from "./context/SearchContext";
+import { IconButton } from "../IconButton";
+import { CloseIcon, HashtagIcon, SearchLargeIcon } from "../Icons";
+import { Tooltip } from "../Tooltip";
+export const CommandPaletteHeader = _ref => {
   let {
     loading = false,
     commandsLength,
     itemsLength
   } = _ref;
-  const inputRef = (0, _react.useRef)(null);
+  const inputRef = useRef(null);
   const {
     mode,
     setMode,
     idModeEnabled
-  } = (0, _ModeContext.useModeContext)();
+  } = useModeContext();
   const {
     setSelected,
     selected
-  } = (0, _context.useSelectedContext)();
+  } = useSelectedContext();
   const {
     search,
     onChangeSearch
-  } = (0, _SearchContext.useSearchContext)();
+  } = useSearchContext();
   const focusInput = () => {
     if (inputRef && inputRef.current) {
       inputRef.current.focus();
@@ -45,7 +37,7 @@ const CommandPaletteHeader = _ref => {
       onChangeSearch("");
     }
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (search.length > 0) {
       if (itemsLength > commandsLength) {
         setSelected(commandsLength);
@@ -54,10 +46,10 @@ const CommandPaletteHeader = _ref => {
       }
     }
   }, [search, commandsLength, itemsLength, setSelected]);
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     focusInput();
   }, [mode]);
-  const handleInputPlaceholder = (0, _react.useMemo)(() => {
+  const handleInputPlaceholder = useMemo(() => {
     if (typeof mode === "object") {
       return "Search";
     }
@@ -78,9 +70,9 @@ const CommandPaletteHeader = _ref => {
       }
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
+  return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
     className: "cp-header"
-  }, /*#__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, typeof mode === "object" ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledInput, {
+  }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, typeof mode === "object" ? /*#__PURE__*/React.createElement(StyledParameter, null, mode.name.length > 10 ? mode.name.slice(0, 10) + "..." : mode.name, "/") : null, /*#__PURE__*/React.createElement(StyledInput, {
     ref: inputRef,
     autoFocus: true,
     placeholder: handleInputPlaceholder,
@@ -102,16 +94,16 @@ const CommandPaletteHeader = _ref => {
       }
       onChangeSearch(inputText);
     }
-  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSpinnerLoader, {
+  }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(StyledSpinnerLoader, {
     "aria-busy": true,
     "aria-label": "Loading...",
     "aria-valuemax": 100,
     "aria-valuemin": 0,
     role: "progressbar"
-  }) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+  }) : null, mode !== "id" && typeof mode !== "object" && idModeEnabled && search.length === 0 ? /*#__PURE__*/React.createElement(Tooltip, {
     title: "Search by ID",
     placement: "top"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     onKeyPress: e => {
       if (e.key === "Enter") {
         setMode("id");
@@ -123,10 +115,10 @@ const CommandPaletteHeader = _ref => {
       clearInput();
     },
     variant: "text gray"
-  }, /*#__PURE__*/_react.default.createElement(_Icons.HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+  }, /*#__PURE__*/React.createElement(HashtagIcon, null))) : null, search.length > 0 || mode === "id" || typeof mode === "object" ? /*#__PURE__*/React.createElement(Tooltip, {
     title: "Clear",
     placement: "top"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+  }, /*#__PURE__*/React.createElement(IconButton, {
     variant: "text gray",
     onKeyPress: e => {
       if (e.key === "Enter") {
@@ -140,8 +132,7 @@ const CommandPaletteHeader = _ref => {
       clearInput();
       focusInput();
     }
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null))) : null));
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null));
 };
-exports.CommandPaletteHeader = CommandPaletteHeader;
 CommandPaletteHeader.displayName = "CommandPaletteItem";
 //# sourceMappingURL=CommandPaletteHeader.js.map

package/dist/esm/components/CommandPalette/CommandPaletteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteHeader.js","names":["_react","_interopRequireWildcard","require","_CommandPalette","_context","_ModeContext","_SearchContext","_IconButton","_Icons","_Tooltip","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","CommandPaletteHeader","_ref","loading","commandsLength","itemsLength","inputRef","useRef","mode","setMode","idModeEnabled","useModeContext","setSelected","selected","useSelectedContext","search","onChangeSearch","useSearchContext","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","key","target","selectedItem","document","querySelectorAll","click","createElement","StyledCommandPaletteHeader","className","StyledSearchIcon","SearchLargeIcon","StyledParameter","name","slice","StyledInput","ref","autoFocus","placeholder","type","autoCapitalize","autoComplete","autoCorrect","role","spellCheck","onKeyDown","onChange","inputText","startsWith","StyledActionWrapper","StyledSpinnerLoader","Tooltip","title","placement","IconButton","onKeyPress","onClick","variant","HashtagIcon","CloseIcon","exports","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport {\n  StyledActionWrapper,\n  StyledCommandPaletteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\n\nexport interface CommandPaletteHeaderProps {\n  loading?: boolean;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n  loading = false,\n  commandsLength,\n  itemsLength,\n}: CommandPaletteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode, idModeEnabled } = 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      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\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  useEffect(() => {\n    focusInput();\n  }, [mode]);\n\n  const handleInputPlaceholder = useMemo(() => {\n    if (typeof mode === \"object\") {\n      return \"Search\";\n    }\n\n    if (mode === \"id\") {\n      return \"1\";\n    }\n\n    return \"Search or jump to\";\n  }, [mode]);\n\n  const handleKeyDown = (e) => {\n    if (\n      e.key === \"Backspace\" &&\n      mode !== \"default\" &&\n      (e.target as HTMLInputElement).value === \"\"\n    ) {\n      setMode(\"default\");\n      clearInput();\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\n  return (\n    <StyledCommandPaletteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n      {typeof mode === \"object\" ? (\n        <StyledParameter>\n          {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n        </StyledParameter>\n      ) : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={handleInputPlaceholder}\n        type=\"search\"\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={handleKeyDown}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (\n            inputText.startsWith(\"#\") &&\n            idModeEnabled &&\n            search.length === 0\n          ) {\n            setMode(\"id\");\n            onChangeSearch(inputText.slice(1));\n            return;\n          }\n\n          onChangeSearch(inputText);\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\" &&\n        typeof mode !== \"object\" &&\n        idModeEnabled &&\n        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                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n          <Tooltip title=\"Clear\" placement=\"top\">\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":"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"}
+{"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useMemo","useRef","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","CommandPaletteHeader","_ref","loading","commandsLength","itemsLength","inputRef","mode","setMode","idModeEnabled","setSelected","selected","search","onChangeSearch","focusInput","current","focus","clearInput","value","length","handleInputPlaceholder","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","createElement","className","name","slice","ref","autoFocus","placeholder","type","autoCapitalize","autoComplete","autoCorrect","role","spellCheck","onKeyDown","onChange","inputText","startsWith","title","placement","onKeyPress","onClick","variant","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\n\nimport {\n  StyledActionWrapper,\n  StyledCommandPaletteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n  StyledSpinnerLoader,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useModeContext } from \"./context/ModeContext\";\nimport { useSearchContext } from \"./context/SearchContext\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { Tooltip } from \"../Tooltip\";\n\nexport interface CommandPaletteHeaderProps {\n  loading?: boolean;\n  commandsLength: number;\n  itemsLength: number;\n}\n\nexport const CommandPaletteHeader = ({\n  loading = false,\n  commandsLength,\n  itemsLength,\n}: CommandPaletteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode, idModeEnabled } = 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      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\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  useEffect(() => {\n    focusInput();\n  }, [mode]);\n\n  const handleInputPlaceholder = useMemo(() => {\n    if (typeof mode === \"object\") {\n      return \"Search\";\n    }\n\n    if (mode === \"id\") {\n      return \"1\";\n    }\n\n    return \"Search or jump to\";\n  }, [mode]);\n\n  const handleKeyDown = (e) => {\n    if (\n      e.key === \"Backspace\" &&\n      mode !== \"default\" &&\n      (e.target as HTMLInputElement).value === \"\"\n    ) {\n      setMode(\"default\");\n      clearInput();\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\n  return (\n    <StyledCommandPaletteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n      {typeof mode === \"object\" ? (\n        <StyledParameter>\n          {mode.name.length > 10 ? mode.name.slice(0, 10) + \"...\" : mode.name}/\n        </StyledParameter>\n      ) : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        placeholder={handleInputPlaceholder}\n        type=\"search\"\n        aria-autocomplete=\"list\"\n        autoCapitalize=\"none\"\n        autoComplete=\"off\"\n        autoCorrect=\"off\"\n        role=\"combobox\"\n        spellCheck={false}\n        value={search}\n        onKeyDown={handleKeyDown}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (\n            inputText.startsWith(\"#\") &&\n            idModeEnabled &&\n            search.length === 0\n          ) {\n            setMode(\"id\");\n            onChangeSearch(inputText.slice(1));\n            return;\n          }\n\n          onChangeSearch(inputText);\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\" &&\n        typeof mode !== \"object\" &&\n        idModeEnabled &&\n        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                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" || typeof mode === \"object\" ? (\n          <Tooltip title=\"Clear\" placement=\"top\">\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":"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"}

package/dist/esm/components/CommandPalette/CommandPaletteItem.js

@@ -1,28 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CommandPaletteItem = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _CommandPalette = require("./CommandPalette.styles");
-var _context = require("./context");
-var _SearchContext = require("./context/SearchContext");
-var _findHighlightedSearch = require("../../utils/findHighlightedSearch");
-var _Loaders = require("../Loaders");
-var _Typography = require("../Typography/Typography");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _styled2 from "styled-components";
+import _styled from "styled-components";
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import { StyledCommandPaletteItem, StyledCommandPaletteItemLoader, StyledIcon } from "./CommandPalette.styles";
+import { useSelectedContext } from "./context";
+import { useSearchContext } from "./context/SearchContext";
+import { findHighlightedSearch } from "../../utils/findHighlightedSearch";
+import { SkeletonLoader } from "../Loaders";
+import { Typography } from "../Typography/Typography";
 const generateRandomWidth = () => {
   // generate range 30-80
   const randomNum = Math.round(Math.random() * 30 + 30);
   return randomNum + "%";
 };
-const CommandPaletteItem = exports.CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+export const CommandPaletteItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     title,
     renderIcon,
@@ -37,41 +29,41 @@ const CommandPaletteItem = exports.CommandPaletteItem = /*#__PURE__*/(0, _react.
   const {
     selected,
     setSelected
-  } = (0, _context.useSelectedContext)();
+  } = useSelectedContext();
   const {
     search
-  } = (0, _SearchContext.useSearchContext)();
+  } = useSearchContext();
   const onMouseEnter = () => {
     setSelected(index);
   };
   if (loading) {
-    return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItemLoader, {
+    return /*#__PURE__*/React.createElement(StyledCommandPaletteItemLoader, {
       "aria-busy": true,
       "aria-disabled": true
-    }, /*#__PURE__*/_react.default.createElement(_StyledSkeletonLoader, null), /*#__PURE__*/_react.default.createElement(_StyledSkeletonLoader2, {
+    }, /*#__PURE__*/React.createElement(_StyledSkeletonLoader, null), /*#__PURE__*/React.createElement(_StyledSkeletonLoader2, {
       $_css: generateRandomWidth()
     }));
   }
-  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItem, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteItem, _extends({}, rest, {
     as: Component,
     ref: ref,
-    className: (0, _classnames.default)("cp-item", className),
+    className: classNames("cp-item", className),
     tabIndex: 1,
     "aria-selected": selected === index,
     onMouseEnter: onMouseEnter,
     $selected: index === selected
-  }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledIcon, null, icon), search && title ? /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+  }), /*#__PURE__*/React.createElement(StyledIcon, null, icon), search && title ? /*#__PURE__*/React.createElement(Typography, {
     overflow: "truncate",
     whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary",
     dangerouslySetInnerHTML: {
-      __html: (0, _findHighlightedSearch.findHighlightedSearch)(search, title)
+      __html: findHighlightedSearch(search, title)
     }
   }) : null));
 });
 CommandPaletteItem.displayName = "CommandPaletteItem";
-var _StyledSkeletonLoader = (0, _styledComponents.default)(_Loaders.SkeletonLoader).withConfig({
+var _StyledSkeletonLoader = _styled(SkeletonLoader).withConfig({
   displayName: "CommandPaletteItem___StyledSkeletonLoader",
   componentId: "sc-6tfj5q-0"
 })({
@@ -79,7 +71,7 @@ var _StyledSkeletonLoader = (0, _styledComponents.default)(_Loaders.SkeletonLoad
   height: 24,
   borderRadius: "100%"
 });
-var _StyledSkeletonLoader2 = (0, _styledComponents.default)(_Loaders.SkeletonLoader).withConfig({
+var _StyledSkeletonLoader2 = _styled(SkeletonLoader).withConfig({
   displayName: "CommandPaletteItem___StyledSkeletonLoader2",
   componentId: "sc-6tfj5q-1"
 })(p => ({

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteItem.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_CommandPalette","_context","_SearchContext","_findHighlightedSearch","_Loaders","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","exports","forwardRef","_ref","ref","title","renderIcon","className","index","loading","as","rest","Component","icon","selected","setSelected","useSelectedContext","search","useSearchContext","onMouseEnter","createElement","StyledCommandPaletteItemLoader","_StyledSkeletonLoader","_StyledSkeletonLoader2","$_css","StyledCommandPaletteItem","_extends2","classNames","tabIndex","$selected","StyledIcon","Typography","overflow","whitespace","variant","color","dangerouslySetInnerHTML","__html","findHighlightedSearch","displayName","_styledComponents","SkeletonLoader","withConfig","componentId","width","height","borderRadius","p"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  ElementType,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  StyledCommandPaletteItem,\n  StyledCommandPaletteItemLoader,\n  StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\nimport { findHighlightedSearch } from \"../../utils/findHighlightedSearch\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\nimport { SkeletonLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\n\nconst generateRandomWidth = () => {\n  // generate range 30-80\n  const randomNum = Math.round(Math.random() * 30 + 30);\n\n  return randomNum + \"%\";\n};\n\nexport interface CommandPaletteItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  title?: string;\n  renderIcon?: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n  loading?: boolean;\n}\n\nexport type PolymorphicCommandPaletteItemProps<C extends ElementType> =\n  PolymorphicComponentPropsWithRef<C, CommandPaletteItemProps>;\n\nexport type CommandPaletteComponent = <\n  C extends ElementType = typeof CommandPaletteItem\n>(\n  props: PolymorphicCommandPaletteItemProps<C>\n) => ReactElement | ReactNode | null;\n\nexport const CommandPaletteItem: CommandPaletteComponent & {\n  displayName?: string;\n} = forwardRef(\n  <C extends ElementType = typeof CommandPaletteItem>(\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      loading,\n      as,\n      ...rest\n    }: PolymorphicCommandPaletteItemProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\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    if (loading) {\n      return (\n        <StyledCommandPaletteItemLoader aria-busy={true} aria-disabled={true}>\n          <SkeletonLoader\n            css={{ width: 24, height: 24, borderRadius: \"100%\" }}\n          />\n          <SkeletonLoader css={{ width: generateRandomWidth(), height: 16 }} />\n        </StyledCommandPaletteItemLoader>\n      );\n    }\n\n    return (\n      <li>\n        <StyledCommandPaletteItem\n          {...rest}\n          as={Component}\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      </li>\n    );\n  }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":"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"}
+{"version":3,"file":"CommandPaletteItem.js","names":["React","forwardRef","classNames","StyledCommandPaletteItem","StyledCommandPaletteItemLoader","StyledIcon","useSelectedContext","useSearchContext","findHighlightedSearch","SkeletonLoader","Typography","generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","_ref","ref","title","renderIcon","className","index","loading","as","rest","Component","icon","selected","setSelected","search","onMouseEnter","createElement","_StyledSkeletonLoader","_StyledSkeletonLoader2","$_css","_extends","tabIndex","$selected","overflow","whitespace","variant","color","dangerouslySetInnerHTML","__html","displayName","_styled","withConfig","componentId","width","height","borderRadius","p"],"sources":["../../../../src/components/CommandPalette/CommandPaletteItem.tsx"],"sourcesContent":["import React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  ElementType,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n  StyledCommandPaletteItem,\n  StyledCommandPaletteItemLoader,\n  StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\nimport { findHighlightedSearch } from \"../../utils/findHighlightedSearch\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\nimport { SkeletonLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\n\nconst generateRandomWidth = () => {\n  // generate range 30-80\n  const randomNum = Math.round(Math.random() * 30 + 30);\n\n  return randomNum + \"%\";\n};\n\nexport interface CommandPaletteItemProps extends ComponentPropsWithoutRef<\"a\"> {\n  title?: string;\n  renderIcon?: () => ReactNode;\n  className?: string;\n  index?: number;\n  selected?: number;\n  loading?: boolean;\n}\n\nexport type PolymorphicCommandPaletteItemProps<C extends ElementType> =\n  PolymorphicComponentPropsWithRef<C, CommandPaletteItemProps>;\n\nexport type CommandPaletteComponent = <\n  C extends ElementType = typeof CommandPaletteItem\n>(\n  props: PolymorphicCommandPaletteItemProps<C>\n) => ReactElement | ReactNode | null;\n\nexport const CommandPaletteItem: CommandPaletteComponent & {\n  displayName?: string;\n} = forwardRef(\n  <C extends ElementType = typeof CommandPaletteItem>(\n    {\n      title,\n      renderIcon,\n      className,\n      index,\n      loading,\n      as,\n      ...rest\n    }: PolymorphicCommandPaletteItemProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\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    if (loading) {\n      return (\n        <StyledCommandPaletteItemLoader aria-busy={true} aria-disabled={true}>\n          <SkeletonLoader\n            css={{ width: 24, height: 24, borderRadius: \"100%\" }}\n          />\n          <SkeletonLoader css={{ width: generateRandomWidth(), height: 16 }} />\n        </StyledCommandPaletteItemLoader>\n      );\n    }\n\n    return (\n      <li>\n        <StyledCommandPaletteItem\n          {...rest}\n          as={Component}\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      </li>\n    );\n  }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":"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"}