@tecsinapse/react-web-kit 1.23.8 → 2.0.0

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

@@ -1,21 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('@emotion/styled');
 var reactCore = require('@tecsinapse/react-core');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledLeftComponent = styled__default["default"]("div")`
+const StyledLeftComponent = styled("div")`
   margin-right: ${({ theme }) => theme.spacing.mili};
 `;
-const StyledRightComponent = styled__default["default"]("div")`
+const StyledRightComponent = styled("div")`
   margin-left: ${({ theme }) => theme.spacing.mili};
 `;
-const StyledContainerMenu = styled__default["default"]("div")`
+const StyledContainerMenu = styled("div")`
   flex-direction: row;
   display: flex;
   align-items: center;
@@ -26,11 +20,11 @@ const StyledContainerMenu = styled__default["default"]("div")`
   width: 100%;
   padding-bottom: ${({ theme }) => theme.spacing.mili};
 `;
-const StyledContainerItems = styled__default["default"]("div")`
+const StyledContainerItems = styled("div")`
   display: flex;
   flex-direction: column;
 `;
-const StyledText = styled__default["default"]("span")`
+const StyledText = styled("span")`
   &:hover {
     color: ${({ theme }) => theme.font.color.orange};
   }

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","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"],"names":["styled","hex2rgba"],"mappings":";;;;;;;;;;;AAGa,MAAA,mBAAA,GAAsBA,2BAAO,KAAK,CAAA,CAAA;AAAA,gBAAA,EAC7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,oBAAA,GAAuBA,2BAAO,KAAK,CAAA,CAAA;AAAA,eAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGjC,MAAA,mBAAA,GAAsBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,iBAAA,EAI5B,CAAC,EAAE,KAAA,OAClB,CAAG,EAAA,KAAA,CAAM,YAAY,IAAc,CAAA,OAAA,EAAAC,kBAAA;AAAA,EACjC,MAAM,aAAc,CAAA,MAAA;AAAA,EACpB,IAAA;AACF,CAAA,CAAA,CAAA,CAAA;AAAA;AAAA,kBAAA,EAEgB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGpC,MAAA,oBAAA,GAAuBD,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKnC,MAAA,UAAA,GAAaA,2BAAO,MAAM,CAAA,CAAA;AAAA;AAAA,WAAA,EAE1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,MAAA,CAAA;AAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"styled.js","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"],"names":["hex2rgba"],"mappings":";;;;;AAGa,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAAA,gBAAA,EAC7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,oBAAA,GAAuB,OAAO,KAAK,CAAA,CAAA;AAAA,eAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGjC,MAAA,mBAAA,GAAsB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,iBAAA,EAI5B,CAAC,EAAE,KAAA,OAClB,CAAG,EAAA,KAAA,CAAM,YAAY,IAAc,CAAA,OAAA,EAAAA,kBAAA;AAAA,EACjC,MAAM,aAAc,CAAA,MAAA;AAAA,EACpB,IAAA;AACF,CAAA,CAAA,CAAA,CAAA;AAAA;AAAA,kBAAA,EAEgB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,EAAA;AAGpC,MAAA,oBAAA,GAAuB,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKnC,MAAA,UAAA,GAAa,OAAO,MAAM,CAAA,CAAA;AAAA;AAAA,WAAA,EAE1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,MAAA,CAAA;AAAA;AAAA;;;;;;;;"}

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

@@ -11,10 +11,6 @@ var utils = require('./utils.js');
 var animations = require('./animations.js');
 var useClickAwayListener = require('../../../hooks/useClickAwayListener.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const Menubar = ({
   leftComponents,
   rightComponents,
@@ -26,71 +22,61 @@ const Menubar = ({
   searchable = true,
   ...rest
 }) => {
-  const [search, setSearch] = React__default["default"].useState("");
-  const [results, setResults] = React__default["default"].useState([]);
+  const [search, setSearch] = React.useState("");
+  const [results, setResults] = React.useState([]);
   const [input, setInput] = reactCore.useDebouncedState("", setSearch);
-  const [open, setOpen] = React__default["default"].useState(false);
+  const [open, setOpen] = React.useState(false);
   const menuRef = React.useRef(null);
   useClickAwayListener.useClickAwayListener(menuRef, setOpen, "mouseup");
-  const toggleOpen = React__default["default"].useCallback(
+  const toggleOpen = React.useCallback(
     () => setOpen((state) => !state),
     [setOpen]
   );
-  React__default["default"].useEffect(() => {
+  React.useEffect(() => {
     if (search === "")
       return;
     setResults(utils.filterAndTransform(options, search));
   }, [search]);
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    ref: (ref) => menuRef.current = ref,
-    ...rest
-  }, /* @__PURE__ */ React__default["default"].createElement(styled.StyledMenuBar, null, /* @__PURE__ */ React__default["default"].createElement(styled.StyledMenuButton, {
-    variant: "filled",
-    color: "primary",
-    onPress: toggleOpen
-  }, !open ? /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
-    size: "deca",
-    name: "menu",
-    type: "material-community",
-    fontColor: "light"
-  }) : /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
-    size: "deca",
-    name: "close",
-    type: "material-community",
-    fontColor: "light"
-  })), leftComponents, /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
-    in: open,
-    timeout: 250
-  }, (state) => /* @__PURE__ */ React__default["default"].createElement(styled.StyledInputContainer, {
-    style: animations.getInputContainerStyles(state)
-  }, searchable && /* @__PURE__ */ React__default["default"].createElement(styled.StyledInput, {
-    placeholder: searchPlaceholder,
-    leftComponent: /* @__PURE__ */ React__default["default"].createElement(styled.StyledIconInput, null, /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
-      name: "magnify",
-      type: "material-community"
-    })),
-    value: input,
-    onChange: setInput
-  }))), rightComponents), /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
-    in: open,
-    timeout: 250
-  }, (state) => /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerOpenMenu, {
-    style: animations.getContainerOpenMenuStyles(state)
-  }, !search ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, mostUsed && /* @__PURE__ */ React__default["default"].createElement(MostUsed, {
-    label: mostUsedLabel,
-    data: mostUsed,
-    toggle: toggleOpen
-  }), /* @__PURE__ */ React__default["default"].createElement(MenuBlock, {
-    options,
-    toggle: toggleOpen
-  })) : /* @__PURE__ */ React__default["default"].createElement(styled.StyledSearchResultsContainer, null, /* @__PURE__ */ React__default["default"].createElement(styled.StyledSearchTextContainer, null, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
-    fontWeight: "bold"
-  }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React__default["default"].createElement(SearchResultItem, {
-    key: `${result.title}-${result.category}`,
-    data: result,
-    searchTerm: search,
-    toggle: toggleOpen
-  }))))));
+  return /* @__PURE__ */ React.createElement("div", { ref: (ref) => menuRef.current = ref, ...rest }, /* @__PURE__ */ React.createElement(styled.StyledMenuBar, null, /* @__PURE__ */ React.createElement(styled.StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen }, !open ? /* @__PURE__ */ React.createElement(
+    reactCore.Icon,
+    {
+      size: "deca",
+      name: "menu",
+      type: "material-community",
+      fontColor: "light"
+    }
+  ) : /* @__PURE__ */ React.createElement(
+    reactCore.Icon,
+    {
+      size: "deca",
+      name: "close",
+      type: "material-community",
+      fontColor: "light"
+    }
+  )), leftComponents, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250 }, (state) => /* @__PURE__ */ React.createElement(styled.StyledInputContainer, { style: animations.getInputContainerStyles(state) }, searchable && /* @__PURE__ */ React.createElement(
+    styled.StyledInput,
+    {
+      placeholder: searchPlaceholder,
+      leftComponent: /* @__PURE__ */ React.createElement(styled.StyledIconInput, null, /* @__PURE__ */ React.createElement(reactCore.Icon, { name: "magnify", type: "material-community" })),
+      value: input,
+      onChange: setInput
+    }
+  ))), rightComponents), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250 }, (state) => /* @__PURE__ */ React.createElement(styled.StyledContainerOpenMenu, { style: animations.getContainerOpenMenuStyles(state) }, !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(
+    MostUsed,
+    {
+      label: mostUsedLabel,
+      data: mostUsed,
+      toggle: toggleOpen
+    }
+  ), /* @__PURE__ */ React.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React.createElement(styled.StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(styled.StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(
+    SearchResultItem,
+    {
+      key: `${result.title}-${result.category}`,
+      data: result,
+      searchTerm: search,
+      toggle: toggleOpen
+    }
+  ))))));
 };
 
 module.exports = Menubar;

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

@@ -1 +1 @@
-{"version":3,"file":"Menubar.js","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"],"names":["React","useDebouncedState","useRef","useClickAwayListener","filterAndTransform","StyledMenuBar","StyledMenuButton","Icon","Transition","StyledInputContainer","getInputContainerStyles","StyledInput","StyledIconInput","StyledContainerOpenMenu","getContainerOpenMenuStyles","StyledSearchResultsContainer","StyledSearchTextContainer","Text"],"mappings":"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"}
+{"version":3,"file":"Menubar.js","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"],"names":["useDebouncedState","useRef","useClickAwayListener","filterAndTransform","StyledMenuBar","StyledMenuButton","Icon","Transition","StyledInputContainer","getInputContainerStyles","StyledInput","StyledIconInput","StyledContainerOpenMenu","getContainerOpenMenuStyles","StyledSearchResultsContainer","StyledSearchTextContainer","Text"],"mappings":"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"}

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

@@ -4,39 +4,35 @@ var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var styled = require('./styled.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const MostUsed = ({ data, label, toggle }) => {
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
-    fontWeight: "bold"
-  }, label), /* @__PURE__ */ React__default["default"].createElement(styled.StyledCardContainer, null, data.slice(0, 4).map(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold" }, label), /* @__PURE__ */ React.createElement(styled.StyledCardContainer, null, data.slice(0, 4).map(
     ({
       title,
       category,
       Component = "a",
       props = {}
-    }) => /* @__PURE__ */ React__default["default"].createElement(Component, {
-      ...props,
-      style: noTextDecoration,
-      key: `${title}-${category}`,
-      onClick: toggle
-    }, /* @__PURE__ */ React__default["default"].createElement(styled.StyledCard, {
-      elevated: true,
-      key: `${title}-${category}`
-    }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
-      fontWeight: "bold",
-      colorVariant: "primary"
-    }, title), /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
-      fontWeight: "bold",
-      colorVariant: "secondary",
-      typography: "label"
-    }, category)))
+    }) => /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        ...props,
+        style: noTextDecoration,
+        key: `${title}-${category}`,
+        onClick: toggle
+      },
+      /* @__PURE__ */ React.createElement(styled.StyledCard, { elevated: true, key: `${title}-${category}` }, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold", colorVariant: "primary" }, title), /* @__PURE__ */ React.createElement(
+        reactCore.Text,
+        {
+          fontWeight: "bold",
+          colorVariant: "secondary",
+          typography: "label"
+        },
+        category
+      ))
+    )
   )));
 };
-var MostUsed$1 = React__default["default"].memo(MostUsed);
+var MostUsed$1 = React.memo(MostUsed);
 
 module.exports = MostUsed$1;
 //# sourceMappingURL=MostUsed.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MostUsed.js","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"],"names":["React","Text","StyledCardContainer","StyledCard"],"mappings":";;;;;;;;;;AAWA,MAAM,WAAoC,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AACrE,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,yHAEKA,yBAAA,CAAA,aAAA,CAAAC,cAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,GAAQ,EAAA,KAAM,mBAC9BD,yBAAA,CAAA,aAAA,CAAAE,0BAAA,EAAA,IAAA,EACE,KACE,KAAM,CAAA,CAAA,EAAG,CAAC,CACV,CAAA,GAAA;AAAA,IACC,CAAC;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,GAAA;AAAA,MACZ,QAAQ,EAAC;AAAA,0BAERF,yBAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MACjB,OAAS,EAAA,MAAA;AAAA,KAAA,kBAERA,yBAAA,CAAA,aAAA,CAAAG,iBAAA,EAAA;AAAA,MAAW,QAAQ,EAAA,IAAA;AAAA,MAAC,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,KAAA,kBACnCH,yBAAA,CAAA,aAAA,CAAAC,cAAA,EAAA;AAAA,MAAK,UAAW,EAAA,MAAA;AAAA,MAAO,YAAa,EAAA,SAAA;AAAA,KAClC,EAAA,KACH,mBACCD,yBAAA,CAAA,aAAA,CAAAC,cAAA,EAAA;AAAA,MACC,UAAW,EAAA,MAAA;AAAA,MACX,YAAa,EAAA,WAAA;AAAA,MACb,UAAW,EAAA,OAAA;AAAA,KAEV,EAAA,QACH,CACF,CACF,CAAA;AAAA,GAGR,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,iBAAeD,yBAAA,CAAM,KAAK,QAAQ,CAAA;;;;"}
+{"version":3,"file":"MostUsed.js","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"],"names":["Text","StyledCardContainer","StyledCard"],"mappings":";;;;;;AAWA,MAAM,WAAoC,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AACrE,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAACA,cAAK,EAAA,EAAA,UAAA,EAAW,MAAQ,EAAA,EAAA,KAAM,CAC/B,kBAAA,KAAA,CAAA,aAAA,CAACC,0BACE,EAAA,IAAA,EAAA,IAAA,CACE,KAAM,CAAA,CAAA,EAAG,CAAC,CACV,CAAA,GAAA;AAAA,IACC,CAAC;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,GAAA;AAAA,MACZ,QAAQ,EAAC;AAAA,KAET,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,KAAO,EAAA,gBAAA;AAAA,QACP,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,QACjB,OAAS,EAAA,MAAA;AAAA,OAAA;AAAA,sBAER,KAAA,CAAA,aAAA,CAAAC,iBAAA,EAAA,EAAW,QAAQ,EAAA,IAAA,EAAC,KAAK,CAAG,EAAA,KAAA,CAAA,CAAA,EAAS,QACpC,CAAA,CAAA,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACF,kBAAK,UAAW,EAAA,MAAA,EAAO,YAAa,EAAA,SAAA,EAAA,EAClC,KACH,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAACA,cAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,MAAA;AAAA,UACX,YAAa,EAAA,WAAA;AAAA,UACb,UAAW,EAAA,OAAA;AAAA,SAAA;AAAA,QAEV,QAAA;AAAA,OAEL,CAAA;AAAA,KACF;AAAA,GAGR,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,iBAAe,KAAA,CAAM,KAAK,QAAQ,CAAA;;;;"}

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

@@ -1,24 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('@emotion/styled');
 var reactCore = require('@tecsinapse/react-core');
 var nativeStyled = require('@emotion/native');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
-
-const StyledCardContainer = styled__default["default"]("div")`
+const StyledCardContainer = styled("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};
 `;
-const StyledCard = nativeStyled__default["default"](reactCore.Card)`
+const StyledCard = nativeStyled(reactCore.Card)`
     padding-top: ${({ theme }) => theme.spacing.mili};
     padding-bottom: ${({ theme }) => theme.spacing.mili};
     padding-left: ${({ theme }) => theme.spacing.deca};

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","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"],"names":["webStyled","nativeStyled","Card"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,mBAAA,GAAsBA,2BAAU,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,qBAAA,EAG3B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,gBAAA,EAChC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,UAAA,GAAaC,iCAAaC,cAAI,CAAA,CAAA;AAAA,iBAAA,EACxB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,oBAAA,EAC1B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,kBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;;"}
+{"version":3,"file":"styled.js","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"],"names":["webStyled","Card"],"mappings":";;;;;;AAIa,MAAA,mBAAA,GAAsBA,OAAU,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,qBAAA,EAG3B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,gBAAA,EAChC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA;AAGlC,MAAA,UAAA,GAAa,aAAaC,cAAI,CAAA,CAAA;AAAA,iBAAA,EACxB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,oBAAA,EAC1B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,kBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,mBAAA,EAC5B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;;"}

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

@@ -5,10 +5,6 @@ var reactCore = require('@tecsinapse/react-core');
 var styled = require('./styled.js');
 var utils = require('./utils.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const SearchResultItem = ({
   data,
   searchTerm,
@@ -17,20 +13,16 @@ const SearchResultItem = ({
   const { title, category, Component, props } = data;
   const noTextDecoration = { textDecoration: "none" };
   const textProps = { fontColor: "orange", fontWeight: "bold" };
-  return /* @__PURE__ */ React__default["default"].createElement(Component, {
-    ...props,
-    style: noTextDecoration,
-    onClick: toggle
-  }, /* @__PURE__ */ React__default["default"].createElement(styled.StyledSearchItemContainer, null, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
-    typography: "base",
-    colorVariant: "secondary",
-    colorTone: "dark"
-  }, utils.highlight(searchTerm, title, styled.HighlightText, textProps)), /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
-    typography: "sub",
-    fontWeight: "bold",
-    colorVariant: "secondary",
-    colorTone: "medium"
-  }, category)));
+  return /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(styled.StyledSearchItemContainer, null, /* @__PURE__ */ React.createElement(reactCore.Text, { typography: "base", colorVariant: "secondary", colorTone: "dark" }, utils.highlight(searchTerm, title, styled.HighlightText, textProps)), /* @__PURE__ */ React.createElement(
+    reactCore.Text,
+    {
+      typography: "sub",
+      fontWeight: "bold",
+      colorVariant: "secondary",
+      colorTone: "medium"
+    },
+    category
+  )));
 };
 
 module.exports = SearchResultItem;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResultItem.js","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"],"names":["React","StyledSearchItemContainer","Text","highlight","HighlightText"],"mappings":";;;;;;;;;;;AAYA,MAAM,mBAA+C,CAAC;AAAA,EACpD,IAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,IAAA,CAAA;AAC9C,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,MAAM,SAAuB,GAAA,EAAE,SAAW,EAAA,QAAA,EAAU,YAAY,MAAO,EAAA,CAAA;AAEvE,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAW,GAAG,KAAA;AAAA,IAAO,KAAO,EAAA,gBAAA;AAAA,IAAkB,OAAS,EAAA,MAAA;AAAA,GACtD,kBAAAA,yBAAA,CAAA,aAAA,CAACC,wDACED,yBAAA,CAAA,aAAA,CAAAE,cAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,IAAO,YAAa,EAAA,WAAA;AAAA,IAAY,SAAU,EAAA,MAAA;AAAA,GAAA,EACxDC,gBAAU,UAAY,EAAA,KAAA,EAAOC,sBAAe,SAAS,CACxD,mBACCJ,yBAAA,CAAA,aAAA,CAAAE,cAAA,EAAA;AAAA,IACC,UAAW,EAAA,KAAA;AAAA,IACX,UAAW,EAAA,MAAA;AAAA,IACX,YAAa,EAAA,WAAA;AAAA,IACb,SAAU,EAAA,QAAA;AAAA,GAET,EAAA,QACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchResultItem.js","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"],"names":["StyledSearchItemContainer","Text","highlight","HighlightText"],"mappings":";;;;;;;AAYA,MAAM,mBAA+C,CAAC;AAAA,EACpD,IAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,IAAA,CAAA;AAC9C,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,MAAM,SAAuB,GAAA,EAAE,SAAW,EAAA,QAAA,EAAU,YAAY,MAAO,EAAA,CAAA;AAEvE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,KAAO,EAAA,KAAA,EAAO,kBAAkB,OAAS,EAAA,MAAA,EAAA,kBACrD,KAAA,CAAA,aAAA,CAAAA,gCAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAAC,cAAA,EAAA,EAAK,YAAW,MAAO,EAAA,YAAA,EAAa,WAAY,EAAA,SAAA,EAAU,MACxD,EAAA,EAAAC,eAAA,CAAU,YAAY,KAAO,EAAAC,oBAAA,EAAe,SAAS,CACxD,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACF,cAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,UAAW,EAAA,MAAA;AAAA,MACX,YAAa,EAAA,WAAA;AAAA,MACb,SAAU,EAAA,QAAA;AAAA,KAAA;AAAA,IAET,QAAA;AAAA,GAEL,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,17 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('@emotion/styled');
 var nativeStyled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
-
-const StyledSearchItemContainer = styled__default["default"]("div")`
+const StyledSearchItemContainer = styled("div")`
   display: flex;
   flex-direction: column;
   padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};
@@ -20,7 +13,7 @@ const StyledSearchItemContainer = styled__default["default"]("div")`
   0.05
 )}`};
 `;
-const HighlightText = nativeStyled__default["default"](reactCore.Text)`
+const HighlightText = nativeStyled(reactCore.Text)`
   text-decoration: underline;
   text-decoration-color: ${({ theme }) => theme.font.color.orange};
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","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"],"names":["styled","hex2rgba","nativeStyled","Text"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,yBAAA,GAA4BA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,WAGxC,EAAA,CAAC,EAAE,KAAM,EAAA,KAAM,GAAG,KAAM,CAAA,OAAA,CAAQ,IAAU,CAAA,GAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA;AAAA,cAAA,EACrD,CAAC,EAAE,KAAA,OACf,CAAG,EAAA,KAAA,CAAM,YAAY,IAAc,CAAA,OAAA,EAAAC,kBAAA;AAAA,EACjC,MAAM,aAAc,CAAA,MAAA;AAAA,EACpB,IAAA;AACF,CAAA,CAAA,CAAA,CAAA;AAAA,EAAA;AAGS,MAAA,aAAA,GAAgBC,iCAAaC,cAAI,CAAA,CAAA;AAAA;AAAA,yBAAA,EAEnB,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,MAAA,CAAA;AAAA;;;;;"}
+{"version":3,"file":"styled.js","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"],"names":["hex2rgba","Text"],"mappings":";;;;;;AAIa,MAAA,yBAAA,GAA4B,OAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,WAGxC,EAAA,CAAC,EAAE,KAAM,EAAA,KAAM,GAAG,KAAM,CAAA,OAAA,CAAQ,IAAU,CAAA,GAAA,EAAA,KAAA,CAAM,OAAQ,CAAA,KAAA,CAAA,EAAA,CAAA,CAAA;AAAA,cAAA,EACrD,CAAC,EAAE,KAAA,OACf,CAAG,EAAA,KAAA,CAAM,YAAY,IAAc,CAAA,OAAA,EAAAA,kBAAA;AAAA,EACjC,MAAM,aAAc,CAAA,MAAA;AAAA,EACpB,IAAA;AACF,CAAA,CAAA,CAAA,CAAA;AAAA,EAAA;AAGS,MAAA,aAAA,GAAgB,aAAaC,cAAI,CAAA,CAAA;AAAA;AAAA,yBAAA,EAEnB,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,KAAK,KAAM,CAAA,MAAA,CAAA;AAAA;;;;;"}

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

@@ -1,13 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 const normalize = (str) => {
   return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[-[\]{}()*+?.,\\^$|#]/g, " ").toLowerCase();
 };
@@ -37,10 +31,7 @@ const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
   const indexes = matches.map((match) => match.index);
   const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
   return splited.map((value, idx) => {
-    return normalize(value) === search ? /* @__PURE__ */ React__default["default"].createElement(Component, {
-      key: `highlight-${value}${idx}`,
-      ...props
-    }, value) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, value);
+    return normalize(value) === search ? /* @__PURE__ */ React.createElement(Component, { key: `highlight-${value}${idx}`, ...props }, value) : /* @__PURE__ */ React.createElement(React.Fragment, null, value);
   });
 };
 const highlight = (searchTerm, textToReplace, Component, props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","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"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"utils.js","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"],"names":[],"mappings":";;;;AAEA,MAAM,SAAA,GAAY,CAAC,GAAwB,KAAA;AACzC,EAAA,OAAO,GACJ,CAAA,SAAA,CAAU,KAAK,CAAA,CACf,OAAQ,CAAA,kBAAA,EAAoB,EAAE,CAAA,CAC9B,OAAQ,CAAA,wBAAA,EAA0B,GAAG,CAAA,CACrC,WAAY,EAAA,CAAA;AACjB,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA,CACnB,GACA,EAAA,OAAA,EACA,IACa,KAAA;AACb,EAAA,MAAM,SAAmB,EAAC,CAAA;AAC1B,EAAA,IAAI,YAAe,GAAA,CAAA,CAAA;AAEnB,EAAQ,OAAA,CAAA,OAAA,CAAQ,CAAC,KAAkB,KAAA;AACjC,IAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,SAAU,CAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAC9C,IAAA,MAAA,CAAO,KAAK,GAAI,CAAA,SAAA,CAAU,KAAO,EAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AAC9C,IAAA,YAAA,GAAe,KAAQ,GAAA,IAAA,CAAA;AAAA,GACxB,CAAA,CAAA;AAED,EAAA,MAAA,CAAO,KAAK,GAAI,CAAA,SAAA,CAAU,YAAc,EAAA,GAAA,CAAI,MAAM,CAAC,CAAA,CAAA;AAEnD,EAAO,OAAA,MAAA,CAAO,MAAO,CAAA,CAAA,CAAA,KAAK,CAAC,CAAA,CAAA;AAC7B,CAAA,CAAA;AAEa,MAAA,aAAA,GAAgB,CAC3B,UAAA,EACA,aACuB,KAAA;AACvB,EAAM,MAAA,CAAA,GAAI,UAAU,UAAU,CAAA,CAAA;AAC9B,EAAM,MAAA,EAAA,GAAK,UAAU,aAAa,CAAA,CAAA;AAElC,EAAA,MAAM,CAAI,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAI,MAAM,GAAG,CAAA,CAAA;AAElC,EAAA,OAAO,KAAM,CAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,CAAC,CAAC,CAAA,CAAA;AAClC,EAAA;AAEA,MAAM,iBAAoB,GAAA,CACxB,UACA,EAAA,aAAA,EACA,WACA,KACoB,KAAA;AACpB,EAAM,MAAA,MAAA,GAAS,UAAU,UAAU,CAAA,CAAA;AACnC,EAAM,MAAA,OAAA,GAAU,aAAc,CAAA,UAAA,EAAY,aAAa,CAAA,CAAA;AAEvD,EAAI,IAAA,OAAA,CAAQ,UAAU,CAAG,EAAA;AACvB,IAAO,OAAA,aAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,OAAoB,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK,CAAA,CAAA;AAC1D,EAAA,MAAM,OAAU,GAAA,YAAA,CAAa,aAAe,EAAA,OAAA,EAAS,WAAW,MAAM,CAAA,CAAA;AAEtE,EAAA,OAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,GAAQ,KAAA;AACjC,IAAA,OAAO,SAAU,CAAA,KAAK,CAAM,KAAA,MAAA,uCACzB,SAAU,EAAA,EAAA,GAAA,EAAK,CAAa,UAAA,EAAA,KAAA,CAAA,EAAQ,OAAQ,GAAG,KAAA,EAAA,EAC7C,KACH,CAAA,6DAEG,KAAM,CAAA,CAAA;AAAA,GAEZ,CAAA,CAAA;AACH,CAAA,CAAA;AAEO,MAAM,SAAY,GAAA,CACvB,UACA,EAAA,aAAA,EACA,WACA,KACoB,KAAA;AACpB,EAAA,IAAI,iBAAiB,UAAY,EAAA;AAC/B,IAAA,OAAO,iBAAkB,CAAA,UAAA,EAAY,aAAe,EAAA,SAAA,EAAW,KAAK,CAAA,CAAA;AAAA,GACtE;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;;"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const getDefaultInputContainerStyles = {
   transitionDuration: "250ms",
   transitionProperty: "opacity scale transform",

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

@@ -1 +1 @@
-{"version":3,"file":"animations.js","sources":["../../../../../src/components/molecules/Menubar/animations.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px)',\n  },\n  entering: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-50px)',\n  },\n  exiting: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n};\n\nconst getContainerOpenMenuTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px) ',\n  },\n  entering: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-600px)',\n  },\n  exiting: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n};\n\nexport const getInputContainerStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultInputContainerStyles,\n  ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultContainerOpenMenuStyles,\n  ...getContainerOpenMenuTransform[state],\n});\n"],"names":[],"mappings":";;;;AAGA,MAAM,8BAAiC,GAAA;AAAA,EACrC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,iCAAoC,GAAA;AAAA,EACxC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,0BAA6B,GAAA;AAAA,EACjC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,6BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,qCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEA,MAAM,6BAAgC,GAAA;AAAA,EACpC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,8BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,sCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEa,MAAA,uBAAA,GAA0B,CACrC,KACmB,MAAA;AAAA,EACnB,GAAG,8BAAA;AAAA,EACH,GAAG,0BAA2B,CAAA,KAAA,CAAA;AAChC,CAAA,EAAA;AAEa,MAAA,0BAAA,GAA6B,CACxC,KACmB,MAAA;AAAA,EACnB,GAAG,iCAAA;AAAA,EACH,GAAG,6BAA8B,CAAA,KAAA,CAAA;AACnC,CAAA;;;;;"}
+{"version":3,"file":"animations.js","sources":["../../../../../src/components/molecules/Menubar/animations.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\nconst getDefaultInputContainerStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getDefaultContainerOpenMenuStyles = {\n  transitionDuration: '250ms',\n  transitionProperty: 'opacity scale transform',\n  transitionTimingFunction: 'ease-in-out',\n};\n\nconst getInputContainerTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px)',\n  },\n  entering: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-50px)',\n  },\n  exiting: {\n    opacity: 0.5,\n    transform: 'scale(0.99, 0.99) translateY(-5px)',\n  },\n};\n\nconst getContainerOpenMenuTransform = {\n  entered: {\n    transform: 'scale(1, 1) translateY(0px) ',\n  },\n  entering: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n  exited: {\n    opacity: 0,\n    transform: 'scale(0.99, 0.99) translateY(-600px)',\n  },\n  exiting: {\n    opacity: 0.95,\n    transform: 'scale(0.99, 0.99) translateY(0px)',\n  },\n};\n\nexport const getInputContainerStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultInputContainerStyles,\n  ...getInputContainerTransform[state],\n});\n\nexport const getContainerOpenMenuStyles = (\n  state: TransitionStatus\n): CSSProperties => ({\n  ...getDefaultContainerOpenMenuStyles,\n  ...getContainerOpenMenuTransform[state],\n});\n"],"names":[],"mappings":";;AAGA,MAAM,8BAAiC,GAAA;AAAA,EACrC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,iCAAoC,GAAA;AAAA,EACxC,kBAAoB,EAAA,OAAA;AAAA,EACpB,kBAAoB,EAAA,yBAAA;AAAA,EACpB,wBAA0B,EAAA,aAAA;AAC5B,CAAA,CAAA;AAEA,MAAM,0BAA6B,GAAA;AAAA,EACjC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,6BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,qCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,GAAA;AAAA,IACT,SAAW,EAAA,oCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEA,MAAM,6BAAgC,GAAA;AAAA,EACpC,OAAS,EAAA;AAAA,IACP,SAAW,EAAA,8BAAA;AAAA,GACb;AAAA,EACA,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,IACT,SAAW,EAAA,sCAAA;AAAA,GACb;AAAA,EACA,OAAS,EAAA;AAAA,IACP,OAAS,EAAA,IAAA;AAAA,IACT,SAAW,EAAA,mCAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEa,MAAA,uBAAA,GAA0B,CACrC,KACmB,MAAA;AAAA,EACnB,GAAG,8BAAA;AAAA,EACH,GAAG,2BAA2B,KAAK,CAAA;AACrC,CAAA,EAAA;AAEa,MAAA,0BAAA,GAA6B,CACxC,KACmB,MAAA;AAAA,EACnB,GAAG,iCAAA;AAAA,EACH,GAAG,8BAA8B,KAAK,CAAA;AACxC,CAAA;;;;;"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var styled = require('@emotion/styled');
 var nativeStyled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
@@ -9,18 +7,13 @@ var Button = require('../../atoms/Button/Button.js');
 require('react');
 var Input = require('../../atoms/Input/Input.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
-
-const StyledIconInput = styled__default["default"]("div")`
+const StyledIconInput = styled("div")`
   padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
   padding-left: ${({ theme }) => theme.spacing.centi};
   padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);
   padding-right: ${({ theme }) => theme.spacing.centi};
 `;
-const StyledMenuBar = styled__default["default"]("div")`
+const StyledMenuBar = styled("div")`
     position: relative;
     background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
     display: flex;
@@ -29,7 +22,7 @@ const StyledMenuBar = styled__default["default"]("div")`
     padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
     box-shadow: 0px 2px 8px ${({ theme }) => reactCore.hex2rgba(theme.miscellaneous.shadow, 0.05)};
 `;
-const StyledMenuButton = nativeStyled__default["default"](Button)`
+const StyledMenuButton = nativeStyled(Button)`
     padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);
@@ -39,7 +32,7 @@ const StyledMenuButton = nativeStyled__default["default"](Button)`
       user-select: none;
     }
 `;
-const StyledContainerOpenMenu = styled__default["default"]("div")`
+const StyledContainerOpenMenu = styled("div")`
     border-top: ${({ theme }) => `${theme.borderWidth.pico} solid ${reactCore.hex2rgba(
   theme.miscellaneous.shadow,
   0.05
@@ -57,18 +50,18 @@ const StyledContainerOpenMenu = styled__default["default"]("div")`
     width: -webkit-fill-available;
     width: -moz-available;
 `;
-const StyledInput = nativeStyled__default["default"](Input)`
+const StyledInput = nativeStyled(Input)`
      width: 100%;
 `;
-const StyledInputContainer = styled__default["default"]("div")`
+const StyledInputContainer = styled("div")`
     display: flex;
     flex: 1;
 `;
-const StyledSearchResultsContainer = styled__default["default"]("div")`
+const StyledSearchResultsContainer = styled("div")`
     display: flex;
     flex-direction: column;
 `;
-const StyledSearchTextContainer = styled__default["default"]("div")`
+const StyledSearchTextContainer = styled("div")`
     margin-bottom: ${({ theme }) => theme.spacing.mili};
 `;