@eduzz/apps-toolbar-react - npm Package Compare versions

Comparing version 1.1.23 to 1.1.24

dist/App.d.ts

@@ -6,18 +6,18 @@ /// <reference types="react" />
     IconMenu: import("react").FC<IEduzzToolbarIconMenuProps>;
-    Apps: import("@emotion/styled").StyledComponent<import("./interfaces/styles").IStylesProps & {
+    Apps: import("@emotion/styled").StyledComponent<Pick<import("./interfaces/styles").IStylesProps, "className"> & {
         theme?: import("@emotion/react").Theme;
     }, {}, {}>;
-    User: import("@emotion/styled").StyledComponent<import("./interfaces/styles").IStylesProps & {
+    User: import("@emotion/styled").StyledComponent<Pick<import("./interfaces/styles").IStylesProps, "className"> & {
         theme?: import("@emotion/react").Theme;
     }, {}, {}>;
-    UserMenuItem: import("@emotion/styled").StyledComponent<import("./interfaces").IEduzzToolbarUserMenuItem & import("./interfaces/styles").IStylesProps & {
+    UserMenuItem: import("@emotion/styled").StyledComponent<Pick<import("./interfaces").IEduzzToolbarUserMenuItem & import("./interfaces/styles").IStylesProps, "className" | keyof import("./interfaces").IEduzzToolbarUserMenuItem> & {
         theme?: import("@emotion/react").Theme;
     }, {}, {}>;
-    UserMenuDivider: import("@emotion/styled").StyledComponent<import("./interfaces/styles").IStylesProps & {
+    UserMenuDivider: import("@emotion/styled").StyledComponent<Pick<import("./interfaces/styles").IStylesProps, "className"> & {
         theme?: import("@emotion/react").Theme;
     }, {}, {}>;
-    UserMenuContext: import("@emotion/styled").StyledComponent<import("./interfaces/styles").IStylesProps & {
+    UserMenuContext: import("@emotion/styled").StyledComponent<Pick<import("./interfaces/styles").IStylesProps, "className"> & {
         theme?: import("@emotion/react").Theme;
     }, {}, {}>;
-    Action: import("@emotion/styled").StyledComponent<import("./interfaces").IEduzzToolbarCustomAction & import("./interfaces/styles").IStylesProps & {
+    Action: import("@emotion/styled").StyledComponent<Pick<import("./interfaces").IEduzzToolbarCustomAction & import("./interfaces/styles").IStylesProps, "className" | keyof import("./interfaces").IEduzzToolbarCustomAction> & {
         theme?: import("@emotion/react").Theme;
@@ -24,0 +24,0 @@ }, {}, {}>;

dist/components/EduzzLogo/index.d.ts

 import { IStylesProps } from '../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/EduzzLogo/index.js

@@ -11,3 +11,3 @@ "use strict";
 });
-exports.default = (0, styled_1.default)(EduzzLogo)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  line-height: 0;\n\n  .desktop {\n    ", " {\n      display: none;\n    }\n  }\n\n  .mobile {\n    display: none;\n\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  line-height: 0;\n\n  .desktop {\n    ", " {\n      display: none;\n    }\n  }\n\n  .mobile {\n    display: none;\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(EduzzLogo, { label: 'eduzz-toolbar-eduzz-logo' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  line-height: 0;\n\n  .desktop {\n    ", " {\n      display: none;\n    }\n  }\n\n  .mobile {\n    display: none;\n\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  line-height: 0;\n\n  .desktop {\n    ", " {\n      display: none;\n    }\n  }\n\n  .mobile {\n    display: none;\n\n    ", " {\n      display: block;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -14,0 +14,0 @@ return theme.breakpoints.mobile;

dist/components/Toolbar/Apps/Advanced/index.d.ts

@@ -1,4 +0,4 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
+declare const _default: import("@emotion/styled").StyledComponent<Pick<{}, never> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/Apps/Advanced/index.js

@@ -6,5 +6,5 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var Cancel_1 = tslib_1.__importDefault(require("@eduzz/houston-icons/Cancel"));
 var context_1 = require("../../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../../helpers/className"));
 var url_1 = require("../../../../helpers/url");
@@ -29,7 +29,7 @@ var Icon_1 = tslib_1.__importDefault(require("../../../Icon"));
     }, [advanced]);
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-advanced-apps', className, advanced && '--active') }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-header' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-title' }, { children: "Lista de Apps" })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-button-close', onClick: handleClickClose }, { children: ["Esc ", (0, jsx_runtime_1.jsx)(Cancel_1.default, {})] }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-list-apps' }, { children: applications === null || applications === void 0 ? void 0 : applications.map(function (app) {
+    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, css_1.cx)(className, advanced && '--active') }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-header' }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-title' }, { children: "Lista de Apps" })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-button-close', onClick: handleClickClose }, { children: ["Esc ", (0, jsx_runtime_1.jsx)(Cancel_1.default, {})] }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-advanced-apps-list-apps' }, { children: applications === null || applications === void 0 ? void 0 : applications.map(function (app) {
                     var isActive = app.application === application;
-                    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-advanced-apps-list-apps-item', isActive && '--active') }, { children: (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ href: (0, url_1.buildUrl)(app.application, application), rel: 'noopener noreferrer', target: '_blank', onClick: function () { return handleClickApplication(app.application); } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-icon' }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: app.icon }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-label' }, { children: app.label })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-description' }, { children: app.description }))] }), app.application) }), app.application));
+                    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-advanced-apps-list-apps-item', isActive && '--active') }, { children: (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ href: (0, url_1.buildUrl)(app.application, application), rel: 'noopener noreferrer', target: '_blank', onClick: function () { return handleClickApplication(app.application); } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-icon' }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: app.icon }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-label' }, { children: app.label })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-description' }, { children: app.description }))] }), app.application) }), app.application));
                 }) }))] })));
 });
-exports.default = (0, styles_1.default)(AppsAdvanced);
+exports.default = (0, styles_1.default)(AppsAdvanced, { label: 'eduzz-toolbar-advanced-apps' });

dist/components/Toolbar/Apps/Advanced/styles.d.ts

 import { NamedExoticComponent } from 'react';
-declare const _default: (Component: NamedExoticComponent) => import("@emotion/styled").StyledComponent<{
+import { FilteringStyledOptions } from '@emotion/styled/types/base';
+declare const _default: (Component: NamedExoticComponent, config?: FilteringStyledOptions<unknown, never>) => import("@emotion/styled").StyledComponent<Pick<{}, never> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/Apps/Advanced/styles.js

@@ -6,3 +6,3 @@ "use strict";
 var theme_1 = require("../../../../assets/theme");
-exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: 100%;\n  height: calc(100vh - ", "px);\n  top: ", "px;\n  left: 0;\n  position: absolute;\n  background: white;\n  padding: ", "px;\n  overflow-y: scroll;\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  z-index: 1099;\n  transition: ", ";\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.--active {\n    opacity: 1;\n    visibility: visible;\n    user-select: auto;\n  }\n\n  .eduzz-toolbar-advanced-apps-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n\n    .eduzz-toolbar-advanced-apps-title {\n      color: #37474f;\n      font-weight: 500;\n    }\n\n    .eduzz-toolbar-advanced-apps-button-close {\n      color: ", ";\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      padding: ", "px ", "px;\n      border-radius: ", "px;\n      transition: ", ";\n      cursor: pointer;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      span.houston-icon {\n        margin-left: ", "px;\n      }\n    }\n  }\n\n  .eduzz-toolbar-advanced-apps-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    margin-top: ", "px;\n\n    .eduzz-toolbar-advanced-apps-list-apps-item {\n      width: calc(25% - ", "px);\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      cursor: pointer;\n      height: auto;\n\n      ", " {\n        width: calc(33% - ", "px);\n      }\n\n      ", " {\n        width: calc(50% - ", "px);\n      }\n\n      ", " {\n        width: 100%;\n        margin: ", "px 0;\n        padding: ", "px ", "px;\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      a {\n        padding: ", "px;\n        display: block;\n        text-decoration: none;\n\n        ", " {\n          padding: ", "px 0;\n        }\n      }\n\n      .eduzz-toolbar-icon {\n        margin-bottom: ", "px;\n        text-align: center;\n\n        svg {\n          max-width: 80px;\n        }\n      }\n\n      .eduzz-toolbar-label {\n        margin-bottom: ", "px;\n        color: #37474f;\n        font-weight: 500;\n        font-size: 15px;\n      }\n\n      .eduzz-toolbar-description {\n        font-size: 14px;\n        color: #7c7c7c;\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  height: calc(100vh - ", "px);\n  top: ", "px;\n  left: 0;\n  position: absolute;\n  background: white;\n  padding: ", "px;\n  overflow-y: scroll;\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  z-index: 1099;\n  transition: ", ";\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.--active {\n    opacity: 1;\n    visibility: visible;\n    user-select: auto;\n  }\n\n  .eduzz-toolbar-advanced-apps-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n\n    .eduzz-toolbar-advanced-apps-title {\n      color: #37474f;\n      font-weight: 500;\n    }\n\n    .eduzz-toolbar-advanced-apps-button-close {\n      color: ", ";\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      padding: ", "px ", "px;\n      border-radius: ", "px;\n      transition: ", ";\n      cursor: pointer;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      span.houston-icon {\n        margin-left: ", "px;\n      }\n    }\n  }\n\n  .eduzz-toolbar-advanced-apps-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    margin-top: ", "px;\n\n    .eduzz-toolbar-advanced-apps-list-apps-item {\n      width: calc(25% - ", "px);\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      cursor: pointer;\n      height: auto;\n\n      ", " {\n        width: calc(33% - ", "px);\n      }\n\n      ", " {\n        width: calc(50% - ", "px);\n      }\n\n      ", " {\n        width: 100%;\n        margin: ", "px 0;\n        padding: ", "px ", "px;\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      a {\n        padding: ", "px;\n        display: block;\n        text-decoration: none;\n\n        ", " {\n          padding: ", "px 0;\n        }\n      }\n\n      .eduzz-toolbar-icon {\n        margin-bottom: ", "px;\n        text-align: center;\n\n        svg {\n          max-width: 80px;\n        }\n      }\n\n      .eduzz-toolbar-label {\n        margin-bottom: ", "px;\n        color: #37474f;\n        font-weight: 500;\n        font-size: 15px;\n      }\n\n      .eduzz-toolbar-description {\n        font-size: 14px;\n        color: #7c7c7c;\n      }\n    }\n  }\n"])), theme_1.TOOLBAR_HEIGHT, theme_1.TOOLBAR_HEIGHT, function (_a) {
+exports.default = (function (Component, config) { return (0, styled_1.default)(Component, config)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: 100%;\n  height: calc(100vh - ", "px);\n  top: ", "px;\n  left: 0;\n  position: absolute;\n  background: white;\n  padding: ", "px;\n  overflow-y: scroll;\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  z-index: 1099;\n  transition: ", ";\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.--active {\n    opacity: 1;\n    visibility: visible;\n    user-select: auto;\n  }\n\n  .eduzz-toolbar-advanced-apps-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n\n    .eduzz-toolbar-advanced-apps-title {\n      color: #37474f;\n      font-weight: 500;\n    }\n\n    .eduzz-toolbar-advanced-apps-button-close {\n      color: ", ";\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      padding: ", "px ", "px;\n      border-radius: ", "px;\n      transition: ", ";\n      cursor: pointer;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      span.houston-icon {\n        margin-left: ", "px;\n      }\n    }\n  }\n\n  .eduzz-toolbar-advanced-apps-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    margin-top: ", "px;\n\n    .eduzz-toolbar-advanced-apps-list-apps-item {\n      width: calc(25% - ", "px);\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      cursor: pointer;\n      height: auto;\n\n      ", " {\n        width: calc(33% - ", "px);\n      }\n\n      ", " {\n        width: calc(50% - ", "px);\n      }\n\n      ", " {\n        width: 100%;\n        margin: ", "px 0;\n        padding: ", "px ", "px;\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      a {\n        padding: ", "px;\n        display: block;\n        text-decoration: none;\n\n        ", " {\n          padding: ", "px 0;\n        }\n      }\n\n      .eduzz-toolbar-icon {\n        margin-bottom: ", "px;\n        text-align: center;\n\n        svg {\n          max-width: 80px;\n        }\n      }\n\n      .eduzz-toolbar-label {\n        margin-bottom: ", "px;\n        color: #37474f;\n        font-weight: 500;\n        font-size: 15px;\n      }\n\n      .eduzz-toolbar-description {\n        font-size: 14px;\n        color: #7c7c7c;\n      }\n    }\n  }\n"], ["\n  width: 100%;\n  height: calc(100vh - ", "px);\n  top: ", "px;\n  left: 0;\n  position: absolute;\n  background: white;\n  padding: ", "px;\n  overflow-y: scroll;\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  z-index: 1099;\n  transition: ", ";\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.--active {\n    opacity: 1;\n    visibility: visible;\n    user-select: auto;\n  }\n\n  .eduzz-toolbar-advanced-apps-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n\n    .eduzz-toolbar-advanced-apps-title {\n      color: #37474f;\n      font-weight: 500;\n    }\n\n    .eduzz-toolbar-advanced-apps-button-close {\n      color: ", ";\n      font-weight: 500;\n      display: flex;\n      align-items: center;\n      padding: ", "px ", "px;\n      border-radius: ", "px;\n      transition: ", ";\n      cursor: pointer;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      span.houston-icon {\n        margin-left: ", "px;\n      }\n    }\n  }\n\n  .eduzz-toolbar-advanced-apps-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: row;\n    margin-top: ", "px;\n\n    .eduzz-toolbar-advanced-apps-list-apps-item {\n      width: calc(25% - ", "px);\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      cursor: pointer;\n      height: auto;\n\n      ", " {\n        width: calc(33% - ", "px);\n      }\n\n      ", " {\n        width: calc(50% - ", "px);\n      }\n\n      ", " {\n        width: 100%;\n        margin: ", "px 0;\n        padding: ", "px ", "px;\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      a {\n        padding: ", "px;\n        display: block;\n        text-decoration: none;\n\n        ", " {\n          padding: ", "px 0;\n        }\n      }\n\n      .eduzz-toolbar-icon {\n        margin-bottom: ", "px;\n        text-align: center;\n\n        svg {\n          max-width: 80px;\n        }\n      }\n\n      .eduzz-toolbar-label {\n        margin-bottom: ", "px;\n        color: #37474f;\n        font-weight: 500;\n        font-size: 15px;\n      }\n\n      .eduzz-toolbar-description {\n        font-size: 14px;\n        color: #7c7c7c;\n      }\n    }\n  }\n"])), theme_1.TOOLBAR_HEIGHT, theme_1.TOOLBAR_HEIGHT, function (_a) {
     var theme = _a.theme;
@@ -9,0 +9,0 @@ return theme.spacing(10);

dist/components/Toolbar/Apps/Dropdown/index.d.ts

@@ -1,4 +0,4 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
+declare const _default: import("@emotion/styled").StyledComponent<Pick<{}, never> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/Apps/Dropdown/index.js

@@ -6,6 +6,6 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var Expand_1 = tslib_1.__importDefault(require("@eduzz/houston-icons/Expand"));
 var theme_1 = require("../../../../assets/theme");
 var context_1 = require("../../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../../helpers/className"));
 var url_1 = require("../../../../helpers/url");
@@ -44,7 +44,7 @@ var Icon_1 = tslib_1.__importDefault(require("../../../Icon"));
     }, [dropdown, handleCalculatePosition]);
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-apps-dropdown', className, dropdown && '--opened'), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, left: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-dropdown-list-apps' }, { children: applications === null || applications === void 0 ? void 0 : applications.map(function (app) {
+    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, css_1.cx)(className, dropdown && '--opened'), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, left: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-dropdown-list-apps' }, { children: applications === null || applications === void 0 ? void 0 : applications.map(function (app) {
                     var isActive = app.application === application;
-                    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-apps-dropdown-item', isActive && '--active') }, { children: (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ href: (0, url_1.buildUrl)(app.application, application), rel: 'noopener noreferrer', target: '_blank', onClick: function () { return handleClickApplication(app.application); } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-icon' }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: app.icon }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-label' }, { children: app.label }))] }), app.application) }), app.application));
+                    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-apps-dropdown-item', isActive && '--active') }, { children: (0, jsx_runtime_1.jsxs)("a", tslib_1.__assign({ href: (0, url_1.buildUrl)(app.application, application), rel: 'noopener noreferrer', target: '_blank', onClick: function () { return handleClickApplication(app.application); } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-icon' }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: app.icon }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-label' }, { children: app.label }))] }), app.application) }), app.application));
                 }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-dropdown-expand' }, { children: (0, jsx_runtime_1.jsxs)("span", tslib_1.__assign({ onClick: handleClickExpand }, { children: [(0, jsx_runtime_1.jsx)(Expand_1.default, {}), " Expandir"] })) }))] })));
 });
-exports.default = (0, styles_1.default)(AppsDropdown);
+exports.default = (0, styles_1.default)(AppsDropdown, { label: 'eduzz-toolbar-apps-dropdown' });

dist/components/Toolbar/Apps/Dropdown/styles.d.ts

 import { NamedExoticComponent } from 'react';
-declare const _default: (Component: NamedExoticComponent) => import("@emotion/styled").StyledComponent<{
+import { FilteringStyledOptions } from '@emotion/styled/types/base';
+declare const _default: (Component: NamedExoticComponent, config?: FilteringStyledOptions<unknown, never>) => import("@emotion/styled").StyledComponent<Pick<{}, never> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/Apps/Dropdown/styles.js

@@ -6,3 +6,3 @@ "use strict";
 var theme_1 = require("../../../../assets/theme");
-exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: ", "px;\n  position: absolute;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: 0 !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"], ["\n  width: ", "px;\n  position: absolute;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: 0 !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"])), theme_1.DROPDOWN_WIDTH, function (_a) {
+exports.default = (function (Component, config) { return (0, styled_1.default)(Component, config)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: ", "px;\n  position: absolute;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: 0 !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"], ["\n  width: ", "px;\n  position: absolute;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: 0 !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"])), theme_1.DROPDOWN_WIDTH, function (_a) {
     var theme = _a.theme;
@@ -9,0 +9,0 @@ return theme.spacing(2);

dist/components/Toolbar/Apps/index.d.ts

 import { IStylesProps } from '../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/Apps/index.js

@@ -6,5 +6,7 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
+var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
 var Apps_1 = tslib_1.__importDefault(require("@eduzz/houston-icons/Apps"));
+var theme_1 = require("../../../assets/theme");
 var context_1 = require("../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../helpers/className"));
 var useEscapeKey_1 = require("../../../hooks/useEscapeKey");
@@ -16,5 +18,4 @@ var useOutside_1 = require("../../../hooks/useOutside");
 var Dropdown_1 = tslib_1.__importDefault(require("./Dropdown"));
-var styles_1 = tslib_1.__importDefault(require("./styles"));
 var Apps = (0, react_1.memo)(function (_a) {
-    var className = _a.className;
+    var rest = tslib_1.__rest(_a, []);
     var wrapperDropdownRef = (0, react_1.useRef)(null);
@@ -59,4 +60,17 @@ var _b = (0, context_1.useToolbarContext)(), user = _b.user, application = _b.application;
     (0, useEscapeKey_1.useEscapeKey)(handlePressEscapeKey);
-    return ((0, jsx_runtime_1.jsxs)(context_2.default.Provider, tslib_1.__assign({ value: { applications: listApplications, opened: opened, setOpenDropdown: setOpenDropdown, setOpenedAdvanced: setOpenedAdvanced } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ ref: wrapperDropdownRef, className: (0, className_1.default)('eduzz-toolbar-apps', className) }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-apps-button', isActiveButton && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-icon' }, { children: (0, jsx_runtime_1.jsx)(Apps_1.default, { size: 24 }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-label' }, { children: "Apps" }))] })) })), (0, jsx_runtime_1.jsx)(Dropdown_1.default, {}), (0, jsx_runtime_1.jsx)(Advanced_1.default, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(context_2.default.Provider, tslib_1.__assign({ value: { applications: listApplications, opened: opened, setOpenDropdown: setOpenDropdown, setOpenedAdvanced: setOpenedAdvanced } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ ref: wrapperDropdownRef }, rest, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-apps-button', isActiveButton && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-icon' }, { children: (0, jsx_runtime_1.jsx)(Apps_1.default, { size: 24 }) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-apps-label' }, { children: "Apps" }))] })) })), (0, jsx_runtime_1.jsx)(Dropdown_1.default, {}), (0, jsx_runtime_1.jsx)(Advanced_1.default, {})] })));
 });
-exports.default = (0, styles_1.default)(Apps);
+exports.default = (0, styled_1.default)(Apps, { label: 'eduzz-toolbar-apps' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: auto;\n  position: relative;\n  box-sizing: border-box;\n\n  .eduzz-toolbar-apps-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    .eduzz-toolbar-apps-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-apps-label {\n      font-size: 14px;\n      margin-left: ", "px;\n      font-weight: 500;\n\n      &::selection {\n        background: transparent;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n"], ["\n  width: auto;\n  position: relative;\n  box-sizing: border-box;\n\n  .eduzz-toolbar-apps-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    .eduzz-toolbar-apps-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-apps-label {\n      font-size: 14px;\n      margin-left: ", "px;\n      font-weight: 500;\n\n      &::selection {\n        background: transparent;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(3);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.trasitionDuration;
+}, theme_1.TOOLBAR_HEIGHT, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(2);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.mobile;
+});
+var templateObject_1;

dist/components/Toolbar/Belt/index.d.ts

 import { IStylesProps } from '../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/Belt/index.js

@@ -6,5 +6,5 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
 var context_1 = require("../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../helpers/className"));
 var Icon_1 = tslib_1.__importDefault(require("../../Icon"));
@@ -35,5 +35,5 @@ var supportedBelts = ['white', 'red', 'orange', 'green', 'black', 'golden'];
     }
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)(className, beltClass) }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-badge' }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: 'eduzz-toolbar-icon-elite', name: 'icon-elite' }), (0, jsx_runtime_1.jsx)("span", { children: beltColor })] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, css_1.cx)(className, beltClass) }, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-badge' }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { className: 'eduzz-toolbar-icon-elite', name: 'icon-elite' }), (0, jsx_runtime_1.jsx)("span", { children: beltColor })] })) })));
 });
-exports.default = (0, styled_1.default)(Belt)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: white;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: ", "px ", "px;\n  border-radius: 20px;\n  margin: 0 ", "px;\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n      font-size: 14px;\n      margin-left: 4px;\n\n      ", " {\n        max-width: 75px;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 16px;\n    min-width: 32px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"], ["\n  color: white;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: ", "px ", "px;\n  border-radius: 20px;\n  margin: 0 ", "px;\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n      font-size: 14px;\n      margin-left: 4px;\n\n      ", " {\n        max-width: 75px;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 16px;\n    min-width: 32px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(Belt, { label: 'eduzz-toolbar-belt' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: white;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: ", "px ", "px;\n  border-radius: 20px;\n  margin: 0 ", "px;\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n      font-size: 14px;\n      margin-left: 4px;\n\n      ", " {\n        max-width: 75px;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 16px;\n    min-width: 32px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"], ["\n  color: white;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: ", "px ", "px;\n  border-radius: 20px;\n  margin: 0 ", "px;\n\n  ", " {\n    padding: ", "px;\n  }\n\n  &.none {\n    display: none;\n  }\n\n  &.white {\n    background-color: ", ";\n    color: ", ";\n\n    & > .eduzz-toolbar-badge {\n      color: ", ";\n\n      & > svg > path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.orange {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.black {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.golden {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  .eduzz-toolbar-badge {\n    color: white;\n    display: flex;\n    align-items: center;\n\n    & > span {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 150px;\n      font-size: 14px;\n      margin-left: 4px;\n\n      ", " {\n        max-width: 75px;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n\n  .eduzz-toolbar-icon-elite {\n    height: 16px;\n    min-width: 32px;\n  }\n\n  .eduzz-toolbar-icon-avatar {\n    width: 30px;\n    height: 30px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -40,0 +40,0 @@ return theme.spacing(1.5);

dist/components/Toolbar/CustomAction/index.d.ts

 import { IEduzzToolbarCustomAction } from '../../../interfaces';
 import { IStylesProps } from '../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IEduzzToolbarCustomAction & IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IEduzzToolbarCustomAction & IStylesProps, "className" | keyof IEduzzToolbarCustomAction> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/CustomAction/index.js

@@ -6,10 +6,10 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
 var theme_1 = require("../../../assets/theme");
-var className_1 = tslib_1.__importDefault(require("../../../helpers/className"));
 var CustomAction = (0, react_1.memo)(function (params) {
-    var className = params.className, active = params.active, icon = params.icon, label = params.label, rest = tslib_1.__rest(params, ["className", "active", "icon", "label"]);
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-action', className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-action-button', active && '--active', icon && '--has-icon') }, { children: [icon && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-action-icon' }, { children: icon })), label && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-action-label' }, { children: label }))] })) })));
+    var active = params.active, icon = params.icon, label = params.label, rest = tslib_1.__rest(params, ["active", "icon", "label"]);
+    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({}, rest, { children: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-action-button', active && '--active', icon && '--has-icon') }, { children: [icon && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-action-icon' }, { children: icon })), label && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-action-label' }, { children: label }))] })) })));
 });
-exports.default = (0, styled_1.default)(CustomAction)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n\n  .eduzz-toolbar-action-button {\n    display: flex;\n    align-items: center;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n    cursor: pointer;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &.--has-icon {\n      .eduzz-toolbar-action-label {\n        margin-left: ", "px;\n\n        ", " {\n          display: none;\n        }\n      }\n    }\n\n    .eduzz-toolbar-action-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-action-label {\n      font-size: 14px;\n\n      &::selection {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  position: relative;\n\n  .eduzz-toolbar-action-button {\n    display: flex;\n    align-items: center;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n    cursor: pointer;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &.--has-icon {\n      .eduzz-toolbar-action-label {\n        margin-left: ", "px;\n\n        ", " {\n          display: none;\n        }\n      }\n    }\n\n    .eduzz-toolbar-action-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-action-label {\n      font-size: 14px;\n\n      &::selection {\n        background: transparent;\n      }\n    }\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(CustomAction, { label: 'eduzz-toolbar-action' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n\n  .eduzz-toolbar-action-button {\n    display: flex;\n    align-items: center;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n    cursor: pointer;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &.--has-icon {\n      .eduzz-toolbar-action-label {\n        margin-left: ", "px;\n\n        ", " {\n          display: none;\n        }\n      }\n    }\n\n    .eduzz-toolbar-action-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-action-label {\n      font-size: 14px;\n\n      &::selection {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  position: relative;\n\n  .eduzz-toolbar-action-button {\n    display: flex;\n    align-items: center;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n    cursor: pointer;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &.--has-icon {\n      .eduzz-toolbar-action-label {\n        margin-left: ", "px;\n\n        ", " {\n          display: none;\n        }\n      }\n    }\n\n    .eduzz-toolbar-action-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-action-label {\n      font-size: 14px;\n\n      &::selection {\n        background: transparent;\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -16,0 +16,0 @@ return theme.spacing(3);

dist/components/Toolbar/IconMenu/index.d.ts

 /// <reference types="react" />
 export interface IEduzzToolbarIconMenuProps {
     onClick: () => void;
+    /**
+      We recommend the size of 24 pixels.
+    */
     icon?: React.ReactNode;
+    /**
+      If `true`, will be displayed on all breakpoints.
+    */
     persist?: boolean;
+    /**
+      Set if menu is opened to show a close icon
+    */
     opened?: boolean;
@@ -7,0 +16,0 @@ }

dist/components/Toolbar/index.d.ts

@@ -1,7 +0,4 @@
-import { IStylesProps } from '../../interfaces/styles';
-export interface IToolbarProps extends IStylesProps {
-}
-declare const _default: import("@emotion/styled").StyledComponent<IToolbarProps & {
+declare const _default: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/index.js

@@ -6,2 +6,3 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var react_2 = require("@emotion/react");
@@ -11,3 +12,2 @@ var Cancel_1 = tslib_1.__importDefault(require("@eduzz/houston-icons/Cancel"));
 var context_1 = require("../../context");
-var className_1 = tslib_1.__importDefault(require("../../helpers/className"));
 var EduzzLogo_1 = tslib_1.__importDefault(require("../EduzzLogo"));
@@ -17,3 +17,3 @@ var styles_1 = tslib_1.__importDefault(require("./styles"));
     var _b;
-    var className = _a.className, children = _a.children;
+    var children = _a.children, rest = tslib_1.__rest(_a, ["children"]);
     var _c = (0, context_1.useToolbarContext)(), user = _c.user, iconMenuProps = _c.iconMenuProps;
@@ -51,4 +51,4 @@ var theme = (0, react_2.useTheme)();
     var handleClickContainer = (0, react_1.useCallback)(function () { return (contentClicked.clicked = true); }, [contentClicked]);
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: className }, { children: (0, jsx_runtime_1.jsxs)("header", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-header', className, (user === null || user === void 0 ? void 0 : user.isSupport) && '--support'), onClick: handleClickContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-start' }, { children: [iconMenuProps && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-icon-menu', (iconMenuProps === null || iconMenuProps === void 0 ? void 0 : iconMenuProps.persist) && '--persist'), onClick: iconMenuProps.onClick }, { children: ((_b = iconMenuProps.icon) !== null && _b !== void 0 ? _b : iconMenuProps.opened) ? (0, jsx_runtime_1.jsx)(Cancel_1.default, { size: 24 }) : (0, jsx_runtime_1.jsx)(DragAndDrop_1.default, { size: 24 }) }))), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-logo' }, { children: (0, jsx_runtime_1.jsx)(EduzzLogo_1.default, {}) })), (user === null || user === void 0 ? void 0 : user.isSupport) && (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: 'eduzz-toolbar-support' }, { children: "SUPORTE" }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-quick-access' }, { children: children }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({}, rest, { children: (0, jsx_runtime_1.jsxs)("header", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-header', (user === null || user === void 0 ? void 0 : user.isSupport) && '--support'), onClick: handleClickContainer }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'eduzz-toolbar-start' }, { children: [iconMenuProps && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-icon-menu', (iconMenuProps === null || iconMenuProps === void 0 ? void 0 : iconMenuProps.persist) && '--persist'), onClick: iconMenuProps.onClick }, { children: ((_b = iconMenuProps.icon) !== null && _b !== void 0 ? _b : iconMenuProps.opened) ? (0, jsx_runtime_1.jsx)(Cancel_1.default, { size: 24 }) : (0, jsx_runtime_1.jsx)(DragAndDrop_1.default, { size: 24 }) }))), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-logo' }, { children: (0, jsx_runtime_1.jsx)(EduzzLogo_1.default, {}) })), (user === null || user === void 0 ? void 0 : user.isSupport) && (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: 'eduzz-toolbar-support' }, { children: "SUPORTE" }))] })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-quick-access' }, { children: children }))] })) })));
 });
 exports.default = (0, styles_1.default)(Toolbar);

dist/components/Toolbar/styles.d.ts

 import { NamedExoticComponent } from 'react';
-import { IToolbarProps } from '.';
-declare const _default: (Component: NamedExoticComponent<IToolbarProps>) => import("@emotion/styled").StyledComponent<IToolbarProps & {
+declare const _default: (Component: NamedExoticComponent) => import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/Avatar/index.d.ts

 import { IStylesProps } from '../../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/Avatar/index.js

@@ -8,3 +8,2 @@ "use strict";
 var context_1 = require("../../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../../helpers/className"));
 var UserAvatar = (0, react_1.memo)(function (_a) {
@@ -17,3 +16,3 @@ var _b, _c;
     var params = (0, react_1.useMemo)(function () { return ({
-        className: (0, className_1.default)('eduzz-toolbar-avatar', className),
+        className: className,
         style: hasAvatarImage ? { backgroundImage: "url(".concat(user === null || user === void 0 ? void 0 : user.avatar) } : null
@@ -23,3 +22,3 @@ }); }, [className, hasAvatarImage, user === null || user === void 0 ? void 0 : user.avatar]);
 });
-exports.default = (0, styled_1.default)(UserAvatar)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 100%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  font-weight: 600;\n  margin-right: ", "px;\n  font-size: 14px;\n  line-height: 0;\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  &::selection {\n    background: none;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 100%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  font-weight: 600;\n  margin-right: ", "px;\n  font-size: 14px;\n  line-height: 0;\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  &::selection {\n    background: none;\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(UserAvatar, { label: 'eduzz-toolbar-avatar' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 100%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  font-weight: 600;\n  margin-right: ", "px;\n  font-size: 14px;\n  line-height: 0;\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  &::selection {\n    background: none;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 100%;\n  background: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  font-weight: 600;\n  margin-right: ", "px;\n  font-size: 14px;\n  line-height: 0;\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  &::selection {\n    background: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -26,0 +25,0 @@ return theme.spacing(7.5);

dist/components/Toolbar/User/index.d.ts

 import { IStylesProps } from '../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/index.js

@@ -6,2 +6,3 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
@@ -11,3 +12,2 @@ var ChevronDown_1 = tslib_1.__importDefault(require("@eduzz/houston-icons/ChevronDown"));
 var context_1 = require("../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../helpers/className"));
 var useEscapeKey_1 = require("../../../hooks/useEscapeKey");
@@ -41,5 +41,5 @@ var useOutside_1 = require("../../../hooks/useOutside");
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Belt_1.default, {}), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ ref: wrapperMenuUser, className: (0, className_1.default)('eduzz-toolbar-user', dropdown && '--active', hasMenu && '--has-menu', className) }, { children: (0, jsx_runtime_1.jsxs)(context_2.default.Provider, tslib_1.__assign({ value: { dropdown: dropdown, handleClickOutside: handleClickOutside } }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-user-label', dropdown && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, {}), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-user-name' }, { children: user === null || user === void 0 ? void 0 : user.name })), hasMenu && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-user-menu-arrow', dropdown && '--open') }, { children: (0, jsx_runtime_1.jsx)(ChevronDown_1.default, { size: 18 }) })))] })), (0, jsx_runtime_1.jsx)(Menu_1.default, { children: children })] })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Belt_1.default, {}), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ ref: wrapperMenuUser, className: (0, css_1.cx)(dropdown && '--active', hasMenu && '--has-menu', className) }, { children: (0, jsx_runtime_1.jsxs)(context_2.default.Provider, tslib_1.__assign({ value: { dropdown: dropdown, handleClickOutside: handleClickOutside } }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-user-label', dropdown && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, {}), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-user-name' }, { children: user === null || user === void 0 ? void 0 : user.name })), hasMenu && ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, css_1.cx)('eduzz-toolbar-user-menu-arrow', dropdown && '--open') }, { children: (0, jsx_runtime_1.jsx)(ChevronDown_1.default, { size: 18 }) })))] })), (0, jsx_runtime_1.jsx)(Menu_1.default, { children: children })] })) }))] }));
 });
-exports.default = (0, styled_1.default)(User)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n      max-width: 200px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      ", " {\n        max-width: 120px;\n      }\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        display: none;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n      max-width: 200px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      ", " {\n        max-width: 120px;\n      }\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        display: none;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(User, { label: 'eduzz-toolbar-user' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n      max-width: 200px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      ", " {\n        max-width: 120px;\n      }\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        display: none;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    ", " {\n      padding: 0 ", "px;\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n      max-width: 200px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      ", " {\n        max-width: 120px;\n      }\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        display: none;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -46,0 +46,0 @@ return theme.spacing(3);

dist/components/Toolbar/User/Menu/Context/index.d.ts

 import { IStylesProps } from '../../../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/Menu/Context/index.js

@@ -7,8 +7,7 @@ "use strict";
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
-var className_1 = tslib_1.__importDefault(require("../../../../../helpers/className"));
-var UserMenuContext = (0, react_1.memo)(function (params) {
-    var className = params.className, children = params.children;
-    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-user-menu-context', className) }, { children: children }));
+var UserMenuContext = (0, react_1.memo)(function (_a) {
+    var rest = tslib_1.__rest(_a, []);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({}, rest));
 });
-exports.default = (0, styled_1.default)(UserMenuContext)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  padding: ", "px;\n  line-height: 1.2;\n  cursor: default;\n"], ["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  padding: ", "px;\n  line-height: 1.2;\n  cursor: default;\n"])), function (_a) {
+exports.default = (0, styled_1.default)(UserMenuContext, { label: 'eduzz-toolbar-user-menu-context' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  padding: ", "px;\n  line-height: 1.2;\n  cursor: default;\n"], ["\n  color: ", ";\n  font-weight: 600;\n  font-size: 14px;\n  padding: ", "px;\n  line-height: 1.2;\n  cursor: default;\n"])), function (_a) {
     var theme = _a.theme;
@@ -15,0 +14,0 @@ return theme.colors.text;

dist/components/Toolbar/User/Menu/Divider/index.d.ts

 import { IStylesProps } from '../../../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/Menu/Divider/index.js

@@ -7,8 +7,7 @@ "use strict";
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
-var className_1 = tslib_1.__importDefault(require("../../../../../helpers/className"));
 var UserMenuDivider = (0, react_1.memo)(function (_a) {
-    var className = _a.className;
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, className_1.default)('eduzz-toolbar-user-menu-divider', className) });
+    var rest = tslib_1.__rest(_a, []);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({}, rest));
 });
-exports.default = (0, styled_1.default)(UserMenuDivider)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  margin: ", "px 0;\n  width: calc(100% - ", "px);\n  height: 1px;\n  background: #eceff1;\n"], ["\n  margin: ", "px 0;\n  width: calc(100% - ", "px);\n  height: 1px;\n  background: #eceff1;\n"])), function (_a) {
+exports.default = (0, styled_1.default)(UserMenuDivider, { label: 'eduzz-toolbar-user-menu-divider' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  margin: ", "px 0;\n  width: calc(100% - ", "px);\n  height: 1px;\n  background: #eceff1;\n"], ["\n  margin: ", "px 0;\n  width: calc(100% - ", "px);\n  height: 1px;\n  background: #eceff1;\n"])), function (_a) {
     var theme = _a.theme;
@@ -15,0 +14,0 @@ return theme.spacing();

dist/components/Toolbar/User/Menu/index.d.ts

 import { IStylesProps } from '../../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IStylesProps, "className"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/Menu/index.js

@@ -6,5 +6,5 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
 var theme_1 = require("../../../../assets/theme");
-var className_1 = tslib_1.__importDefault(require("../../../../helpers/className"));
 var context_1 = require("../context");
@@ -29,5 +29,5 @@ var UserMenu = (0, react_1.memo)(function (_a) {
     }, [element, handleCalculatePosition]);
-    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, className_1.default)('eduzz-toolbar-user-menu', element && '--active', className), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, right: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, css_1.cx)(className, element && '--active'), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, right: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: children })));
 });
-exports.default = (0, styled_1.default)(UserMenu)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: ", "px;\n  top: ", "px;\n  position: absolute;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"], ["\n  width: ", "px;\n  top: ", "px;\n  position: absolute;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"])), theme_1.MENU_WIDTH, theme_1.TOOLBAR_HEIGHT, function (_a) {
+exports.default = (0, styled_1.default)(UserMenu, { label: 'eduzz-toolbar-user-menu' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  width: ", "px;\n  top: ", "px;\n  position: absolute;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"], ["\n  width: ", "px;\n  top: ", "px;\n  position: absolute;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"])), theme_1.MENU_WIDTH, theme_1.TOOLBAR_HEIGHT, function (_a) {
     var theme = _a.theme;
@@ -34,0 +34,0 @@ return theme.spacing(2);

dist/components/Toolbar/User/Menu/Item/index.d.ts

 import { IEduzzToolbarUserMenuItem } from '../../../../../interfaces';
 import { IStylesProps } from '../../../../../interfaces/styles';
-declare const _default: import("@emotion/styled").StyledComponent<IEduzzToolbarUserMenuItem & IStylesProps & {
+declare const _default: import("@emotion/styled").StyledComponent<Pick<IEduzzToolbarUserMenuItem & IStylesProps, "className" | keyof IEduzzToolbarUserMenuItem> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default _default;

dist/components/Toolbar/User/Menu/Item/index.js

@@ -6,5 +6,5 @@ "use strict";
 var react_1 = require("react");
+var css_1 = require("@emotion/css");
 var styled_1 = tslib_1.__importDefault(require("@emotion/styled"));
 var context_1 = require("../../../../../context");
-var className_1 = tslib_1.__importDefault(require("../../../../../helpers/className"));
 var context_2 = require("../../context");
@@ -22,5 +22,5 @@ var UserMenuItem = (0, react_1.memo)(function (params) {
     }, [disabled, handleClickOutside, onClick, user]);
-    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ onClick: function (e) { return handleClickItem(e); }, className: (0, className_1.default)('eduzz-toolbar-user-menu-item', disabled && '--disabled', className) }, { children: [icon && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-user-menu-item-icon' }, { children: icon })), children] })));
+    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ onClick: function (e) { return handleClickItem(e); }, className: (0, css_1.cx)(disabled && '--disabled', className) }, { children: [icon && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'eduzz-toolbar-user-menu-item-icon' }, { children: icon })), children] })));
 });
-exports.default = (0, styled_1.default)(UserMenuItem)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n\n    span,\n    i {\n      font-size: 18px;\n    }\n\n    img {\n      width: 28px;\n      height: 28px;\n    }\n  }\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n\n    span,\n    i {\n      font-size: 18px;\n    }\n\n    img {\n      width: 28px;\n      height: 28px;\n    }\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(UserMenuItem, { label: 'eduzz-toolbar-user-menu-item' })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n\n    span,\n    i {\n      font-size: 18px;\n    }\n\n    img {\n      width: 28px;\n      height: 28px;\n    }\n  }\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n\n    span,\n    i {\n      font-size: 18px;\n    }\n\n    img {\n      width: 28px;\n      height: 28px;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -27,0 +27,0 @@ return theme.colors.text;

package.json

 {
   "name": "@eduzz/apps-toolbar-react",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "private": false,
   "author": "Eduzz Team",
   "main": "./index.js",
+  "types": "./index.d.ts",
   "license": "MIT",
-  "types": "./index.d.ts",
   "repository": {
@@ -27,2 +27,3 @@ "type": "git",
     "@eduzz/houston-icons": "^0.42.3",
+    "@emotion/css": "^11.9.0",
     "@emotion/react": "^11",
@@ -29,0 +30,0 @@ "@emotion/styled": "^11",

README.md

@@ -11,3 +11,3 @@ # Eduzz Toolbar React
 
-Adicione a fonte padrão no seu HTML.
+Adicione a fonte padrão no seu HTML (se não houver).
 
@@ -21,23 +21,28 @@ ```html
 ```js
+const { Action, Apps, User, UserMenuItem, UserMenuDivider, UserMenuContext } = EduzzToolbar;
+
 <EduzzToolbar {...params}>
-  <EduzzToolbar.Action icon={...} onClick={...} />
-  <EduzzToolbar.Action icon={...} onClick={...} />
+  // ações customizadas 
+  <Action icon={...} onClick={...} />
+  <Action icon={...} onClick={...} />
 
-  <EduzzToolbar.Apps />
+  // apps padrão
+  <Apps />
 
-  <EduzzToolbar.User>
-    <EduzzToolbar.UserMenuItem icon={...} disabled>Minhas compras</EduzzToolbar.UserMenuItem>
-    <EduzzToolbar.UserMenuItem icon={...}>Dados Bancários</EduzzToolbar.UserMenuItem>
-    <EduzzToolbar.UserMenuItem icon={...}>Dashboard Elite</EduzzToolbar.UserMenuItem>
+  // usuário atual/ações do usuário
+  <User>
+    <UserMenuItem icon={...} disabled>Minhas compras</UserMenuItem>
+    <UserMenuItem icon={...}>Dados Bancários</UserMenuItem>
+    <UserMenuItem icon={...}>Dashboard Elite</UserMenuItem>
 
-    <EduzzToolbar.UserMenuDivider />
+    <UserMenuDivider />
 
-    <EduzzToolbar.UserMenuContext>Contas:</EduzzToolbar.UserMenuContext>
-    <EduzzToolbar.UserMenuItem icon={...}>John Doe</EduzzToolbar.UserMenuItem>
-    <EduzzToolbar.UserMenuItem icon={...} disabled>John Doe 2</EduzzToolbar.UserMenuItem>
+    <UserMenuContext>Contas:</UserMenuContext>
+    <UserMenuItem icon={...}>John Doe</UserMenuItem>
+    <UserMenuItem icon={...} disabled>John Doe 2</UserMenuItem>
 
-    <EduzzToolbar.UserMenuDivider />
+    <UserMenuDivider />
 
-    <EduzzToolbar.UserMenuItem>Sair</EduzzToolbar.UserMenuItem>
-  </EduzzToolbar.User>
+    <UserMenuItem>Sair</UserMenuItem>
+  </User>
 </EduzzToolbar>
@@ -78,50 +83,1 @@ ```
 ```
-
-#### Desenvolvimento local
-
-No arquivo `src/index.tsx` copie e cole o código abaixo.
-
-```js
-import ReactDOM from 'react-dom';
-
-import EduzzToolbar from './App';
-import { IEduzzToolbarSetupParams } from './interfaces';
-
-const { Apps, User, UserMenuItem: MenuItem, IconMenu, UserMenuDivider: Divider } = EduzzToolbar;
-
-function DevApp() {
-  function toggleMobileMenu() {
-    console.log('toggle menu');
-  }
-
-  const params: IEduzzToolbarSetupParams = {
-    application: 'blinket',
-    disableChat: true,
-    user: {
-      id: 1,
-      name: 'EDUZZ TECNOLOGIA E DESENVOLVIMENTO',
-      email: '[e-mail]',
-      belt: 'Red Belt'
-    }
-  };
-
-  return (
-    <EduzzToolbar {...params}>
-      <IconMenu onClick={toggleMobileMenu} />
-
-      <Apps />
-
-      <User>
-        <MenuItem>Meus Dados</MenuItem>
-        <MenuItem>Minhas Compras</MenuItem>
-        <Divider />
-        <MenuItem>Sair</MenuItem>
-      </User>
-    </EduzzToolbar>
-  );
-}
-
-ReactDOM.render(<DevApp />, document.getElementById('root'));
-
-export default EduzzToolbar;
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141930

increased by5.41%

Number of package files

95

increased by2.15%

Lines of code

2157

increased by12.17%

Worsened metrics

Dependency count

10

increased by11.11%

Number of lines in readme file

81

decreased by-35.2%

Number of low supply chain risk alerts

18

increased by157.14%

Number of medium supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@emotion/css@^11.9.0

• + Added@emotion/css@11.13.0(transitive)