infinity-forge 0.3.4 → 0.3.6

package/dist/system/presentation/components/layout/header/components/menu-right/messages/index.js

@@ -1,31 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Messages = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var semantic_ui_react_1 = require("semantic-ui-react");
+var content_1 = require("./content/index.js");
+var ui_1 = require("../../../../../../../../ui/index.js");
+var S = __importStar(require("./styles.js"));
+var styles_1 = require("../styles.js");
 function Messages() {
     var _a = (0, react_1.useState)(false), visible = _a[0], setVisible = _a[1];
-    // const { messages, isLoading, hasUnreadMessage } = useMessages()
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})
-    // <Error name='Messages'>
-    //   <S.Messages>
-    //     <Popup
-    //       open={visible}
-    //       onClose={() => setVisible(false)}
-    //       style={{ padding: '0', borderRadius: 6 }}
-    //       trigger={
-    //         <ActionButton onClick={() => setVisible(!visible)} type='button'>
-    //           {hasUnreadMessage && <div className='circle' />}
-    //           <Icon name='IconChatSolid' />
-    //         </ActionButton>
-    //       }
-    //       on='click'
-    //       content={<Content setVisible={setVisible} messages={messages} />}
-    //       position='bottom right'
-    //     />
-    //   </S.Messages>
-    // </Error>
-    );
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Messages', children: (0, jsx_runtime_1.jsx)(S.Messages, { children: (0, jsx_runtime_1.jsx)(semantic_ui_react_1.Popup, { open: visible, onClose: function () { return setVisible(false); }, style: { padding: '0', borderRadius: 6 }, trigger: (0, jsx_runtime_1.jsx)(styles_1.ActionBox, { onClick: function () { return setVisible(!visible); }, type: 'button', children: (0, jsx_runtime_1.jsx)(ui_1.IconChat, {}) }), on: 'click', content: (0, jsx_runtime_1.jsx)(content_1.Content, { setVisible: setVisible, messages: [] }), position: 'bottom right' }) }) }));
 }
 exports.Messages = Messages;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/components/menu-right/messages/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/messages/index.tsx"],"names":[],"mappings":";;;;AAAA,+BAAgC;AAShC,SAAgB,QAAQ;IAChB,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,kEAAkE;IAElE,OAAO,CACL,kDAAK;IACL,0BAA0B;IAC1B,iBAAiB;IACjB,aAAa;IACb,uBAAuB;IACvB,0CAA0C;IAC1C,kDAAkD;IAClD,kBAAkB;IAClB,4EAA4E;IAC5E,6DAA6D;IAE7D,0CAA0C;IAC1C,0BAA0B;IAC1B,UAAU;IACV,mBAAmB;IACnB,0EAA0E;IAC1E,gCAAgC;IAChC,SAAS;IACT,kBAAkB;IAClB,WAAW;KACZ,CAAA;AACH,CAAC;AA3BD,4BA2BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/messages/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAEhC,uDAAyC;AAEzC,qCAAmC;AACnC,2BAAsC;AAEtC,0CAA6B;AAC7B,oCAAqC;AAErC,SAAgB,QAAQ;IAChB,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,UAAU,YACpB,uBAAC,CAAC,CAAC,QAAQ,cACT,uBAAC,yBAAK,IACJ,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EAChC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,EACxC,OAAO,EACL,uBAAC,kBAAS,IAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,CAAC,OAAO,CAAC,EAApB,CAAoB,EAAE,IAAI,EAAC,QAAQ,YAG3D,uBAAC,aAAQ,KAAG,GACF,EAEd,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,uBAAC,iBAAO,IAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAI,EAC1D,QAAQ,EAAC,cAAc,GACvB,GACS,GACP,CACT,CAAA;AACH,CAAC;AAxBD,4BAwBC"}

package/dist/system/presentation/components/layout/header/components/menu-right/notifications/index.js

@@ -1,11 +1,36 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notifications = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ui_1 = require("../../../../../../../../ui/index.js");
+var S = __importStar(require("./styles.js"));
+var styles_1 = require("../styles.js");
 function Notifications() {
     var hasNotification = true;
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Notifications', children: "sfa" }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Notifications', children: (0, jsx_runtime_1.jsx)(S.Notifications, { children: (0, jsx_runtime_1.jsx)(styles_1.ActionBox, { type: 'button' }) }) }));
 }
 exports.Notifications = Notifications;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/components/menu-right/notifications/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/notifications/index.tsx"],"names":[],"mappings":";;;;AAAA,2BAAkC;AAGlC,SAAgB,aAAa;IAC3B,IAAM,eAAe,GAAG,IAAI,CAAA;IAE5B,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,eAAe,oBASnB,CACT,CAAA;AACH,CAAC;AAfD,sCAeC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/notifications/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAkC;AAGlC,0CAA6B;AAC7B,oCAAqC;AAErC,SAAgB,aAAa;IAC3B,IAAM,eAAe,GAAG,IAAI,CAAA;IAE5B,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,eAAe,YACzB,uBAAC,CAAC,CAAC,aAAa,cACd,uBAAC,kBAAS,IAAC,IAAI,EAAC,QAAQ,GAIZ,GACI,GACZ,CACT,CAAA;AACH,CAAC;AAdD,sCAcC"}

package/dist/system/presentation/components/layout/header/components/menu-right/profile/content/index.js

@@ -50,7 +50,7 @@ function Content() {
     function handleSignOut() {
         console.log('Saindo da conta...');
     }
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Content', children: (0, jsx_runtime_1.jsxs)(S.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'user-profile', children: (0, jsx_runtime_1.jsx)("div", { className: 'user-info' }) }), (0, jsx_runtime_1.jsx)("div", { className: 'menu', children: menuItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(link_1.default, { className: 'font-14-regular', href: item.href, passHref: true, children: (0, jsx_runtime_1.jsx)("span", { className: 'menu-item', children: item.name }) }, item.name)); }) }), (0, jsx_runtime_1.jsx)("div", { className: 'divider', children: (0, jsx_runtime_1.jsx)("button", { className: 'sign-out-button font-14-regular', type: 'button', onClick: handleSignOut, children: "Sign Out" }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Content', children: (0, jsx_runtime_1.jsxs)(S.Content, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'user-profile', children: (0, jsx_runtime_1.jsx)("div", { className: 'user-info' }) }), (0, jsx_runtime_1.jsx)("div", { className: 'menu', children: menuItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(link_1.default, { className: 'font-14-regular', href: item.href, children: (0, jsx_runtime_1.jsx)("span", { className: 'menu-item', children: item.name }) }, item.name)); }) }), (0, jsx_runtime_1.jsx)("div", { className: 'divider', children: (0, jsx_runtime_1.jsx)("button", { className: 'sign-out-button font-14-regular', type: 'button', onClick: handleSignOut, children: "Sign Out" }) })] }) }));
 }
 exports.Content = Content;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/components/menu-right/profile/content/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/profile/content/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,mDAA4B;AAE5B,2BAA4B;AAC5B,mCAAiC;AAEjC,0CAA6B;AAE7B,SAAgB,OAAO;IACrB,IAAM,SAAS,GAAG;QAChB;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,OAAO;SAC1B;QACD;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,QAAQ;SAC3B;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,WAAW;SAC9B;KACF,CAAA;IAED,SAAS,aAAa;QACpB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;IACnC,CAAC;IAED,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,SAAS,YACnB,wBAAC,CAAC,CAAC,OAAO,eACR,gCAAK,SAAS,EAAC,cAAc,YAG3B,gCAAK,SAAS,EAAC,WAAW,GAIpB,GACF,EAEN,gCAAK,SAAS,EAAC,MAAM,YAClB,SAAS,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACvB,uBAAC,cAAI,IAAC,SAAS,EAAC,iBAAiB,EAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,kBACzE,iCAAM,SAAS,EAAC,WAAW,YAAE,IAAI,CAAC,IAAI,GAAQ,IADT,IAAI,CAAC,IAAI,CAEzC,CACR,EAJwB,CAIxB,CAAC,GACE,EAEN,gCAAK,SAAS,EAAC,SAAS,YACtB,mCAAQ,SAAS,EAAC,iCAAiC,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,yBAE/E,GACL,IACI,GACN,CACT,CAAA;AACH,CAAC;AAjDD,0BAiDC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/profile/content/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,mDAA4B;AAE5B,2BAA4B;AAC5B,mCAAiC;AAEjC,0CAA6B;AAE7B,SAAgB,OAAO;IACrB,IAAM,SAAS,GAAG;QAChB;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,OAAO;SAC1B;QACD;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,QAAQ;SAC3B;QACD;YACE,IAAI,EAAE,kBAAkB;YACxB,IAAI,EAAE,eAAM,CAAC,IAAI,CAAC,WAAW;SAC9B;KACF,CAAA;IAED,SAAS,aAAa;QACpB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;IACnC,CAAC;IAED,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,SAAS,YACnB,wBAAC,CAAC,CAAC,OAAO,eACR,gCAAK,SAAS,EAAC,cAAc,YAG3B,gCAAK,SAAS,EAAC,WAAW,GAIpB,GACF,EAEN,gCAAK,SAAS,EAAC,MAAM,YAClB,SAAS,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACvB,uBAAC,cAAI,IAAC,SAAS,EAAC,iBAAiB,EAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,YAC/D,iCAAM,SAAS,EAAC,WAAW,YAAE,IAAI,CAAC,IAAI,GAAQ,IADT,IAAI,CAAC,IAAI,CAEzC,CACR,EAJwB,CAIxB,CAAC,GACE,EAEN,gCAAK,SAAS,EAAC,SAAS,YACtB,mCAAQ,SAAS,EAAC,iCAAiC,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,yBAE/E,GACL,IACI,GACN,CACT,CAAA;AACH,CAAC;AAjDD,0BAiDC"}

package/dist/system/presentation/components/layout/header/components/menu-right/profile/index.js

@@ -31,7 +31,8 @@ var system_1 = require("../../../../../../../../system/index.js");
 var content_1 = require("./content/index.js");
 var S = __importStar(require("./styles.js"));
 function Profile() {
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Profile', children: (0, jsx_runtime_1.jsx)(S.Profile, { children: (0, jsx_runtime_1.jsx)(semantic_ui_react_1.Popup, { style: { padding: '0' }, trigger: (0, jsx_runtime_1.jsx)(system_1.Avatar, { image: '' }), on: 'click', content: (0, jsx_runtime_1.jsx)(content_1.Content, {}), position: 'bottom right' }) }) }));
+    var avatarImage = '' || '/images/avatar-default.png';
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Profile', children: (0, jsx_runtime_1.jsx)(S.Profile, { children: (0, jsx_runtime_1.jsx)(semantic_ui_react_1.Popup, { style: { padding: '0' }, trigger: (0, jsx_runtime_1.jsx)(system_1.Avatar, { image: avatarImage }), on: 'click', content: (0, jsx_runtime_1.jsx)(content_1.Content, {}), position: 'bottom right' }) }) }));
 }
 exports.Profile = Profile;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/components/menu-right/profile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/profile/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAyC;AAEzC,2BAA4B;AAC5B,mCAAiC;AACjC,qCAAmC;AAEnC,0CAA6B;AAE7B,SAAgB,OAAO;IACrB,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,SAAS,YACnB,uBAAC,CAAC,CAAC,OAAO,cACR,uBAAC,yBAAK,IACJ,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,OAAO,EAAE,uBAAC,eAAM,IAAC,KAAK,EAAE,EAAE,GAAK,EAC/B,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,uBAAC,iBAAO,KAAG,EACpB,QAAQ,EAAC,cAAc,GACvB,GACQ,GACN,CACT,CAAA;AACH,CAAC;AAdD,0BAcC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/profile/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAyC;AAEzC,2BAA4B;AAC5B,mCAAiC;AACjC,qCAAmC;AAEnC,0CAA6B;AAE7B,SAAgB,OAAO;IACrB,IAAM,WAAW,GAAG,EAAE,IAAI,4BAA4B,CAAA;IACtD,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,SAAS,YACnB,uBAAC,CAAC,CAAC,OAAO,cACR,uBAAC,yBAAK,IACJ,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,OAAO,EAAE,uBAAC,eAAM,IAAC,KAAK,EAAE,WAAW,GAAI,EACvC,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,uBAAC,iBAAO,KAAG,EACpB,QAAQ,EAAC,cAAc,GACvB,GACQ,GACN,CACT,CAAA;AACH,CAAC;AAfD,0BAeC"}

package/dist/system/presentation/components/layout/header/components/menu-right/settings/index.js

@@ -29,6 +29,7 @@ var react_1 = require("react");
 var semantic_ui_react_1 = require("semantic-ui-react");
 var S = __importStar(require("./styles.js"));
 var ui_1 = require("../../../../../../../../ui/index.js");
+var styles_1 = require("../styles.js");
 function Settings() {
     var _a = (0, react_1.useState)(false), visible = _a[0], setVisible = _a[1];
     var fullHeightStyle = { minHeight: '100vh', position: 'absolute', top: 0, right: 0, zIndex: '999999999' };
@@ -36,7 +37,7 @@ function Settings() {
         setVisible(false);
         return;
     }
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Settings', children: (0, jsx_runtime_1.jsx)(S.Settings, { children: (0, jsx_runtime_1.jsx)(semantic_ui_react_1.Sidebar, { as: semantic_ui_react_1.Menu, animation: 'overlay', icon: 'labeled', onHide: handleClose, vertical: true, direction: 'right', visible: visible, width: 'wide', onHidden: handleClose, style: fullHeightStyle, children: (0, jsx_runtime_1.jsxs)("div", { className: 'side-bar-header', children: [(0, jsx_runtime_1.jsx)("h6", { className: 'font-18-bold', children: "Configura\u00E7\u00F5es" }), (0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleClose })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Settings', children: (0, jsx_runtime_1.jsxs)(S.Settings, { children: [(0, jsx_runtime_1.jsx)(styles_1.ActionBox, { onClick: function () { return setVisible(true); }, type: 'button', children: (0, jsx_runtime_1.jsx)(ui_1.IconGear, {}) }), (0, jsx_runtime_1.jsx)(semantic_ui_react_1.Sidebar, { as: semantic_ui_react_1.Menu, animation: 'overlay', icon: 'labeled', onHide: handleClose, vertical: true, direction: 'right', visible: visible, width: 'wide', onHidden: handleClose, style: fullHeightStyle, children: (0, jsx_runtime_1.jsxs)("div", { className: 'side-bar-header', children: [(0, jsx_runtime_1.jsx)("h6", { className: 'font-18-bold', children: "Configura\u00E7\u00F5es" }), (0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: handleClose })] }) })] }) }));
 }
 exports.Settings = Settings;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/components/menu-right/settings/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/settings/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAEhC,uDAA2D;AAE3D,0CAA6B;AAC7B,2BAA4B;AAE5B,SAAgB,QAAQ;IAChB,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,IAAM,eAAe,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAA;IAE3G,SAAS,WAAW;QAClB,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,OAAM;IACR,CAAC;IAED,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,UAAU,YACpB,uBAAC,CAAC,CAAC,QAAQ,cAKT,uBAAC,2BAAO,IACN,EAAE,EAAE,wBAAI,EACR,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,WAAW,EACnB,QAAQ,QACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,eAAe,YAEtB,iCAAK,SAAS,EAAC,iBAAiB,aAC9B,+BAAI,SAAS,EAAC,cAAc,wCAAmB,EAE/C,mCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,GAEjC,IACL,GAcE,GACC,GACP,CACT,CAAA;AACH,CAAC;AArDD,4BAqDC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/settings/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAEhC,uDAA2D;AAE3D,0CAA6B;AAC7B,2BAAsC;AACtC,oCAAqC;AAErC,SAAgB,QAAQ;IAChB,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAA;IAE7C,IAAM,eAAe,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAA;IAE3G,SAAS,WAAW;QAClB,UAAU,CAAC,KAAK,CAAC,CAAA;QACjB,OAAM;IACR,CAAC;IAED,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,UAAU,YACpB,wBAAC,CAAC,CAAC,QAAQ,eACT,uBAAC,kBAAS,IAAC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EAAE,IAAI,EAAC,QAAQ,YACvD,uBAAC,aAAQ,KAAG,GACF,EAEZ,uBAAC,2BAAO,IACN,EAAE,EAAE,wBAAI,EACR,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,WAAW,EACnB,QAAQ,QACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,eAAe,YAEtB,iCAAK,SAAS,EAAC,iBAAiB,aAC9B,+BAAI,SAAS,EAAC,cAAc,wCAAmB,EAE/C,mCAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,GAEjC,IACL,GAcE,IACC,GACP,CACT,CAAA;AACH,CAAC;AArDD,4BAqDC"}

package/dist/system/presentation/components/layout/header/components/menu-right/styles.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const MenuRight: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ActionBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;

package/dist/system/presentation/components/layout/header/components/menu-right/styles.js

@@ -7,8 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuRight = void 0;
+exports.ActionBox = exports.MenuRight = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.MenuRight = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n"], ["\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n"])));
-var templateObject_1;
+exports.ActionBox = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n  border-radius: 5px;\n  border: 0;\n  box-shadow: 0px 0px 5px 0px #00000033;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #fff;\n  cursor: pointer;\n  padding: 10px;\n"], ["\n  width: 40px;\n  height: 40px;\n  border-radius: 5px;\n  border: 0;\n  box-shadow: 0px 0px 5px 0px #00000033;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #fff;\n  cursor: pointer;\n  padding: 10px;\n"])));
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=styles.js.map

package/dist/system/presentation/components/layout/header/components/menu-right/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,wJAAA,qFAKlC,KAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/header/components/menu-right/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,wJAAA,qFAKlC,KAAA;AACY,QAAA,SAAS,GAAG,2BAAM,CAAC,MAAM,wTAAA,qPAYrC,KAAA"}

package/dist/system/presentation/components/layout/header/components/search-modal/trigger/index.js

@@ -39,7 +39,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var ui_1 = require("../../../../../../../../ui/index.js");
 var S = __importStar(require("./styles.js"));
 function SearchTrigger(props) {
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'SearchTrigger', children: (0, jsx_runtime_1.jsxs)(S.SearchTrigger, __assign({ "aria-label": 'Search' }, props, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'placeholder font-14-regular', children: "Search your page..." }), (0, jsx_runtime_1.jsx)("span", { className: 'search-command ', children: (0, jsx_runtime_1.jsx)("span", { className: 'font-12-semidbold uppercase', children: "K" }) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'SearchTrigger', children: (0, jsx_runtime_1.jsx)(S.SearchTrigger, __assign({ "aria-label": 'Search' }, props, { children: (0, jsx_runtime_1.jsx)("span", { className: 'placeholder font-14-regular', children: "Pesquisar..." }) })) }));
 }
 exports.SearchTrigger = SearchTrigger;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/components/search-modal/trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/search-modal/trigger/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAA4B;AAC5B,0CAA6B;AAE7B,SAAgB,aAAa,CAAC,KAAK;IACjC,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,eAAe,YACzB,wBAAC,CAAC,CAAC,aAAa,2BAAY,QAAQ,IAAK,KAAK,eAG5C,iCAAM,SAAS,EAAC,6BAA6B,oCAA2B,EAExE,iCAAM,SAAS,EAAC,iBAAiB,YAG/B,iCAAM,SAAS,EAAC,6BAA6B,kBAAS,GACjD,KACS,GACZ,CACT,CAAA;AACH,CAAC;AAhBD,sCAgBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/search-modal/trigger/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAkC;AAElC,0CAA6B;AAE7B,SAAgB,aAAa,CAAC,KAAK;IACjC,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,eAAe,YACzB,uBAAC,CAAC,CAAC,aAAa,2BAAY,QAAQ,IAAK,KAAK,cAG5C,iCAAM,SAAS,EAAC,6BAA6B,6BAAoB,IACjD,GACZ,CACT,CAAA;AACH,CAAC;AAVD,sCAUC"}

package/dist/system/presentation/components/layout/header/components/search-modal/trigger/styles.js

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchTrigger = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.SearchTrigger = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: transform 0.2s, border-color 0.2s;\n  width: 100%;\n  background: rgba(255, 255, 255, 1);\n  backdrop-filter: blur(12px);\n  cursor: pointer;\n  max-width: fit-content;\n  padding: 0;\n  height: fit-content;\n  border: 0;\n\n  svg {\n    margin-right: 0.5rem;\n    height: 18px;\n    width: 18px;\n  }\n\n  .placeholder {\n    display: none;\n    color: #484848;\n\n    .group:hover & {\n      color: rgba(17, 24, 39, 1);\n    }\n\n    @media (min-width: 1280px) {\n      display: inline-flex;\n    }\n  }\n\n  .search-command {\n    margin-left: auto;\n    align-items: center;\n    color: rgba(156, 163, 175, 1);\n    background-color: #3872fa;\n    display: none;\n\n    border-radius: 5px;\n\n    padding: 4px 6px;\n    font-weight: 600;\n    color: #fff;\n\n    > svg {\n      height: 15px;\n      width: 15px;\n      margin: 0;\n      margin-right: 2px;\n    }\n  }\n\n  @media only screen and (min-width: 1024px) {\n    width: 100%;\n    max-width: 384px;\n    border-radius: 6px;\n    border: 1px solid rgba(156, 163, 175, 0.2);\n    height: 40px;\n    padding: 0.5rem 0.5rem 0.5rem 0.875rem !important;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n\n    &:active {\n      transform: translateY(1px);\n    }\n\n    &:hover {\n      border-color: #000000;\n      outline-style: double;\n      outline-width: 0.5px;\n      outline-color: #000000;\n    }\n\n    &:focus-visible {\n      border-color: #000000;\n      outline-style: double;\n      outline-width: 0.5px;\n      outline-color: #000000;\n    }\n\n    .placeholder {\n      display: block;\n    }\n  }\n\n  @media only screen and (min-width: 768px) {\n    .search-command {\n      display: flex;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: transform 0.2s, border-color 0.2s;\n  width: 100%;\n  background: rgba(255, 255, 255, 1);\n  backdrop-filter: blur(12px);\n  cursor: pointer;\n  max-width: fit-content;\n  padding: 0;\n  height: fit-content;\n  border: 0;\n\n  svg {\n    margin-right: 0.5rem;\n    height: 18px;\n    width: 18px;\n  }\n\n  .placeholder {\n    display: none;\n    color: #484848;\n\n    .group:hover & {\n      color: rgba(17, 24, 39, 1);\n    }\n\n    @media (min-width: 1280px) {\n      display: inline-flex;\n    }\n  }\n\n  .search-command {\n    margin-left: auto;\n    align-items: center;\n    color: rgba(156, 163, 175, 1);\n    background-color: #3872fa;\n    display: none;\n\n    border-radius: 5px;\n\n    padding: 4px 6px;\n    font-weight: 600;\n    color: #fff;\n\n    > svg {\n      height: 15px;\n      width: 15px;\n      margin: 0;\n      margin-right: 2px;\n    }\n  }\n\n  @media only screen and (min-width: 1024px) {\n    width: 100%;\n    max-width: 384px;\n    border-radius: 6px;\n    border: 1px solid rgba(156, 163, 175, 0.2);\n    height: 40px;\n    padding: 0.5rem 0.5rem 0.5rem 0.875rem !important;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n\n    &:active {\n      transform: translateY(1px);\n    }\n\n    &:hover {\n      border-color: #000000;\n      outline-style: double;\n      outline-width: 0.5px;\n      outline-color: #000000;\n    }\n\n    &:focus-visible {\n      border-color: #000000;\n      outline-style: double;\n      outline-width: 0.5px;\n      outline-color: #000000;\n    }\n\n    .placeholder {\n      display: block;\n    }\n  }\n\n  @media only screen and (min-width: 768px) {\n    .search-command {\n      display: flex;\n    }\n  }\n"])));
+exports.SearchTrigger = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 473px;\n  height: 40px;\n  padding: 0 16px;\n  border: 1px solid #e1e1e1;\n  border-radius: 5px;\n  background: #fff;\n  font-weight: 400;\n  color: #828282;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n  cursor: pointer;\n\n  .icon {\n    width: 20px;\n    height: 20px;\n    display: flex;\n\n    svg {\n      width: 100%;\n      height: auto;\n      fill: currentColor;\n    }\n  }\n"], ["\n  width: 100%;\n  max-width: 473px;\n  height: 40px;\n  padding: 0 16px;\n  border: 1px solid #e1e1e1;\n  border-radius: 5px;\n  background: #fff;\n  font-weight: 400;\n  color: #828282;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n  cursor: pointer;\n\n  .icon {\n    width: 20px;\n    height: 20px;\n    display: flex;\n\n    svg {\n      width: 100%;\n      height: auto;\n      fill: currentColor;\n    }\n  }\n"])));
 var templateObject_1;
 //# sourceMappingURL=styles.js.map

package/dist/system/presentation/components/layout/header/components/search-modal/trigger/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/search-modal/trigger/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,aAAa,GAAG,2BAAM,CAAC,MAAM,0yDAAA,uuDA2FzC,KAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../../src/system/presentation/components/layout/header/components/search-modal/trigger/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,aAAa,GAAG,2BAAM,CAAC,MAAM,khBAAA,+cA2BzC,KAAA"}

package/dist/system/presentation/components/layout/header/version-01/index.js

@@ -30,7 +30,7 @@ var components_1 = require("../components/index.js");
 var S = __importStar(require("./styles.js"));
 function HeaderVersion01() {
     var isFixed = (0, ui_1.useScreen)().isFixed;
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'HeaderCarbon', children: (0, jsx_runtime_1.jsxs)(S.HeaderVersion01, { isSticky: isFixed, children: [(0, jsx_runtime_1.jsx)(components_1.SearchModal, {}), (0, jsx_runtime_1.jsx)(components_1.MenuRight, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'HeaderCarbon', children: (0, jsx_runtime_1.jsx)(S.HeaderVersion01, { isSticky: isFixed, children: (0, jsx_runtime_1.jsxs)(ui_1.Container, { children: [(0, jsx_runtime_1.jsx)(components_1.SearchModal, {}), (0, jsx_runtime_1.jsx)(components_1.MenuRight, {})] }) }) }));
 }
 exports.HeaderVersion01 = HeaderVersion01;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/header/version-01/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/header/version-01/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAuC;AAEvC,4CAAsD;AAEtD,0CAA6B;AAE7B,SAAgB,eAAe;IACrB,IAAA,OAAO,GAAK,IAAA,cAAS,GAAE,QAAhB,CAAgB;IAE/B,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,cAAc,YACxB,wBAAC,CAAC,CAAC,eAAe,IAAC,QAAQ,EAAE,OAAO,aAClC,uBAAC,wBAAW,KAAG,EAEf,uBAAC,sBAAS,KAAG,IACK,GACd,CACT,CAAA;AACH,CAAC;AAZD,0CAYC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/header/version-01/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAkD;AAElD,4CAAsD;AAEtD,0CAA6B;AAE7B,SAAgB,eAAe;IACrB,IAAA,OAAO,GAAK,IAAA,cAAS,GAAE,QAAhB,CAAgB;IAE/B,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,cAAc,YACxB,uBAAC,CAAC,CAAC,eAAe,IAAC,QAAQ,EAAE,OAAO,YAClC,wBAAC,cAAS,eACR,uBAAC,wBAAW,KAAG,EAEf,uBAAC,sBAAS,KAAG,IACH,GACM,GACd,CACT,CAAA;AACH,CAAC;AAdD,0CAcC"}

package/dist/system/presentation/components/layout/header/version-01/styles.js

@@ -29,7 +29,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderVersion01 = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.HeaderVersion01 = styled_components_1.default.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  position: sticky;\n  top: 0;\n  z-index: 990;\n  display: flex;\n  align-items: center;\n  background: transparent;\n  padding: 1.6rem 0;\n  backdrop-filter: blur(20px);\n  transition: box-shadow 0.2s ease-in-out;\n  justify-content: space-between;\n\n  ", "\n"], ["\n  width: 100%;\n  position: sticky;\n  top: 0;\n  z-index: 990;\n  display: flex;\n  align-items: center;\n  background: transparent;\n  padding: 1.6rem 0;\n  backdrop-filter: blur(20px);\n  transition: box-shadow 0.2s ease-in-out;\n  justify-content: space-between;\n\n  ", "\n"])), function (_a) {
+exports.HeaderVersion01 = styled_components_1.default.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  position: sticky;\n  top: 0;\n  background: transparent;\n  padding: 20px 0;\n  backdrop-filter: blur(20px);\n  transition: box-shadow 0.2s ease-in-out;\n\n  .container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  ", "\n"], ["\n  width: 100%;\n  position: sticky;\n  top: 0;\n  background: transparent;\n  padding: 20px 0;\n  backdrop-filter: blur(20px);\n  transition: box-shadow 0.2s ease-in-out;\n\n  .container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  ", "\n"])), function (_a) {
     var isSticky = _a.isSticky;
     return isSticky && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n      background: rgba(249, 250, 251, 0.8);\n    "], ["\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n      background: rgba(249, 250, 251, 0.8);\n    "])));
 });

package/dist/system/presentation/components/layout/header/version-01/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/header/version-01/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAA+C;AAMlC,QAAA,eAAe,GAAG,2BAAM,CAAC,MAAM,6VAAoB,oRAa5D,EAKC,IACJ,KANG,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,QACR,uBAAG,qNAAA,iJAGF,IAAA;AAJD,CAIC,EACJ"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/header/version-01/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAA+C;AAMlC,QAAA,eAAe,GAAG,2BAAM,CAAC,MAAM,uWAAoB,8RAe5D,EAKC,IACJ,KANG,UAAC,EAAY;QAAV,QAAQ,cAAA;IACX,OAAA,QAAQ,QACR,uBAAG,qNAAA,iJAGF,IAAA;AAJD,CAIC,EACJ"}

package/dist/system/presentation/components/layout/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./menu/index.js";
-export * from "./header/index.js";
-export * from "./component.js";
+export * from './menu/index.js';
+export * from './header/index.js';
+export * from './component.js';

package/dist/system/presentation/components/layout/menu/components/menu/index.js

@@ -34,26 +34,18 @@ var ui_1 = require("../../../../../../../ui/index.js");
 var system_1 = require("../../../../../../../system/index.js");
 var S = __importStar(require("./styles.js"));
 function MenuItem(_a) {
-    var _b;
-    var menuItem = _a.menuItem;
-    var Icon = menuItem === null || menuItem === void 0 ? void 0 : menuItem.icon;
-    var isLink = !menuItem.subMenuItems;
-    return ((0, jsx_runtime_1.jsx)("li", { children: isLink ? ((0, jsx_runtime_1.jsx)(link_1.default, { href: menuItem.href, children: (0, jsx_runtime_1.jsxs)("div", { children: [Icon && (0, jsx_runtime_1.jsx)("span", { className: 'icon', children: (0, jsx_runtime_1.jsx)(Icon, {}) }), (0, jsx_runtime_1.jsx)("span", { children: menuItem.name })] }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'relative', children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: 'icon', children: (0, jsx_runtime_1.jsx)(Icon, {}) }), (0, jsx_runtime_1.jsx)("span", { children: menuItem.name })] }), "COLOCAR ICONE DE ARROW", (menuItem === null || menuItem === void 0 ? void 0 : menuItem.subMenuItems) && ((0, jsx_runtime_1.jsx)("div", { className: 'extra-box', children: (_b = menuItem.subMenuItems) === null || _b === void 0 ? void 0 : _b.map(function (item) { return ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.href, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("span", { children: item.name }) }) })); }) }))] }) })) }));
+    var item = _a.item;
+    var _b = (0, react_1.useState)(false), isSubMenuVisible = _b[0], setIsSubMenuVisible = _b[1];
+    var hasMenuItems = item.menuItems && item.menuItems.length > 0;
+    return ((0, jsx_runtime_1.jsxs)("li", { onMouseEnter: function () { return hasMenuItems && setIsSubMenuVisible(true); }, onMouseLeave: function () { return hasMenuItems && setIsSubMenuVisible(false); }, children: [item.href ? ((0, jsx_runtime_1.jsx)(link_1.default, { href: item.href, className: "item-title", children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: item.icon }) }), item.titulo] }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "item-title", children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: item.icon }) }), item.titulo, hasMenuItems && ((0, jsx_runtime_1.jsx)("div", { className: 'arrow', children: (0, jsx_runtime_1.jsx)(ui_1.Icon, { name: 'IconKeyboardRightArrow' }) }))] }) })), hasMenuItems && isSubMenuVisible && (0, jsx_runtime_1.jsx)(SubMenu, { item: item.menuItems }, 'submenu' + item.id)] }));
 }
-function WhiteBox(_a) {
-    var _b;
+function SubMenu(_a) {
     var item = _a.item;
-    return ((0, jsx_runtime_1.jsx)("ul", { className: 'white-box', children: (_b = item.menuItems) === null || _b === void 0 ? void 0 : _b.map(function (menuItem) {
-            return (0, jsx_runtime_1.jsx)(MenuItem, { menuItem: menuItem });
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(S.SubMenu, { className: 'submenu', children: item.map(function (subitem) { return ((0, jsx_runtime_1.jsx)(MenuItem, { item: subitem })); }) }));
 }
 function Menu() {
-    var _a = (0, react_1.useState)(system_1.MENU_ITEMS || []), items = _a[0], setItems = _a[1];
-    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Menu', children: (0, jsx_runtime_1.jsxs)(S.Menu, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'title', children: (0, jsx_runtime_1.jsx)("span", { className: 'font-12-regular uppercase', children: "Menu" }) }), (0, jsx_runtime_1.jsx)("ul", { children: items.map(function (item) {
-                        // const Icon = item.icon
-                        var hasMenuItems = item.menuItems && item.menuItems.length > 0;
-                        return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("div", { className: "item-title", children: [(0, jsx_runtime_1.jsx)("span", { children: item.name }), hasMenuItems && (0, jsx_runtime_1.jsx)(WhiteBox, { item: item })] }) }));
-                    }) })] }) }));
+    var _a = (0, react_1.useState)(system_1.SIDE_BAR_ITEMS || []), items = _a[0], setItems = _a[1];
+    return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'Menu', children: (0, jsx_runtime_1.jsx)(S.Menu, { className: 'menu', children: items.map(function (item) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'title', children: (0, jsx_runtime_1.jsx)("h5", { className: 'font-12-regular uppercase', children: item.label }) }), (0, jsx_runtime_1.jsx)("ul", { children: item.items.map(function (menu) { return ((0, jsx_runtime_1.jsx)(MenuItem, { item: menu })); }) })] })); }) }) }));
 }
 exports.Menu = Menu;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/menu/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/menu/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAEhC,mDAA4B;AAE5B,2BAA4B;AAC5B,mCAAqC;AAErC,0CAA6B;AAE7B,SAAS,QAAQ,CAAC,EAAY;;QAAV,QAAQ,cAAA;IAC1B,IAAM,IAAI,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,CAAA;IAC3B,IAAM,MAAM,GAAG,CAAC,QAAQ,CAAC,YAAY,CAAA;IAErC,OAAO,CACL,yCACG,MAAM,CAAC,CAAC,CAAC,CACR,uBAAC,cAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,YACvB,4CACG,IAAI,IAAI,iCAAM,SAAS,EAAC,MAAM,YAAE,uBAAC,IAAI,KAAG,GAAQ,EAEjD,2CAAO,QAAQ,CAAC,IAAI,GAAQ,IACxB,GACD,CACR,CAAC,CAAC,CAAC,CACF,2DACE,iCAAK,SAAS,EAAC,UAAU,aACvB,4CACE,iCAAM,SAAS,EAAC,MAAM,YAAE,uBAAC,IAAI,KAAG,GAAQ,EAExC,2CAAO,QAAQ,CAAC,IAAI,GAAQ,IACxB,4BAIL,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,YAAY,KAAI,CACzB,gCAAK,SAAS,EAAC,WAAW,YACvB,MAAA,QAAQ,CAAC,YAAY,0CAAE,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACpC,uBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,YACnB,0CACE,2CAAO,IAAI,CAAC,IAAI,GAAQ,GACpB,GACD,CACR,EANqC,CAMrC,CAAC,GACE,CACP,IACG,GACL,CACJ,GACE,CACN,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,EAAQ;;QAAN,IAAI,UAAA;IACtB,OAAO,CACL,+BAAI,SAAS,EAAC,WAAW,YACtB,MAAA,IAAI,CAAC,SAAS,0CAAE,GAAG,CAAC,UAAC,QAAQ;YAC5B,OAAO,uBAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAA;QACzC,CAAC,CAAC,GACC,CACN,CAAA;AACH,CAAC;AAED,SAAgB,IAAI;IACZ,IAAA,KAAoB,IAAA,gBAAQ,EAAC,mBAAU,IAAI,EAAE,CAAC,EAA7C,KAAK,QAAA,EAAE,QAAQ,QAA8B,CAAA;IAEpD,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,MAAM,YAChB,wBAAC,CAAC,CAAC,IAAI,eACL,gCAAK,SAAS,EAAC,OAAO,YACpB,iCAAM,SAAS,EAAC,2BAA2B,qBAAY,GACnD,EAEN,yCACG,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI;wBACd,yBAAyB;wBACzB,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAA;wBAEhE,OAAO,CACL,yCACE,iCAAK,SAAS,EAAE,YAAY,aAC1B,2CAGG,IAAI,CAAC,IAAI,GACL,EAEN,YAAY,IAAI,uBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,IACrC,GACH,CACN,CAAA;oBACH,CAAC,CAAC,GACC,IACE,GACH,CACT,CAAA;AACH,CAAC;AAjCD,oBAiCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/menu/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAEhC,mDAA4B;AAE5B,2BAAkC;AAClC,mCAAgD;AAEhD,0CAA6B;AAE7B,SAAS,QAAQ,CAAC,EAAQ;QAAN,IAAI,UAAA;IAChB,IAAA,KAA0C,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAxD,gBAAgB,QAAA,EAAE,mBAAmB,QAAmB,CAAA;IAC/D,IAAM,YAAY,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAA;IAEhE,OAAO,CACL,gCACE,YAAY,EAAE,cAAM,OAAA,YAAY,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAzC,CAAyC,EAC7D,YAAY,EAAE,cAAM,OAAA,YAAY,IAAI,mBAAmB,CAAC,KAAK,CAAC,EAA1C,CAA0C,aAE7D,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,uBAAC,cAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,YAC5C,6CACE,gCAAK,SAAS,EAAC,MAAM,YAAE,uBAAC,SAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GAAO,EAEtD,IAAI,CAAC,MAAM,IACP,GACF,CACR,CAAC,CAAC,CAAC,CACF,gCAAK,SAAS,EAAE,YAAY,YAC1B,6CACE,gCAAK,SAAS,EAAC,MAAM,YAAE,uBAAC,SAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GAAO,EAEtD,IAAI,CAAC,MAAM,EAEX,YAAY,IAAI,CACf,gCAAK,SAAS,EAAC,OAAO,YACpB,uBAAC,SAAI,IAAC,IAAI,EAAC,wBAAwB,GAAG,GAClC,CACP,IACI,GACH,CACP,EAEA,YAAY,IAAI,gBAAgB,IAAI,uBAAC,OAAO,IAA2B,IAAI,EAAE,IAAI,CAAC,SAAS,IAAzC,SAAS,GAAG,IAAI,CAAC,EAAE,CAA0B,IAC7F,CACN,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EAA2B;QAAzB,IAAI,UAAA;IACrB,OAAO,CACL,uBAAC,CAAC,CAAC,OAAO,IAAC,SAAS,EAAC,SAAS,YAC3B,IAAI,CAAC,GAAG,CAAC,UAAC,OAAO,IAAK,OAAA,CACrB,uBAAC,QAAQ,IAAC,IAAI,EAAE,OAAO,GAAI,CAC5B,EAFsB,CAEtB,CAAC,GACQ,CACb,CAAA;AACH,CAAC;AAED,SAAgB,IAAI;IACZ,IAAA,KAAoB,IAAA,gBAAQ,EAAC,uBAAc,IAAI,EAAE,CAAC,EAAjD,KAAK,QAAA,EAAE,QAAQ,QAAkC,CAAA;IAExD,OAAO,CACL,uBAAC,UAAK,IAAC,IAAI,EAAC,MAAM,YAChB,uBAAC,CAAC,CAAC,IAAI,IAAC,SAAS,EAAC,MAAM,YACrB,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACnB,6DACE,gCAAK,SAAS,EAAC,OAAO,YACpB,+BAAI,SAAS,EAAC,2BAA2B,YAAE,IAAI,CAAC,KAAK,GAAM,GACvD,EAEN,yCACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,CACxB,uBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,CACzB,EAFyB,CAEzB,CAAC,GACC,IACJ,CACJ,EAZoB,CAYpB,CAAC,GACK,GACH,CACT,CAAA;AACH,CAAC;AAtBD,oBAsBC"}

package/dist/system/presentation/components/layout/menu/components/menu/styles.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const Menu: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SubMenu: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;

package/dist/system/presentation/components/layout/menu/components/menu/styles.js

@@ -7,8 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
+exports.SubMenu = exports.Menu = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.Menu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n  }\n\n  .title {\n    display: block;\n\n    color: #9ca3af; \n    padding: 20px 24px 0;\n\n    .dark & {\n      color: #4b5563; \n    }\n  }\n\n  .item-title {\n    color: #444;\n    border-radius: 8px;\n    margin: 8px 20px 8px 14px;\n    padding: 10px 12px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: transform 0.1s ease-in-out;\n    position: relative;\n    z-index: 23;\n    font-weight: 600;\n\n    &.active {\n      background-color: #3872fa;\n      color: #fff;\n    }\n\n    &:hover {\n      background-color: #3872fa;\n      color: #fff;\n\n      .white-box {\n        display: block;\n      }\n    }\n\n    &:hover {\n      transform: scale(1.01);\n    }\n\n    > span {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n\n      .icon {\n        width: 24px;\n        height: 24px;\n\n        > svg {\n          width: 100%;\n          height: auto;\n        }\n      }\n    }\n\n    .arrow {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  .white-box {\n    border-radius: 6px;\n    padding: 12px 8px;\n    position: absolute;\n    z-index: 24;\n    top: 0;\n    right: -120%;\n    min-width: max-content;\n    width: 280px;\n    background-color: #ffffff; /* bg-gray-0 pode ser substitu\u00EDdo pelo valor real do seu tema */\n    border: 1px solid #d1d5db; /* border-gray-300 */\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* drop-shadow-lg */\n    transition: background-color 0.3s, border-color 0.3s;\n    display: none;\n\n    .relative {\n      position: relative;\n\n      &:hover {\n        .extra-box {\n          display: flex;\n        }\n      }\n\n      .extra-box {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        border-radius: 6px;\n        padding: 12px 8px;\n        position: absolute;\n        z-index: 24;\n        top: -100%;\n        right: -105%;\n        min-width: max-content;\n        width: 280px;\n        background-color: #ffffff;\n        border: 1px solid #d1d5db;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n        transition: background-color 0.3s, border-color 0.3s;\n        display: none;\n      }\n    }\n\n    > li {\n      color: #4b5563; /* text-gray-700 */\n      margin: 0;\n\n      &:hover {\n        background-color: #f3f4f6; /* hover:bg-gray-100 */\n      }\n\n      /* Dark mode styles */\n\n      .icon {\n        width: 20px;\n        height: 20px;\n        margin-right: 8px;\n\n        svg {\n          width: 100%;\n          height: auto;\n        }\n      }\n\n      a {\n        position: relative;\n        display: flex;\n        width: 100%;\n        align-items: center;\n        color: var(--primary-color); /* Substitute with your primary color variable */\n        padding: 8px 14px;\n\n        &:hover {\n          background-color: #f3f4f6; /* bg-gray-100 */\n        }\n\n        > div {\n          display: flex;\n          align-items: center;\n        }\n\n        /* Dark mode styles */\n        @media (prefers-color-scheme: dark) {\n          background-color: #e5e7eb; /* dark:bg-gray-200 */\n        }\n\n        /* Pseudo-element styles for the 'before' */\n\n        /* Adjustments for 2xl screens */\n      }\n\n      > div {\n        position: relative;\n        width: 100%;\n        color: var(--primary-color); /* Substitute with your primary color variable */\n        padding: 8px 14px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n\n        > div {\n          display: flex;\n          align-items: center;\n        }\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n  }\n\n  .title {\n    display: block;\n\n    color: #9ca3af; \n    padding: 20px 24px 0;\n\n    .dark & {\n      color: #4b5563; \n    }\n  }\n\n  .item-title {\n    color: #444;\n    border-radius: 8px;\n    margin: 8px 20px 8px 14px;\n    padding: 10px 12px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: transform 0.1s ease-in-out;\n    position: relative;\n    z-index: 23;\n    font-weight: 600;\n\n    &.active {\n      background-color: #3872fa;\n      color: #fff;\n    }\n\n    &:hover {\n      background-color: #3872fa;\n      color: #fff;\n\n      .white-box {\n        display: block;\n      }\n    }\n\n    &:hover {\n      transform: scale(1.01);\n    }\n\n    > span {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n\n      .icon {\n        width: 24px;\n        height: 24px;\n\n        > svg {\n          width: 100%;\n          height: auto;\n        }\n      }\n    }\n\n    .arrow {\n      width: 14px;\n      height: 14px;\n    }\n  }\n\n  .white-box {\n    border-radius: 6px;\n    padding: 12px 8px;\n    position: absolute;\n    z-index: 24;\n    top: 0;\n    right: -120%;\n    min-width: max-content;\n    width: 280px;\n    background-color: #ffffff; /* bg-gray-0 pode ser substitu\u00EDdo pelo valor real do seu tema */\n    border: 1px solid #d1d5db; /* border-gray-300 */\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* drop-shadow-lg */\n    transition: background-color 0.3s, border-color 0.3s;\n    display: none;\n\n    .relative {\n      position: relative;\n\n      &:hover {\n        .extra-box {\n          display: flex;\n        }\n      }\n\n      .extra-box {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        border-radius: 6px;\n        padding: 12px 8px;\n        position: absolute;\n        z-index: 24;\n        top: -100%;\n        right: -105%;\n        min-width: max-content;\n        width: 280px;\n        background-color: #ffffff;\n        border: 1px solid #d1d5db;\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n        transition: background-color 0.3s, border-color 0.3s;\n        display: none;\n      }\n    }\n\n    > li {\n      color: #4b5563; /* text-gray-700 */\n      margin: 0;\n\n      &:hover {\n        background-color: #f3f4f6; /* hover:bg-gray-100 */\n      }\n\n      /* Dark mode styles */\n\n      .icon {\n        width: 20px;\n        height: 20px;\n        margin-right: 8px;\n\n        svg {\n          width: 100%;\n          height: auto;\n        }\n      }\n\n      a {\n        position: relative;\n        display: flex;\n        width: 100%;\n        align-items: center;\n        color: var(--primary-color); /* Substitute with your primary color variable */\n        padding: 8px 14px;\n\n        &:hover {\n          background-color: #f3f4f6; /* bg-gray-100 */\n        }\n\n        > div {\n          display: flex;\n          align-items: center;\n        }\n\n        /* Dark mode styles */\n        @media (prefers-color-scheme: dark) {\n          background-color: #e5e7eb; /* dark:bg-gray-200 */\n        }\n\n        /* Pseudo-element styles for the 'before' */\n\n        /* Adjustments for 2xl screens */\n      }\n\n      > div {\n        position: relative;\n        width: 100%;\n        color: var(--primary-color); /* Substitute with your primary color variable */\n        padding: 8px 14px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n\n        > div {\n          display: flex;\n          align-items: center;\n        }\n      }\n    }\n  }\n"])));
-var templateObject_1;
+exports.Menu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n  z-index: 999;\n\n  padding-right: 15px;\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n  }\n\n  li {\n    position: relative !important;\n    z-index: 9999;\n    width: 100%;\n  }\n\n  .title {\n    color: #9ca3af;\n    margin-bottom: 10px;\n    padding-left: 15px;\n\n    .dark & {\n      color: #4b5563;\n    }\n  }\n\n  .item-title {\n    color: #2b2b2b;\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: transform 0.1s ease-in-out;\n    font-weight: 400;\n    padding: 0 15px;\n    height: 40px;\n    display: flex;\n    position: relative;\n    z-index: 2222;\n\n    &.active {\n      background-color: #3872fa;\n      color: #fff;\n    }\n\n    &:hover {\n      background-color: #3872fa;\n      color: #fff;\n      transform: scale(1.01);\n    }\n\n    > span {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n\n      .icon {\n        width: 16px;\n        height: 16px;\n        display: flex;\n\n        > svg {\n          width: 100%;\n          height: auto;\n          fill: currentColor;\n        }\n      }\n\n      .arrow {\n        width: 6px;\n        margin: 0 0 0 auto;\n        display: flex;\n\n        svg {\n          width: 100%;\n          height: auto;\n          fill: currentColor;\n        }\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  position: relative;\n  z-index: 999;\n\n  padding-right: 15px;\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin-top: 0;\n  }\n\n  li {\n    position: relative !important;\n    z-index: 9999;\n    width: 100%;\n  }\n\n  .title {\n    color: #9ca3af;\n    margin-bottom: 10px;\n    padding-left: 15px;\n\n    .dark & {\n      color: #4b5563;\n    }\n  }\n\n  .item-title {\n    color: #2b2b2b;\n    border-radius: 8px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    transition: transform 0.1s ease-in-out;\n    font-weight: 400;\n    padding: 0 15px;\n    height: 40px;\n    display: flex;\n    position: relative;\n    z-index: 2222;\n\n    &.active {\n      background-color: #3872fa;\n      color: #fff;\n    }\n\n    &:hover {\n      background-color: #3872fa;\n      color: #fff;\n      transform: scale(1.01);\n    }\n\n    > span {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n\n      .icon {\n        width: 16px;\n        height: 16px;\n        display: flex;\n\n        > svg {\n          width: 100%;\n          height: auto;\n          fill: currentColor;\n        }\n      }\n\n      .arrow {\n        width: 6px;\n        margin: 0 0 0 auto;\n        display: flex;\n\n        svg {\n          width: 100%;\n          height: auto;\n          fill: currentColor;\n        }\n      }\n    }\n  }\n"])));
+exports.SubMenu = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 6px;\n  padding: 12px 8px;\n  z-index: 24;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.3s, border-color 0.3s;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n\n  li {\n    &:hover {\n      background-color: #f3f4f6;\n    }\n  }\n"], ["\n  border-radius: 6px;\n  padding: 12px 8px;\n  z-index: 24;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #d1d5db;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  transition: background-color 0.3s, border-color 0.3s;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n\n  li {\n    &:hover {\n      background-color: #f3f4f6;\n    }\n  }\n"])));
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=styles.js.map

package/dist/system/presentation/components/layout/menu/components/menu/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/menu/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,yzHAAA,svHAqL7B,KAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/menu/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,k/CAAA,+6CAsF7B,KAAA;AAEY,QAAA,OAAO,GAAG,2BAAM,CAAC,EAAE,ijBAAA,8eAsB/B,KAAA"}

package/dist/system/presentation/components/layout/menu/components/select-workspace/index.js

@@ -33,46 +33,54 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectWorkSpace = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_select_1 = __importDefault(require("react-select"));
 var system_1 = require("../../../../../../../system/index.js");
 var S = __importStar(require("./styles.js"));
 function Item(_a) {
-    var avatar = _a.avatar, label = _a.label, value = _a.value, onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'item', onClick: function () { return onClick({ label: label, value: value, avatar: avatar }); }, children: [(0, jsx_runtime_1.jsx)(system_1.Avatar, { className: 'avatar', image: avatar }), (0, jsx_runtime_1.jsxs)("div", { className: 'font-14-regular', children: [(0, jsx_runtime_1.jsx)("span", { className: '-bold', children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'text', children: value })] })] }));
+    var data = _a.data, props = __rest(_a, ["data"]);
+    return ((0, jsx_runtime_1.jsxs)("button", __assign({ className: 'item' }, props.innerProps, { children: [(0, jsx_runtime_1.jsx)(system_1.Avatar, { className: 'avatar', image: data.img }), (0, jsx_runtime_1.jsx)("span", { className: 'font-14-regular', children: data.label })] })));
 }
 function SelectWorkSpace() {
     var customOptions = [
         {
-            label: 'REDQ',
+            label: 'Codie',
             value: 'redq@redq.io',
-            avatar: 'https://s3.envato.com/files/368170631/REDQ.png',
+            img: '/images/codie-sample.png',
         },
         {
             label: 'Apple',
             value: 'Apple@apple.com',
-            avatar: 'https://1.bp.blogspot.com/-IHIprxC2Za0/UBg14NttLLI/AAAAAAAAA28/nyBH-GeEX7Y/s1600/white-apple-logo-wallpaper.jpg',
+            img: 'https://1.bp.blogspot.com/-IHIprxC2Za0/UBg14NttLLI/AAAAAAAAA28/nyBH-GeEX7Y/s1600/white-apple-logo-wallpaper.jpg',
         },
         {
             label: 'Microsoft',
             value: 'microsofr@microsoft.com',
-            avatar: 'https://ca16c2df-cdn.agilitycms.cloud/Attachments/NewItems/MS-thumbnail_20230620211556_0.jpg',
+            img: 'https://ca16c2df-cdn.agilitycms.cloud/Attachments/NewItems/MS-thumbnail_20230620211556_0.jpg',
         },
         {
             label: 'Google',
             value: 'google@google.com',
-            avatar: 'https://wallpapercave.com/wp/wp2860498.jpg',
+            img: 'https://wallpapercave.com/wp/wp2860498.jpg',
         },
     ];
-    var _a = (0, react_1.useState)(customOptions[0]), selected = _a[0], setSelected = _a[1];
-    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
-    var handleSelect = function (option) {
-        setSelected(option);
-        setIsOpen(false);
-    };
-    return ((0, jsx_runtime_1.jsxs)(S.SelectWorkSpace, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "select ".concat(isOpen ? 'open' : ''), onClick: function () { return setIsOpen(!isOpen); }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'item', children: [(0, jsx_runtime_1.jsx)(system_1.Avatar, { className: 'avatar', image: selected.avatar }), (0, jsx_runtime_1.jsxs)("div", { className: 'font-14-regular', children: [(0, jsx_runtime_1.jsx)("span", { className: '-bold', children: selected.label }), (0, jsx_runtime_1.jsx)("span", { className: 'text', children: "Select Workspace" })] })] }), "ICONE DE ARROW"] }), (0, jsx_runtime_1.jsx)(system_1.Overlay, { state: isOpen, dispatch: setIsOpen, children: isOpen && ((0, jsx_runtime_1.jsx)("ul", { className: 'option-box', children: customOptions.map(function (option, index) { return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Item, __assign({}, option, { onClick: handleSelect }), index) })); }) })) })] }));
+    return ((0, jsx_runtime_1.jsx)(S.SelectWorkSpace, { children: (0, jsx_runtime_1.jsx)(react_select_1.default, { menuPlacement: 'auto', options: customOptions, defaultValue: customOptions[0], components: { Option: function (props) { return (0, jsx_runtime_1.jsx)(Item, __assign({}, props)); }, SingleValue: function (props) { return (0, jsx_runtime_1.jsx)(Item, __assign({}, props)); } } }) }));
 }
 exports.SelectWorkSpace = SelectWorkSpace;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/menu/components/select-workspace/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/select-workspace/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgC;AAEhC,mCAA0C;AAE1C,0CAA6B;AAG7B,SAAS,IAAI,CAAC,EAAiC;QAA/B,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IAC3C,OAAO,CACL,iCAAK,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,CAAC,EAAjC,CAAiC,aACpE,uBAAC,eAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,GAAI,EAE5C,iCAAK,SAAS,EAAC,iBAAiB,aAC9B,iCAAM,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,EAEtC,iCAAM,SAAS,EAAC,MAAM,YAAE,KAAK,GAAQ,IACjC,IACF,CACP,CAAA;AACH,CAAC;AAED,SAAgB,eAAe;IAC7B,IAAM,aAAa,GAAG;QACpB;YACE,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,cAAc;YACrB,MAAM,EAAE,gDAAgD;SACzD;QACD;YACE,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,iBAAiB;YACxB,MAAM,EACJ,iHAAiH;SACpH;QACD;YACE,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,yBAAyB;YAChC,MAAM,EAAE,8FAA8F;SACvG;QACD;YACE,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,mBAAmB;YAC1B,MAAM,EAAE,4CAA4C;SACrD;KACF,CAAA;IAEK,IAAA,KAA0B,IAAA,gBAAQ,EAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAAnD,QAAQ,QAAA,EAAE,WAAW,QAA8B,CAAA;IACpD,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAA;IAE3C,IAAM,YAAY,GAAG,UAAC,MAAM;QAC1B,WAAW,CAAC,MAAM,CAAC,CAAA;QACnB,SAAS,CAAC,KAAK,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,OAAO,CACL,wBAAC,CAAC,CAAC,eAAe,eAChB,iCAAK,SAAS,EAAE,iBAAU,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,CAAC,MAAM,CAAC,EAAlB,CAAkB,aACjF,iCAAK,SAAS,EAAC,MAAM,aACnB,uBAAC,eAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAI,EAErD,iCAAK,SAAS,EAAC,iBAAiB,aAC9B,iCAAM,SAAS,EAAC,OAAO,YAAE,QAAQ,CAAC,KAAK,GAAQ,EAE/C,iCAAM,SAAS,EAAC,MAAM,iCAAwB,IAC1C,IACF,sBAGF,EAEN,uBAAC,gBAAO,IAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,YACxC,MAAM,IAAI,CACT,+BAAI,SAAS,EAAC,YAAY,YACvB,aAAa,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CACpC,yCACE,uBAAC,IAAI,eAAiB,MAAM,IAAE,OAAO,EAAE,YAAY,KAAxC,KAAK,CAAuC,GACpD,CACN,EAJqC,CAIrC,CAAC,GACC,CACN,GACO,IACQ,CACrB,CAAA;AACH,CAAC;AA9DD,0CA8DC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/select-workspace/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8DAAsC;AAEtC,mCAAiC;AAEjC,0CAA6B;AAE7B,SAAS,IAAI,CAAC,EAAkB;IAAhB,IAAA,IAAI,UAAA,EAAK,KAAK,cAAhB,QAAkB,CAAF;IAC5B,OAAO,CACL,6CAAQ,SAAS,EAAC,MAAM,IAAK,KAAK,CAAC,UAAU,eAC3C,uBAAC,eAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,GAAI,EAE9C,iCAAM,SAAS,EAAC,iBAAiB,YAAE,IAAI,CAAC,KAAK,GAAQ,KAC9C,CACV,CAAA;AACH,CAAC;AAED,SAAgB,eAAe;IAC7B,IAAM,aAAa,GAAG;QACpB;YACE,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,cAAc;YACrB,GAAG,EAAE,0BAA0B;SAChC;QACD;YACE,KAAK,EAAE,OAAO;YACd,KAAK,EAAE,iBAAiB;YACxB,GAAG,EAAE,iHAAiH;SACvH;QACD;YACE,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,yBAAyB;YAChC,GAAG,EAAE,8FAA8F;SACpG;QACD;YACE,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,mBAAmB;YAC1B,GAAG,EAAE,4CAA4C;SAClD;KACF,CAAA;IAED,OAAO,CACL,uBAAC,CAAC,CAAC,eAAe,cAChB,uBAAC,sBAAW,IACV,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,EAC9B,UAAU,EAAE,EAAE,MAAM,EAAE,UAAC,KAAU,IAAK,OAAA,uBAAC,IAAI,eAAK,KAAK,EAAI,EAAnB,CAAmB,EAAE,WAAW,EAAE,UAAC,KAAK,IAAK,OAAA,uBAAC,IAAI,eAAK,KAAK,EAAI,EAAnB,CAAmB,EAAE,GACxG,GACgB,CACrB,CAAA;AACH,CAAC;AAlCD,0CAkCC"}

package/dist/system/presentation/components/layout/menu/components/select-workspace/styles.js

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectWorkSpace = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.SelectWorkSpace = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n  z-index: 99;\n  padding: 14px 24px;\n\n  .select {\n    width: 100%;\n    border: 2px solid rgb(241, 241, 241);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    padding: 8px 10px 8px 12px;\n    justify-content: space-between;\n    cursor: pointer;\n\n    svg {\n      width: 16px;\n      height: 16px;\n      transition: transform 0.2s ease-in-out;\n    }\n\n    &.open {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .text {\n    color: #666666;\n  }\n  .item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    .avatar {\n      width: 32px;\n      height: 32px;\n    }\n\n    > div {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  .option-box {\n    width: 100%;\n    max-width: 250px;\n    padding: 6px;\n    position: absolute;\n    z-index: 22;\n    background-color: #ffffff; /* bg-gray-0 pode ser substitu\u00EDdo pelo valor real do seu tema */\n    border: 1px solid #d1d5db; /* border-gray-300 */\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* drop-shadow-lg */\n    transition: background-color 0.3s, border-color 0.3s;\n    border-radius: 6px;\n\n    .item {\n      padding: 6px;\n      border-radius: 6px;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #f3f4f6;\n      }\n    }\n\n    .item + .item {\n    }\n  }\n"], ["\n  width: 100%;\n  position: relative;\n  z-index: 99;\n  padding: 14px 24px;\n\n  .select {\n    width: 100%;\n    border: 2px solid rgb(241, 241, 241);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    padding: 8px 10px 8px 12px;\n    justify-content: space-between;\n    cursor: pointer;\n\n    svg {\n      width: 16px;\n      height: 16px;\n      transition: transform 0.2s ease-in-out;\n    }\n\n    &.open {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .text {\n    color: #666666;\n  }\n  .item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    .avatar {\n      width: 32px;\n      height: 32px;\n    }\n\n    > div {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  .option-box {\n    width: 100%;\n    max-width: 250px;\n    padding: 6px;\n    position: absolute;\n    z-index: 22;\n    background-color: #ffffff; /* bg-gray-0 pode ser substitu\u00EDdo pelo valor real do seu tema */\n    border: 1px solid #d1d5db; /* border-gray-300 */\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* drop-shadow-lg */\n    transition: background-color 0.3s, border-color 0.3s;\n    border-radius: 6px;\n\n    .item {\n      padding: 6px;\n      border-radius: 6px;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #f3f4f6;\n      }\n    }\n\n    .item + .item {\n    }\n  }\n"])));
+exports.SelectWorkSpace = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 0 15px;\n\n  [class*='-Svg'] {\n    transition: 0.2s;\n    transform: rotate(0);\n    fill: #2b2b2b;\n    width: 18px;\n  }\n\n  [class*='indicatorContainer'] {\n    padding-right: 15px !important;\n  }\n\n  [class*='ValueContainer'] {\n    height: 60px;\n    overflow: visible;\n    padding-left: 15px !important;\n    display: flex;\n  }\n\n  [class*='indicatorSeparator'] {\n    display: none;\n  }\n\n  [class*='-placeholder'] {\n    color: #2b2b2b;\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  [class*='-menu'] {\n    width: 100%;\n    max-width: 400px;\n  }\n\n  [class*='-MenuList'] {\n    display: flex;\n    flex-direction: column;\n\n    .item {\n      padding: 5px 15px;\n      transition: background 0.2s;\n\n      &:hover {\n        background: #e1e1e1;\n      }\n    }\n  }\n\n  .css-13cymwt-control {\n    border: 1px solid #e1e1e1;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .item {\n    background: none;\n    padding: 0;\n    border: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    align-items: center;\n    gap: 10px;\n    cursor: pointer;\n\n    .avatar {\n      width: 36px;\n      height: 36px;\n\n      img {\n        object-fit: cover !important;\n      }\n    }\n  }\n\n  .item + .item {\n  }\n"], ["\n  width: 100%;\n  padding: 0 15px;\n\n  [class*='-Svg'] {\n    transition: 0.2s;\n    transform: rotate(0);\n    fill: #2b2b2b;\n    width: 18px;\n  }\n\n  [class*='indicatorContainer'] {\n    padding-right: 15px !important;\n  }\n\n  [class*='ValueContainer'] {\n    height: 60px;\n    overflow: visible;\n    padding-left: 15px !important;\n    display: flex;\n  }\n\n  [class*='indicatorSeparator'] {\n    display: none;\n  }\n\n  [class*='-placeholder'] {\n    color: #2b2b2b;\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  [class*='-menu'] {\n    width: 100%;\n    max-width: 400px;\n  }\n\n  [class*='-MenuList'] {\n    display: flex;\n    flex-direction: column;\n\n    .item {\n      padding: 5px 15px;\n      transition: background 0.2s;\n\n      &:hover {\n        background: #e1e1e1;\n      }\n    }\n  }\n\n  .css-13cymwt-control {\n    border: 1px solid #e1e1e1;\n    border-radius: 5px;\n    cursor: pointer;\n  }\n\n  .item {\n    background: none;\n    padding: 0;\n    border: 0;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    align-items: center;\n    gap: 10px;\n    cursor: pointer;\n\n    .avatar {\n      width: 36px;\n      height: 36px;\n\n      img {\n        object-fit: cover !important;\n      }\n    }\n  }\n\n  .item + .item {\n  }\n"])));
 var templateObject_1;
 //# sourceMappingURL=styles.js.map

package/dist/system/presentation/components/layout/menu/components/select-workspace/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/select-workspace/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,89CAAA,25CAyExC,KAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../../../src/system/presentation/components/layout/menu/components/select-workspace/styles.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wEAAsC;AAEzB,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,80CAAA,2wCAgFxC,KAAA"}

package/dist/system/presentation/components/layout/menu/version-01/index.js

@@ -29,7 +29,7 @@ var system_1 = require("../../../../../../system/index.js");
 var components_1 = require("../components/index.js");
 var S = __importStar(require("./styles.js"));
 function MenuVersion01() {
-    return ((0, jsx_runtime_1.jsxs)(S.MenuVersion01, { children: [(0, jsx_runtime_1.jsx)(system_1.Logo, {}), (0, jsx_runtime_1.jsx)(components_1.SelectWorkSpace, {}), (0, jsx_runtime_1.jsx)(components_1.Menu, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(S.MenuVersion01, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(system_1.Logo, {}), (0, jsx_runtime_1.jsx)(components_1.Menu, {})] }), (0, jsx_runtime_1.jsx)(components_1.SelectWorkSpace, {})] }));
 }
 exports.MenuVersion01 = MenuVersion01;
 //# sourceMappingURL=index.js.map

package/dist/system/presentation/components/layout/menu/version-01/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/menu/version-01/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mCAA+B;AAE/B,4CAAqD;AAErD,0CAA6B;AAE7B,SAAgB,aAAa;IAC3B,OAAO,CACL,wBAAC,CAAC,CAAC,aAAa,eACd,uBAAC,aAAI,KAAG,EAER,uBAAC,4BAAe,KAAG,EAEnB,uBAAC,iBAAI,KAAG,IACQ,CACnB,CAAA;AACH,CAAC;AAVD,sCAUC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/system/presentation/components/layout/menu/version-01/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mCAA+B;AAE/B,4CAAqD;AAErD,0CAA6B;AAE7B,SAAgB,aAAa;IAC3B,OAAO,CACL,wBAAC,CAAC,CAAC,aAAa,eACd,4CACE,uBAAC,aAAI,KAAG,EAER,uBAAC,iBAAI,KAAG,IACJ,EAEN,uBAAC,4BAAe,KAAG,IACH,CACnB,CAAA;AACH,CAAC;AAZD,sCAYC"}

package/dist/system/presentation/components/layout/menu/version-01/styles.js

@@ -9,6 +9,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuVersion01 = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.MenuVersion01 = styled_components_1.default.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  max-width: 286px;\n  height: 100vh;\n  border-right: 2px solid rgb(241, 241, 241);\n\n  .top {\n  }\n"], ["\n  width: 100%;\n  max-width: 286px;\n  height: 100vh;\n  border-right: 2px solid rgb(241, 241, 241);\n\n  .top {\n  }\n"])));
+exports.MenuVersion01 = styled_components_1.default.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100vh;\n  width: 100%;\n  max-width: 285px;\n  padding: 30px 0 20px 15px;\n  border-right: 1px solid #e1e1e1;\n  position: relative;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  .menu {\n    margin-top: 30px;\n  }\n"], ["\n  height: 100vh;\n  width: 100%;\n  max-width: 285px;\n  padding: 30px 0 20px 15px;\n  border-right: 1px solid #e1e1e1;\n  position: relative;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  .menu {\n    margin-top: 30px;\n  }\n"])));
 var templateObject_1;
 //# sourceMappingURL=styles.js.map