@tecsinapse/react-web-kit 1.20.2 → 1.21.0

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"}

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

@@ -11,24 +11,29 @@ var _native = _interopRequireDefault(require("@emotion/native"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _templateObject, _templateObject2;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledSearchItemContainer = (0, _styled.default)('div')`
-  display: flex;
-  flex-direction: column;
-  padding: ${({
-  theme
-}) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};
-  border-top: ${({
-  theme
-}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)}`};
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledSearchItemContainer = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: ", ";\n  border-top: ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return "".concat(theme.spacing.mili, " 0 ").concat(theme.spacing.centi, " 0");
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.borderWidth.pico, " solid ").concat((0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05));
+});
 exports.StyledSearchItemContainer = StyledSearchItemContainer;
-const HighlightText = (0, _native.default)(_reactCore.Text)`
-  text-decoration: underline;
-  text-decoration-color: ${({
-  theme
-}) => theme.font.color.orange};
-`;
+const HighlightText = (0, _native.default)(_reactCore.Text)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-decoration: underline;\n  text-decoration-color: ", ";\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.font.color.orange;
+});
 exports.HighlightText = HighlightText;
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledSearchItemContainer","styled","theme","spacing","mili","centi","borderWidth","pico","hex2rgba","miscellaneous","shadow","HighlightText","nativeStyled","Text","font","color","orange"],"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps, Text } from '@tecsinapse/react-core';\n\nexport const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};\n  border-top: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n`;\n\nexport const HighlightText = nativeStyled(Text)<Partial<StyleProps>>`\n  text-decoration: underline;\n  text-decoration-color: ${({ theme }) => theme.font.color.orange};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,yBAAyB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAmC;AAC5E;AACA;AACA,aAAa,CAAC;EAAEC;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcC,IAAK,MAAKF,KAAK,CAACC,OAAN,CAAcE,KAAM,IAAI;AAC/E,gBAAgB,CAAC;EAAEH;AAAF,CAAD,KACX,GAAEA,KAAK,CAACI,WAAN,CAAkBC,IAAK,UAAS,IAAAC,mBAAA,EACjCN,KAAK,CAACO,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACR,CATO;;AAWA,MAAMC,aAAa,GAAG,IAAAC,eAAA,EAAaC,eAAb,CAAwC;AACrE;AACA,2BAA2B,CAAC;EAAEX;AAAF,CAAD,KAAeA,KAAK,CAACY,IAAN,CAAWC,KAAX,CAAiBC,MAAO;AAClE,CAHO"}
+{"version":3,"file":"styled.js","names":["StyledSearchItemContainer","styled","theme","spacing","mili","centi","borderWidth","pico","hex2rgba","miscellaneous","shadow","HighlightText","nativeStyled","Text","font","color","orange"],"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps, Text } from '@tecsinapse/react-core';\n\nexport const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};\n  border-top: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n`;\n\nexport const HighlightText = nativeStyled(Text)<Partial<StyleProps>>`\n  text-decoration: underline;\n  text-decoration-color: ${({ theme }) => theme.font.color.orange};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,yBAAyB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAH,4JAGzB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,iBAAkBA,KAAK,CAACC,OAAN,CAAcC,IAAhC,gBAA0CF,KAAK,CAACC,OAAN,CAAcE,KAAxD;AAAA,CAHyB,EAItB;EAAA,IAAC;IAAEH;EAAF,CAAD;EAAA,iBACTA,KAAK,CAACI,WAAN,CAAkBC,IADT,oBACuB,IAAAC,mBAAA,EACjCN,KAAK,CAACO,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CADvB;AAAA,CAJsB,CAA/B;;AAWA,MAAMC,aAAa,GAAG,IAAAC,eAAA,EAAaC,eAAb,CAAH,yIAEC;EAAA,IAAC;IAAEX;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACY,IAAN,CAAWC,KAAX,CAAiBC,MAAhC;AAAA,CAFD,CAAnB"}

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

@@ -30,7 +30,7 @@ const matchSpliter = (str, indexes, size) => {
 const stringMatcher = (searchTerm, textToReplace) => {
   const s = normalize(searchTerm);
   const tx = normalize(textToReplace);
-  const r = new RegExp(`(${s})`, 'g');
+  const r = new RegExp("(".concat(s, ")"), 'g');
   return Array.from(tx.matchAll(r));
 };
 
@@ -48,7 +48,7 @@ const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
   const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
   return splited.map((value, idx) => {
     return normalize(value) === search ? _react.default.createElement(Component, _extends({
-      key: `highlight-${value}${idx}`
+      key: "highlight-".concat(value).concat(idx)
     }, props), value) : _react.default.createElement(_react.default.Fragment, null, value);
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["normalize","str","replace","toLowerCase","matchSpliter","indexes","size","result","currentIndex","forEach","index","push","substring","length","filter","e","stringMatcher","searchTerm","textToReplace","s","tx","r","RegExp","Array","from","matchAll","highlightReplacer","Component","props","search","matches","map","match","splited","value","idx","highlight"],"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/utils.tsx"],"sourcesContent":["import React from 'react';\n\nconst normalize = (str: string): string => {\n  return str\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    .replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, ' ')\n    .toLowerCase();\n};\n\nconst matchSpliter = (\n  str: string,\n  indexes: number[],\n  size: number\n): string[] => {\n  const result: string[] = [];\n  let currentIndex = 0;\n\n  indexes.forEach((index: number) => {\n    result.push(str.substring(currentIndex, index));\n    result.push(str.substring(index, index + size));\n    currentIndex = index + size;\n  });\n\n  result.push(str.substring(currentIndex, str.length));\n\n  return result.filter(e => e);\n};\n\nexport const stringMatcher = (\n  searchTerm: string,\n  textToReplace: string\n): RegExpMatchArray[] => {\n  const s = normalize(searchTerm);\n  const tx = normalize(textToReplace);\n\n  const r = new RegExp(`(${s})`, 'g');\n\n  return Array.from(tx.matchAll(r));\n};\n\nconst highlightReplacer = <T,>(\n  searchTerm: string,\n  textToReplace: string,\n  Component: React.ElementType,\n  props: T\n): React.ReactNode => {\n  const search = normalize(searchTerm);\n  const matches = stringMatcher(searchTerm, textToReplace);\n\n  if (matches.length <= 0) {\n    return textToReplace;\n  }\n\n  const indexes: number[] = matches.map(match => match.index) as number[];\n  const splited = matchSpliter(textToReplace, indexes, searchTerm.length);\n\n  return splited.map((value, idx) => {\n    return normalize(value) === search ? (\n      <Component key={`highlight-${value}${idx}`} {...props}>\n        {value}\n      </Component>\n    ) : (\n      <>{value}</>\n    );\n  });\n};\n\nexport const highlight = <T,>(\n  searchTerm: string,\n  textToReplace: string,\n  Component: React.ElementType,\n  props: T\n): React.ReactNode => {\n  if (textToReplace && searchTerm) {\n    return highlightReplacer(searchTerm, textToReplace, Component, props);\n  }\n\n  return textToReplace;\n};\n"],"mappings":";;;;;;;AAAA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAAyB;EACzC,OAAOA,GAAG,CACPD,SADI,CACM,KADN,EAEJE,OAFI,CAEI,kBAFJ,EAEwB,EAFxB,EAGJA,OAHI,CAGI,wBAHJ,EAG8B,GAH9B,EAIJC,WAJI,EAAP;AAKD,CAND;;AAQA,MAAMC,YAAY,GAAG,CACnBH,GADmB,EAEnBI,OAFmB,EAGnBC,IAHmB,KAIN;EACb,MAAMC,MAAgB,GAAG,EAAzB;EACA,IAAIC,YAAY,GAAG,CAAnB;EAEAH,OAAO,CAACI,OAAR,CAAiBC,KAAD,IAAmB;IACjCH,MAAM,CAACI,IAAP,CAAYV,GAAG,CAACW,SAAJ,CAAcJ,YAAd,EAA4BE,KAA5B,CAAZ;IACAH,MAAM,CAACI,IAAP,CAAYV,GAAG,CAACW,SAAJ,CAAcF,KAAd,EAAqBA,KAAK,GAAGJ,IAA7B,CAAZ;IACAE,YAAY,GAAGE,KAAK,GAAGJ,IAAvB;EACD,CAJD;EAMAC,MAAM,CAACI,IAAP,CAAYV,GAAG,CAACW,SAAJ,CAAcJ,YAAd,EAA4BP,GAAG,CAACY,MAAhC,CAAZ;EAEA,OAAON,MAAM,CAACO,MAAP,CAAcC,CAAC,IAAIA,CAAnB,CAAP;AACD,CAjBD;;AAmBO,MAAMC,aAAa,GAAG,CAC3BC,UAD2B,EAE3BC,aAF2B,KAGJ;EACvB,MAAMC,CAAC,GAAGnB,SAAS,CAACiB,UAAD,CAAnB;EACA,MAAMG,EAAE,GAAGpB,SAAS,CAACkB,aAAD,CAApB;EAEA,MAAMG,CAAC,GAAG,IAAIC,MAAJ,CAAY,IAAGH,CAAE,GAAjB,EAAqB,GAArB,CAAV;EAEA,OAAOI,KAAK,CAACC,IAAN,CAAWJ,EAAE,CAACK,QAAH,CAAYJ,CAAZ,CAAX,CAAP;AACD,CAVM;;;;AAYP,MAAMK,iBAAiB,GAAG,CACxBT,UADwB,EAExBC,aAFwB,EAGxBS,SAHwB,EAIxBC,KAJwB,KAKJ;EACpB,MAAMC,MAAM,GAAG7B,SAAS,CAACiB,UAAD,CAAxB;EACA,MAAMa,OAAO,GAAGd,aAAa,CAACC,UAAD,EAAaC,aAAb,CAA7B;;EAEA,IAAIY,OAAO,CAACjB,MAAR,IAAkB,CAAtB,EAAyB;IACvB,OAAOK,aAAP;EACD;;EAED,MAAMb,OAAiB,GAAGyB,OAAO,CAACC,GAAR,CAAYC,KAAK,IAAIA,KAAK,CAACtB,KAA3B,CAA1B;EACA,MAAMuB,OAAO,GAAG7B,YAAY,CAACc,aAAD,EAAgBb,OAAhB,EAAyBY,UAAU,CAACJ,MAApC,CAA5B;EAEA,OAAOoB,OAAO,CAACF,GAAR,CAAY,CAACG,KAAD,EAAQC,GAAR,KAAgB;IACjC,OAAOnC,SAAS,CAACkC,KAAD,CAAT,KAAqBL,MAArB,GACL,6BAAC,SAAD;MAAW,GAAG,EAAG,aAAYK,KAAM,GAAEC,GAAI;IAAzC,GAAgDP,KAAhD,GACGM,KADH,CADK,GAKL,4DAAGA,KAAH,CALF;EAOD,CARM,CAAP;AASD,CAzBD;;AA2BO,MAAME,SAAS,GAAG,CACvBnB,UADuB,EAEvBC,aAFuB,EAGvBS,SAHuB,EAIvBC,KAJuB,KAKH;EACpB,IAAIV,aAAa,IAAID,UAArB,EAAiC;IAC/B,OAAOS,iBAAiB,CAACT,UAAD,EAAaC,aAAb,EAA4BS,SAA5B,EAAuCC,KAAvC,CAAxB;EACD;;EAED,OAAOV,aAAP;AACD,CAXM"}
+{"version":3,"file":"utils.js","names":["normalize","str","replace","toLowerCase","matchSpliter","indexes","size","result","currentIndex","forEach","index","push","substring","length","filter","e","stringMatcher","searchTerm","textToReplace","s","tx","r","RegExp","Array","from","matchAll","highlightReplacer","Component","props","search","matches","map","match","splited","value","idx","highlight"],"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/utils.tsx"],"sourcesContent":["import React from 'react';\n\nconst normalize = (str: string): string => {\n  return str\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    .replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, ' ')\n    .toLowerCase();\n};\n\nconst matchSpliter = (\n  str: string,\n  indexes: number[],\n  size: number\n): string[] => {\n  const result: string[] = [];\n  let currentIndex = 0;\n\n  indexes.forEach((index: number) => {\n    result.push(str.substring(currentIndex, index));\n    result.push(str.substring(index, index + size));\n    currentIndex = index + size;\n  });\n\n  result.push(str.substring(currentIndex, str.length));\n\n  return result.filter(e => e);\n};\n\nexport const stringMatcher = (\n  searchTerm: string,\n  textToReplace: string\n): RegExpMatchArray[] => {\n  const s = normalize(searchTerm);\n  const tx = normalize(textToReplace);\n\n  const r = new RegExp(`(${s})`, 'g');\n\n  return Array.from(tx.matchAll(r));\n};\n\nconst highlightReplacer = <T,>(\n  searchTerm: string,\n  textToReplace: string,\n  Component: React.ElementType,\n  props: T\n): React.ReactNode => {\n  const search = normalize(searchTerm);\n  const matches = stringMatcher(searchTerm, textToReplace);\n\n  if (matches.length <= 0) {\n    return textToReplace;\n  }\n\n  const indexes: number[] = matches.map(match => match.index) as number[];\n  const splited = matchSpliter(textToReplace, indexes, searchTerm.length);\n\n  return splited.map((value, idx) => {\n    return normalize(value) === search ? (\n      <Component key={`highlight-${value}${idx}`} {...props}>\n        {value}\n      </Component>\n    ) : (\n      <>{value}</>\n    );\n  });\n};\n\nexport const highlight = <T,>(\n  searchTerm: string,\n  textToReplace: string,\n  Component: React.ElementType,\n  props: T\n): React.ReactNode => {\n  if (textToReplace && searchTerm) {\n    return highlightReplacer(searchTerm, textToReplace, Component, props);\n  }\n\n  return textToReplace;\n};\n"],"mappings":";;;;;;;AAAA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAAyB;EACzC,OAAOA,GAAG,CACPD,SADI,CACM,KADN,EAEJE,OAFI,CAEI,kBAFJ,EAEwB,EAFxB,EAGJA,OAHI,CAGI,wBAHJ,EAG8B,GAH9B,EAIJC,WAJI,EAAP;AAKD,CAND;;AAQA,MAAMC,YAAY,GAAG,CACnBH,GADmB,EAEnBI,OAFmB,EAGnBC,IAHmB,KAIN;EACb,MAAMC,MAAgB,GAAG,EAAzB;EACA,IAAIC,YAAY,GAAG,CAAnB;EAEAH,OAAO,CAACI,OAAR,CAAiBC,KAAD,IAAmB;IACjCH,MAAM,CAACI,IAAP,CAAYV,GAAG,CAACW,SAAJ,CAAcJ,YAAd,EAA4BE,KAA5B,CAAZ;IACAH,MAAM,CAACI,IAAP,CAAYV,GAAG,CAACW,SAAJ,CAAcF,KAAd,EAAqBA,KAAK,GAAGJ,IAA7B,CAAZ;IACAE,YAAY,GAAGE,KAAK,GAAGJ,IAAvB;EACD,CAJD;EAMAC,MAAM,CAACI,IAAP,CAAYV,GAAG,CAACW,SAAJ,CAAcJ,YAAd,EAA4BP,GAAG,CAACY,MAAhC,CAAZ;EAEA,OAAON,MAAM,CAACO,MAAP,CAAcC,CAAC,IAAIA,CAAnB,CAAP;AACD,CAjBD;;AAmBO,MAAMC,aAAa,GAAG,CAC3BC,UAD2B,EAE3BC,aAF2B,KAGJ;EACvB,MAAMC,CAAC,GAAGnB,SAAS,CAACiB,UAAD,CAAnB;EACA,MAAMG,EAAE,GAAGpB,SAAS,CAACkB,aAAD,CAApB;EAEA,MAAMG,CAAC,GAAG,IAAIC,MAAJ,YAAeH,CAAf,QAAqB,GAArB,CAAV;EAEA,OAAOI,KAAK,CAACC,IAAN,CAAWJ,EAAE,CAACK,QAAH,CAAYJ,CAAZ,CAAX,CAAP;AACD,CAVM;;;;AAYP,MAAMK,iBAAiB,GAAG,CACxBT,UADwB,EAExBC,aAFwB,EAGxBS,SAHwB,EAIxBC,KAJwB,KAKJ;EACpB,MAAMC,MAAM,GAAG7B,SAAS,CAACiB,UAAD,CAAxB;EACA,MAAMa,OAAO,GAAGd,aAAa,CAACC,UAAD,EAAaC,aAAb,CAA7B;;EAEA,IAAIY,OAAO,CAACjB,MAAR,IAAkB,CAAtB,EAAyB;IACvB,OAAOK,aAAP;EACD;;EAED,MAAMb,OAAiB,GAAGyB,OAAO,CAACC,GAAR,CAAYC,KAAK,IAAIA,KAAK,CAACtB,KAA3B,CAA1B;EACA,MAAMuB,OAAO,GAAG7B,YAAY,CAACc,aAAD,EAAgBb,OAAhB,EAAyBY,UAAU,CAACJ,MAApC,CAA5B;EAEA,OAAOoB,OAAO,CAACF,GAAR,CAAY,CAACG,KAAD,EAAQC,GAAR,KAAgB;IACjC,OAAOnC,SAAS,CAACkC,KAAD,CAAT,KAAqBL,MAArB,GACL,6BAAC,SAAD;MAAW,GAAG,sBAAeK,KAAf,SAAuBC,GAAvB;IAAd,GAAgDP,KAAhD,GACGM,KADH,CADK,GAKL,4DAAGA,KAAH,CALF;EAOD,CARM,CAAP;AASD,CAzBD;;AA2BO,MAAME,SAAS,GAAG,CACvBnB,UADuB,EAEvBC,aAFuB,EAGvBS,SAHuB,EAIvBC,KAJuB,KAKH;EACpB,IAAIV,aAAa,IAAID,UAArB,EAAiC;IAC/B,OAAOS,iBAAiB,CAACT,UAAD,EAAaC,aAAb,EAA4BS,SAA5B,EAAuCC,KAAvC,CAAxB;EACD;;EAED,OAAOV,aAAP;AACD,CAXM"}