npm - @activecollab/components - Versions diffs - 1.0.299 → 1.0.301 - Mend

@activecollab/components 1.0.299 → 1.0.301

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/dist/cjs/components/AvatarGroup/Styles.js CHANGED Viewed

@@ -10,11 +10,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var AvatarGroupsStyles = _styledComponents.default.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["", " align-items:center;align-items:center;background-color:", ";border-radius:var(--ac-br-6);cursor:pointer;display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;"], _FontStyle.FontStyle, function (props) {
-  return !props.hasTooltip && "var(--color-theme-300)";
-}, function (_ref) {
+})(["", " align-items:center;align-items:center;border-radius:var(--ac-br-6);cursor:", ";display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;&:hover{background-color:", ";transition:all 0.2s ease-in-out;}"], _FontStyle.FontStyle, function (_ref) {
   var hasTooltip = _ref.hasTooltip;
+  return hasTooltip ? "default" : "pointer";
+}, function (_ref2) {
+  var hasTooltip = _ref2.hasTooltip;
   return hasTooltip ? "5px 0" : "5px";
+}, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
 });
 exports.AvatarGroupsStyles = AvatarGroupsStyles;
 var LengthCountStyles = _styledComponents.default.div.withConfig({

package/dist/cjs/components/AvatarGroup/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","~~props~~","~~hasTooltip~~","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n hasTooltip: boolean;\n}>`\n ${FontStyle}\n align-items: center;\n align-items: center;\n ~~background-color: ${(props) => !props.hasTooltip && \"var(--color-theme-300)\"};\n~~ border-radius: var(--ac-br-6);\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: ${({ hasTooltip }) => (hasTooltip ? \"5px 0\" : \"5px\")};\n user-select: none;\n width: fit-content;\n`;\n\ninterface LengthCountStylesProps {\n size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n align-items: center;\n background-color: var(--color-theme-400);\n block-size: ${(props) => props.size + \"px\"};\n border-radius: var(--ac-br-rounded);\n display: flex;\n inline-size: ${(props) => props.size + \"px\"};\n justify-content: center;\n outline: 1px solid var(--page-paper-main);\n z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,~~0MAGxCC~~,oBAAS,~~EAGS~~,~~UAACC~~,~~KAAK~~;EAAA,~~OAAK~~,~~CAACA~~,~~KAAK~~,~~CAACC~~,~~UAAU~~,~~IAAI,wBAAwB~~;AAAA,~~GAKjE~~;EAAA,IAAGA,UAAU,~~QAAVA~~,UAAU;EAAA,OAAQA,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,~~CAG9D~~;AAAC;AAMK,~~IAAMC~~,iBAAiB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,~~UAACE~~,KAAK;EAAA,OAAKA,KAAK,~~CAACG~~,IAAI,GAAG,IAAI;AAAA,GAG3B,~~UAACH~~,KAAK;EAAA,OAAKA,KAAK,~~CAACG~~,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}
1	+ {"version":3,"file":"Styles.js","names":["AvatarGroupsStyles","styled","div","FontStyle","hasTooltip","props","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n hasTooltip: boolean;\n}>`\n ${FontStyle}\n align-items: center;\n align-items: center;\n border-radius: var(--ac-br-6);\n cursor: ${({ hasTooltip }) => (hasTooltip ? \"default\" : \"pointer\")};\n display: flex;\n justify-content: center;\n padding: ${({ hasTooltip }) => (hasTooltip ? \"5px 0\" : \"5px\")};\n user-select: none;\n width: fit-content;\n\n &:hover {\n background-color: ${(props) =>\n !props.hasTooltip && \"var(--color-theme-300)\"};\n transition: all 0.2s ease-in-out;\n }\n`;\n\ninterface LengthCountStylesProps {\n size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n align-items: center;\n background-color: var(--color-theme-400);\n block-size: ${(props) => props.size + \"px\"};\n border-radius: var(--ac-br-rounded);\n display: flex;\n inline-size: ${(props) => props.size + \"px\"};\n justify-content: center;\n outline: 1px solid var(--page-paper-main);\n z-index: 99;\n`;\n"],"mappings":";;;;;;AAAA;AACA;AAAyC;AAElC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gPAGxCC,oBAAS,EAID;EAAA,IAAGC,UAAU,QAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGvD;EAAA,IAAGA,UAAU,SAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,EAKvC,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACD,UAAU,IAAI,wBAAwB;AAAA,EAGlD;AAAC;AAMK,IAAME,iBAAiB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACG,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,EAI5C;AAAC"}

package/dist/cjs/components/CommandPalette/CommandPalette.styles.js CHANGED Viewed

@@ -61,7 +61,7 @@ var StyledHeading = _styledComponents.default.p.withConfig({
 // prettier-ignore
 exports.StyledHeading = StyledHeading;
-var StyledCommandPaletteItem = _styledComponents.default.li.withConfig({
+var StyledCommandPaletteItem = _styledComponents.default.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;}"], function (_ref) {

package/dist/cjs/components/CommandPalette/CommandPalette.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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","StyledCommandPaletteItemLoader"],"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 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=\"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.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\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;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,yJAUpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;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,4JAKtCH,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;AAEK,IAAMC,8BAA8B,GAAGxB,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+JAUvD;AAAC"}
1	+ {"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","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","SpinnerLoader","StyledCommandPaletteItemLoader"],"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 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=\"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;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,yJAUpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,kHAOnD;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,4JAKtCH,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,CAAC;EAAA;EAAA;AAAA,2WAS1B;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;AAEK,IAAMC,8BAA8B,GAAGxB,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+JAUvD;AAAC"}

package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js CHANGED Viewed

@@ -32,7 +32,7 @@ var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
   var onMouseEnter = function onMouseEnter() {
     setSelected(index);
   };
-  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteCommandItem, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteCommandItem, _extends({}, rest, {
     ref: ref,
     className: (0, _classnames.default)("cp-item cp-command", className),
     tabIndex: 1,
@@ -44,7 +44,7 @@ var CommandPaletteCommandItem = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary"
-  }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null));
+  }, title), /*#__PURE__*/_react.default.createElement(_Icons.ArrowRightIcon, null)));
 });
 exports.CommandPaletteCommandItem = CommandPaletteCommandItem;
 CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";

package/dist/cjs/components/CommandPalette/CommandPaletteCommandItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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, { forwardRef, ReactNode, Ref } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteCommandItem,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteItemProps } from \"./CommandPaletteItem\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPaletteCommandItemProps\n extends CommandPaletteItemProps {\n title: string;\n renderIcon: () => ReactNode;\n}\n\nexport const CommandPaletteCommandItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n ...rest\n }: CommandPaletteCommandItemProps,\n ref: Ref<HTMLAnchorElement>\n ) => {\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 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;AACA;AACA;AACA;AACA;AAKA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,IAAMA,yBAAyB,gBAAG,IAAAC,iBAAU,EACjD,gBAQEC,GAA2B,EACxB;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,sDACE,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,CAC/B;AAET,CAAC,CACF;AAAC;AAEFH,yBAAyB,CAACc,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}

package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js CHANGED Viewed

@@ -74,19 +74,6 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
         selectedItem.click();
       }
     }
-    // mode === 'id' TYPE NUMBER PREVENTING KEYS
-    if (mode === "id") {
-      // enableNumbers && key combos
-      var isNumber = isFinite(e.key);
-      var enabledKeyCombos = e.metaKey && "a" || e.metaKey && "c" || e.metaKey && "v" || e.metaKey && "x" || e.key === "Backspace" || e.key === "Tab";
-      // check conditions and remove keys
-      if (!enabledKeyCombos && !isNumber) {
-        e.preventDefault();
-      }
-    }
   };
   return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteHeader, {
     className: "cp-header"
@@ -94,7 +81,7 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     ref: inputRef,
     autoFocus: true,
     placeholder: handleInputPlaceholder,
-    type: mode === "id" ? "number" : "text",
+    type: "text",
     "aria-autocomplete": "list",
     autoCapitalize: "none",
     autoComplete: "off",
@@ -105,21 +92,12 @@ var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     onKeyDown: handleKeyDown,
     onChange: function onChange(e) {
       var inputText = e.target.value;
-      if (inputText.startsWith("#") && idModeEnabled) {
+      if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
         setMode("id");
-        clearInput();
+        onChangeSearch(inputText.slice(1));
         return;
       }
       onChangeSearch(inputText);
-    },
-    onPaste: function onPaste(e) {
-      e.preventDefault();
-      var pastedText = e.clipboardData.getData("text");
-      if (pastedText.startsWith("#") && idModeEnabled) {
-        pastedText = pastedText.split("#")[1];
-        setMode("id");
-        onChangeSearch(pastedText);
-      }
     }
   }), /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledSpinnerLoader, {
     "aria-busy": true,

package/dist/cjs/components/CommandPalette/CommandPaletteHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } 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\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 // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n if (mode === \"id\") {\n // enableNumbers && key combos\n const isNumber = isFinite(e.key);\n const enabledKeyCombos =\n (e.metaKey && \"a\") \|\|\n (e.metaKey && \"c\") \|\|\n (e.metaKey && \"v\") \|\|\n (e.metaKey && \"x\") \|\|\n e.key === \"Backspace\" \|\|\n e.key === \"Tab\";\n\n // check conditions and remove keys\n if (!enabledKeyCombos && !isNumber) {\n e.preventDefault();\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={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={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (inputText.startsWith(\"#\") && idModeEnabled) {\n setMode(\"id\");\n clearInput();\n return;\n }\n\n onChangeSearch(inputText);\n }}\n onPaste={(e) => {\n e.preventDefault();\n let pastedText = e.clipboardData.getData(\"text\");\n\n if (pastedText.startsWith(\"#\") && idModeEnabled) {\n pastedText = pastedText.split(\"#\")[1];\n setMode(\"id\");\n onChangeSearch(pastedText);\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\" &&\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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"}
1	+ {"version":3,"file":"CommandPaletteHeader.js","names":["CommandPaletteHeader","loading","commandsLength","itemsLength","inputRef","useRef","useModeContext","mode","setMode","idModeEnabled","useSelectedContext","setSelected","selected","useSearchContext","search","onChangeSearch","focusInput","current","focus","clearInput","value","useEffect","length","handleInputPlaceholder","useMemo","handleKeyDown","e","key","target","selectedItem","document","querySelectorAll","click","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } 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\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=\"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={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":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAQA;AAEA;AACA;AAA2D;AAAA;AAAA;AAQpD,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,OAIA;EAAA,wBAH/BC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,WAAW,QAAXA,WAAW;EAEX,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,sBAAyC,IAAAC,2BAAc,GAAE;IAAjDC,IAAI,mBAAJA,IAAI;IAAEC,OAAO,mBAAPA,OAAO;IAAEC,aAAa,mBAAbA,aAAa;EACpC,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,IAAIZ,QAAQ,IAAIA,QAAQ,CAACa,OAAO,EAAE;MAChCb,QAAQ,CAACa,OAAO,CAACC,KAAK,EAAE;IAC1B;EACF,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAIf,QAAQ,IAAIA,QAAQ,CAACa,OAAO,EAAE;MAChCb,QAAQ,CAACa,OAAO,CAACG,KAAK,GAAG,EAAE;MAC3BL,cAAc,CAAC,EAAE,CAAC;IACpB;EACF,CAAC;EAED,IAAAM,gBAAS,EAAC,YAAM;IACd,IAAIP,MAAM,CAACQ,MAAM,GAAG,CAAC,EAAE;MACrB,IAAInB,WAAW,GAAGD,cAAc,EAAE;QAChCS,WAAW,CAACT,cAAc,CAAC;MAC7B,CAAC,MAAM;QACLS,WAAW,CAAC,CAAC,CAAC;MAChB;IACF;EACF,CAAC,EAAE,CAACG,MAAM,EAAEZ,cAAc,EAAEC,WAAW,EAAEQ,WAAW,CAAC,CAAC;EAEtD,IAAAU,gBAAS,EAAC,YAAM;IACdL,UAAU,EAAE;EACd,CAAC,EAAE,CAACT,IAAI,CAAC,CAAC;EAEV,IAAMgB,sBAAsB,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC3C,IAAI,QAAOjB,IAAI,MAAK,QAAQ,EAAE;MAC5B,OAAO,QAAQ;IACjB;IAEA,IAAIA,IAAI,KAAK,IAAI,EAAE;MACjB,OAAO,GAAG;IACZ;IAEA,OAAO,mBAAmB;EAC5B,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,IAAMkB,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAC,EAAK;IAC3B,IACEA,CAAC,CAACC,GAAG,KAAK,WAAW,IACrBpB,IAAI,KAAK,SAAS,IACjBmB,CAAC,CAACE,MAAM,CAAsBR,KAAK,KAAK,EAAE,EAC3C;MACAZ,OAAO,CAAC,SAAS,CAAC;MAClBW,UAAU,EAAE;IACd;IAEA,IAAIO,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrB,IAAME,YAAY,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,UAAU,CAAC,CACxDnB,QAAQ,CACM;MAEhB,IAAIT,WAAW,GAAG,CAAC,EAAE;QACnB0B,YAAY,CAACG,KAAK,EAAE;MACtB;IACF;EACF,CAAC;EAED,oBACE,6BAAC,0CAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,6BAAC,gCAAgB,qBACf,6BAAC,sBAAe,OAAG,CACF,EAElBzB,IAAI,KAAK,IAAI,gBAAG,6BAAC,+BAAe,eAAuB,GAAG,IAAI,EAC9D,QAAOA,IAAI,MAAK,QAAQ,gBACvB,6BAAC,+BAAe,QACbA,IAAI,CAAC0B,IAAI,CAACX,MAAM,GAAG,EAAE,GAAGf,IAAI,CAAC0B,IAAI,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG3B,IAAI,CAAC0B,IAAI,MACnD,GAChB,IAAI,eAER,6BAAC,2BAAW;IACV,GAAG,EAAE7B,QAAS;IACd,SAAS;IACT,WAAW,EAAEmB,sBAAuB;IACpC,IAAI,EAAC,MAAM;IACX,qBAAkB,MAAM;IACxB,cAAc,EAAC,MAAM;IACrB,YAAY,EAAC,KAAK;IAClB,WAAW,EAAC,KAAK;IACjB,IAAI,EAAC,UAAU;IACf,UAAU,EAAE,KAAM;IAClB,KAAK,EAAET,MAAO;IACd,SAAS,EAAEW,aAAc;IACzB,QAAQ,EAAE,kBAACC,CAAC,EAAK;MACf,IAAMS,SAAS,GAAGT,CAAC,CAACE,MAAM,CAACR,KAAK;MAEhC,IACEe,SAAS,CAACC,UAAU,CAAC,GAAG,CAAC,IACzB3B,aAAa,IACbK,MAAM,CAACQ,MAAM,KAAK,CAAC,EACnB;QACAd,OAAO,CAAC,IAAI,CAAC;QACbO,cAAc,CAACoB,SAAS,CAACD,KAAK,CAAC,CAAC,CAAC,CAAC;QAClC;MACF;MAEAnB,cAAc,CAACoB,SAAS,CAAC;IAC3B;EAAE,EACF,eAEF,6BAAC,mCAAmB,QACjBlC,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,IACd,QAAOA,IAAI,MAAK,QAAQ,IACxBE,aAAa,IACbK,MAAM,CAACQ,MAAM,KAAK,CAAC,gBACjB,6BAAC,gBAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,6BAAC,sBAAU;IACT,UAAU,EAAE,oBAACI,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;QACrBnB,OAAO,CAAC,IAAI,CAAC;QACbW,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbX,OAAO,CAAC,IAAI,CAAC;MACbW,UAAU,EAAE;IACd,CAAE;IACF,OAAO,EAAC;EAAW,gBAEnB,6BAAC,kBAAW,OAAG,CACJ,CACL,GACR,IAAI,EAEPL,MAAM,CAACQ,MAAM,GAAG,CAAC,IAAIf,IAAI,KAAK,IAAI,IAAI,QAAOA,IAAI,MAAK,QAAQ,gBAC7D,6BAAC,gBAAO;IAAC,KAAK,EAAC,OAAO;IAAC,SAAS,EAAC;EAAK,gBACpC,6BAAC,sBAAU;IACT,OAAO,EAAC,WAAW;IACnB,UAAU,EAAE,oBAACmB,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;QACrBnB,OAAO,CAAC,SAAS,CAAC;QAClBW,UAAU,EAAE;QACZH,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbR,OAAO,CAAC,SAAS,CAAC;MAClBW,UAAU,EAAE;MACZH,UAAU,EAAE;IACd;EAAE,gBAEF,6BAAC,gBAAS,OAAG,CACF,CACL,GACR,IAAI,CACY,CACK;AAEjC,CAAC;AAAC;AAEFhB,oBAAoB,CAACqC,WAAW,GAAG,oBAAoB"}

package/dist/cjs/components/CommandPalette/CommandPaletteItem.js CHANGED Viewed

@@ -50,7 +50,7 @@ var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
       $_css: generateRandomWidth()
     }));
   }
-  return /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItem, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_CommandPalette.StyledCommandPaletteItem, _extends({}, rest, {
     ref: ref,
     className: (0, _classnames.default)("cp-item", className),
     tabIndex: 1,
@@ -65,7 +65,7 @@ var CommandPaletteItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     dangerouslySetInnerHTML: {
       __html: (0, _findHighlightedSearch.findHighlightedSearch)(search, title)
     }
-  }) : null);
+  }) : null));
 });
 exports.CommandPaletteItem = CommandPaletteItem;
 CommandPaletteItem.displayName = "CommandPaletteItem";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPaletteItem.js","names":["generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","forwardRef","ref","title","renderIcon","className","index","loading","rest","icon","useSelectedContext","selected","setSelected","useSearchContext","search","onMouseEnter","classNames","__html","findHighlightedSearch","displayName","width","height","borderRadius"],"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 { LinearLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteItem,\n StyledCommandPaletteItemLoader,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\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\n extends ComponentPropsWithoutRef<\"li\"> {\n title?: string;\n renderIcon?: () => ReactNode;\n className?: string;\n index?: number;\n selected?: number;\n loading?: boolean;\n}\n\nexport const CommandPaletteItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n loading,\n ...rest\n }: 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 if (loading) {\n return (\n <StyledCommandPaletteItemLoader aria-busy={true} aria-disabled={true}>\n <LinearLoader css={{ width: 24, height: 24, borderRadius: \"100%\" }} />\n <LinearLoader css={{ width: generateRandomWidth(), height: 16 }} />\n </StyledCommandPaletteItemLoader>\n );\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;AAKA;AACA;AAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3D,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EAChC;EACA,IAAMC,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;EAErD,OAAOH,SAAS,GAAG,GAAG;AACxB,CAAC;~~AAYM~~,IAAMI,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBASEC,~~GAAuB~~,~~EACpB~~;EAAA,IARDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAIT,IAAMC,IAAI,GAAGL,UAAU,IAAIA,UAAU,EAAE;EACvC,0BAAkC,IAAAM,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,CAACN,KAAK,CAAW;EAC9B,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,oBACE,6BAAC,8CAA8B;MAAC,aAAW,IAAK;MAAC,iBAAe;IAAK,gBACnE,uDAAsE,eACtE;MAAA,OAA4BZ,mBAAmB;IAAE,EAAkB,CACpC;EAErC;EAEA,oBACE,6BAAC,wCAAwB,eACnBa,IAAI;IACR,GAAG,EAAEN,GAAI;IACT,SAAS,EAAE,IAAAc,mBAAU,EAAC,SAAS,EAAEX,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeM,QAAQ,KAAKL,KAAM;IAClC,YAAY,EAAES,YAAa;IAC3B,SAAS,EAAET,KAAK,KAAKK;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,EAC9BK,MAAM,IAAIX,KAAK,gBACd,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC,SAAS;IACf,uBAAuB,EAAE;MACvBc,MAAM,EAAE,IAAAC,4CAAqB,EAACJ,MAAM,EAAEX,KAAK;IAC7C;EAAE,EACF,GACA,IAAI,CACiB;~~AAE/B~~,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACmB,WAAW,GAAG,oBAAoB;AAAC;EAAA;EAAA;AAAA,~~GAjCzB~~;EAAEC,KAAK,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,YAAY,EAAE;AAAO,CAAC;AAAA;EAAA;EAAA;AAAA;EAAA,OAC/C;IAAEF,KAAK;IAAyBC,MAAM,EAAE;EAAG,CAAC;AAAA"}
1	+ {"version":3,"file":"CommandPaletteItem.js","names":["generateRandomWidth","randomNum","Math","round","random","CommandPaletteItem","forwardRef","ref","title","renderIcon","className","index","loading","rest","icon","useSelectedContext","selected","setSelected","useSearchContext","search","onMouseEnter","classNames","__html","findHighlightedSearch","displayName","width","height","borderRadius"],"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 { LinearLoader } from \"../Loaders\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteItem,\n StyledCommandPaletteItemLoader,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { useSelectedContext } from \"./context\";\nimport { useSearchContext } from \"./context/SearchContext\";\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 const CommandPaletteItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n loading,\n ...rest\n }: CommandPaletteItemProps,\n ref: Ref<HTMLAnchorElement>\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 if (loading) {\n return (\n <StyledCommandPaletteItemLoader aria-busy={true} aria-disabled={true}>\n <LinearLoader css={{ width: 24, height: 24, borderRadius: \"100%\" }} />\n <LinearLoader css={{ width: generateRandomWidth(), height: 16 }} />\n </StyledCommandPaletteItemLoader>\n );\n }\n\n return (\n <li>\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 </li>\n );\n }\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n"],"mappings":";;;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AAKA;AACA;AAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3D,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;EAChC;EACA,IAAMC,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;EAErD,OAAOH,SAAS,GAAG,GAAG;AACxB,CAAC;AAWM,IAAMI,kBAAkB,gBAAG,IAAAC,iBAAU,EAC1C,gBASEC,GAA2B,EACxB;EAAA,IARDC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACJC,IAAI;EAIT,IAAMC,IAAI,GAAGL,UAAU,IAAIA,UAAU,EAAE;EACvC,0BAAkC,IAAAM,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,CAACN,KAAK,CAAW;EAC9B,CAAC;EAED,IAAIC,OAAO,EAAE;IACX,oBACE,6BAAC,8CAA8B;MAAC,aAAW,IAAK;MAAC,iBAAe;IAAK,gBACnE,uDAAsE,eACtE;MAAA,OAA4BZ,mBAAmB;IAAE,EAAkB,CACpC;EAErC;EAEA,oBACE,sDACE,6BAAC,wCAAwB,eACnBa,IAAI;IACR,GAAG,EAAEN,GAAI;IACT,SAAS,EAAE,IAAAc,mBAAU,EAAC,SAAS,EAAEX,SAAS,CAAE;IAC5C,QAAQ,EAAE,CAAE;IACZ,iBAAeM,QAAQ,KAAKL,KAAM;IAClC,YAAY,EAAES,YAAa;IAC3B,SAAS,EAAET,KAAK,KAAKK;EAAS,iBAE9B,6BAAC,0BAAU,QAAEF,IAAI,CAAc,EAC9BK,MAAM,IAAIX,KAAK,gBACd,6BAAC,sBAAU;IACT,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC,SAAS;IACf,uBAAuB,EAAE;MACvBc,MAAM,EAAE,IAAAC,4CAAqB,EAACJ,MAAM,EAAEX,KAAK;IAC7C;EAAE,EACF,GACA,IAAI,CACiB,CACxB;AAET,CAAC,CACF;AAAC;AAEFH,kBAAkB,CAACmB,WAAW,GAAG,oBAAoB;AAAC;EAAA;EAAA;AAAA,GAnCzB;EAAEC,KAAK,EAAE,EAAE;EAAEC,MAAM,EAAE,EAAE;EAAEC,YAAY,EAAE;AAAO,CAAC;AAAA;EAAA;EAAA;AAAA;EAAA,OAC/C;IAAEF,KAAK;IAAyBC,MAAM,EAAE;EAAG,CAAC;AAAA"}

package/dist/esm/components/AvatarGroup/Styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;~~SAapB~~,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}
1	+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AvatarGroup/Styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;gBACjB,OAAO;SAkBpB,CAAC;AAEF,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,iBAAiB,wFAU7B,CAAC"}

package/dist/esm/components/AvatarGroup/Styles.js CHANGED Viewed

@@ -3,11 +3,14 @@ import { FontStyle } from "../FontStyle";
 export var AvatarGroupsStyles = styled.div.withConfig({
   displayName: "Styles__AvatarGroupsStyles",
   componentId: "sc-1padv46-0"
-})(["", " align-items:center;align-items:center;background-color:", ";border-radius:var(--ac-br-6);cursor:pointer;display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;"], FontStyle, function (props) {
-  return !props.hasTooltip && "var(--color-theme-300)";
-}, function (_ref) {
+})(["", " align-items:center;align-items:center;border-radius:var(--ac-br-6);cursor:", ";display:flex;justify-content:center;padding:", ";user-select:none;width:fit-content;&:hover{background-color:", ";transition:all 0.2s ease-in-out;}"], FontStyle, function (_ref) {
   var hasTooltip = _ref.hasTooltip;
+  return hasTooltip ? "default" : "pointer";
+}, function (_ref2) {
+  var hasTooltip = _ref2.hasTooltip;
   return hasTooltip ? "5px 0" : "5px";
+}, function (props) {
+  return !props.hasTooltip && "var(--color-theme-300)";
 });
 export var LengthCountStyles = styled.div.withConfig({
   displayName: "Styles__LengthCountStyles",

package/dist/esm/components/AvatarGroup/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","~~props~~","~~hasTooltip~~","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n hasTooltip: boolean;\n}>`\n ${FontStyle}\n align-items: center;\n align-items: center;\n ~~background-color: ${(props) => !props.hasTooltip && \"var(--color-theme-300)\"};\n~~ border-radius: var(--ac-br-6);\n cursor: pointer;\n display: flex;\n justify-content: center;\n padding: ${({ hasTooltip }) => (hasTooltip ? \"5px 0\" : \"5px\")};\n user-select: none;\n width: fit-content;\n`;\n\ninterface LengthCountStylesProps {\n size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n align-items: center;\n background-color: var(--color-theme-400);\n block-size: ${(props) => props.size + \"px\"};\n border-radius: var(--ac-br-rounded);\n display: flex;\n inline-size: ${(props) => props.size + \"px\"};\n justify-content: center;\n outline: 1px solid var(--page-paper-main);\n z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,~~0MAGxCF~~,SAAS,~~EAGS~~,~~UAACG~~,~~KAAK~~;EAAA,~~OAAK~~,~~CAACA~~,~~KAAK~~,~~CAACC~~,~~UAAU~~,~~IAAI,wBAAwB~~;AAAA,~~GAKjE~~;EAAA,IAAGA,UAAU,~~QAAVA~~,UAAU;EAAA,OAAQA,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,~~CAG9D~~;AAMD,OAAO,~~IAAMC~~,iBAAiB,GAAGN,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,~~UAACC~~,KAAK;EAAA,OAAKA,KAAK,~~CAACG~~,IAAI,GAAG,IAAI;AAAA,GAG3B,~~UAACH~~,KAAK;EAAA,OAAKA,KAAK,~~CAACG~~,IAAI,GAAG,IAAI;AAAA,EAI5C"}
1	+ {"version":3,"file":"Styles.js","names":["styled","FontStyle","AvatarGroupsStyles","div","hasTooltip","props","LengthCountStyles","size"],"sources":["../../../../src/components/AvatarGroup/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const AvatarGroupsStyles = styled.div<{\n hasTooltip: boolean;\n}>`\n ${FontStyle}\n align-items: center;\n align-items: center;\n border-radius: var(--ac-br-6);\n cursor: ${({ hasTooltip }) => (hasTooltip ? \"default\" : \"pointer\")};\n display: flex;\n justify-content: center;\n padding: ${({ hasTooltip }) => (hasTooltip ? \"5px 0\" : \"5px\")};\n user-select: none;\n width: fit-content;\n\n &:hover {\n background-color: ${(props) =>\n !props.hasTooltip && \"var(--color-theme-300)\"};\n transition: all 0.2s ease-in-out;\n }\n`;\n\ninterface LengthCountStylesProps {\n size: number;\n}\n\nexport const LengthCountStyles = styled.div<LengthCountStylesProps>`\n align-items: center;\n background-color: var(--color-theme-400);\n block-size: ${(props) => props.size + \"px\"};\n border-radius: var(--ac-br-rounded);\n display: flex;\n inline-size: ${(props) => props.size + \"px\"};\n justify-content: center;\n outline: 1px solid var(--page-paper-main);\n z-index: 99;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,IAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gPAGxCF,SAAS,EAID;EAAA,IAAGG,UAAU,QAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,EAGvD;EAAA,IAAGA,UAAU,SAAVA,UAAU;EAAA,OAAQA,UAAU,GAAG,OAAO,GAAG,KAAK;AAAA,CAAC,EAKvC,UAACC,KAAK;EAAA,OACxB,CAACA,KAAK,CAACD,UAAU,IAAI,wBAAwB;AAAA,EAGlD;AAMD,OAAO,IAAME,iBAAiB,GAAGN,MAAM,CAACG,GAAG;EAAA;EAAA;AAAA,gOAG3B,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,GAG3B,UAACF,KAAK;EAAA,OAAKA,KAAK,CAACE,IAAI,GAAG,IAAI;AAAA,EAI5C"}

package/dist/esm/components/CommandPalette/CommandPalette.d.ts CHANGED Viewed

@@ -23,7 +23,7 @@ export declare const CommandPalette: React.ForwardRefExoticComponent<CommandPale
         ({ children, heading, visible, }: React.PropsWithChildren<import("./CommandPaletteList").CommandPaletteListProps>): JSX.Element | null;
         displayName: string;
     };
-    Item: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLLIElement>>;
-    CommandItem: React.ForwardRefExoticComponent<import("./CommandPaletteCommandItem").CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
+    Item: React.ForwardRefExoticComponent<CommandPaletteItemProps & React.RefAttributes<HTMLAnchorElement>>;
+    CommandItem: React.ForwardRefExoticComponent<import("./CommandPaletteCommandItem").CommandPaletteCommandItemProps & React.RefAttributes<HTMLAnchorElement>>;
 };
 //# sourceMappingURL=CommandPalette.d.ts.map

package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts CHANGED Viewed

@@ -9,10 +9,10 @@ export declare const StyledActionWrapper: import("styled-components").StyledComp
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCommandPaletteList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const StyledHeading: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const StyledCommandPaletteItem: import("styled-components").StyledComponent<"li", any, {
+export declare const StyledCommandPaletteItem: import("styled-components").StyledComponent<"a", any, {
     $selected: boolean;
 }, never>;
-export declare const StyledCommandPaletteCommandItem: import("styled-components").StyledComponent<"li", any, {
+export declare const StyledCommandPaletteCommandItem: import("styled-components").StyledComponent<"a", any, {
     $selected: boolean;
 }, never>;
 export declare const StyledSpinnerLoader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cs" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw"> & import("../Loaders").SpinnerLoaderProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/esm/components/CommandPalette/CommandPalette.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPalette.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAWhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAUvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA8BvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAW3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB;~~eAAyB~~,OAAO;~~SA4BpE~~,CAAC;AAEF,eAAO,MAAM,+BAA+B;~~eA9BkB~~,OAAO;~~SAgCpE~~,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}
1	+ {"version":3,"file":"CommandPalette.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPalette.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,oBAAoB,oEAWhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAUvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAOtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEA8BvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAW3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB;eAAwB,OAAO;SA4BnE,CAAC;AAEF,eAAO,MAAM,+BAA+B;eA9BiB,OAAO;SAgCnE,CAAC;AAEF,eAAO,MAAM,mBAAmB,uzJAE/B,CAAC;AAEF,eAAO,MAAM,8BAA8B,oEAU1C,CAAC"}

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

@@ -44,7 +44,7 @@ export var StyledHeading = styled.p.withConfig({
 })(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);
 // prettier-ignore
-export var StyledCommandPaletteItem = styled.li.withConfig({
+export var 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;}"], function (_ref) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPalette.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPalette","div","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","li","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","StyledCommandPaletteItemLoader"],"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 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=\"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.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\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;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,4LAC1CJ,SAAS,CAUZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,wZAMnCR,MAAM,CAACS,EAAE,CAwBZ;AAED,OAAO,IAAMC,eAAe,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,4JAKtCX,MAAM,CAACS,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGd,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGf,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGhB,MAAM,CAACiB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGpB,MAAM,CAACqB,~~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;AAED,OAAO,IAAMC,+BAA+B,GAAGvB,MAAM,CAACoB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAED,OAAO,IAAMI,mBAAmB,GAAGxB,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAED,OAAO,IAAMsB,8BAA8B,GAAGzB,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+JAUvD"}
1	+ {"version":3,"file":"CommandPalette.styles.js","names":["styled","FontStyle","screen","SpinnerLoader","StyledCommandPalette","div","StyledCommandPaletteWrapper","StyledCommandPaletteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPaletteList","ul","StyledHeading","p","StyledCommandPaletteItem","a","$selected","StyledCommandPaletteCommandItem","StyledSpinnerLoader","StyledCommandPaletteItemLoader"],"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 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=\"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;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,YAAY;AAE1C,OAAO,IAAMC,oBAAoB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,4LAC1CJ,SAAS,CAUZ;AAED,OAAO,IAAMK,2BAA2B,GAAGN,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,yJAUpD;AAED,OAAO,IAAME,0BAA0B,GAAGP,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,kHAOnD;AAED,OAAO,IAAMG,gBAAgB,GAAGR,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGT,MAAM,CAACU,KAAK;EAAA;EAAA;AAAA,wZAMnCR,MAAM,CAACS,EAAE,CAwBZ;AAED,OAAO,IAAMC,eAAe,GAAGZ,MAAM,CAACa,IAAI;EAAA;EAAA;AAAA,4JAKtCX,MAAM,CAACS,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGd,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGf,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGhB,MAAM,CAACiB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGlB,MAAM,CAACmB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGpB,MAAM,CAACqB,CAAC;EAAA;EAAA;AAAA,2WAS1B;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;AAED,OAAO,IAAMC,+BAA+B,GAAGvB,MAAM,CAACoB,wBAAwB,CAAC;EAAA;EAAA;AAAA,yBAE9E;AAED,OAAO,IAAMI,mBAAmB,GAAGxB,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,yBAEvD;AAED,OAAO,IAAMsB,8BAA8B,GAAGzB,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,+JAUvD"}

package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts CHANGED Viewed

@@ -1,10 +1,8 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from "react";
-export interface CommandPaletteCommandItemProps extends ComponentPropsWithoutRef<"li"> {
+import React, { ReactNode } from "react";
+import { CommandPaletteItemProps } from "./CommandPaletteItem";
+export interface CommandPaletteCommandItemProps extends CommandPaletteItemProps {
     title: string;
     renderIcon: () => ReactNode;
-    className?: string;
-    index?: number;
-    selected?: number;
 }
-export declare const CommandPaletteCommandItem: React.ForwardRefExoticComponent<CommandPaletteCommandItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const CommandPaletteCommandItem: React.ForwardRefExoticComponent<CommandPaletteCommandItemProps & React.RefAttributes<HTMLAnchorElement>>;
 //# sourceMappingURL=CommandPaletteCommandItem.d.ts.map

package/dist/esm/components/CommandPalette/CommandPaletteCommandItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPaletteCommandItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,~~EACZ~~,~~wBAAwB,EAExB,~~SAAS,~~EAEV~~,MAAM,OAAO,CAAC;~~AASf~~,~~MAAM~~,~~WAAW,8BACf,SAAQ,wBAAwB,CAAC,IAAI,CAAC;IACtC,KAAK,~~EAAE,~~MAAM~~,~~CAAC;IACd,UAAU,~~EAAE,MAAM,~~SAAS~~,CAAC;~~IAC5B~~,~~SAAS~~,~~CAAC~~,~~EAAE~~,~~MAAM~~,~~CAAC~~;~~IACnB~~,KAAK,~~CAAC,~~EAAE,MAAM,CAAC;~~IACf~~,~~QAAQ~~,~~CAAC,~~EAAE,MAAM,CAAC;~~CACnB~~;AAED,eAAO,MAAM,yBAAyB,~~sGA4CrC~~,CAAC"}
1	+ {"version":3,"file":"CommandPaletteCommandItem.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAO,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,8BACf,SAAQ,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,yBAAyB,0GA8CrC,CAAC"}

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

@@ -21,7 +21,7 @@ export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
   var onMouseEnter = function onMouseEnter() {
     setSelected(index);
   };
-  return /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
     ref: ref,
     className: classNames("cp-item cp-command", className),
     tabIndex: 1,
@@ -33,7 +33,7 @@ export var CommandPaletteCommandItem = /*#__PURE__*/forwardRef(function (_ref, r
     whitespace: "no-wrap",
     variant: "Body 1",
     color: "primary"
-  }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null));
+  }, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null)));
 });
 CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
 var _StyledTypography = _styled(Typography).withConfig({

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPaletteCommandItem.js","names":["classNames","React","forwardRef","ArrowRightIcon","Typography","StyledCommandPaletteCommandItem","StyledIcon","useSelectedContext","CommandPaletteCommandItem","ref","title","renderIcon","className","index","rest","icon","selected","setSelected","onMouseEnter","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,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,~~IAEVC~~,UAAU,~~QAGL~~,OAAO;~~AACd~~,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SACEC,+BAA+B,EAC/BC,UAAU,QACL,yBAAyB;~~AAChC~~,SAASC,kBAAkB,QAAQ,WAAW;~~AAW9C~~,OAAO,IAAMC,yBAAyB,gBAAGN,UAAU,CACjD,gBAQEO,~~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,0BAAkCJ,kBAAkB,EAAE;IAA9CS,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACJ,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,oBAAC,+BAA+B,eAC1BC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAET,UAAU,CAAC,oBAAoB,EAAEY,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeI,QAAQ,KAAKH,KAAM;IAClC,YAAY,EAAEK,YAAa;IAC3B,SAAS,EAAEL,KAAK,KAAKG;EAAS,iBAE9B,oBAAC,UAAU,QAAED,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,oBAAC,cAAc,OAAG,CACc;~~AAEtC~~,CAAC,CACF;AAEDF,yBAAyB,CAACW,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"CommandPaletteCommandItem.js","names":["classNames","React","forwardRef","ArrowRightIcon","Typography","StyledCommandPaletteCommandItem","StyledIcon","useSelectedContext","CommandPaletteCommandItem","ref","title","renderIcon","className","index","rest","icon","selected","setSelected","onMouseEnter","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteCommandItem.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport React, { forwardRef, ReactNode, Ref } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { Typography } from \"../Typography/Typography\";\nimport {\n StyledCommandPaletteCommandItem,\n StyledIcon,\n} from \"./CommandPalette.styles\";\nimport { CommandPaletteItemProps } from \"./CommandPaletteItem\";\nimport { useSelectedContext } from \"./context\";\n\nexport interface CommandPaletteCommandItemProps\n extends CommandPaletteItemProps {\n title: string;\n renderIcon: () => ReactNode;\n}\n\nexport const CommandPaletteCommandItem = forwardRef(\n (\n {\n title,\n renderIcon,\n className,\n index,\n ...rest\n }: CommandPaletteCommandItemProps,\n ref: Ref<HTMLAnchorElement>\n ) => {\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 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,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,UAAU,QAAwB,OAAO;AACzD,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SACEC,+BAA+B,EAC/BC,UAAU,QACL,yBAAyB;AAEhC,SAASC,kBAAkB,QAAQ,WAAW;AAQ9C,OAAO,IAAMC,yBAAyB,gBAAGN,UAAU,CACjD,gBAQEO,GAA2B,EACxB;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,0BAAkCJ,kBAAkB,EAAE;IAA9CS,QAAQ,uBAARA,QAAQ;IAAEC,WAAW,uBAAXA,WAAW;EAE7B,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzBD,WAAW,CAACJ,KAAK,CAAW;EAC9B,CAAC;EAED,oBACE,6CACE,oBAAC,+BAA+B,eAC1BC,IAAI;IACR,GAAG,EAAEL,GAAI;IACT,SAAS,EAAET,UAAU,CAAC,oBAAoB,EAAEY,SAAS,CAAE;IACvD,QAAQ,EAAE,CAAE;IACZ,iBAAeI,QAAQ,KAAKH,KAAM;IAClC,YAAY,EAAEK,YAAa;IAC3B,SAAS,EAAEL,KAAK,KAAKG;EAAS,iBAE9B,oBAAC,UAAU,QAAED,IAAI,CAAc,eAC/B;IACE,QAAQ,EAAC,UAAU;IACnB,UAAU,EAAC,SAAS;IACpB,OAAO,EAAC,QAAQ;IAChB,KAAK,EAAC;EAAS,GAKdL,KAAK,CACK,eACb,oBAAC,cAAc,OAAG,CACc,CAC/B;AAET,CAAC,CACF;AAEDF,yBAAyB,CAACW,WAAW,GAAG,2BAA2B;AAAC;EAAA;EAAA;AAAA"}

package/dist/esm/components/CommandPalette/CommandPaletteHeader.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;gDAI9B,yBAAyB;;~~CAgM3B~~,CAAC"}
1	+ {"version":3,"file":"CommandPaletteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,oBAAoB;gDAI9B,yBAAyB;;CAuK3B,CAAC"}

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

@@ -65,19 +65,6 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
         selectedItem.click();
       }
     }
-    // mode === 'id' TYPE NUMBER PREVENTING KEYS
-    if (mode === "id") {
-      // enableNumbers && key combos
-      var isNumber = isFinite(e.key);
-      var enabledKeyCombos = e.metaKey && "a" || e.metaKey && "c" || e.metaKey && "v" || e.metaKey && "x" || e.key === "Backspace" || e.key === "Tab";
-      // check conditions and remove keys
-      if (!enabledKeyCombos && !isNumber) {
-        e.preventDefault();
-      }
-    }
   };
   return /*#__PURE__*/React.createElement(StyledCommandPaletteHeader, {
     className: "cp-header"
@@ -85,7 +72,7 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     ref: inputRef,
     autoFocus: true,
     placeholder: handleInputPlaceholder,
-    type: mode === "id" ? "number" : "text",
+    type: "text",
     "aria-autocomplete": "list",
     autoCapitalize: "none",
     autoComplete: "off",
@@ -96,21 +83,12 @@ export var CommandPaletteHeader = function CommandPaletteHeader(_ref) {
     onKeyDown: handleKeyDown,
     onChange: function onChange(e) {
       var inputText = e.target.value;
-      if (inputText.startsWith("#") && idModeEnabled) {
+      if (inputText.startsWith("#") && idModeEnabled && search.length === 0) {
         setMode("id");
-        clearInput();
+        onChangeSearch(inputText.slice(1));
         return;
       }
       onChangeSearch(inputText);
-    },
-    onPaste: function onPaste(e) {
-      e.preventDefault();
-      var pastedText = e.clipboardData.getData("text");
-      if (pastedText.startsWith("#") && idModeEnabled) {
-        pastedText = pastedText.split("#")[1];
-        setMode("id");
-        onChangeSearch(pastedText);
-      }
     }
   }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(StyledSpinnerLoader, {
     "aria-busy": true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useMemo","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","CommandPaletteHeader","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","isNumber","isFinite","enabledKeyCombos","metaKey","preventDefault","name","slice","inputText","startsWith","pastedText","clipboardData","getData","split","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } 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\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 // mode === 'id' TYPE NUMBER PREVENTING KEYS\n\n if (mode === \"id\") {\n // enableNumbers && key combos\n const isNumber = isFinite(e.key);\n const enabledKeyCombos =\n (e.metaKey && \"a\") \|\|\n (e.metaKey && \"c\") \|\|\n (e.metaKey && \"v\") \|\|\n (e.metaKey && \"x\") \|\|\n e.key === \"Backspace\" \|\|\n e.key === \"Tab\";\n\n // check conditions and remove keys\n if (!enabledKeyCombos && !isNumber) {\n e.preventDefault();\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={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={handleKeyDown}\n onChange={(e) => {\n const inputText = e.target.value;\n\n if (inputText.startsWith(\"#\") && idModeEnabled) {\n setMode(\"id\");\n clearInput();\n return;\n }\n\n onChangeSearch(inputText);\n }}\n onPaste={(e) => {\n e.preventDefault();\n let pastedText = e.clipboardData.getData(\"text\");\n\n if (pastedText.startsWith(\"#\") && idModeEnabled) {\n pastedText = pastedText.split(\"#\")[1];\n setMode(\"id\");\n onChangeSearch(pastedText);\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\" &&\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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"}
1	+ {"version":3,"file":"CommandPaletteHeader.js","names":["React","useEffect","useMemo","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","Tooltip","StyledActionWrapper","StyledCommandPaletteHeader","StyledInput","StyledParameter","StyledSearchIcon","StyledSpinnerLoader","useSelectedContext","useModeContext","useSearchContext","CommandPaletteHeader","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","name","slice","inputText","startsWith","displayName"],"sources":["../../../../src/components/CommandPalette/CommandPaletteHeader.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } 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\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=\"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={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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"}