@qoretechnologies/reqore 0.37.6 → 0.37.8

package/dist/containers/UIProvider.js

@@ -57,21 +57,21 @@ var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 ||
     var theme = _a.theme;
     return (0, polished_1.rgba)((0, colors_1.getMainBackgroundColor)(theme), 0.3);
 });
-var StyledPortal = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: 9999;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  ", "\n"], ["\n  z-index: 9999;\n  position: relative;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), function (_a) {
+var StyledPortal = styled_components_1["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  * {\n    box-sizing: border-box;\n  }\n\n  ", "\n"], ["\n  * {\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), (0, colors_1.getReadableColor)(theme, undefined, undefined, true));
 });
-var ReqorePortal = (0, react_1.forwardRef)(function (_props, ref) {
+var ReqorePortal = (0, react_1.memo)((0, react_1.forwardRef)(function (_props, ref) {
     return ((0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], { children: (0, jsx_runtime_1.jsx)(StyledPortal, { id: 'reqore-portal', ref: ref }) }));
-});
-var ReqoreUIProvider = function (_a) {
+}));
+var ReqoreUIProvider = (0, react_1.memo)(function (_a) {
     var children = _a.children, theme = _a.theme, options = _a.options;
     var _b = (0, react_1.useState)(false), modalPortal = _b[0], setModalPortal = _b[1];
-    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));
+    var _theme = (0, react_1.useMemo)(function () { return (0, lodash_1.cloneDeep)(theme || {}); }, [theme]);
+    var _defaultTheme = (0, react_1.useMemo)(function () { return (0, lodash_1.cloneDeep)(theme_1.DEFAULT_THEME); }, [theme_1.DEFAULT_THEME]);
+    var rebuiltTheme = (0, react_1.useMemo)(function () { return (0, colors_1.buildTheme)((0, merge_1["default"])(_defaultTheme, _theme)); }, [_defaultTheme, _theme]);
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(ThemeContext_1["default"].Provider, __assign({ value: __assign({}, rebuiltTheme) }, { children: [(0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], { children: (0, jsx_runtime_1.jsx)(GlobalStyle, {}) }), (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: children })) : null })), (0, jsx_runtime_1.jsx)(ReqorePortal, { ref: setModalPortal })] })) }));
-};
+});
 exports["default"] = ReqoreUIProvider;
 var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=UIProvider.js.map

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,qCAAgC;AAChC,+BAAoD;AACpD,qEAAmE;AACnE,gEAAuD;AAEvD,4CAAiE;AACjE,yEAAmD;AACnD,4CAAyF;AACzF,oEAA8C;AAC9C,kEAAkD;AA0BlD,IAAM,WAAW,OAAG,qCAAiB,oVAAA,8KASb,EAAuD,gGAO9E,KAPuB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,IAAA,eAAI,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAAxC,CAAwC,CAO9E,CAAC;AAEF,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,qKAAA,4FAQ3B,EAED,IACF,KAHG,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,WAAA,uBAAG,4FAAA,eACT,EAAmD,OAC7D,KADU,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC;AAD7C,CAEhB,CACF,CAAC;AAEF,IAAM,YAAY,GAAG,IAAA,kBAAU,EAAyB,UAAC,MAAM,EAAE,GAAG;IAClE,OAAO,CACL,uBAAC,0BAAmB,cAClB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,GAAG,GAAI,GACzB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,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,2DACE,wBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,kBAC7C,uBAAC,0BAAmB,cAClB,uBAAC,WAAW,KAAG,GACK,EACtB,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAAG,QAAQ,IAAkB,CAAC,CAAC,CAAC,IAAI,IAC/D,EACtB,uBAAC,YAAY,IAAC,GAAG,EAAE,cAAc,GAAI,KACf,GACvB,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,qCAAgC;AAChC,+BAAmE;AACnE,qEAAmE;AACnE,gEAAuD;AAEvD,4CAAiE;AACjE,yEAAmD;AACnD,4CAAyF;AACzF,oEAA8C;AAC9C,kEAAkD;AA0BlD,IAAM,WAAW,OAAG,qCAAiB,oVAAA,8KASb,EAAuD,gGAO9E,KAPuB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,IAAA,eAAI,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAAxC,CAAwC,CAO9E,CAAC;AAEF,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,0HAAA,iDAK3B,EAED,IACF,KAHG,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,WAAA,uBAAG,4FAAA,eACT,EAAmD,OAC7D,KADU,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC;AAD7C,CAEhB,CACF,CAAC;AAEF,IAAM,YAAY,GAAG,IAAA,YAAI,EACvB,IAAA,kBAAU,EAAyB,UAAC,MAAM,EAAE,GAAG;IAC7C,OAAO,CACL,uBAAC,0BAAmB,cAClB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,GAAG,GAAI,GACzB,CACvB,CAAC;AACJ,CAAC,CAAC,CACH,CAAC;AAEF,IAAM,gBAAgB,GAAqC,IAAA,YAAI,EAAC,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IACnF,IAAA,KAAgC,IAAA,gBAAQ,EAAM,KAAK,CAAC,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D,IAAM,MAAM,GAA0B,IAAA,eAAO,EAAC,cAAM,OAAA,IAAA,kBAAS,EAAC,KAAK,IAAI,EAAE,CAAC,EAAtB,CAAsB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACrF,IAAM,aAAa,GAAiB,IAAA,eAAO,EAAC,cAAM,OAAA,IAAA,kBAAS,EAAC,qBAAa,CAAC,EAAxB,CAAwB,EAAE,CAAC,qBAAa,CAAC,CAAC,CAAC;IAC7F,IAAM,YAAY,GAAiB,IAAA,eAAO,EACxC,cAAM,OAAA,IAAA,mBAAU,EAAC,IAAA,kBAAK,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC,EAAxC,CAAwC,EAC9C,CAAC,aAAa,EAAE,MAAM,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,2DACE,wBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,kBAC7C,uBAAC,0BAAmB,cAClB,uBAAC,WAAW,KAAG,GACK,EACtB,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAAG,QAAQ,IAAkB,CAAC,CAAC,CAAC,IAAI,IAC/D,EACtB,uBAAC,YAAY,IAAC,GAAG,EAAE,cAAc,GAAI,KACf,GACvB,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.37.6",
+  "version": "0.37.8",
   "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/Button/index.tsx

@@ -43,7 +43,7 @@ import {
   TReqoreEffectColor,
   TReqoreHexColor,
 } from '../Effect';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
 import ReqoreTag, { IReqoreTagProps } from '../Tag';
 import ReqoreTagGroup from '../Tag/group';
@@ -75,6 +75,8 @@ export interface IReqoreButtonProps
   iconColor?: TReqoreEffectColor;
   leftIconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;
+  leftIconProps?: IReqoreIconProps;
+  rightIconProps?: IReqoreIconProps;
   labelEffect?: IReqoreEffect;
   descriptionEffect?: IReqoreEffect;
   label?: React.HTMLAttributes<HTMLButtonElement>['children'];
@@ -356,6 +358,8 @@ const ReqoreButton = memo(
         rightIconColor,
         iconColor,
         iconsAlign,
+        leftIconProps,
+        rightIconProps,
         label,
         as,
         ...rest
@@ -421,6 +425,7 @@ const ReqoreButton = memo(
                   icon={icon}
                   size={size}
                   color={leftIconColor || iconColor}
+                  {...leftIconProps}
                   style={
                     textAlign !== 'left' || iconsAlign === 'center'
                       ? {
@@ -478,6 +483,8 @@ const ReqoreButton = memo(
                 <ReqoreIcon
                   icon={rightIcon}
                   size={size}
+                  color={rightIconColor || iconColor}
+                  {...rightIconProps}
                   style={
                     textAlign !== 'right' || iconsAlign === 'center'
                       ? {
@@ -489,7 +496,6 @@ const ReqoreButton = memo(
                         }
                       : undefined
                   }
-                  color={rightIconColor || iconColor}
                 />
               </>
             )}

package/src/components/Drawer/backdrop.tsx

@@ -3,6 +3,7 @@ import { rgba } from 'polished';
 import { memo } from 'react';
 import styled from 'styled-components';
 import { IReqoreDrawerStyle } from '.';
+import { useReqoreProperty } from '../..';
 import { getMainBackgroundColor } from '../../helpers/colors';
 
 export interface IReqoreBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -27,22 +28,26 @@ export const StyledBackdrop = styled(animated.div)<
 `;
 
 export const ReqoreBackdrop = memo(
-  ({ onClose, zIndex, blur, opacity, ...rest }: IReqoreBackdropProps) => (
-    <StyledBackdrop
-      {...rest}
-      className={`${rest.className || ''} reqore-drawer-backdrop`}
-      onClick={(event) => {
-        // Only close if the click is on the backdrop itself
-        if (event.target === event.currentTarget) {
-          onClose?.();
-        }
-      }}
-      closable={!!onClose}
-      zIndex={zIndex}
-      blur={blur}
-      style={{
-        opacity,
-      }}
-    />
-  )
+  ({ onClose, zIndex, blur, opacity, ...rest }: IReqoreBackdropProps) => {
+    const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
+
+    return (
+      <StyledBackdrop
+        {...rest}
+        className={`${rest.className || ''} reqore-drawer-backdrop`}
+        onClick={(event) => {
+          // Only close if the click is on the backdrop itself
+          if (event.target === event.currentTarget) {
+            onClose?.();
+          }
+        }}
+        closable={!!onClose}
+        zIndex={zIndex || getAndIncreaseZIndex()}
+        blur={blur}
+        style={{
+          opacity,
+        }}
+      />
+    );
+  }
 );

package/src/components/Effect/index.tsx

@@ -74,6 +74,7 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     color: TReqoreEffectColor;
     inset?: boolean;
     blur?: number;
+    opacity?: number;
   };
   interactive?: boolean;
 }
@@ -233,12 +234,15 @@ export const StyledEffect = styled.span`
       effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
     );
     const blur = effect.glow.blur || 0;
+    const opacity = effect.glow.opacity || 1;
 
     return css`
       color: ${Colors.LIGHT};
-      text-shadow: 0 0 ${blur}px ${color}, 0 0 ${blur + 5}px ${color}, 0 0 ${blur + 10}px ${color},
-        0 0 1px ${getReadableColorFrom(color)}, 0 0 2px ${getReadableColorFrom(color)},
-        0 0 3px ${getReadableColorFrom(color)};
+      text-shadow: 0 0 ${blur}px ${rgba(color, opacity)}, 0 0 ${blur + 5}px ${rgba(color, opacity)},
+        0 0 ${blur + 10}px ${rgba(color, opacity)},
+        0 0 1px ${rgba(getReadableColorFrom(color), opacity)},
+        0 0 2px ${rgba(getReadableColorFrom(color), opacity)},
+        0 0 3px ${rgba(getReadableColorFrom(color), opacity)};
     `;
   }}
 

package/src/components/Icon/index.tsx

@@ -27,15 +27,16 @@ export interface IReqoreIconProps
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
+  rotation?: number;
   animation?: 'spin' | 'heartbeat';
 }
 
 const SpinKeyframes = keyframes`
   0% {
-    transform: rotate(0deg);
+    rotate: 0deg;
   }
   100% {
-    transform: rotate(360deg);
+    rotate: 360deg;
   }
 `;
 
@@ -49,6 +50,7 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
   overflow: hidden;
 
   border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
+  rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
 
   ${({ margin, size }) =>
     margin &&

package/src/components/Message/index.tsx

@@ -21,7 +21,7 @@ import {
 import { IReqoreIconName } from '../../types/icons';
 import { TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 import {
   StyledIconWrapper,
   StyledNotificationContent,
@@ -46,6 +46,7 @@ export interface IReqoreMessageProps
   children: any;
   icon?: IReqoreIconName;
   iconColor?: TReqoreEffectColor;
+  iconProps?: IReqoreIconProps;
   onClose?: () => any;
   onClick?: () => any;
   duration?: number;
@@ -81,6 +82,7 @@ const ReqoreMessage = memo(
         tooltip,
         fixed,
         fluid,
+        iconProps,
         ...rest
       },
       ref
@@ -159,6 +161,7 @@ const ReqoreMessage = memo(
                     iconColor={iconColor}
                     type={5}
                     iconMargin={flat && minimal ? 'right' : 'both'}
+                    iconProps={iconProps}
                   />
                 ) : (
                   <ReqoreIcon
@@ -166,6 +169,7 @@ const ReqoreMessage = memo(
                     margin={flat && minimal ? 'right' : 'both'}
                     size={size}
                     color={iconColor}
+                    {...iconProps}
                   />
                 )}
               </StyledIconWrapper>

package/src/components/Spinner/index.tsx

@@ -5,6 +5,7 @@ import { TReqoreIntent } from '../../constants/theme';
 import { IWithReqoreEffect } from '../../types/global';
 import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
 import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
+import { IReqoreIconProps } from '../Icon';
 
 export interface IReqoreSpinnerProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'size'>,
@@ -17,6 +18,7 @@ export interface IReqoreSpinnerProps
   labelEffect?: IReqoreEffect;
   iconMargin?: 'right' | 'left' | 'both';
   centered?: boolean;
+  iconProps?: IReqoreIconProps;
 }
 
 export const ReqoreSpinner = ({
@@ -29,6 +31,7 @@ export const ReqoreSpinner = ({
   effect,
   iconMargin,
   centered,
+  iconProps,
   ...rest
 }: IReqoreSpinnerProps) => {
   const renderContent = useCallback(() => {
@@ -41,6 +44,7 @@ export const ReqoreSpinner = ({
         animation='spin'
         className='reqore-spinner'
         margin={iconMargin || (children ? 'right' : undefined)}
+        {...iconProps}
       />
     );
   }, [size, intent, type, children, iconColor]);

package/src/components/Tag/index.tsx

@@ -38,7 +38,7 @@ import {
   TReqoreEffectColor,
   TReqoreHexColor,
 } from '../Effect';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
@@ -61,10 +61,12 @@ export interface IReqoreTagProps
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
+  leftIconProps?: IReqoreIconProps;
   rightIcon?: IReqoreIconName;
   iconColor?: TReqoreEffectColor;
   leftIconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;
+  rightIconProps?: IReqoreIconProps;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -261,6 +263,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       iconColor,
       labelEffect,
       labelKeyEffect,
+      leftIconProps,
+      rightIconProps,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -323,6 +327,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 margin={label || labelKey ? 'left' : 'both'}
                 color={leftIconColor || iconColor}
+                {...leftIconProps}
               />
             )}
             {labelKey && (
@@ -370,6 +375,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                 size={size}
                 margin={label || (icon && !labelKey) ? 'right' : 'both'}
                 color={rightIconColor || iconColor}
+                {...rightIconProps}
               />
             )}
           </StyledTagContentWrapper>

package/src/containers/UIProvider.tsx

@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash';
 import merge from 'lodash/merge';
 import { rgba } from 'polished';
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, memo, useMemo, useState } from 'react';
 import styled, { createGlobalStyle, css } from 'styled-components';
 import ReqoreLayoutWrapper from '../components/Layout';
 import { IReqoreNotificationsPosition } from '../components/Notifications';
@@ -54,9 +54,6 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 const StyledPortal = styled.div`
-  z-index: 9999;
-  position: relative;
-
   * {
     box-sizing: border-box;
   }
@@ -66,20 +63,25 @@ const StyledPortal = styled.div`
   `}
 `;
 
-const ReqorePortal = forwardRef<HTMLDivElement, object>((_props, ref) => {
-  return (
-    <ReqoreThemeProvider>
-      <StyledPortal id='reqore-portal' ref={ref} />
-    </ReqoreThemeProvider>
-  );
-});
+const ReqorePortal = memo(
+  forwardRef<HTMLDivElement, object>((_props, ref) => {
+    return (
+      <ReqoreThemeProvider>
+        <StyledPortal id='reqore-portal' ref={ref} />
+      </ReqoreThemeProvider>
+    );
+  })
+);
 
-const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, options }) => {
+const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = memo(({ children, theme, options }) => {
   const [modalPortal, setModalPortal] = useState<any>(false);
 
-  const _theme: Partial<IReqoreTheme> = cloneDeep(theme || {});
-  const _defaultTheme: IReqoreTheme = cloneDeep(DEFAULT_THEME);
-  const rebuiltTheme: IReqoreTheme = buildTheme(merge(_defaultTheme, _theme));
+  const _theme: Partial<IReqoreTheme> = useMemo(() => cloneDeep(theme || {}), [theme]);
+  const _defaultTheme: IReqoreTheme = useMemo(() => cloneDeep(DEFAULT_THEME), [DEFAULT_THEME]);
+  const rebuiltTheme: IReqoreTheme = useMemo(
+    () => buildTheme(merge(_defaultTheme, _theme)),
+    [_defaultTheme, _theme]
+  );
 
   return (
     <>
@@ -94,6 +96,6 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
       </ThemeContext.Provider>
     </>
   );
-};
+});
 
 export default ReqoreUIProvider;

package/src/stories/Button/Button.stories.tsx

@@ -139,6 +139,8 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
+          leftIconProps={{ rotation: 180 }}
+          rightIconProps={{ rotation: 270 }}
           description='This is a very interesting description for a button, I like it very much'
           iconColor='#38fdb2'
         >

package/src/stories/Icon/Icon.stories.tsx

@@ -63,6 +63,13 @@ export const Basic: Story = {
             effect={{ opacity: 0.5 }}
             margin='both'
           />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#8d2a5c'
+            rotation={90}
+            margin='both'
+          />
         </ReqorePanel>
         <br />
         <ReqorePanel label='Image' flat minimal>
@@ -119,6 +126,12 @@ export const Basic: Story = {
             effect={{ saturate: 150 }}
             margin='both'
           />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            rotation={180}
+            margin='both'
+          />
         </ReqorePanel>
         <br />
         <ReqorePanel label='Margined' flat minimal>

package/src/stories/Modal/Manager.stories.tsx

@@ -117,7 +117,19 @@ export const FromCustomElement: Story = {
         <ReqoreBackdrop />
         <div
           className='custom-modal reqore-modal'
-          style={{ position: 'fixed', left: '50%', top: '50%' }}
+          style={{
+            position: 'fixed',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 500,
+            height: 300,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '1px solid red',
+            zIndex: 10000,
+          }}
         >
           This is a custom modal
         </div>