@tecsinapse/react-web-kit 1.20.0 → 1.21.0

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js

@@ -19,14 +19,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const MenuItem = ({
-  title,
-  Component = 'a',
-  props = {},
-  rightComponents,
-  items,
-  toggle
-}) => {
+const MenuItem = _ref => {
+  let {
+    title,
+    Component = 'a',
+    props = {},
+    rightComponents,
+    items,
+    toggle
+  } = _ref;
+
   const [open, setOpen] = _react.default.useState(false);
 
   const noTextDecoration = {

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","names":["MenuItem","title","Component","props","rightComponents","items","toggle","open","setOpen","React","useState","noTextDecoration","textDecoration","getIconName","handleMenuAction","map","subItem"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Icon, Text } from '@tecsinapse/react-core';\nimport { SubMenuBlock } from './SubMenuBlock';\nimport { StyledRightComponent, StyledText } from '../styled';\nimport { StyledContainerItemText, StyledSubButton } from './styled';\nimport { ItemsOptions } from '../../types';\n\ninterface MenuItemProps {\n  title: string;\n  /** Wrapping component for element. This is used for navigation */\n  Component: ElementType;\n  /** Properties spread to wrapping Component */\n  props: any;\n  toggle: () => void;\n  rightComponents?: React.ReactNode;\n  items?: ItemsOptions[];\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({\n  title,\n  Component = 'a',\n  props = {},\n  rightComponents,\n  items,\n  toggle,\n}) => {\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const getIconName = () =>\n    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';\n\n  const handleMenuAction = () => setOpen(!open);\n\n  return (\n    <>\n      <StyledContainerItemText key={title}>\n        <Component {...props} style={noTextDecoration} onClick={toggle}>\n          <Text\n            colorVariant={open ? 'primary' : 'secondary'}\n            colorTone={open ? 'medium' : 'dark'}\n          >\n            <StyledText>{title}</StyledText>\n          </Text>\n        </Component>\n        {rightComponents && !items && (\n          <StyledRightComponent>{rightComponents}</StyledRightComponent>\n        )}\n        {items && (\n          <StyledSubButton onClick={handleMenuAction}>\n            <Icon\n              name={getIconName()}\n              type=\"material-community\"\n              fontColor=\"orange\"\n            />\n          </StyledSubButton>\n        )}\n      </StyledContainerItemText>\n      {open &&\n        items?.map(subItem => (\n          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />\n        ))}\n    </>\n  );\n};\n\nexport default MenuItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAcA,MAAMA,QAAiC,GAAG,CAAC;EACzCC,KADyC;EAEzCC,SAAS,GAAG,GAF6B;EAGzCC,KAAK,GAAG,EAHiC;EAIzCC,eAJyC;EAKzCC,KALyC;EAMzCC;AANyC,CAAD,KAOpC;EACJ,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBC,cAAA,CAAMC,QAAN,CAAwB,KAAxB,CAAxB;;EAEA,MAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;;EAEA,MAAMC,WAAW,GAAG,MAClBN,IAAI,GAAG,8BAAH,GAAoC,gCAD1C;;EAGA,MAAMO,gBAAgB,GAAG,MAAMN,OAAO,CAAC,CAACD,IAAF,CAAtC;;EAEA,OACE,4DACE,6BAAC,gCAAD;IAAyB,GAAG,EAAEN;EAA9B,GACE,6BAAC,SAAD,eAAeE,KAAf;IAAsB,KAAK,EAAEQ,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,6BAAC,eAAD;IACE,YAAY,EAAEC,IAAI,GAAG,SAAH,GAAe,WADnC;IAEE,SAAS,EAAEA,IAAI,GAAG,QAAH,GAAc;EAF/B,GAIE,6BAAC,kBAAD,QAAaN,KAAb,CAJF,CADF,CADF,EASGG,eAAe,IAAI,CAACC,KAApB,IACC,6BAAC,4BAAD,QAAuBD,eAAvB,CAVJ,EAYGC,KAAK,IACJ,6BAAC,wBAAD;IAAiB,OAAO,EAAES;EAA1B,GACE,6BAAC,eAAD;IACE,IAAI,EAAED,WAAW,EADnB;IAEE,IAAI,EAAC,oBAFP;IAGE,SAAS,EAAC;EAHZ,EADF,CAbJ,CADF,EAuBGN,IAAI,KACHF,KADG,aACHA,KADG,uBACHA,KAAK,CAAEU,GAAP,CAAWC,OAAO,IAChB,6BAAC,0BAAD;IAAc,GAAG,EAAEA,OAAO,CAACf,KAA3B;IAAkC,IAAI,EAAEe,OAAxC;IAAiD,MAAM,EAAEV;EAAzD,EADF,CADG,CAvBP,CADF;AA8BD,CA/CD;;eAiDeN,Q"}
+{"version":3,"file":"MenuItem.js","names":["MenuItem","title","Component","props","rightComponents","items","toggle","open","setOpen","React","useState","noTextDecoration","textDecoration","getIconName","handleMenuAction","map","subItem"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Icon, Text } from '@tecsinapse/react-core';\nimport { SubMenuBlock } from './SubMenuBlock';\nimport { StyledRightComponent, StyledText } from '../styled';\nimport { StyledContainerItemText, StyledSubButton } from './styled';\nimport { ItemsOptions } from '../../types';\n\ninterface MenuItemProps {\n  title: string;\n  /** Wrapping component for element. This is used for navigation */\n  Component: ElementType;\n  /** Properties spread to wrapping Component */\n  props: any;\n  toggle: () => void;\n  rightComponents?: React.ReactNode;\n  items?: ItemsOptions[];\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({\n  title,\n  Component = 'a',\n  props = {},\n  rightComponents,\n  items,\n  toggle,\n}) => {\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const getIconName = () =>\n    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';\n\n  const handleMenuAction = () => setOpen(!open);\n\n  return (\n    <>\n      <StyledContainerItemText key={title}>\n        <Component {...props} style={noTextDecoration} onClick={toggle}>\n          <Text\n            colorVariant={open ? 'primary' : 'secondary'}\n            colorTone={open ? 'medium' : 'dark'}\n          >\n            <StyledText>{title}</StyledText>\n          </Text>\n        </Component>\n        {rightComponents && !items && (\n          <StyledRightComponent>{rightComponents}</StyledRightComponent>\n        )}\n        {items && (\n          <StyledSubButton onClick={handleMenuAction}>\n            <Icon\n              name={getIconName()}\n              type=\"material-community\"\n              fontColor=\"orange\"\n            />\n          </StyledSubButton>\n        )}\n      </StyledContainerItemText>\n      {open &&\n        items?.map(subItem => (\n          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />\n        ))}\n    </>\n  );\n};\n\nexport default MenuItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAcA,MAAMA,QAAiC,GAAG,QAOpC;EAAA,IAPqC;IACzCC,KADyC;IAEzCC,SAAS,GAAG,GAF6B;IAGzCC,KAAK,GAAG,EAHiC;IAIzCC,eAJyC;IAKzCC,KALyC;IAMzCC;EANyC,CAOrC;;EACJ,MAAM,CAACC,IAAD,EAAOC,OAAP,IAAkBC,cAAA,CAAMC,QAAN,CAAwB,KAAxB,CAAxB;;EAEA,MAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;;EAEA,MAAMC,WAAW,GAAG,MAClBN,IAAI,GAAG,8BAAH,GAAoC,gCAD1C;;EAGA,MAAMO,gBAAgB,GAAG,MAAMN,OAAO,CAAC,CAACD,IAAF,CAAtC;;EAEA,OACE,4DACE,6BAAC,gCAAD;IAAyB,GAAG,EAAEN;EAA9B,GACE,6BAAC,SAAD,eAAeE,KAAf;IAAsB,KAAK,EAAEQ,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,6BAAC,eAAD;IACE,YAAY,EAAEC,IAAI,GAAG,SAAH,GAAe,WADnC;IAEE,SAAS,EAAEA,IAAI,GAAG,QAAH,GAAc;EAF/B,GAIE,6BAAC,kBAAD,QAAaN,KAAb,CAJF,CADF,CADF,EASGG,eAAe,IAAI,CAACC,KAApB,IACC,6BAAC,4BAAD,QAAuBD,eAAvB,CAVJ,EAYGC,KAAK,IACJ,6BAAC,wBAAD;IAAiB,OAAO,EAAES;EAA1B,GACE,6BAAC,eAAD;IACE,IAAI,EAAED,WAAW,EADnB;IAEE,IAAI,EAAC,oBAFP;IAGE,SAAS,EAAC;EAHZ,EADF,CAbJ,CADF,EAuBGN,IAAI,KACHF,KADG,aACHA,KADG,uBACHA,KAAK,CAAEU,GAAP,CAAWC,OAAO,IAChB,6BAAC,0BAAD;IAAc,GAAG,EAAEA,OAAO,CAACf,KAA3B;IAAkC,IAAI,EAAEe,OAAxC;IAAiD,MAAM,EAAEV;EAAzD,EADF,CADG,CAvBP,CADF;AA8BD,CA/CD;;eAiDeN,Q"}

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js

@@ -17,10 +17,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const SubMenuBlock = ({
-  data,
-  toggle
-}) => {
+const SubMenuBlock = _ref => {
+  let {
+    data,
+    toggle
+  } = _ref;
   const {
     Component,
     props,

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubMenuBlock.js","names":["SubMenuBlock","data","toggle","Component","props","rightComponents","title","noTextDecoration","textDecoration"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledRightComponent, StyledText } from '../../styled';\nimport { ItemsOptions } from '../../../types';\nimport { DummyBorder, StyledContainerItem } from './styled';\n\ninterface SubMenuBlockProps {\n  data: ItemsOptions;\n  toggle: () => void;\n}\n\nconst SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {\n  const { Component, props, rightComponents, title } = data;\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <StyledContainerItem>\n      <DummyBorder />\n      <Component {...props} style={noTextDecoration} onClick={toggle}>\n        <Text colorVariant=\"secondary\" colorTone=\"medium\" typography=\"sub\">\n          <StyledText>{title}</StyledText>\n        </Text>\n      </Component>\n      {rightComponents && (\n        <StyledRightComponent>{rightComponents}</StyledRightComponent>\n      )}\n    </StyledContainerItem>\n  );\n};\n\nexport default SubMenuBlock;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAOA,MAAMA,YAAyC,GAAG,CAAC;EAAEC,IAAF;EAAQC;AAAR,CAAD,KAAsB;EACtE,MAAM;IAAEC,SAAF;IAAaC,KAAb;IAAoBC,eAApB;IAAqCC;EAArC,IAA+CL,IAArD;EAEA,MAAMM,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,OACE,6BAAC,4BAAD,QACE,6BAAC,oBAAD,OADF,EAEE,6BAAC,SAAD,eAAeJ,KAAf;IAAsB,KAAK,EAAEG,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,6BAAC,eAAD;IAAM,YAAY,EAAC,WAAnB;IAA+B,SAAS,EAAC,QAAzC;IAAkD,UAAU,EAAC;EAA7D,GACE,6BAAC,kBAAD,QAAaI,KAAb,CADF,CADF,CAFF,EAOGD,eAAe,IACd,6BAAC,4BAAD,QAAuBA,eAAvB,CARJ,CADF;AAaD,CAlBD;;eAoBeL,Y"}
+{"version":3,"file":"SubMenuBlock.js","names":["SubMenuBlock","data","toggle","Component","props","rightComponents","title","noTextDecoration","textDecoration"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledRightComponent, StyledText } from '../../styled';\nimport { ItemsOptions } from '../../../types';\nimport { DummyBorder, StyledContainerItem } from './styled';\n\ninterface SubMenuBlockProps {\n  data: ItemsOptions;\n  toggle: () => void;\n}\n\nconst SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {\n  const { Component, props, rightComponents, title } = data;\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <StyledContainerItem>\n      <DummyBorder />\n      <Component {...props} style={noTextDecoration} onClick={toggle}>\n        <Text colorVariant=\"secondary\" colorTone=\"medium\" typography=\"sub\">\n          <StyledText>{title}</StyledText>\n        </Text>\n      </Component>\n      {rightComponents && (\n        <StyledRightComponent>{rightComponents}</StyledRightComponent>\n      )}\n    </StyledContainerItem>\n  );\n};\n\nexport default SubMenuBlock;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAOA,MAAMA,YAAyC,GAAG,QAAsB;EAAA,IAArB;IAAEC,IAAF;IAAQC;EAAR,CAAqB;EACtE,MAAM;IAAEC,SAAF;IAAaC,KAAb;IAAoBC,eAApB;IAAqCC;EAArC,IAA+CL,IAArD;EAEA,MAAMM,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,OACE,6BAAC,4BAAD,QACE,6BAAC,oBAAD,OADF,EAEE,6BAAC,SAAD,eAAeJ,KAAf;IAAsB,KAAK,EAAEG,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,6BAAC,eAAD;IAAM,YAAY,EAAC,WAAnB;IAA+B,SAAS,EAAC,QAAzC;IAAkD,UAAU,EAAC;EAA7D,GACE,6BAAC,kBAAD,QAAaI,KAAb,CADF,CADF,CAFF,EAOGD,eAAe,IACd,6BAAC,4BAAD,QAAuBA,eAAvB,CARJ,CADF;AAaD,CAlBD;;eAoBeL,Y"}

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.js

@@ -7,23 +7,29 @@ exports.StyledContainerItem = exports.DummyBorder = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
+var _templateObject, _templateObject2;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledContainerItem = (0, _styled.default)('div')`
-  display: flex;
-  align-items: center;
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledContainerItem = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 exports.StyledContainerItem = StyledContainerItem;
-const DummyBorder = (0, _styled.default)('div')`
-  height: ${({
-  theme
-}) => theme.typography.sub.fontSize};
-  border-left: ${({
-  theme
-}) => `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};
-  margin-right: ${({
-  theme
-}) => theme.spacing.mili};
-`;
+const DummyBorder = (0, _styled.default)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", ";\n  border-left: ", ";\n  margin-right: ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.typography.sub.fontSize;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.borderWidth.pico, " solid ").concat(theme.color.primary.medium);
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.spacing.mili;
+});
 exports.DummyBorder = DummyBorder;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledContainerItem","styled","DummyBorder","theme","typography","sub","fontSize","borderWidth","pico","color","primary","medium","spacing","mili"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItem = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  align-items: center;\n`;\n\nexport const DummyBorder = styled('div')<Partial<StyleProps>>`\n  height: ${({ theme }) => theme.typography.sub.fontSize};\n  border-left: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,mBAAmB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAmC;AACtE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,IAAAD,eAAA,EAAO,KAAP,CAAmC;AAC9D,YAAY,CAAC;EAAEE;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,GAAjB,CAAqBC,QAAS;AACzD,iBAAiB,CAAC;EAAEH;AAAF,CAAD,KACZ,GAAEA,KAAK,CAACI,WAAN,CAAkBC,IAAK,UAASL,KAAK,CAACM,KAAN,CAAYC,OAAZ,CAAoBC,MAAO,EAAE;AACpE,kBAAkB,CAAC;EAAER;AAAF,CAAD,KAAeA,KAAK,CAACS,OAAN,CAAcC,IAAK;AACpD,CALO"}
+{"version":3,"file":"styled.js","names":["StyledContainerItem","styled","DummyBorder","theme","typography","sub","fontSize","borderWidth","pico","color","primary","medium","spacing","mili"],"sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItem = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  align-items: center;\n`;\n\nexport const DummyBorder = styled('div')<Partial<StyleProps>>`\n  height: ${({ theme }) => theme.typography.sub.fontSize};\n  border-left: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AAGO,MAAMA,mBAAmB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAH,iHAAzB;;AAKA,MAAMC,WAAW,GAAG,IAAAD,eAAA,EAAO,KAAP,CAAH,wIACZ;EAAA,IAAC;IAAEE;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,UAAN,CAAiBC,GAAjB,CAAqBC,QAApC;AAAA,CADY,EAEP;EAAA,IAAC;IAAEH;EAAF,CAAD;EAAA,iBACVA,KAAK,CAACI,WAAN,CAAkBC,IADR,oBACsBL,KAAK,CAACM,KAAN,CAAYC,OAAZ,CAAoBC,MAD1C;AAAA,CAFO,EAIN;EAAA,IAAC;IAAER;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACS,OAAN,CAAcC,IAA7B;AAAA,CAJM,CAAjB"}

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/styled.js

@@ -7,27 +7,29 @@ exports.StyledSubButton = exports.StyledContainerItemText = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
+var _templateObject, _templateObject2;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledContainerItemText = (0, _styled.default)('div')`
-  margin-top: ${({
-  theme
-}) => theme.spacing.mili};
-  display: flex;
-  align-items: center;
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledContainerItemText = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  display: flex;\n  align-items: center;\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.spacing.mili;
+});
 exports.StyledContainerItemText = StyledContainerItemText;
-const StyledSubButton = (0, _styled.default)('span')`
-  padding-top: ${({
-  theme
-}) => theme.spacing.nano} 0 0 0;
-  margin-left: ${({
-  theme
-}) => theme.spacing.mili};
-  cursor: pointer;
-  & * {
-    user-select: none;
-  }
-`;
+const StyledSubButton = (0, _styled.default)('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding-top: ", " 0 0 0;\n  margin-left: ", ";\n  cursor: pointer;\n  & * {\n    user-select: none;\n  }\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing.nano;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.spacing.mili;
+});
 exports.StyledSubButton = StyledSubButton;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/Menubar/MenuBlock/MenuItem/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledContainerItemText","styled","theme","spacing","mili","StyledSubButton","nano"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItemText = styled('div')<Partial<StyleProps>>`\n  margin-top: ${({ theme }) => theme.spacing.mili};\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSubButton = styled('span')<Partial<StyleProps>>`\n  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;\n  margin-left: ${({ theme }) => theme.spacing.mili};\n  cursor: pointer;\n  & * {\n    user-select: none;\n  }\n`;\n"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,uBAAuB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAmC;AAC1E,gBAAgB,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAClD;AACA;AACA,CAJO;;AAMA,MAAMC,eAAe,GAAG,IAAAJ,eAAA,EAAO,MAAP,CAAoC;AACnE,iBAAiB,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcG,IAAK;AACnD,iBAAiB,CAAC;EAAEJ;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD;AACA;AACA;AACA;AACA,CAPO"}
+{"version":3,"file":"styled.js","names":["StyledContainerItemText","styled","theme","spacing","mili","StyledSubButton","nano"],"sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItemText = styled('div')<Partial<StyleProps>>`\n  margin-top: ${({ theme }) => theme.spacing.mili};\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSubButton = styled('span')<Partial<StyleProps>>`\n  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;\n  margin-left: ${({ theme }) => theme.spacing.mili};\n  cursor: pointer;\n  & * {\n    user-select: none;\n  }\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AAGO,MAAMA,uBAAuB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAH,uIACpB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CADoB,CAA7B;;AAMA,MAAMC,eAAe,GAAG,IAAAJ,eAAA,EAAO,MAAP,CAAH,sLACX;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcG,IAA7B;AAAA,CADW,EAEX;EAAA,IAAC;IAAEJ;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAFW,CAArB"}

package/dist/components/molecules/Menubar/MenuBlock/styled.js

@@ -9,44 +9,45 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledLeftComponent = (0, _styled.default)('div')`
-  margin-right: ${({
-  theme
-}) => theme.spacing.mili};
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledLeftComponent = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.spacing.mili;
+});
 exports.StyledLeftComponent = StyledLeftComponent;
-const StyledRightComponent = (0, _styled.default)('div')`
-  margin-left: ${({
-  theme
-}) => theme.spacing.mili};
-`;
+const StyledRightComponent = (0, _styled.default)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing.mili;
+});
 exports.StyledRightComponent = StyledRightComponent;
-const StyledContainerMenu = (0, _styled.default)('div')`
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-  border-bottom: ${({
-  theme
-}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)}`};
-  width: 100%;
-  padding-bottom: ${({
-  theme
-}) => theme.spacing.mili};
-`;
+const StyledContainerMenu = (0, _styled.default)('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ", ";\n  width: 100%;\n  padding-bottom: ", ";\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return "".concat(theme.borderWidth.pico, " solid ").concat((0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05));
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.spacing.mili;
+});
 exports.StyledContainerMenu = StyledContainerMenu;
-const StyledContainerItems = (0, _styled.default)('div')`
-  display: flex;
-  flex-direction: column;
-`;
+const StyledContainerItems = (0, _styled.default)('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.StyledContainerItems = StyledContainerItems;
-const StyledText = (0, _styled.default)('span')`
-  &:hover {
-    color: ${({
-  theme
-}) => theme.font.color.orange};
-  }
-`;
+const StyledText = (0, _styled.default)('span')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  &:hover {\n    color: ", ";\n  }\n"])), _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.font.color.orange;
+});
 exports.StyledText = StyledText;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/Menubar/MenuBlock/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledLeftComponent","styled","theme","spacing","mili","StyledRightComponent","StyledContainerMenu","borderWidth","pico","hex2rgba","miscellaneous","shadow","StyledContainerItems","StyledText","font","color","orange"],"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledLeftComponent = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledRightComponent = styled('div')<Partial<StyleProps>>`\n  margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerMenu = styled('div')<Partial<StyleProps>>`\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n  width: 100%;\n  padding-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerItems = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledText = styled('span')<Partial<StyleProps>>`\n  &:hover {\n    color: ${({ theme }) => theme.font.color.orange};\n  }\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,mBAAmB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAmC;AACtE,kBAAkB,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACpD,CAFO;;AAIA,MAAMC,oBAAoB,GAAG,IAAAJ,eAAA,EAAO,KAAP,CAAmC;AACvE,iBAAiB,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD,CAFO;;AAIA,MAAME,mBAAmB,GAAG,IAAAL,eAAA,EAAO,KAAP,CAAmC;AACtE;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAF,CAAD,KACd,GAAEA,KAAK,CAACK,WAAN,CAAkBC,IAAK,UAAS,IAAAC,mBAAA,EACjCP,KAAK,CAACQ,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACR;AACA,oBAAoB,CAAC;EAAET;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACtD,CAXO;;AAaA,MAAMQ,oBAAoB,GAAG,IAAAX,eAAA,EAAO,KAAP,CAAmC;AACvE;AACA;AACA,CAHO;;AAKA,MAAMY,UAAU,GAAG,IAAAZ,eAAA,EAAO,MAAP,CAAoC;AAC9D;AACA,aAAa,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACY,IAAN,CAAWC,KAAX,CAAiBC,MAAO;AACpD;AACA,CAJO"}
+{"version":3,"file":"styled.js","names":["StyledLeftComponent","styled","theme","spacing","mili","StyledRightComponent","StyledContainerMenu","borderWidth","pico","hex2rgba","miscellaneous","shadow","StyledContainerItems","StyledText","font","color","orange"],"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledLeftComponent = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledRightComponent = styled('div')<Partial<StyleProps>>`\n  margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerMenu = styled('div')<Partial<StyleProps>>`\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n  width: 100%;\n  padding-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerItems = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledText = styled('span')<Partial<StyleProps>>`\n  &:hover {\n    color: ${({ theme }) => theme.font.color.orange};\n  }\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAEO,MAAMA,mBAAmB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAH,+FACd;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CADc,CAAzB;;AAIA,MAAMC,oBAAoB,GAAG,IAAAJ,eAAA,EAAO,KAAP,CAAH,gGAChB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CADgB,CAA1B;;AAIA,MAAME,mBAAmB,GAAG,IAAAL,eAAA,EAAO,KAAP,CAAH,6MAIb;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,iBACZA,KAAK,CAACK,WAAN,CAAkBC,IADN,oBACoB,IAAAC,mBAAA,EACjCP,KAAK,CAACQ,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CADpB;AAAA,CAJa,EAUZ;EAAA,IAAC;IAAET;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAVY,CAAzB;;AAaA,MAAMQ,oBAAoB,GAAG,IAAAX,eAAA,EAAO,KAAP,CAAH,sHAA1B;;AAKA,MAAMY,UAAU,GAAG,IAAAZ,eAAA,EAAO,MAAP,CAAH,8GAEV;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACY,IAAN,CAAWC,KAAX,CAAiBC,MAAhC;AAAA,CAFU,CAAhB"}

package/dist/components/molecules/Menubar/Menubar.js

@@ -31,17 +31,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const Menubar = ({
-  leftComponents,
-  rightComponents,
-  searchPlaceholder = 'O quê você deseja buscar?',
-  options,
-  mostUsed,
-  mostUsedLabel = 'Mais acessados',
-  searchResultsLabel = 'Resultados da busca',
-  searchable = true,
-  ...rest
-}) => {
+const Menubar = _ref => {
+  let {
+    leftComponents,
+    rightComponents,
+    searchPlaceholder = 'O quê você deseja buscar?',
+    options,
+    mostUsed,
+    mostUsedLabel = 'Mais acessados',
+    searchResultsLabel = 'Resultados da busca',
+    searchable = true,
+    ...rest
+  } = _ref;
+
   const [search, setSearch] = _react.default.useState('');
 
   const [results, setResults] = _react.default.useState([]);
@@ -104,7 +106,7 @@ const Menubar = ({
   })) : _react.default.createElement(_styled.StyledSearchResultsContainer, null, _react.default.createElement(_styled.StyledSearchTextContainer, null, _react.default.createElement(_reactCore.Text, {
     fontWeight: "bold"
   }, searchResultsLabel)), results.map(result => _react.default.createElement(_SearchResultItem.SearchResultItem, {
-    key: `${result.title}-${result.category}`,
+    key: "".concat(result.title, "-").concat(result.category),
     data: result,
     searchTerm: search,
     toggle: toggleOpen

package/dist/components/molecules/Menubar/Menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menubar.js","names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","rest","search","setSearch","React","useState","results","setResults","input","setInput","useDebouncedState","open","setOpen","menuRef","useRef","useClickAwayListener","toggleOpen","useCallback","state","useEffect","filterAndTransform","ref","current","getInputContainerStyles","getContainerOpenMenuStyles","map","result","title","category"],"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n  getContainerOpenMenuStyles,\n  getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n  options: OptionsType[];\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  searchPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n  searchable = true,\n  ...rest\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState<string>('', setSearch);\n  const [open, setOpen] = React.useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  useClickAwayListener(menuRef, setOpen, 'mouseup');\n\n  const toggleOpen = React.useCallback(\n    () => setOpen(state => !state),\n    [setOpen]\n  );\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <div ref={ref => (menuRef.current = ref)} {...rest}>\n      <StyledMenuBar>\n        <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n          {!open ? (\n            <Icon\n              size=\"deca\"\n              name=\"menu\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          ) : (\n            <Icon\n              size=\"deca\"\n              name=\"close\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          )}\n        </StyledMenuButton>\n        {leftComponents}\n        <Transition in={open} timeout={250}>\n          {state => (\n            <StyledInputContainer style={getInputContainerStyles(state)}>\n              {searchable && (\n                <StyledInput\n                  placeholder={searchPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              )}\n            </StyledInputContainer>\n          )}\n        </Transition>\n        {rightComponents}\n      </StyledMenuBar>\n      <Transition in={open} timeout={250}>\n        {state => (\n          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n            {!search ? (\n              <>\n                {mostUsed && (\n                  <MostUsed\n                    label={mostUsedLabel}\n                    data={mostUsed}\n                    toggle={toggleOpen}\n                  />\n                )}\n                <MenuBlock options={options} toggle={toggleOpen} />\n              </>\n            ) : (\n              <StyledSearchResultsContainer>\n                <StyledSearchTextContainer>\n                  <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n                </StyledSearchTextContainer>\n                {results.map(result => (\n                  <SearchResultItem\n                    key={`${result.title}-${result.category}`}\n                    data={result}\n                    searchTerm={search}\n                    toggle={toggleOpen}\n                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </div>\n  );\n};\n\nexport default Menubar;\n"],"mappings":"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"}
+{"version":3,"file":"Menubar.js","names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","rest","search","setSearch","React","useState","results","setResults","input","setInput","useDebouncedState","open","setOpen","menuRef","useRef","useClickAwayListener","toggleOpen","useCallback","state","useEffect","filterAndTransform","ref","current","getInputContainerStyles","getContainerOpenMenuStyles","map","result","title","category"],"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n  getContainerOpenMenuStyles,\n  getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n  options: OptionsType[];\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  searchPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n  searchable = true,\n  ...rest\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState<string>('', setSearch);\n  const [open, setOpen] = React.useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  useClickAwayListener(menuRef, setOpen, 'mouseup');\n\n  const toggleOpen = React.useCallback(\n    () => setOpen(state => !state),\n    [setOpen]\n  );\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <div ref={ref => (menuRef.current = ref)} {...rest}>\n      <StyledMenuBar>\n        <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n          {!open ? (\n            <Icon\n              size=\"deca\"\n              name=\"menu\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          ) : (\n            <Icon\n              size=\"deca\"\n              name=\"close\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          )}\n        </StyledMenuButton>\n        {leftComponents}\n        <Transition in={open} timeout={250}>\n          {state => (\n            <StyledInputContainer style={getInputContainerStyles(state)}>\n              {searchable && (\n                <StyledInput\n                  placeholder={searchPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              )}\n            </StyledInputContainer>\n          )}\n        </Transition>\n        {rightComponents}\n      </StyledMenuBar>\n      <Transition in={open} timeout={250}>\n        {state => (\n          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n            {!search ? (\n              <>\n                {mostUsed && (\n                  <MostUsed\n                    label={mostUsedLabel}\n                    data={mostUsed}\n                    toggle={toggleOpen}\n                  />\n                )}\n                <MenuBlock options={options} toggle={toggleOpen} />\n              </>\n            ) : (\n              <StyledSearchResultsContainer>\n                <StyledSearchTextContainer>\n                  <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n                </StyledSearchTextContainer>\n                {results.map(result => (\n                  <SearchResultItem\n                    key={`${result.title}-${result.category}`}\n                    data={result}\n                    searchTerm={search}\n                    toggle={toggleOpen}\n                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </div>\n  );\n};\n\nexport default Menubar;\n"],"mappings":"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"}

package/dist/components/molecules/Menubar/MostUsed/MostUsed.js

@@ -15,36 +15,40 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const MostUsed = ({
-  data,
-  label,
-  toggle
-}) => {
+const MostUsed = _ref => {
+  let {
+    data,
+    label,
+    toggle
+  } = _ref;
   const noTextDecoration = {
     textDecoration: 'none'
   };
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactCore.Text, {
     fontWeight: "bold"
-  }, label), _react.default.createElement(_styled.StyledCardContainer, null, data.slice(0, 4).map(({
-    title,
-    category,
-    Component = 'a',
-    props = {}
-  }) => _react.default.createElement(Component, _extends({}, props, {
-    style: noTextDecoration,
-    key: `${title}-${category}`,
-    onClick: toggle
-  }), _react.default.createElement(_styled.StyledCard, {
-    elevated: true,
-    key: `${title}-${category}`
-  }, _react.default.createElement(_reactCore.Text, {
-    fontWeight: "bold",
-    colorVariant: "primary"
-  }, title), _react.default.createElement(_reactCore.Text, {
-    fontWeight: "bold",
-    colorVariant: "secondary",
-    typography: "label"
-  }, category))))));
+  }, label), _react.default.createElement(_styled.StyledCardContainer, null, data.slice(0, 4).map(_ref2 => {
+    let {
+      title,
+      category,
+      Component = 'a',
+      props = {}
+    } = _ref2;
+    return _react.default.createElement(Component, _extends({}, props, {
+      style: noTextDecoration,
+      key: "".concat(title, "-").concat(category),
+      onClick: toggle
+    }), _react.default.createElement(_styled.StyledCard, {
+      elevated: true,
+      key: "".concat(title, "-").concat(category)
+    }, _react.default.createElement(_reactCore.Text, {
+      fontWeight: "bold",
+      colorVariant: "primary"
+    }, title), _react.default.createElement(_reactCore.Text, {
+      fontWeight: "bold",
+      colorVariant: "secondary",
+      typography: "label"
+    }, category)));
+  })));
 };
 
 var _default = _react.default.memo(MostUsed);

package/dist/components/molecules/Menubar/MostUsed/MostUsed.js.map

@@ -1 +1 @@
-{"version":3,"file":"MostUsed.js","names":["MostUsed","data","label","toggle","noTextDecoration","textDecoration","slice","map","title","category","Component","props","React","memo"],"sources":["../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledCard, StyledCardContainer } from './styled';\nimport { MostUsedType } from '../types';\n\ninterface MostUsedProps {\n  data: MostUsedType[];\n  label: string;\n  toggle: () => void;\n}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <>\n      <Text fontWeight=\"bold\">{label}</Text>\n      <StyledCardContainer>\n        {data\n          .slice(0, 4)\n          .map(\n            ({\n              title,\n              category,\n              Component = 'a',\n              props = {},\n            }: MostUsedType) => (\n              <Component\n                {...props}\n                style={noTextDecoration}\n                key={`${title}-${category}`}\n                onClick={toggle}\n              >\n                <StyledCard elevated key={`${title}-${category}`}>\n                  <Text fontWeight=\"bold\" colorVariant=\"primary\">\n                    {title}\n                  </Text>\n                  <Text\n                    fontWeight=\"bold\"\n                    colorVariant=\"secondary\"\n                    typography=\"label\"\n                  >\n                    {category}\n                  </Text>\n                </StyledCard>\n              </Component>\n            )\n          )}\n      </StyledCardContainer>\n    </>\n  );\n};\n\nexport default React.memo(MostUsed);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AASA,MAAMA,QAAiC,GAAG,CAAC;EAAEC,IAAF;EAAQC,KAAR;EAAeC;AAAf,CAAD,KAA6B;EACrE,MAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,OACE,4DACE,6BAAC,eAAD;IAAM,UAAU,EAAC;EAAjB,GAAyBH,KAAzB,CADF,EAEE,6BAAC,2BAAD,QACGD,IAAI,CACFK,KADF,CACQ,CADR,EACW,CADX,EAEEC,GAFF,CAGG,CAAC;IACCC,KADD;IAECC,QAFD;IAGCC,SAAS,GAAG,GAHb;IAICC,KAAK,GAAG;EAJT,CAAD,KAME,6BAAC,SAAD,eACMA,KADN;IAEE,KAAK,EAAEP,gBAFT;IAGE,GAAG,EAAG,GAAEI,KAAM,IAAGC,QAAS,EAH5B;IAIE,OAAO,EAAEN;EAJX,IAME,6BAAC,kBAAD;IAAY,QAAQ,MAApB;IAAqB,GAAG,EAAG,GAAEK,KAAM,IAAGC,QAAS;EAA/C,GACE,6BAAC,eAAD;IAAM,UAAU,EAAC,MAAjB;IAAwB,YAAY,EAAC;EAArC,GACGD,KADH,CADF,EAIE,6BAAC,eAAD;IACE,UAAU,EAAC,MADb;IAEE,YAAY,EAAC,WAFf;IAGE,UAAU,EAAC;EAHb,GAKGC,QALH,CAJF,CANF,CATL,CADH,CAFF,CADF;AAqCD,CAxCD;;eA0CeG,cAAA,CAAMC,IAAN,CAAWb,QAAX,C"}
+{"version":3,"file":"MostUsed.js","names":["MostUsed","data","label","toggle","noTextDecoration","textDecoration","slice","map","title","category","Component","props","React","memo"],"sources":["../../../../../src/components/molecules/Menubar/MostUsed/MostUsed.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledCard, StyledCardContainer } from './styled';\nimport { MostUsedType } from '../types';\n\ninterface MostUsedProps {\n  data: MostUsedType[];\n  label: string;\n  toggle: () => void;\n}\n\nconst MostUsed: React.FC<MostUsedProps> = ({ data, label, toggle }) => {\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <>\n      <Text fontWeight=\"bold\">{label}</Text>\n      <StyledCardContainer>\n        {data\n          .slice(0, 4)\n          .map(\n            ({\n              title,\n              category,\n              Component = 'a',\n              props = {},\n            }: MostUsedType) => (\n              <Component\n                {...props}\n                style={noTextDecoration}\n                key={`${title}-${category}`}\n                onClick={toggle}\n              >\n                <StyledCard elevated key={`${title}-${category}`}>\n                  <Text fontWeight=\"bold\" colorVariant=\"primary\">\n                    {title}\n                  </Text>\n                  <Text\n                    fontWeight=\"bold\"\n                    colorVariant=\"secondary\"\n                    typography=\"label\"\n                  >\n                    {category}\n                  </Text>\n                </StyledCard>\n              </Component>\n            )\n          )}\n      </StyledCardContainer>\n    </>\n  );\n};\n\nexport default React.memo(MostUsed);\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AASA,MAAMA,QAAiC,GAAG,QAA6B;EAAA,IAA5B;IAAEC,IAAF;IAAQC,KAAR;IAAeC;EAAf,CAA4B;EACrE,MAAMC,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,OACE,4DACE,6BAAC,eAAD;IAAM,UAAU,EAAC;EAAjB,GAAyBH,KAAzB,CADF,EAEE,6BAAC,2BAAD,QACGD,IAAI,CACFK,KADF,CACQ,CADR,EACW,CADX,EAEEC,GAFF,CAGG;IAAA,IAAC;MACCC,KADD;MAECC,QAFD;MAGCC,SAAS,GAAG,GAHb;MAICC,KAAK,GAAG;IAJT,CAAD;IAAA,OAME,6BAAC,SAAD,eACMA,KADN;MAEE,KAAK,EAAEP,gBAFT;MAGE,GAAG,YAAKI,KAAL,cAAcC,QAAd,CAHL;MAIE,OAAO,EAAEN;IAJX,IAME,6BAAC,kBAAD;MAAY,QAAQ,MAApB;MAAqB,GAAG,YAAKK,KAAL,cAAcC,QAAd;IAAxB,GACE,6BAAC,eAAD;MAAM,UAAU,EAAC,MAAjB;MAAwB,YAAY,EAAC;IAArC,GACGD,KADH,CADF,EAIE,6BAAC,eAAD;MACE,UAAU,EAAC,MADb;MAEE,YAAY,EAAC,WAFf;MAGE,UAAU,EAAC;IAHb,GAKGC,QALH,CAJF,CANF,CANF;EAAA,CAHH,CADH,CAFF,CADF;AAqCD,CAxCD;;eA0CeG,cAAA,CAAMC,IAAN,CAAWb,QAAX,C"}

package/dist/components/molecules/Menubar/MostUsed/styled.js

@@ -11,35 +11,49 @@ var _reactCore = require("@tecsinapse/react-core");
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
+var _templateObject, _templateObject2;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledCardContainer = (0, _styled.default)('div')`
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-column-gap: ${({
-  theme
-}) => theme.spacing.mega};
-    margin-bottom: ${({
-  theme
-}) => theme.spacing.kilo};
-    margin-top: ${({
-  theme
-}) => theme.spacing.centi};
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledCardContainer = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-column-gap: ", ";\n    margin-bottom: ", ";\n    margin-top: ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.spacing.mega;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.spacing.kilo;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.spacing.centi;
+});
 exports.StyledCardContainer = StyledCardContainer;
-const StyledCard = (0, _native.default)(_reactCore.Card)`
-    padding-top: ${({
-  theme
-}) => theme.spacing.mili};
-    padding-bottom: ${({
-  theme
-}) => theme.spacing.mili};
-    padding-left: ${({
-  theme
-}) => theme.spacing.deca};
-    padding-right: ${({
-  theme
-}) => theme.spacing.deca};
-`;
+const StyledCard = (0, _native.default)(_reactCore.Card)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n"])), _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.spacing.mili;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.spacing.mili;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.spacing.deca;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.spacing.deca;
+});
 exports.StyledCard = StyledCard;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/Menubar/MostUsed/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledCardContainer","webStyled","theme","spacing","mega","kilo","centi","StyledCard","nativeStyled","Card","mili","deca"],"sources":["../../../../../src/components/molecules/Menubar/MostUsed/styled.ts"],"sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { Card, StyleProps } from '@tecsinapse/react-core';\nimport { default as nativeStyled } from '@emotion/native';\n\nexport const StyledCardContainer = webStyled('div')<Partial<StyleProps>>`\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-column-gap: ${({ theme }) => theme.spacing.mega};\n    margin-bottom: ${({ theme }) => theme.spacing.kilo};\n    margin-top: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledCard = nativeStyled(Card)<Partial<StyleProps>>`\n    padding-top: ${({ theme }) => theme.spacing.mili};\n    padding-bottom: ${({ theme }) => theme.spacing.mili};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    padding-right: ${({ theme }) => theme.spacing.deca};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,mBAAmB,GAAG,IAAAC,eAAA,EAAU,KAAV,CAAsC;AACzE;AACA;AACA,uBAAuB,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACzD,qBAAqB,CAAC;EAAEF;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcE,IAAK;AACvD,kBAAkB,CAAC;EAAEH;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcG,KAAM;AACrD,CANO;;AAQA,MAAMC,UAAU,GAAG,IAAAC,eAAA,EAAaC,eAAb,CAAwC;AAClE,mBAAmB,CAAC;EAAEP;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACrD,sBAAsB,CAAC;EAAER;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACxD,oBAAoB,CAAC;EAAER;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcQ,IAAK;AACtD,qBAAqB,CAAC;EAAET;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcQ,IAAK;AACvD,CALO"}
+{"version":3,"file":"styled.js","names":["StyledCardContainer","webStyled","theme","spacing","mega","kilo","centi","StyledCard","nativeStyled","Card","mili","deca"],"sources":["../../../../../src/components/molecules/Menubar/MostUsed/styled.ts"],"sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { Card, StyleProps } from '@tecsinapse/react-core';\nimport { default as nativeStyled } from '@emotion/native';\n\nexport const StyledCardContainer = webStyled('div')<Partial<StyleProps>>`\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-column-gap: ${({ theme }) => theme.spacing.mega};\n    margin-bottom: ${({ theme }) => theme.spacing.kilo};\n    margin-top: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledCard = nativeStyled(Card)<Partial<StyleProps>>`\n    padding-top: ${({ theme }) => theme.spacing.mili};\n    padding-bottom: ${({ theme }) => theme.spacing.mili};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    padding-right: ${({ theme }) => theme.spacing.deca};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,mBAAmB,GAAG,IAAAC,eAAA,EAAU,KAAV,CAAH,qNAGT;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcC,IAA7B;AAAA,CAHS,EAIX;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcE,IAA7B;AAAA,CAJW,EAKd;EAAA,IAAC;IAAEH;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcG,KAA7B;AAAA,CALc,CAAzB;;AAQA,MAAMC,UAAU,GAAG,IAAAC,eAAA,EAAaC,eAAb,CAAH,gLACJ;EAAA,IAAC;IAAEP;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CADI,EAED;EAAA,IAAC;IAAER;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcO,IAA7B;AAAA,CAFC,EAGH;EAAA,IAAC;IAAER;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcQ,IAA7B;AAAA,CAHG,EAIF;EAAA,IAAC;IAAET;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,OAAN,CAAcQ,IAA7B;AAAA,CAJE,CAAhB"}

package/dist/components/molecules/Menubar/SearchResultItem/SearchResultItem.js

@@ -17,11 +17,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const SearchResultItem = ({
-  data,
-  searchTerm,
-  toggle
-}) => {
+const SearchResultItem = _ref => {
+  let {
+    data,
+    searchTerm,
+    toggle
+  } = _ref;
   const {
     title,
     category,

package/dist/components/molecules/Menubar/SearchResultItem/SearchResultItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchResultItem.js","names":["SearchResultItem","data","searchTerm","toggle","title","category","Component","props","noTextDecoration","textDecoration","textProps","fontColor","fontWeight","highlight","HighlightText"],"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TextProps } from '@tecsinapse/react-core';\nimport { MostUsedType } from '../types';\nimport { StyledSearchItemContainer, HighlightText } from './styled';\nimport { highlight } from './utils';\n\ninterface SearchResultItem {\n  data: MostUsedType;\n  searchTerm: string;\n  toggle: () => void;\n}\n\nconst SearchResultItem: React.FC<SearchResultItem> = ({\n  data,\n  searchTerm,\n  toggle,\n}) => {\n  const { title, category, Component, props } = data;\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };\n\n  return (\n    <Component {...props} style={noTextDecoration} onClick={toggle}>\n      <StyledSearchItemContainer>\n        <Text typography=\"base\" colorVariant=\"secondary\" colorTone=\"dark\">\n          {highlight(searchTerm, title, HighlightText, textProps)}\n        </Text>\n        <Text\n          typography=\"sub\"\n          fontWeight=\"bold\"\n          colorVariant=\"secondary\"\n          colorTone=\"medium\"\n        >\n          {category}\n        </Text>\n      </StyledSearchItemContainer>\n    </Component>\n  );\n};\n\nexport default SearchResultItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAQA,MAAMA,gBAA4C,GAAG,CAAC;EACpDC,IADoD;EAEpDC,UAFoD;EAGpDC;AAHoD,CAAD,KAI/C;EACJ,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8BC;EAA9B,IAAwCN,IAA9C;EACA,MAAMO,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,MAAMC,SAAoB,GAAG;IAAEC,SAAS,EAAE,QAAb;IAAuBC,UAAU,EAAE;EAAnC,CAA7B;EAEA,OACE,6BAAC,SAAD,eAAeL,KAAf;IAAsB,KAAK,EAAEC,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,6BAAC,iCAAD,QACE,6BAAC,eAAD;IAAM,UAAU,EAAC,MAAjB;IAAwB,YAAY,EAAC,WAArC;IAAiD,SAAS,EAAC;EAA3D,GACG,IAAAU,gBAAA,EAAUX,UAAV,EAAsBE,KAAtB,EAA6BU,qBAA7B,EAA4CJ,SAA5C,CADH,CADF,EAIE,6BAAC,eAAD;IACE,UAAU,EAAC,KADb;IAEE,UAAU,EAAC,MAFb;IAGE,YAAY,EAAC,WAHf;IAIE,SAAS,EAAC;EAJZ,GAMGL,QANH,CAJF,CADF,CADF;AAiBD,CA3BD;;eA6BeL,gB"}
+{"version":3,"file":"SearchResultItem.js","names":["SearchResultItem","data","searchTerm","toggle","title","category","Component","props","noTextDecoration","textDecoration","textProps","fontColor","fontWeight","highlight","HighlightText"],"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/SearchResultItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, TextProps } from '@tecsinapse/react-core';\nimport { MostUsedType } from '../types';\nimport { StyledSearchItemContainer, HighlightText } from './styled';\nimport { highlight } from './utils';\n\ninterface SearchResultItem {\n  data: MostUsedType;\n  searchTerm: string;\n  toggle: () => void;\n}\n\nconst SearchResultItem: React.FC<SearchResultItem> = ({\n  data,\n  searchTerm,\n  toggle,\n}) => {\n  const { title, category, Component, props } = data;\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const textProps: TextProps = { fontColor: 'orange', fontWeight: 'bold' };\n\n  return (\n    <Component {...props} style={noTextDecoration} onClick={toggle}>\n      <StyledSearchItemContainer>\n        <Text typography=\"base\" colorVariant=\"secondary\" colorTone=\"dark\">\n          {highlight(searchTerm, title, HighlightText, textProps)}\n        </Text>\n        <Text\n          typography=\"sub\"\n          fontWeight=\"bold\"\n          colorVariant=\"secondary\"\n          colorTone=\"medium\"\n        >\n          {category}\n        </Text>\n      </StyledSearchItemContainer>\n    </Component>\n  );\n};\n\nexport default SearchResultItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAQA,MAAMA,gBAA4C,GAAG,QAI/C;EAAA,IAJgD;IACpDC,IADoD;IAEpDC,UAFoD;IAGpDC;EAHoD,CAIhD;EACJ,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8BC;EAA9B,IAAwCN,IAA9C;EACA,MAAMO,gBAAgB,GAAG;IAAEC,cAAc,EAAE;EAAlB,CAAzB;EAEA,MAAMC,SAAoB,GAAG;IAAEC,SAAS,EAAE,QAAb;IAAuBC,UAAU,EAAE;EAAnC,CAA7B;EAEA,OACE,6BAAC,SAAD,eAAeL,KAAf;IAAsB,KAAK,EAAEC,gBAA7B;IAA+C,OAAO,EAAEL;EAAxD,IACE,6BAAC,iCAAD,QACE,6BAAC,eAAD;IAAM,UAAU,EAAC,MAAjB;IAAwB,YAAY,EAAC,WAArC;IAAiD,SAAS,EAAC;EAA3D,GACG,IAAAU,gBAAA,EAAUX,UAAV,EAAsBE,KAAtB,EAA6BU,qBAA7B,EAA4CJ,SAA5C,CADH,CADF,EAIE,6BAAC,eAAD;IACE,UAAU,EAAC,KADb;IAEE,UAAU,EAAC,MAFb;IAGE,YAAY,EAAC,WAHf;IAIE,SAAS,EAAC;EAJZ,GAMGL,QANH,CAJF,CADF,CADF;AAiBD,CA3BD;;eA6BeL,gB"}