@qoretechnologies/reqore 0.26.0 → 0.27.0

package/dist/containers/UIProvider.js

@@ -36,7 +36,6 @@ var ReqoreUIProvider = function (_a) {
     var _theme = (0, lodash_1.cloneDeep)(theme || {});
     var _defaultTheme = (0, lodash_1.cloneDeep)(theme_1.DEFAULT_THEME);
     var rebuiltTheme = (0, colors_1.buildTheme)((0, merge_1["default"])(_defaultTheme, _theme));
-    console.log(options);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ThemeContext_1["default"].Provider, __assign({ value: __assign({}, rebuiltTheme) }, { children: (0, jsx_runtime_1.jsx)(Layout_1["default"], __assign({ withSidebar: options === null || options === void 0 ? void 0 : options.withSidebar }, { children: modalPortal ? ((0, jsx_runtime_1.jsx)(ReqoreProvider_1["default"], __assign({ options: options }, { children: (0, jsx_runtime_1.jsx)(PopoverProvider_1["default"], __assign({ uiScale: options === null || options === void 0 ? void 0 : options.uiScale }, { children: children })) }))) : null })) })), (0, jsx_runtime_1.jsx)(StyledPortal, { id: 'reqore-portal', ref: setModalPortal })] }));
 };
 exports["default"] = ReqoreUIProvider;

package/dist/containers/UIProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/containers/UIProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,uDAAiC;AACjC,+BAAwC;AACxC,wEAAuC;AACvC,gEAAuD;AAEvD,4CAAiE;AACjE,yEAAmD;AACnD,4CAA+C;AAC/C,sEAAgD;AAChD,oEAA8C;AAgB9C,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,yFAAA,sBAE9B,IAAA,CAAC;AAEF,IAAM,gBAAgB,GAAqC,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IAC9E,IAAA,KAAgC,IAAA,gBAAQ,EAAM,KAAK,CAAC,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D,IAAM,MAAM,GAA0B,IAAA,kBAAS,EAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC7D,IAAM,aAAa,GAAiB,IAAA,kBAAS,EAAC,qBAAa,CAAC,CAAC;IAC7D,IAAM,YAAY,GAAiB,IAAA,mBAAU,EAAC,IAAA,kBAAK,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5E,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAErB,OAAO,CACL,6DACE,uBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,iBAC7C,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,CACb,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAC9B,uBAAC,4BAAe,aAAC,OAAO,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,gBAAG,QAAQ,IAAmB,IACzD,CAClB,CAAC,CAAC,CAAC,IAAI,IACY,IACA,EACxB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,cAAc,GAAI,IACvD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/containers/UIProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,uDAAiC;AACjC,+BAAwC;AACxC,wEAAuC;AACvC,gEAAuD;AAEvD,4CAAiE;AACjE,yEAAmD;AACnD,4CAA+C;AAC/C,sEAAgD;AAChD,oEAA8C;AAiB9C,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,yFAAA,sBAE9B,IAAA,CAAC;AAEF,IAAM,gBAAgB,GAAqC,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IAC9E,IAAA,KAAgC,IAAA,gBAAQ,EAAM,KAAK,CAAC,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D,IAAM,MAAM,GAA0B,IAAA,kBAAS,EAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC7D,IAAM,aAAa,GAAiB,IAAA,kBAAS,EAAC,qBAAa,CAAC,CAAC;IAC7D,IAAM,YAAY,GAAiB,IAAA,mBAAU,EAAC,IAAA,kBAAK,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5E,OAAO,CACL,6DACE,uBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,iBAC7C,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,CACb,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAC9B,uBAAC,4BAAe,aAAC,OAAO,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,gBAAG,QAAQ,IAAmB,IACzD,CAClB,CAAC,CAAC,CAAC,IAAI,IACY,IACA,EACxB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,cAAc,GAAI,IACvD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAe,gBAAgB,CAAC"}

package/dist/context/ReqoreContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReqoreContext.d.ts","sourceRoot":"","sources":["../../src/context/ReqoreContext.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,aAAa,CAAC,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC;IAC1D,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,GAAG,CAAC;IAClE,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,MAAM,CAAC;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACpD;;AAED,wBAQG"}
+{"version":3,"file":"ReqoreContext.d.ts","sourceRoot":"","sources":["../../src/context/ReqoreContext.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,aAAa,CAAC,EAAE,uBAAuB,EAAE,GAAG,IAAI,CAAC;IAC1D,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,KAAK,GAAG,CAAC;IAClE,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,MAAM,CAAC;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACpD;;AAED,wBASG"}

package/dist/context/ReqoreContext.js

@@ -7,7 +7,8 @@ exports["default"] = (0, react_1.createContext)({
     addNotification: null,
     removeNotification: null,
     animations: {
-        buttons: true
+        buttons: true,
+        dialogs: true
     }
 });
 //# sourceMappingURL=ReqoreContext.js.map

package/dist/context/ReqoreContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReqoreContext.js","sourceRoot":"","sources":["../../src/context/ReqoreContext.tsx"],"names":[],"mappings":";;AAAA,+BAAsC;AAgBtC,qBAAe,IAAA,qBAAa,EAAiB;IAC3C,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,eAAe,EAAE,IAAI;IACrB,kBAAkB,EAAE,IAAI;IACxB,UAAU,EAAE;QACV,OAAO,EAAE,IAAI;KACd;CACF,CAAC,CAAC"}
+{"version":3,"file":"ReqoreContext.js","sourceRoot":"","sources":["../../src/context/ReqoreContext.tsx"],"names":[],"mappings":";;AAAA,+BAAsC;AAgBtC,qBAAe,IAAA,qBAAa,EAAiB;IAC3C,aAAa,EAAE,IAAI;IACnB,aAAa,EAAE,IAAI;IACnB,eAAe,EAAE,IAAI;IACrB,kBAAkB,EAAE,IAAI;IACxB,UAAU,EAAE;QACV,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,IAAI;KACd;CACF,CAAC,CAAC"}

package/dist/helpers/utils.d.ts

@@ -1,5 +1,7 @@
+import { TSizes } from '../constants/sizes';
 export declare const sleep: (ms: number) => Promise<unknown>;
 export declare const getTypeFromValue: Function;
 export declare const getLineCount: (value: string) => number;
 export declare const calculateStringSizeInPixels: (value: string, fontSize: number) => number;
+export declare const getOneLessSize: (size: TSizes) => TSizes;
 //# sourceMappingURL=utils.d.ts.map

package/dist/helpers/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,OAAc,MAAM,qBAAgD,CAAC;AAEvF,eAAO,MAAM,gBAAgB,EAAE,QA8B9B,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAM5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,MAAM,YAAiB,MAAM,KAAG,MAqBlF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"AAUA,OAAO,EAAkC,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5E,eAAO,MAAM,KAAK,OAAc,MAAM,qBAAgD,CAAC;AAEvF,eAAO,MAAM,gBAAgB,EAAE,QA8B9B,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAM5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,MAAM,YAAiB,MAAM,KAAG,MAqBlF,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,MAAM,KAAG,MAO7C,CAAC"}

package/dist/helpers/utils.js

@@ -36,8 +36,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 exports.__esModule = true;
-exports.calculateStringSizeInPixels = exports.getLineCount = exports.getTypeFromValue = exports.sleep = void 0;
+exports.getOneLessSize = exports.calculateStringSizeInPixels = exports.getLineCount = exports.getTypeFromValue = exports.sleep = void 0;
 var lodash_1 = require("lodash");
+var sizes_1 = require("../constants/sizes");
 var sleep = function (ms) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
     switch (_a.label) {
         case 0: return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, ms); })];
@@ -100,4 +101,13 @@ var calculateStringSizeInPixels = function (value, fontSize) {
     return (Array.from(value).reduce(function (acc, cur) { var _a; return acc + ((_a = widths[cur.charCodeAt(0)]) !== null && _a !== void 0 ? _a : avg); }, 0) * fontSize);
 };
 exports.calculateStringSizeInPixels = calculateStringSizeInPixels;
+var getOneLessSize = function (size) {
+    // Get the initial sizes number
+    var initialSizeNumber = sizes_1.SIZE_TO_NUMBER[size];
+    // Reduce the size number by one
+    var oneLessSizeNumber = initialSizeNumber - 1 === 0 ? 1 : initialSizeNumber - 1;
+    // Get the size name from the number
+    return sizes_1.NUMBER_TO_SIZE[oneLessSizeNumber];
+};
+exports.getOneLessSize = getOneLessSize;
 //# sourceMappingURL=utils.js.map

package/dist/helpers/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCASgB;AAChB,4CAA4E;AAErE,IAAM,KAAK,GAAG,UAAO,EAAU;;gBAAK,qBAAM,IAAI,OAAO,CAAC,UAAC,CAAC,IAAK,OAAA,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAjB,CAAiB,CAAC,EAAA;gBAA3C,sBAAA,SAA2C,EAAA;;SAAA,CAAC;AAA1E,QAAA,KAAK,SAAqE;AAEhF,IAAM,gBAAgB,GAAa,UAAC,IAAS;IAClD,IAAI,IAAA,kBAAS,EAAC,IAAI,CAAC,EAAE;QACnB,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,IAAA,iBAAQ,EAAC,IAAI,CAAC,EAAE;QAClB,OAAO,QAAQ,CAAC;KACjB;IAED,IAAI,IAAA,iBAAQ,EAAC,IAAI,CAAC,EAAE;QAClB,OAAO,QAAQ,CAAC;KACjB;IAED,IAAI,IAAA,gBAAO,EAAC,IAAI,CAAC,EAAE;QACjB,OAAO,OAAO,CAAC;KAChB;IAED,IAAI,IAAA,iBAAQ,EAAC,IAAI,CAAC,EAAE;QAClB,OAAO,QAAQ,CAAC;KACjB;IAED,IAAI,IAAA,mBAAU,EAAC,IAAI,CAAC,EAAE;QACpB,OAAO,UAAU,CAAC;KACnB;IAED,IAAI,IAAA,eAAM,EAAC,IAAI,CAAC,IAAI,IAAA,oBAAW,EAAC,IAAI,CAAC,EAAE;QACrC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AA9BW,QAAA,gBAAgB,oBA8B3B;AAEK,IAAM,YAAY,GAAG,UAAC,KAAa;IACxC,IAAI;QACF,OAAO,KAAK,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,MAAM,CAAC;KAC/C;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,CAAC,CAAC;KACV;AACH,CAAC,CAAC;AANW,QAAA,YAAY,gBAMvB;AAEK,IAAM,2BAA2B,GAAG,UAAC,KAAkB,EAAE,QAAgB;IAApC,sBAAA,EAAA,UAAkB;IAC5D,IAAM,MAAM,GAAG;QACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;QAC9F,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS;QAC/F,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QACtF,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QACtF,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ;QAC9F,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ;QAC/F,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;QAC5F,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAC1F,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QAC3F,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;QACxF,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;QACxF,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS;KACzC,CAAC;IACF,IAAM,GAAG,GAAG,kBAAkB,CAAC;IAE/B,uDAAuD;IACvD,OAAO,CACL,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,GAAG,YAAK,OAAA,GAAG,GAAG,CAAC,MAAA,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,mCAAI,GAAG,CAAC,CAAA,EAAA,EAAE,CAAC,CAAC,GAAG,QAAQ,CAC/F,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,2BAA2B,+BAqBtC;AAEK,IAAM,cAAc,GAAG,UAAC,IAAY;IACzC,+BAA+B;IAC/B,IAAM,iBAAiB,GAAW,sBAAc,CAAC,IAAI,CAAC,CAAC;IACvD,gCAAgC;IAChC,IAAM,iBAAiB,GAAW,iBAAiB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC;IAC1F,oCAAoC;IACpC,OAAO,sBAAc,CAAC,iBAAiB,CAAC,CAAC;AAC3C,CAAC,CAAC;AAPW,QAAA,cAAc,kBAOzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Breadcrumbs/index.tsx

@@ -100,6 +100,7 @@ const StyledBreadcrumbsTabsWrapper = styled.div`
   display: flex;
   align-items: center;
   overflow: hidden;
+  width: 100%;
 `;
 
 const itemPadding = 27;

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, memo, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -10,6 +10,7 @@ import {
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -28,8 +29,10 @@ import {
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
+import ReqoreTag, { IReqoreTagProps } from '../Tag';
 
 export interface IReqoreButtonProps
   extends React.HTMLAttributes<HTMLButtonElement>,
@@ -48,6 +51,10 @@ export interface IReqoreButtonProps
   rightIcon?: IReqoreIconName;
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
+  badge?: string | number | IReqoreTagProps;
+  description?: string | number;
+  maxWidth?: string;
+  textAlign?: 'left' | 'center' | 'right';
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -67,6 +74,7 @@ export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
   padding: 4px 0;
+  text-align: left;
 `;
 
 export const StyledActiveContent = styled.span`
@@ -77,7 +85,7 @@ export const StyledActiveContent = styled.span`
   filter: blur(10px);
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
@@ -92,7 +100,7 @@ export const StyledInActiveContent = styled.span`
   transition: all 0.2s ease-out;
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       overflow: hidden;
       text-overflow: ellipsis;
@@ -107,7 +115,7 @@ export const StyledInvisibleContent = styled.span`
   overflow: hidden;
 
   ${({ wrap }) =>
-    wrap &&
+    !wrap &&
     css`
       white-space: nowrap;
     `}
@@ -115,8 +123,9 @@ export const StyledInvisibleContent = styled.span`
 
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   display: flex;
-  text-align: left;
+  flex-flow: column;
   align-items: center;
+  justify-content: center;
   margin: 0;
   font-weight: 600;
   position: relative;
@@ -129,13 +138,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
 
-  ${({ wrap }) =>
-    wrap &&
-    css`
-      max-height: ${({ size }) => SIZE_TO_PX[size]}px;
-    `}
-
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
+  max-width: ${({ maxWidth }) => maxWidth || undefined};
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
 
@@ -168,7 +172,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             transition: all 0.2s ease-out;
 
             &:active {
-              transform: scale(0.95);
+              transform: translateY(2px);
             }
 
             &:hover,
@@ -179,6 +183,13 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
                 getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
               border-color: ${({ minimal, theme, color }) =>
                 minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
+              box-shadow: ${({ theme, color, effect }) => {
+                return `0 0 0 2px ${
+                  effect?.gradient
+                    ? Object.values(effect.gradient.colors)[0]
+                    : changeLightness(getButtonMainColor(theme, color), 0.1)
+                }`;
+              }};
 
               ${animate &&
               css`
@@ -226,84 +237,149 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
     border-color: ${({ minimal, theme, color }) =>
       minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
   }
+
+  ${StyledTextEffect} {
+    padding-bottom: ${({ size }) => PADDING_FROM_SIZE[getOneLessSize(size)]}px;
+  }
 `;
 
-const ReqoreButton = forwardRef(
-  (
-    {
-      icon,
-      size = 'normal',
-      minimal,
-      children,
-      tooltip,
-      className,
-      fluid,
-      fixed,
-      intent,
-      active,
-      flat,
-      rightIcon,
-      customTheme,
-      wrap = true,
-      readOnly,
-      ...rest
-    }: IReqoreButtonProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const { animations } = useContext(ReqoreContext);
-    const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
-
-    /* A custom hook that is used to add a tooltip to the button. */
-    useTooltip(targetRef.current, tooltip);
-
-    // If color or intent was specified, set the color
-    const customColor = theme.main;
-    const _flat = minimal ? flat : flat !== false;
-
-    console.log(animations);
-
-    return (
-      <StyledButton
-        {...rest}
-        as='button'
-        theme={theme}
-        ref={targetRef}
-        fluid={fluid}
-        fixed={fixed}
-        minimal={minimal}
-        size={size}
-        color={customColor}
-        animate={animations.buttons}
-        flat={_flat}
-        active={active}
-        readOnly={readOnly}
-        className={`${className || ''} reqore-control reqore-button`}
-      >
-        {icon && (
-          <ReqoreIcon
-            icon={icon}
-            margin={children || rightIcon ? 'right' : undefined}
-            size={`${TEXT_FROM_SIZE[size]}px`}
-          />
-        )}
-        {children && (
-          <StyledAnimatedTextWrapper>
-            <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
-            <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
-            <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
-          </StyledAnimatedTextWrapper>
-        )}
-        {rightIcon && (
-          <ReqoreIcon
-            icon={rightIcon}
-            margin={children ? 'left' : undefined}
-            size={`${TEXT_FROM_SIZE[size]}px`}
+export const StyledButtonContent = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  flex-shrink: 0;
+  min-height: ${({ size }) => SIZE_TO_PX[size]}px;
+  ${({ wrap, description }) =>
+    !wrap && !description
+      ? css`
+          max-height: ${({ size }) => SIZE_TO_PX[size]}px;
+        `
+      : null}
+`;
+
+const ReqoreButton = memo(
+  forwardRef(
+    (
+      {
+        icon,
+        size = 'normal',
+        minimal,
+        children,
+        tooltip,
+        className,
+        fluid,
+        fixed,
+        intent,
+        active,
+        flat,
+        rightIcon,
+        customTheme,
+        wrap,
+        readOnly,
+        badge,
+        description,
+        maxWidth,
+        textAlign = 'left',
+        ...rest
+      }: IReqoreButtonProps,
+      ref
+    ) => {
+      const { targetRef } = useCombinedRefs(ref);
+      const { animations } = useContext(ReqoreContext);
+      const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
+
+      /* A custom hook that is used to add a tooltip to the button. */
+      useTooltip(targetRef.current, tooltip);
+
+      // If color or intent was specified, set the color
+      const customColor = theme.main;
+      const _flat = minimal ? flat : flat !== false;
+      const color = customColor
+        ? minimal
+          ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+          : getReadableColorFrom(customColor, true)
+        : getReadableColor(theme, undefined, undefined, true);
+
+      const renderBadge = () => (
+        <>
+          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+          <ReqoreTag
+            size={getOneLessSize(size)}
+            badge
+            color={`${color}70`}
+            {...(typeof badge === 'string' || typeof badge === 'number' ? { label: badge } : badge)}
           />
-        )}
-      </StyledButton>
-    );
-  }
+        </>
+      );
+
+      return (
+        <StyledButton
+          {...rest}
+          as='button'
+          theme={theme}
+          ref={targetRef}
+          fluid={fluid}
+          fixed={fixed}
+          maxWidth={maxWidth}
+          minimal={minimal}
+          size={size}
+          color={customColor}
+          animate={animations.buttons}
+          flat={_flat}
+          active={active}
+          readOnly={readOnly}
+          wrap={wrap}
+          description={description}
+          className={`${className || ''} reqore-control reqore-button`}
+        >
+          <StyledButtonContent size={size} wrap={wrap} description={description}>
+            {icon && (
+              <>
+                <ReqoreIcon icon={icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                {children || badge || rightIcon ? (
+                  <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+                ) : null}
+              </>
+            )}
+            {children && (
+              <StyledAnimatedTextWrapper textAlign={textAlign}>
+                <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
+                <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
+                <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
+                {badge && wrap ? renderBadge() : null}
+              </StyledAnimatedTextWrapper>
+            )}
+            {badge && !wrap ? renderBadge() : null}
+            {rightIcon && (
+              <>
+                {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
+                <ReqoreIcon
+                  icon={rightIcon}
+                  size={`${TEXT_FROM_SIZE[size]}px`}
+                  style={{ marginLeft: 'auto' }}
+                />
+              </>
+            )}
+          </StyledButtonContent>
+
+          {description && (
+            <ReqoreTextEffect
+              effect={{
+                textSize: getOneLessSize(size),
+                weight: 'light',
+                color: `${color}90`,
+                textAlign,
+              }}
+            >
+              {description}
+            </ReqoreTextEffect>
+          )}
+        </StyledButton>
+      );
+    }
+  )
 );
 
 export default ReqoreButton;

package/src/components/Drawer/index.tsx

@@ -1,10 +1,11 @@
 import { animated, useTransition } from '@react-spring/web';
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { SPRING_CONFIG } from '../../constants/animations';
+import { ReqoreContext } from '../..';
+import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { getMainBackgroundColor } from '../../helpers/colors';
@@ -171,6 +172,7 @@ export const ReqoreDrawer = ({
   height,
   ...rest
 }: IReqoreDrawerProps) => {
+  const { animations } = useContext(ReqoreContext);
   const theme = useReqoreTheme('main', customTheme, intent);
   const layout = useMemo(
     () =>
@@ -192,7 +194,7 @@ export const ReqoreDrawer = ({
 
   const transitions = useTransition(isOpen, {
     ...getSpringConfig(_isModal, position, floating),
-    config: SPRING_CONFIG,
+    config: animations.dialogs ? SPRING_CONFIG : SPRING_CONFIG_NO_ANIMATIONS,
   });
 
   const zIndex = useLatestZIndex();

package/src/components/Effect/index.tsx

@@ -1,6 +1,7 @@
 import { reduce } from 'lodash';
 import styled, { css } from 'styled-components';
 import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
+import { changeDarkness } from '../../helpers/colors';
 
 export interface IReqoreEffect {
   gradient?: {
@@ -45,6 +46,8 @@ export const StyledEffect = styled.span`
 
     return css`
       background-image: ${gradient};
+      // Get the first color from the colors object
+      border-color: ${changeDarkness(Object.values(effect.gradient.colors)[0], 0.05)} !important;
     `;
   }}
 

package/src/components/Menu/index.tsx

@@ -15,6 +15,7 @@ export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes
   customTheme?: IReqoreCustomTheme;
   intent?: TReqoreIntent;
   wrapText?: boolean;
+  flat?: boolean;
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -48,7 +49,17 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
 
 const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
   (
-    { children, position, _insidePopover, _popoverId, customTheme, intent, wrapText, ...rest },
+    {
+      children,
+      position,
+      _insidePopover,
+      _popoverId,
+      customTheme,
+      intent,
+      wrapText,
+      flat = true,
+      ...rest
+    },
     ref: any
   ) => {
     const theme = useReqoreTheme('main', customTheme, intent);
@@ -64,6 +75,7 @@ const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
                   _popoverId,
                   customTheme: theme,
                   wrap: wrapText,
+                  flat,
                 })
               : null
           )}

package/src/components/Menu/item.tsx

@@ -50,6 +50,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       _popoverId,
       tooltip,
       intent,
+      flat = true,
       ...rest
     },
     ref: any
@@ -88,7 +89,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
           //@ts-ignore
           as={as}
           {...rest}
-          flat
+          flat={flat}
           className='reqore-menu-item'
           fluid
           onClick={handleClick}
@@ -103,7 +104,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
         {rightIcon && (
           <ReqoreButton
             icon={rightIcon}
-            flat
+            flat={flat}
             fixed
             minimal={!onRightIconClick}
             customTheme={rest.customTheme}

package/src/components/Notifications/notification.tsx

@@ -66,7 +66,7 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   border-radius: 5px;
   min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
-  flex: 0 auto;
+  flex: 0 0 auto;
   overflow: auto;
   position: relative;
   transition: all 0.2s ease-out;

package/src/components/Panel/index.tsx

@@ -142,7 +142,9 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   height: 40px;
   align-items: center;
   padding: ${({ noHorizontalPadding, contentSize }: IStyledPanel) =>
-    `0 5px 0 ${noHorizontalPadding ? 0 : `${TEXT_FROM_SIZE[contentSize]}px`}`};
+    `0 ${noHorizontalPadding ? 0 : '5px'} 0 ${
+      noHorizontalPadding ? 0 : `${TEXT_FROM_SIZE[contentSize]}px`
+    }`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
       ? `1px solid ${rgba(changeLightness(getMainBackgroundColor(theme), 0.2), opacity)}`
@@ -163,8 +165,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 `;
 
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
-  padding-left: 5px;
-  padding-right: 5px;
+  padding: ${({ noHorizontalPadding }: IStyledPanel) => `0 ${noHorizontalPadding ? 0 : '5px'}`};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat

package/src/components/Spacer/index.tsx

@@ -4,4 +4,5 @@ export const ReqoreSpacer = styled.div`
   visibility: hidden;
   height: ${({ height }) => height || 1}px;
   width: ${({ width }) => width || 1}px;
+  flex-shrink: 0;
 `;

package/src/components/Tabs/index.tsx

@@ -59,7 +59,7 @@ const ReqoreTabs = ({
   _testWidth,
   vertical,
   activeTabIntent,
-  flat,
+  flat = true,
   size = 'normal',
   width,
   wrapTabNames,