@tecsinapse/react-web-kit 1.22.1-beta.4 → 1.22.1-beta.5

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

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var nativeStyled = require('@emotion/native');
+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 nativeStyled__default = /*#__PURE__*/_interopDefaultLegacy(nativeStyled);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledDiv = styled__default["default"]("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const StyledLabel = nativeStyled__default["default"](reactCore.Text)`
+  ${({ theme, labelPosition }) => {
+  if (labelPosition === "right")
+    return nativeStyled.css`
+        margin-left: ${theme == null ? void 0 : theme.spacing.centi};
+      `;
+  else if (labelPosition === "left")
+    return nativeStyled.css`
+        margin-right: ${theme == null ? void 0 : theme.spacing.centi};
+      `;
+}}
+`;
+
+exports.StyledDiv = StyledDiv;
+exports.StyledLabel = StyledLabel;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/LabeledSwitch/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/LabeledSwitch/styled.ts"],"sourcesContent":["import { css, default as nativeStyled } from '@emotion/native';\nimport { default as webStyled } from '@emotion/styled';\nimport { LabelPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';\n\nexport const StyledDiv = webStyled('div')`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const StyledLabel = nativeStyled(Text)<\n  Partial<StyleProps> & {\n    labelPosition: LabelPositionOptions;\n  }\n>`\n  ${({ theme, labelPosition }) => {\n    if (labelPosition === 'right')\n      return css`\n        margin-left: ${theme?.spacing.centi};\n      `;\n    else if (labelPosition === 'left')\n      return css`\n        margin-right: ${theme?.spacing.centi};\n      `;\n  }}\n`;\n"],"names":["webStyled","nativeStyled","Text","css"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,SAAA,GAAYA,2BAAU,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAM3B,MAAA,WAAA,GAAcC,iCAAaC,cAAI,CAAA,CAAA;AAAA,EAAA,EAKxC,CAAC,EAAE,KAAO,EAAA,aAAA,EAAoB,KAAA;AAC9B,EAAA,IAAI,aAAkB,KAAA,OAAA;AACpB,IAAO,OAAAC,gBAAA,CAAA;AAAA,qBAAA,EACU,+BAAO,OAAQ,CAAA,KAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA,OAAA,IAEzB,aAAkB,KAAA,MAAA;AACzB,IAAO,OAAAA,gBAAA,CAAA;AAAA,sBAAA,EACW,+BAAO,OAAQ,CAAA,KAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAErC,CAAA,CAAA;AAAA;;;;;"}

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+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 Masonry = ({
+  children,
+  columns,
+  spacingTop,
+  spacingLeft
+}) => {
+  const getColumns = () => {
+    const columnsArray = Array.from(
+      { length: columns },
+      () => []
+    );
+    React__default["default"].Children.forEach(children, (child, index) => {
+      if (child && React__default["default"].isValidElement(child)) {
+        columnsArray[index % columns].push(child);
+      }
+    });
+    return columnsArray;
+  };
+  const renderColumn = (column) => {
+    return column.map((item, index) => /* @__PURE__ */ React__default["default"].createElement(styled.StyledRowItem, {
+      key: index,
+      index,
+      spacingTop
+    }, item));
+  };
+  const renderColumns = () => {
+    return getColumns().map((column, index) => /* @__PURE__ */ React__default["default"].createElement(styled.StyledColumnItem, {
+      key: index,
+      index,
+      spacingLeft
+    }, renderColumn(column)));
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(styled.StyledMasonry, null, renderColumns());
+};
+
+module.exports = Masonry;
+//# sourceMappingURL=Masonry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.js","sources":["../../../../../src/components/molecules/Masonry/Masonry.tsx"],"sourcesContent":["import React from 'react';\nimport { SpacingType } from '@tecsinapse/react-core';\nimport { StyledColumnItem, StyledRowItem, StyledMasonry } from './styled';\n\nexport interface MasonryProps {\n  columns: number;\n  /** Spacing to the left of every block on index % column !== 0 */\n  spacingLeft: SpacingType;\n  /** Spacing to the top of every block on index >= column */\n  spacingTop: SpacingType;\n}\n\nconst Masonry: React.FC<MasonryProps> = ({\n  children,\n  columns,\n  spacingTop,\n  spacingLeft,\n}) => {\n  const getColumns = () => {\n    const columnsArray: React.ReactNode[][] = Array.from(\n      { length: columns },\n      () => []\n    );\n\n    React.Children.forEach(children, (child, index) => {\n      if (child && React.isValidElement(child)) {\n        columnsArray[index % columns].push(child);\n      }\n    });\n\n    return columnsArray;\n  };\n\n  const renderColumn = column => {\n    return column.map((item, index) => (\n      <StyledRowItem key={index} index={index} spacingTop={spacingTop}>\n        {item}\n      </StyledRowItem>\n    ));\n  };\n\n  const renderColumns = () => {\n    return getColumns().map((column, index) => (\n      <StyledColumnItem key={index} index={index} spacingLeft={spacingLeft}>\n        {renderColumn(column)}\n      </StyledColumnItem>\n    ));\n  };\n\n  return <StyledMasonry>{renderColumns()}</StyledMasonry>;\n};\n\nexport default Masonry;\n"],"names":["React","StyledRowItem","StyledColumnItem","StyledMasonry"],"mappings":";;;;;;;;;AAYA,MAAM,UAAkC,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,MAAM,eAAoC,KAAM,CAAA,IAAA;AAAA,MAC9C,EAAE,QAAQ,OAAQ,EAAA;AAAA,MAClB,MAAM,EAAC;AAAA,KACT,CAAA;AAEA,IAAAA,yBAAA,CAAM,QAAS,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,OAAO,KAAU,KAAA;AACjD,MAAA,IAAI,KAAS,IAAAA,yBAAA,CAAM,cAAe,CAAA,KAAK,CAAG,EAAA;AACxC,QAAa,YAAA,CAAA,KAAA,GAAQ,OAAS,CAAA,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,OAC1C;AAAA,KACD,CAAA,CAAA;AAED,IAAO,OAAA,YAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,MAAM,eAAe,CAAU,MAAA,KAAA;AAC7B,IAAA,OAAO,MAAO,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,0BACtBA,yBAAA,CAAA,aAAA,CAAAC,oBAAA,EAAA;AAAA,MAAc,GAAK,EAAA,KAAA;AAAA,MAAO,KAAA;AAAA,MAAc,UAAA;AAAA,KAAA,EACtC,IACH,CACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,OAAO,YAAa,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,0BAC9BD,yBAAA,CAAA,aAAA,CAAAE,uBAAA,EAAA;AAAA,MAAiB,GAAK,EAAA,KAAA;AAAA,MAAO,KAAA;AAAA,MAAc,WAAA;AAAA,KACzC,EAAA,YAAA,CAAa,MAAM,CACtB,CACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAO,uBAAAF,yBAAA,CAAA,aAAA,CAACG,oBAAe,EAAA,IAAA,EAAA,aAAA,EAAgB,CAAA,CAAA;AACzC;;;;"}

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

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('@emotion/styled');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledColumnItem = styled__default["default"]("div")`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-content: stretch;
+  flex: 1;
+  width: 0;
+  margin-left: ${({ theme, index, spacingLeft = "nano" }) => index > 0 ? theme.spacing[spacingLeft] : "initial"};
+`;
+const StyledMasonry = styled__default["default"]("div")`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: stretch;
+  box-sizing: border-box;
+  width: 100%;
+`;
+const StyledRowItem = styled__default["default"]("div")`
+  margin-top: ${({ theme, index, spacingTop = "nano" }) => index > 0 ? theme.spacing[spacingTop] : "initial"};
+`;
+
+exports.StyledColumnItem = StyledColumnItem;
+exports.StyledMasonry = StyledMasonry;
+exports.StyledRowItem = StyledRowItem;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/Masonry/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/molecules/Masonry/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { MasonryProps } from './Masonry';\n\nexport const StyledColumnItem = styled('div')<\n  Partial<StyleProps> & { index: number } & Partial<MasonryProps>\n>`\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-content: stretch;\n  flex: 1;\n  width: 0;\n  margin-left: ${({ theme, index, spacingLeft = 'nano' }) =>\n    index > 0 ? theme.spacing[spacingLeft] : 'initial'};\n`;\n\nexport const StyledMasonry = styled('div')`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-content: stretch;\n  box-sizing: border-box;\n  width: 100%;\n`;\n\nexport const StyledRowItem = styled('div')<\n  Partial<StyleProps> & { index: number } & Partial<MasonryProps>\n>`\n  margin-top: ${({ theme, index, spacingTop = 'nano' }) =>\n    index > 0 ? theme.spacing[spacingTop] : 'initial'};\n`;\n"],"names":["styled"],"mappings":";;;;;;;;;;AAIa,MAAA,gBAAA,GAAmBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAS3B,EAAA,CAAC,EAAE,KAAA,EAAO,KAAO,EAAA,WAAA,GAAc,MAAO,EAAA,KACnD,KAAQ,GAAA,CAAA,GAAI,KAAM,CAAA,OAAA,CAAQ,WAAe,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA;AAGhC,MAAA,aAAA,GAAgBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAS5B,MAAA,aAAA,GAAgBA,2BAAO,KAAK,CAAA,CAAA;AAAA,cAGzB,EAAA,CAAC,EAAE,KAAA,EAAO,KAAO,EAAA,UAAA,GAAa,MAAO,EAAA,KACjD,KAAQ,GAAA,CAAA,GAAI,KAAM,CAAA,OAAA,CAAQ,UAAc,CAAA,GAAA,SAAA,CAAA;AAAA;;;;;;"}

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

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var reactCore = require('@tecsinapse/react-core');
+var MenuItem = require('./MenuItem/MenuItem.js');
+var styled = require('./styled.js');
+var Masonry = require('../../Masonry/Masonry.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MenuBlock = ({ options, toggle }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(Masonry, {
+    columns: 4,
+    spacingTop: "kilo",
+    spacingLeft: "mega"
+  }, options.map((data) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, {
+    key: `${data.title}`
+  }, /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerMenu, null, data.leftComponents && /* @__PURE__ */ React__default["default"].createElement(styled.StyledLeftComponent, null, data.leftComponents), /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
+    fontWeight: "bold"
+  }, data.title)), /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerItems, null, data.items.map(
+    ({
+      title,
+      Component,
+      props,
+      rightComponents,
+      items
+    }) => /* @__PURE__ */ React__default["default"].createElement(MenuItem, {
+      items,
+      key: title,
+      title,
+      Component,
+      rightComponents,
+      props,
+      toggle
+    })
+  )))));
+};
+var MenuBlock$1 = React__default["default"].memo(MenuBlock);
+
+module.exports = MenuBlock$1;
+//# sourceMappingURL=MenuBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBlock.js","sources":["../../../../../../src/components/molecules/Menubar/MenuBlock/MenuBlock.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { MenuItem } from './MenuItem';\nimport {\n  StyledContainerItems,\n  StyledContainerMenu,\n  StyledLeftComponent,\n} from './styled';\nimport { ItemsOptions, OptionsType } from '../types';\nimport { Masonry } from '../../Masonry';\n\ninterface MenuBlockProps {\n  toggle: () => void;\n  options: OptionsType[];\n}\n\nconst MenuBlock: React.FC<MenuBlockProps> = ({ options, toggle }) => {\n  return (\n    <Masonry columns={4} spacingTop=\"kilo\" spacingLeft=\"mega\">\n      {options.map(data => (\n        <React.Fragment key={`${data.title}`}>\n          <StyledContainerMenu>\n            {data.leftComponents && (\n              <StyledLeftComponent>{data.leftComponents}</StyledLeftComponent>\n            )}\n            <Text fontWeight=\"bold\">{data.title}</Text>\n          </StyledContainerMenu>\n          <StyledContainerItems>\n            {data.items.map(\n              ({\n                title,\n                Component,\n                props,\n                rightComponents,\n                items,\n              }: ItemsOptions) => (\n                <MenuItem\n                  items={items}\n                  key={title}\n                  title={title}\n                  Component={Component}\n                  rightComponents={rightComponents}\n                  props={props}\n                  toggle={toggle}\n                />\n              )\n            )}\n          </StyledContainerItems>\n        </React.Fragment>\n      ))}\n    </Masonry>\n  );\n};\n\nexport default React.memo(MenuBlock);\n"],"names":["React","StyledContainerMenu","StyledLeftComponent","Text","StyledContainerItems"],"mappings":";;;;;;;;;;;;AAgBA,MAAM,SAAsC,GAAA,CAAC,EAAE,OAAA,EAAS,QAAa,KAAA;AACnE,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,CAAA;AAAA,IAAG,UAAW,EAAA,MAAA;AAAA,IAAO,WAAY,EAAA,MAAA;AAAA,GAAA,EAChD,OAAQ,CAAA,GAAA,CAAI,CACX,IAAA,qBAAAA,yBAAA,CAAA,aAAA,CAACA,0BAAM,QAAN,EAAA;AAAA,IAAe,GAAA,EAAK,GAAG,IAAK,CAAA,KAAA,CAAA,CAAA;AAAA,GAC3B,kBAAAA,yBAAA,CAAA,aAAA,CAACC,kCACE,IAAK,CAAA,cAAA,4DACHC,0BAAqB,EAAA,IAAA,EAAA,IAAA,CAAK,cAAe,CAAA,kBAE3CF,yBAAA,CAAA,aAAA,CAAAG,cAAA,EAAA;AAAA,IAAK,UAAW,EAAA,MAAA;AAAA,GAAA,EAAQ,KAAK,KAAM,CACtC,mBACCH,yBAAA,CAAA,aAAA,CAAAI,2BAAA,EAAA,IAAA,EACE,KAAK,KAAM,CAAA,GAAA;AAAA,IACV,CAAC;AAAA,MACC,KAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,0BAECJ,yBAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,MACC,KAAA;AAAA,MACA,GAAK,EAAA,KAAA;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AAAA,GAGN,CACF,CACD,CACH,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,kBAAeA,yBAAA,CAAM,KAAK,SAAS,CAAA;;;;"}

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var React = require('react');
+var reactCore = require('@tecsinapse/react-core');
+var SubMenuBlock = require('./SubMenuBlock/SubMenuBlock.js');
+var styled$1 = require('../styled.js');
+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 MenuItem = ({
+  title,
+  Component = "a",
+  props = {},
+  rightComponents,
+  items,
+  toggle
+}) => {
+  const [open, setOpen] = React__default["default"].useState(false);
+  const noTextDecoration = { textDecoration: "none" };
+  const getIconName = () => open ? "arrow-up-drop-circle-outline" : "arrow-down-drop-circle-outline";
+  const handleMenuAction = () => setOpen(!open);
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerItemText, {
+    key: title
+  }, /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps(__spreadValues({}, props), {
+    style: noTextDecoration,
+    onClick: toggle
+  }), /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
+    colorVariant: open ? "primary" : "secondary",
+    colorTone: open ? "medium" : "dark"
+  }, /* @__PURE__ */ React__default["default"].createElement(styled$1.StyledText, null, title))), rightComponents && !items && /* @__PURE__ */ React__default["default"].createElement(styled$1.StyledRightComponent, null, rightComponents), items && /* @__PURE__ */ React__default["default"].createElement(styled.StyledSubButton, {
+    onClick: handleMenuAction
+  }, /* @__PURE__ */ React__default["default"].createElement(reactCore.Icon, {
+    name: getIconName(),
+    type: "material-community",
+    fontColor: "orange"
+  }))), open && (items == null ? void 0 : items.map((subItem) => /* @__PURE__ */ React__default["default"].createElement(SubMenuBlock, {
+    key: subItem.title,
+    data: subItem,
+    toggle
+  }))));
+};
+
+module.exports = MenuItem;
+//# sourceMappingURL=MenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { ElementType } from 'react';\nimport { Icon, Text } from '@tecsinapse/react-core';\nimport { SubMenuBlock } from './SubMenuBlock';\nimport { StyledRightComponent, StyledText } from '../styled';\nimport { StyledContainerItemText, StyledSubButton } from './styled';\nimport { ItemsOptions } from '../../types';\n\ninterface MenuItemProps {\n  title: string;\n  /** Wrapping component for element. This is used for navigation */\n  Component: ElementType;\n  /** Properties spread to wrapping Component */\n  props: any;\n  toggle: () => void;\n  rightComponents?: React.ReactNode;\n  items?: ItemsOptions[];\n}\n\nconst MenuItem: React.FC<MenuItemProps> = ({\n  title,\n  Component = 'a',\n  props = {},\n  rightComponents,\n  items,\n  toggle,\n}) => {\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  const getIconName = () =>\n    open ? 'arrow-up-drop-circle-outline' : 'arrow-down-drop-circle-outline';\n\n  const handleMenuAction = () => setOpen(!open);\n\n  return (\n    <>\n      <StyledContainerItemText key={title}>\n        <Component {...props} style={noTextDecoration} onClick={toggle}>\n          <Text\n            colorVariant={open ? 'primary' : 'secondary'}\n            colorTone={open ? 'medium' : 'dark'}\n          >\n            <StyledText>{title}</StyledText>\n          </Text>\n        </Component>\n        {rightComponents && !items && (\n          <StyledRightComponent>{rightComponents}</StyledRightComponent>\n        )}\n        {items && (\n          <StyledSubButton onClick={handleMenuAction}>\n            <Icon\n              name={getIconName()}\n              type=\"material-community\"\n              fontColor=\"orange\"\n            />\n          </StyledSubButton>\n        )}\n      </StyledContainerItemText>\n      {open &&\n        items?.map(subItem => (\n          <SubMenuBlock key={subItem.title} data={subItem} toggle={toggle} />\n        ))}\n    </>\n  );\n};\n\nexport default MenuItem;\n"],"names":["React","StyledContainerItemText","Text","StyledText","StyledRightComponent","StyledSubButton","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,WAAoC,CAAC;AAAA,EACzC,KAAA;AAAA,EACA,SAAY,GAAA,GAAA;AAAA,EACZ,QAAQ,EAAC;AAAA,EACT,eAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,yBAAA,CAAM,SAAkB,KAAK,CAAA,CAAA;AAErD,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAM,MAAA,WAAA,GAAc,MAClB,IAAA,GAAO,8BAAiC,GAAA,gCAAA,CAAA;AAE1C,EAAA,MAAM,gBAAmB,GAAA,MAAM,OAAQ,CAAA,CAAC,IAAI,CAAA,CAAA;AAE5C,EAAA,yHAEKA,yBAAA,CAAA,aAAA,CAAAC,8BAAA,EAAA;AAAA,IAAwB,GAAK,EAAA,KAAA;AAAA,GAC5B,kBAAAD,yBAAA,CAAA,aAAA,CAAC,4CAAc,KAAd,CAAA,EAAA;AAAA,IAAqB,KAAO,EAAA,gBAAA;AAAA,IAAkB,OAAS,EAAA,MAAA;AAAA,GAAA,CAAA,kBACrDA,yBAAA,CAAA,aAAA,CAAAE,cAAA,EAAA;AAAA,IACC,YAAA,EAAc,OAAO,SAAY,GAAA,WAAA;AAAA,IACjC,SAAA,EAAW,OAAO,QAAW,GAAA,MAAA;AAAA,GAAA,kBAE5BF,yBAAA,CAAA,aAAA,CAAAG,mBAAA,EAAA,IAAA,EAAY,KAAM,CACrB,CACF,CACC,EAAA,eAAA,IAAmB,CAAC,KAAA,oBAClBH,yBAAA,CAAA,aAAA,CAAAI,6BAAA,EAAA,IAAA,EAAsB,eAAgB,CAAA,EAExC,yBACEJ,yBAAA,CAAA,aAAA,CAAAK,sBAAA,EAAA;AAAA,IAAgB,OAAS,EAAA,gBAAA;AAAA,GAAA,kBACvBL,yBAAA,CAAA,aAAA,CAAAM,cAAA,EAAA;AAAA,IACC,MAAM,WAAY,EAAA;AAAA,IAClB,IAAK,EAAA,oBAAA;AAAA,IACL,SAAU,EAAA,QAAA;AAAA,GACZ,CACF,CAEJ,CAAA,EACC,SACC,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,CAAI,6BACRN,yBAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAA,IAAa,KAAK,OAAQ,CAAA,KAAA;AAAA,IAAO,IAAM,EAAA,OAAA;AAAA,IAAS,MAAA;AAAA,GAAgB,CAEvE,CAAA,CAAA,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var reactCore = require('@tecsinapse/react-core');
+var styled$1 = require('../../styled.js');
+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 SubMenuBlock = ({ data, toggle }) => {
+  const { Component, props, rightComponents, title } = data;
+  const noTextDecoration = { textDecoration: "none" };
+  return /* @__PURE__ */ React__default["default"].createElement(styled.StyledContainerItem, null, /* @__PURE__ */ React__default["default"].createElement(styled.DummyBorder, null), /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps(__spreadValues({}, props), {
+    style: noTextDecoration,
+    onClick: toggle
+  }), /* @__PURE__ */ React__default["default"].createElement(reactCore.Text, {
+    colorVariant: "secondary",
+    colorTone: "medium",
+    typography: "sub"
+  }, /* @__PURE__ */ React__default["default"].createElement(styled$1.StyledText, null, title))), rightComponents && /* @__PURE__ */ React__default["default"].createElement(styled$1.StyledRightComponent, null, rightComponents));
+};
+
+module.exports = SubMenuBlock;
+//# sourceMappingURL=SubMenuBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuBlock.js","sources":["../../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@tecsinapse/react-core';\nimport { StyledRightComponent, StyledText } from '../../styled';\nimport { ItemsOptions } from '../../../types';\nimport { DummyBorder, StyledContainerItem } from './styled';\n\ninterface SubMenuBlockProps {\n  data: ItemsOptions;\n  toggle: () => void;\n}\n\nconst SubMenuBlock: React.FC<SubMenuBlockProps> = ({ data, toggle }) => {\n  const { Component, props, rightComponents, title } = data;\n\n  const noTextDecoration = { textDecoration: 'none' };\n\n  return (\n    <StyledContainerItem>\n      <DummyBorder />\n      <Component {...props} style={noTextDecoration} onClick={toggle}>\n        <Text colorVariant=\"secondary\" colorTone=\"medium\" typography=\"sub\">\n          <StyledText>{title}</StyledText>\n        </Text>\n      </Component>\n      {rightComponents && (\n        <StyledRightComponent>{rightComponents}</StyledRightComponent>\n      )}\n    </StyledContainerItem>\n  );\n};\n\nexport default SubMenuBlock;\n"],"names":["StyledContainerItem","React","DummyBorder","Text","StyledText","StyledRightComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,YAA4C,GAAA,CAAC,EAAE,IAAA,EAAM,QAAa,KAAA;AACtE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAO,EAAA,eAAA,EAAiB,OAAU,GAAA,IAAA,CAAA;AAErD,EAAM,MAAA,gBAAA,GAAmB,EAAE,cAAA,EAAgB,MAAO,EAAA,CAAA;AAElD,EAAA,+DACGA,0BACC,EAAA,IAAA,kBAAAC,yBAAA,CAAA,aAAA,CAACC,wBAAY,CACb,kBAAAD,yBAAA,CAAA,aAAA,CAAC,4CAAc,KAAd,CAAA,EAAA;AAAA,IAAqB,KAAO,EAAA,gBAAA;AAAA,IAAkB,OAAS,EAAA,MAAA;AAAA,GAAA,CAAA,kBACrDA,yBAAA,CAAA,aAAA,CAAAE,cAAA,EAAA;AAAA,IAAK,YAAa,EAAA,WAAA;AAAA,IAAY,SAAU,EAAA,QAAA;AAAA,IAAS,UAAW,EAAA,KAAA;AAAA,GAC3D,kBAAAF,yBAAA,CAAA,aAAA,CAACG,mBAAY,EAAA,IAAA,EAAA,KAAM,CACrB,CACF,GACC,eACC,oBAAAH,yBAAA,CAAA,aAAA,CAACI,6BAAsB,EAAA,IAAA,EAAA,eAAgB,CAE3C,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('@emotion/styled');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledContainerItem = styled__default["default"]("div")`
+  display: flex;
+  align-items: center;
+`;
+const DummyBorder = styled__default["default"]("div")`
+  height: ${({ theme }) => theme.typography.sub.fontSize};
+  border-left: ${({ theme }) => `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+`;
+
+exports.DummyBorder = DummyBorder;
+exports.StyledContainerItem = StyledContainerItem;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItem = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  align-items: center;\n`;\n\nexport const DummyBorder = styled('div')<Partial<StyleProps>>`\n  height: ${({ theme }) => theme.typography.sub.fontSize};\n  border-left: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.primary.medium}`};\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n"],"names":["styled"],"mappings":";;;;;;;;;;AAGa,MAAA,mBAAA,GAAsBA,2BAAO,KAAK,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKlC,MAAA,WAAA,GAAcA,2BAAO,KAAK,CAAA,CAAA;AAAA,UAAA,EAC3B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,WAAW,GAAI,CAAA,QAAA,CAAA;AAAA,eAC/B,EAAA,CAAC,EAAE,KAAA,EAChB,KAAA,CAAA,EAAG,MAAM,WAAY,CAAA,IAAA,CAAA,OAAA,EAAc,KAAM,CAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,gBAAA,EACzC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;;;;;"}

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('@emotion/styled');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledContainerItemText = styled__default["default"]("div")`
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  display: flex;
+  align-items: center;
+`;
+const StyledSubButton = styled__default["default"]("span")`
+  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;
+  margin-left: ${({ theme }) => theme.spacing.mili};
+  cursor: pointer;
+  & * {
+    user-select: none;
+  }
+`;
+
+exports.StyledContainerItemText = StyledContainerItemText;
+exports.StyledSubButton = StyledSubButton;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../../../src/components/molecules/Menubar/MenuBlock/MenuItem/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerItemText = styled('div')<Partial<StyleProps>>`\n  margin-top: ${({ theme }) => theme.spacing.mili};\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSubButton = styled('span')<Partial<StyleProps>>`\n  padding-top: ${({ theme }) => theme.spacing.nano} 0 0 0;\n  margin-left: ${({ theme }) => theme.spacing.mili};\n  cursor: pointer;\n  & * {\n    user-select: none;\n  }\n`;\n"],"names":["styled"],"mappings":";;;;;;;;;;AAGa,MAAA,uBAAA,GAA0BA,2BAAO,KAAK,CAAA,CAAA;AAAA,cAAA,EACnC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKhC,MAAA,eAAA,GAAkBA,2BAAO,MAAM,CAAA,CAAA;AAAA,eAAA,EAC3B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,eAAA,EAC7B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;"}

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

@@ -0,0 +1,44 @@
+'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")`
+  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};
+  }
+`;
+
+exports.StyledContainerItems = StyledContainerItems;
+exports.StyledContainerMenu = StyledContainerMenu;
+exports.StyledLeftComponent = StyledLeftComponent;
+exports.StyledRightComponent = StyledRightComponent;
+exports.StyledText = StyledText;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +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;;;;;;;;"}

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

@@ -0,0 +1,133 @@
+'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\xEA voc\xEA deseja buscar?",
+    options,
+    mostUsed,
+    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 /* @__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 ? /* @__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
+  }))))));
+};
+
+module.exports = Menubar;
+//# sourceMappingURL=Menubar.js.map

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

@@ -0,0 +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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"}