@activecollab/components 1.0.260 → 1.0.262

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["React","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","SpinnerLoader","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","CommandPalleteHeader","search","handleChange","loading","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = true,\n}: CommandPalleteHeaderProps) => {\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      <StyledParameter>ID:</StyledParameter>\n      <StyledInput\n        autoFocus\n        value={search}\n        onChange={handleChange}\n        placeholder=\"Search or jump to\"\n      />\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader /> : null}\n\n        <Tooltip title=\"Search by ID\" placement=\"top\">\n          <IconButton variant=\"text gray\">\n            <HashtagIcon />\n          </IconButton>\n        </Tooltip>\n\n        <Tooltip title=\"Close\" placement=\"top\">\n          <IconButton variant=\"text gray\">\n            <CloseIcon />\n          </IconButton>\n        </Tooltip>\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"AAAA,OAAOA,KAAK,MAAuB,OAAO;AAC1C,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ,UAAU;AAClE,SAASC,aAAa,QAAQ,YAAY;AAC1C,SAASC,OAAO,QAAQ,YAAY;AACpC,SACEC,mBAAmB,EACnBC,0BAA0B,EAC1BC,WAAW,EACXC,eAAe,EACfC,gBAAgB,QACX,yBAAyB;;AAEhC;;AAOA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,OAIA;EAAA,IAH/BC,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IAAA,oBACZC,OAAO;IAAPA,OAAO,6BAAG,IAAI;EAEd,oBACE,oBAAC,0BAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,oBAAC,gBAAgB,qBACf,oBAAC,eAAe,OAAG,CACF,eAEnB,oBAAC,eAAe,cAAsB,eACtC,oBAAC,WAAW;IACV,SAAS;IACT,KAAK,EAAEF,MAAO;IACd,QAAQ,EAAEC,YAAa;IACvB,WAAW,EAAC;EAAmB,EAC/B,eACF,oBAAC,mBAAmB,QACjBC,OAAO,gBAAG,oBAAC,aAAa,OAAG,GAAG,IAAI,eAEnC,oBAAC,OAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,oBAAC,UAAU;IAAC,OAAO,EAAC;EAAW,gBAC7B,oBAAC,WAAW,OAAG,CACJ,CACL,eAEV,oBAAC,OAAO;IAAC,KAAK,EAAC,OAAO;IAAC,SAAS,EAAC;EAAK,gBACpC,oBAAC,UAAU;IAAC,OAAO,EAAC;EAAW,gBAC7B,oBAAC,SAAS,OAAG,CACF,CACL,CACU,CACK;AAEjC,CAAC;AAEDH,oBAAoB,CAACI,WAAW,GAAG,oBAAoB"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["React","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","SpinnerLoader","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","useModeContext","CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","mode","setMode","focusInput","current","focus","clearInput","value","marginRight","length","e","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type=\"text\"\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={handleChange}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAiBC,MAAM,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,EAAEC,WAAW,EAAEC,eAAe,QAAQ,UAAU;AAClE,SAASC,aAAa,QAAQ,YAAY;AAC1C,SAASC,OAAO,QAAQ,YAAY;AACpC,SACEC,mBAAmB,EACnBC,0BAA0B,EAC1BC,WAAW,EACXC,eAAe,EACfC,gBAAgB,QACX,yBAAyB;AAChC,SAASC,cAAc,QAAQ,uBAAuB;;AAEtD;;AAQA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,OAKA;EAAA,IAJ/BC,MAAM,QAANA,MAAM;IACNC,YAAY,QAAZA,YAAY;IAAA,oBACZC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;EAEd,IAAMC,QAAQ,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAC/C,sBAA0BY,cAAc,EAAE;IAAlCO,IAAI,mBAAJA,IAAI;IAAEC,OAAO,mBAAPA,OAAO;EAErB,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAIH,QAAQ,IAAIA,QAAQ,CAACI,OAAO,EAAE;MAChCJ,QAAQ,CAACI,OAAO,CAACC,KAAK,EAAE;IAC1B;EACF,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,IAAIN,QAAQ,IAAIA,QAAQ,CAACI,OAAO,EAAE;MAChCJ,QAAQ,CAACI,OAAO,CAACG,KAAK,GAAG,EAAE;MAC3BR,cAAc,CAAC,EAAE,CAAC;IACpB;EACF,CAAC;EAED,oBACE,oBAAC,0BAA0B;IAAC,SAAS,EAAC;EAAW,gBAC/C,oBAAC,gBAAgB,qBACf,oBAAC,eAAe,OAAG,CACF,EAElBE,IAAI,KAAK,IAAI,gBAAG,oBAAC,eAAe,eAAuB,GAAG,IAAI,eAE/D,oBAAC,WAAW;IACV,GAAG,EAAED,QAAS;IACd,SAAS;IACT,IAAI,EAAC,MAAM;IACX,cAAc,EAAC,MAAM;IACrB,YAAY,EAAC,MAAM;IACnB,KAAK,EAAEJ,MAAO;IACd,QAAQ,EAAEC,YAAa;IACvB,WAAW,EAAEI,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG;EAAoB,EACxD,eAEF,oBAAC,mBAAmB,QACjBH,OAAO,gBAAG,oBAAC,aAAa;IAAC,KAAK,EAAE;MAAEU,WAAW,EAAE;IAAM;EAAE,EAAG,GAAG,IAAI,EAEjEP,IAAI,KAAK,IAAI,IAAIL,MAAM,CAACa,MAAM,KAAK,CAAC,gBACnC,oBAAC,OAAO;IAAC,KAAK,EAAC,cAAc;IAAC,SAAS,EAAC;EAAK,gBAC3C,oBAAC,UAAU;IACT,UAAU,EAAE,oBAACC,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;QACrBT,OAAO,CAAC,IAAI,CAAC;QACbI,UAAU,EAAE;QACZH,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbD,OAAO,CAAC,IAAI,CAAC;MACbI,UAAU,EAAE;MACZH,UAAU,EAAE;IACd,CAAE;IACF,OAAO,EAAC;EAAW,gBAEnB,oBAAC,WAAW,OAAG,CACJ,CACL,GACR,IAAI,EAEPP,MAAM,CAACa,MAAM,GAAG,CAAC,IAAIR,IAAI,KAAK,IAAI,gBACjC,oBAAC,OAAO;IACN,KAAK,EAAEA,IAAI,KAAK,IAAI,GAAG,eAAe,GAAG,OAAQ;IACjD,SAAS,EAAC;EAAK,gBAEf,oBAAC,UAAU;IACT,OAAO,EAAC,WAAW;IACnB,UAAU,EAAE,oBAACS,CAAC,EAAK;MACjB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;QACrBT,OAAO,CAAC,SAAS,CAAC;QAClBI,UAAU,EAAE;QACZH,UAAU,EAAE;MACd;IACF,CAAE;IACF,OAAO,EAAE,mBAAM;MACbD,OAAO,CAAC,SAAS,CAAC;MAClBI,UAAU,EAAE;MACZH,UAAU,EAAE;IACd;EAAE,gBAEF,oBAAC,SAAS,OAAG,CACF,CACL,GACR,IAAI,CACY,CACK;AAEjC,CAAC;AAEDR,oBAAoB,CAACiB,WAAW,GAAG,oBAAoB"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/components/Links/Link.d.ts

@@ -4,7 +4,7 @@ export interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {
     /** Children type of node or string */
     children: ReactNode | string;
     /** Variant Buttons */
-    variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised";
+    variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised" | "text link-primary" | "text link-default";
     /** Button size can be big, medium or small */
     size?: "big" | "small";
     /** Disabled prop */

package/dist/esm/components/Links/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IACpB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CA0DxD,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CA2DxD,CAAC"}

package/dist/esm/components/Links/Link.js

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

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

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

package/dist/esm/components/Links/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,UAAU,eAAgB,SAAQ,UAAU;IAC1C,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EAiPtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAU9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,UAAU,eAAgB,SAAQ,UAAU;IAC1C,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EA8RtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAU9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}

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

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