@tecsinapse/react-web-kit 1.21.3 → 1.22.0

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

@@ -1,53 +1,44 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledText = exports.StyledRightComponent = exports.StyledLeftComponent = exports.StyledContainerMenu = exports.StyledContainerItems = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var styled = require('@emotion/styled');
+var reactCore = require('@tecsinapse/react-core');
 
-var _reactCore = require("@tecsinapse/react-core");
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledLeftComponent = styled__default["default"]("div")`
+  margin-right: ${({ theme }) => theme.spacing.mili};
+`;
+const StyledRightComponent = styled__default["default"]("div")`
+  margin-left: ${({ theme }) => theme.spacing.mili};
+`;
+const StyledContainerMenu = styled__default["default"]("div")`
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  border-bottom: ${({ theme }) => `${theme.borderWidth.pico} solid ${reactCore.hex2rgba(
+  theme.miscellaneous.shadow,
+  0.05
+)}`};
+  width: 100%;
+  padding-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+const StyledContainerItems = styled__default["default"]("div")`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledText = styled__default["default"]("span")`
+  &:hover {
+    color: ${({ theme }) => theme.font.color.orange};
+  }
+`;
 
-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.StyledContainerItems = StyledContainerItems;
+exports.StyledContainerMenu = StyledContainerMenu;
 exports.StyledLeftComponent = StyledLeftComponent;
-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')(_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')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-exports.StyledContainerItems = StyledContainerItems;
-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
+//# 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,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"}
+{"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;;;;;;;;"}

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

@@ -1,118 +1,133 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactCore = require("@tecsinapse/react-core");
-
-var _reactTransitionGroup = require("react-transition-group");
-
-var _styled = require("./styled");
-
-var _MostUsed = require("./MostUsed");
-
-var _MenuBlock = require("./MenuBlock");
-
-var _SearchResultItem = require("./SearchResultItem");
-
-var _utils = require("./utils");
-
-var _animations = require("./animations");
-
-var _hooks = require("../../../hooks");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 = _ref => {
-  let {
+'use strict';
+
+var React = require('react');
+var reactCore = require('@tecsinapse/react-core');
+var reactTransitionGroup = require('react-transition-group');
+var styled = require('./styled.js');
+var MostUsed = require('./MostUsed/MostUsed.js');
+var MenuBlock = require('./MenuBlock/MenuBlock.js');
+var SearchResultItem = require('./SearchResultItem/SearchResultItem.js');
+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);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Menubar = (_a) => {
+  var _b = _a, {
     leftComponents,
     rightComponents,
-    searchPlaceholder = 'O quê você deseja buscar?',
+    searchPlaceholder = "O qu\xEA voc\xEA 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([]);
-
-  const [input, setInput] = (0, _reactCore.useDebouncedState)('', setSearch);
-
-  const [open, setOpen] = _react.default.useState(false);
-
-  const menuRef = (0, _react.useRef)(null);
-  (0, _hooks.useClickAwayListener)(menuRef, setOpen, 'mouseup');
-
-  const toggleOpen = _react.default.useCallback(() => setOpen(state => !state), [setOpen]);
-
-  _react.default.useEffect(() => {
-    if (search === '') return;
-    setResults((0, _utils.filterAndTransform)(options, search));
+    mostUsedLabel = "Mais acessados",
+    searchResultsLabel = "Resultados da busca",
+    searchable = true
+  } = _b, rest = __objRest(_b, [
+    "leftComponents",
+    "rightComponents",
+    "searchPlaceholder",
+    "options",
+    "mostUsed",
+    "mostUsedLabel",
+    "searchResultsLabel",
+    "searchable"
+  ]);
+  const [search, setSearch] = React__default["default"].useState("");
+  const [results, setResults] = React__default["default"].useState([]);
+  const [input, setInput] = reactCore.useDebouncedState("", setSearch);
+  const [open, setOpen] = React__default["default"].useState(false);
+  const menuRef = React.useRef(null);
+  useClickAwayListener.useClickAwayListener(menuRef, setOpen, "mouseup");
+  const toggleOpen = React__default["default"].useCallback(
+    () => setOpen((state) => !state),
+    [setOpen]
+  );
+  React__default["default"].useEffect(() => {
+    if (search === "")
+      return;
+    setResults(utils.filterAndTransform(options, search));
   }, [search]);
-
-  return _react.default.createElement("div", _extends({
-    ref: ref => menuRef.current = ref
-  }, rest), _react.default.createElement(_styled.StyledMenuBar, null, _react.default.createElement(_styled.StyledMenuButton, {
+  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadValues({
+    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 ? _react.default.createElement(_reactCore.Icon, {
+  }, !open ? /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
     size: "deca",
     name: "menu",
     type: "material-community",
     fontColor: "light"
-  }) : _react.default.createElement(_reactCore.Icon, {
+  }) : /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
     size: "deca",
     name: "close",
     type: "material-community",
     fontColor: "light"
-  })), leftComponents, _react.default.createElement(_reactTransitionGroup.Transition, {
+  })), leftComponents, /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
     in: open,
     timeout: 250
-  }, state => _react.default.createElement(_styled.StyledInputContainer, {
-    style: (0, _animations.getInputContainerStyles)(state)
-  }, searchable && _react.default.createElement(_styled.StyledInput, {
+  }, (state) => /* @__PURE__ */ React__default["default"].createElement(styled.StyledInputContainer, {
+    style: animations.getInputContainerStyles(state)
+  }, searchable && /* @__PURE__ */ React__default["default"].createElement(styled.StyledInput, {
     placeholder: searchPlaceholder,
-    leftComponent: _react.default.createElement(_styled.StyledIconInput, null, _react.default.createElement(_reactCore.Icon, {
+    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), _react.default.createElement(_reactTransitionGroup.Transition, {
+  }))), rightComponents), /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
     in: open,
     timeout: 250
-  }, state => _react.default.createElement(_styled.StyledContainerOpenMenu, {
-    style: (0, _animations.getContainerOpenMenuStyles)(state)
-  }, !search ? _react.default.createElement(_react.default.Fragment, null, mostUsed && _react.default.createElement(_MostUsed.MostUsed, {
+  }, (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
-  }), _react.default.createElement(_MenuBlock.MenuBlock, {
-    options: options,
+  }), /* @__PURE__ */ React__default["default"].createElement(MenuBlock, {
+    options,
     toggle: toggleOpen
-  })) : _react.default.createElement(_styled.StyledSearchResultsContainer, null, _react.default.createElement(_styled.StyledSearchTextContainer, null, _react.default.createElement(_reactCore.Text, {
+  })) : /* @__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 => _react.default.createElement(_SearchResultItem.SearchResultItem, {
-    key: "".concat(result.title, "-").concat(result.category),
+  }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React__default["default"].createElement(SearchResultItem, {
+    key: `${result.title}-${result.category}`,
     data: result,
     searchTerm: search,
     toggle: toggleOpen
   }))))));
 };
 
-var _default = Menubar;
-exports.default = _default;
-//# sourceMappingURL=Menubar.js.map
+module.exports = Menubar;
+//# sourceMappingURL=Menubar.js.map

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

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

@@ -1,57 +1,60 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactCore = require("@tecsinapse/react-core");
-
-var _styled = require("./styled");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 MostUsed = _ref => {
-  let {
-    data,
-    label,
-    toggle
-  } = _ref;
-  const noTextDecoration = {
-    textDecoration: 'none'
-  };
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactCore.Text, {
+'use strict';
+
+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);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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), _react.default.createElement(_styled.StyledCardContainer, null, data.slice(0, 4).map(_ref2 => {
-    let {
+  }, label), /* @__PURE__ */ React__default["default"].createElement(styled.StyledCardContainer, null, data.slice(0, 4).map(
+    ({
       title,
       category,
-      Component = 'a',
+      Component = "a",
       props = {}
-    } = _ref2;
-    return _react.default.createElement(Component, _extends({}, props, {
+    }) => /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps(__spreadValues({}, props), {
       style: noTextDecoration,
-      key: "".concat(title, "-").concat(category),
+      key: `${title}-${category}`,
       onClick: toggle
-    }), _react.default.createElement(_styled.StyledCard, {
+    }), /* @__PURE__ */ React__default["default"].createElement(styled.StyledCard, {
       elevated: true,
-      key: "".concat(title, "-").concat(category)
-    }, _react.default.createElement(_reactCore.Text, {
+      key: `${title}-${category}`
+    }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
       fontWeight: "bold",
       colorVariant: "primary"
-    }, title), _react.default.createElement(_reactCore.Text, {
+    }, title), /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
       fontWeight: "bold",
       colorVariant: "secondary",
       typography: "label"
-    }, category)));
-  })));
+    }, category)))
+  )));
 };
+var MostUsed$1 = React__default["default"].memo(MostUsed);
 
-var _default = _react.default.memo(MostUsed);
-
-exports.default = _default;
-//# sourceMappingURL=MostUsed.js.map
+module.exports = MostUsed$1;
+//# sourceMappingURL=MostUsed.js.map

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,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"}
+{"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,KACX,qBACGF,yBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,KADL,CAAA,EAAA;AAAA,MAEC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA,EAAK,GAAG,KAAS,CAAA,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA,MACjB,OAAS,EAAA,MAAA;AAAA,KAAA,CAAA,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;;;;"}

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

@@ -1,59 +1,30 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledCardContainer = exports.StyledCard = void 0;
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+var styled = require('@emotion/styled');
+var reactCore = require('@tecsinapse/react-core');
+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 _native = _interopRequireDefault(require("@emotion/native"));
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
 
-var _templateObject, _templateObject2;
+const StyledCardContainer = styled__default["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};
+`;
+const StyledCard = nativeStyled__default["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};
+`;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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)(_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
+exports.StyledCardContainer = StyledCardContainer;
+//# 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,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"}
+{"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;;;;;"}