@qoretechnologies/reqore 0.25.3 → 0.25.5

package/dist/hooks/usePopover.js

@@ -1,4 +1,26 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -20,7 +42,7 @@ var endEvents = {
     focus: null
 };
 var usePopover = function (_a) {
-    var targetElement = _a.targetElement, content = _a.content, _b = _a.handler, handler = _b === void 0 ? 'hover' : _b, placement = _a.placement, _c = _a.show, show = _c === void 0 ? true : _c, noArrow = _a.noArrow, useTargetWidth = _a.useTargetWidth, _d = _a.closeOnOutsideClick, closeOnOutsideClick = _d === void 0 ? true : _d, _e = _a.openOnMount, openOnMount = _e === void 0 ? false : _e, delay = _a.delay;
+    var targetElement = _a.targetElement, content = _a.content, _b = _a.handler, handler = _b === void 0 ? 'hover' : _b, placement = _a.placement, _c = _a.show, show = _c === void 0 ? true : _c, noArrow = _a.noArrow, useTargetWidth = _a.useTargetWidth, _d = _a.closeOnOutsideClick, closeOnOutsideClick = _d === void 0 ? true : _d, _e = _a.openOnMount, openOnMount = _e === void 0 ? false : _e, delay = _a.delay, rest = __rest(_a, ["targetElement", "content", "handler", "placement", "show", "noArrow", "useTargetWidth", "closeOnOutsideClick", "openOnMount", "delay"]);
     var _f = (0, react_1.useContext)(PopoverContext_1["default"]), addPopover = _f.addPopover, removePopover = _f.removePopover, updatePopover = _f.updatePopover, popovers = _f.popovers;
     var current = (0, react_1.useRef)(shortid_1["default"].generate()).current;
     var timeout = (0, react_1.useRef)(0).current;
@@ -29,24 +51,25 @@ var usePopover = function (_a) {
     var currentPopover = (0, react_1.useMemo)(function () { return popovers === null || popovers === void 0 ? void 0 : popovers.find(function (p) { return p.id === current; }); }, [popovers, current]);
     var _addPopover = function () {
         if (currentPopover) {
-            _removePopover === null || _removePopover === void 0 ? void 0 : _removePopover();
+            if (handler !== 'hoverStay') {
+                _removePopover === null || _removePopover === void 0 ? void 0 : _removePopover();
+            }
         }
         else if (show) {
             timeout = setTimeout(function () {
-                addPopover === null || addPopover === void 0 ? void 0 : addPopover({
-                    id: current,
-                    content: content,
-                    targetElement: targetElement,
-                    placement: placement,
-                    noArrow: noArrow,
-                    useTargetWidth: useTargetWidth,
-                    closeOnOutsideClick: closeOnOutsideClick,
-                    closeOnAnyClick: handler === 'hover' || handler === 'hoverStay'
-                });
+                addPopover === null || addPopover === void 0 ? void 0 : addPopover(__assign({ id: current, content: content, targetElement: targetElement, placement: placement, noArrow: noArrow, useTargetWidth: useTargetWidth, closeOnOutsideClick: closeOnOutsideClick, closeOnAnyClick: handler === 'hover' || handler === 'hoverStay' }, rest));
+                if ((rest === null || rest === void 0 ? void 0 : rest.blur) > 0) {
+                    targetElement.style.position = 'relative';
+                    targetElement.style.zIndex = '999999';
+                }
             }, delay || 0);
         }
     };
     var _removePopover = function () {
+        if ((rest === null || rest === void 0 ? void 0 : rest.blur) > 0) {
+            targetElement.style.position = 'initial';
+            targetElement.style.zIndex = 'initial';
+        }
         cancelTimeout();
         removePopover === null || removePopover === void 0 ? void 0 : removePopover(current);
     };
@@ -56,16 +79,7 @@ var usePopover = function (_a) {
     };
     (0, react_use_1.useUpdateEffect)(function () {
         if (content && show) {
-            updatePopover === null || updatePopover === void 0 ? void 0 : updatePopover(current, {
-                id: current,
-                content: content,
-                targetElement: targetElement,
-                placement: placement,
-                noArrow: noArrow,
-                useTargetWidth: useTargetWidth,
-                closeOnOutsideClick: closeOnOutsideClick,
-                closeOnAnyClick: handler === 'hover' || handler === 'hoverStay'
-            });
+            updatePopover === null || updatePopover === void 0 ? void 0 : updatePopover(current, __assign({ id: current, content: content, targetElement: targetElement, placement: placement, noArrow: noArrow, useTargetWidth: useTargetWidth, closeOnOutsideClick: closeOnOutsideClick, closeOnAnyClick: handler === 'hover' || handler === 'hoverStay' }, rest));
         }
     }, [content === null || content === void 0 ? void 0 : content.toString()]);
     (0, react_1.useEffect)(function () {
@@ -97,7 +111,6 @@ var usePopover = function (_a) {
         };
     }, [targetElement === null || targetElement === void 0 ? void 0 : targetElement.toString(), content === null || content === void 0 ? void 0 : content.toString(), current, currentPopover]);
     (0, react_use_1.useUnmount)(function () {
-        console.log('UNMOUNTING POPOVER', content);
         cancelTimeout();
     });
     return current;

package/dist/hooks/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../src/hooks/usePopover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../src/hooks/usePopover.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/useTooltip.js

@@ -25,7 +25,7 @@ var useTooltip = function (targetElement, tooltip) {
             setElement(targetElement);
             setData(tooltip);
         }
-    }, [targetElement === null || targetElement === void 0 ? void 0 : targetElement.toString(), JSON.stringify(tooltip)]);
+    }, [targetElement === null || targetElement === void 0 ? void 0 : targetElement.toString(), tooltip === null || tooltip === void 0 ? void 0 : tooltip.toString()]);
     var popoverData = typeof data === 'string' ? { content: data } : data;
     (0, usePopover_1["default"])(__assign(__assign({}, popoverData), { targetElement: element, show: !!(popoverData === null || popoverData === void 0 ? void 0 : popoverData.content) }));
 };

package/dist/hooks/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sourceRoot":"","sources":["../../src/hooks/useTooltip.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAA4C;AAE5C,4DAAsC;AAE/B,IAAM,UAAU,GAAG,UACxB,aAAsC,EACtC,OAA4B;IAEtB,IAAA,KAAwB,IAAA,gBAAQ,EAA0B,SAAS,CAAC,EAAnE,OAAO,QAAA,EAAE,UAAU,QAAgD,CAAC;IACrE,IAAA,KAAkB,IAAA,gBAAQ,EAAsC,SAAS,CAAC,EAAzE,IAAI,QAAA,EAAE,OAAO,QAA4D,CAAC;IAEjF,IAAA,iBAAS,EAAC;QACR,IAAI,aAAa,IAAI,OAAO,EAAE;YAC5B,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAEzD,IAAM,WAAW,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAExE,IAAA,uBAAU,wBACL,WAAW,KACd,aAAa,EAAE,OAAO,EACtB,IAAI,EAAE,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,IAC5B,CAAC;AACL,CAAC,CAAC;AArBW,QAAA,UAAU,cAqBrB"}
+{"version":3,"file":"useTooltip.js","sourceRoot":"","sources":["../../src/hooks/useTooltip.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAA4C;AAE5C,4DAAsC;AAE/B,IAAM,UAAU,GAAG,UACxB,aAAsC,EACtC,OAA4B;IAEtB,IAAA,KAAwB,IAAA,gBAAQ,EAA0B,SAAS,CAAC,EAAnE,OAAO,QAAA,EAAE,UAAU,QAAgD,CAAC;IACrE,IAAA,KAAkB,IAAA,gBAAQ,EAAsC,SAAS,CAAC,EAAzE,IAAI,QAAA,EAAE,OAAO,QAA4D,CAAC;IAEjF,IAAA,iBAAS,EAAC;QACR,IAAI,aAAa,IAAI,OAAO,EAAE;YAC5B,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAErD,IAAM,WAAW,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAExE,IAAA,uBAAU,wBACL,WAAW,KACd,aAAa,EAAE,OAAO,EACtB,IAAI,EAAE,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,IAC5B,CAAC;AACL,CAAC,CAAC;AArBW,QAAA,UAAU,cAqBrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.25.3",
+  "version": "0.25.5",
   "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/Collection/item.tsx

@@ -69,6 +69,7 @@ export const StyledCollectionItemContent = styled.div`
 export const ReqoreCollectionItem = ({
   flat = true,
   minimal = true,
+  headerSize = 3,
   style,
   content,
   actions,
@@ -195,11 +196,11 @@ export const ReqoreCollectionItem = ({
           </>
         )}
         <ReqorePanel
-          {...rest}
           flat={flat}
-          headerSize={3}
+          headerSize={headerSize}
           ref={ref}
           minimal={minimal}
+          {...rest}
           bottomActions={isSelected ? expandedActions : undefined}
           style={{
             ...style,

package/src/components/InternalPopover/index.tsx

@@ -8,6 +8,7 @@ import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import PopoverContext from '../../context/PopoverContext';
 import { fadeIn } from '../../helpers/animations';
 import { getReadableColor } from '../../helpers/colors';
+import { StyledBackdrop } from '../Drawer';
 
 const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
   width: 10px;
@@ -23,19 +24,28 @@ const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
     position: absolute;
     z-index: -1;
     transform: rotate(45deg);
-    ${({ theme }) => css`
+    ${({ theme, opaque }) => css`
       background-color: ${theme.popover?.main || theme.main};
-      box-shadow: rgba(31, 26, 34, 0.6) 0px 0px 4px;
+      box-shadow: ${opaque ? undefined : 'rgba(31, 26, 34, 0.6) 0px 0px 4px'};
     `}
   }
 `;
 
 const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   animation: 0.2s ${fadeIn} ease-out;
+  max-width: ${({ maxWidth = '80vw' }) => maxWidth};
+  max-height: ${({ maxHeight = '80vh' }) => maxHeight};
 
-  ${({ theme }) => {
+  ${({ theme, opaque }) => {
     const defaultColor: string = theme.popover?.main || theme.main;
 
+    if (opaque) {
+      return css`
+        z-index: 999999;
+        background-color: transparent;
+      `;
+    }
+
     return css`
       z-index: 999999;
       background-color: ${defaultColor};
@@ -74,8 +84,9 @@ const StyledPopoverContent = styled.div<{ isString?: boolean }>`
   z-index: 20;
   position: relative;
   overflow: hidden;
-  background-color: ${({ theme }) => theme.popover?.main || theme.main};
-  border-radius: 3.5px;
+  background-color: ${({ theme, opaque }) =>
+    opaque ? 'transparent' : theme.popover?.main || theme.main};
+  border-radius: ${({ opaque }) => (opaque ? undefined : '3.5px')};
 
   .reqore-popover-text {
     font-size: 14px;
@@ -91,6 +102,10 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
   placement,
   noArrow,
   useTargetWidth,
+  opaque,
+  maxWidth,
+  maxHeight,
+  blur,
 }) => {
   const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
   const [popperElement, setPopperElement] = useState(null);
@@ -118,6 +133,8 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
     ],
   });
 
+  console.log(opaque);
+
   useEffect(() => {
     if (popperRef.current) {
       updatePopover?.(id, { popperRef });
@@ -145,7 +162,11 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
 
   return (
     <ReqoreThemeProvider>
+      {blur > 0 ? <StyledBackdrop zIndex={999998} blur={blur} closable /> : null}
       <StyledPopoverWrapper
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+        opaque={opaque}
         className='reqore-popover-content'
         ref={(el) => {
           setPopperElement(el);
@@ -159,9 +180,14 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         {...attributes.popper}
       >
         {!noArrow && (
-          <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
+          <StyledPopoverArrow
+            opaque={opaque}
+            ref={setArrowElement}
+            style={styles.arrow}
+            data-popper-arrow
+          />
         )}
-        <StyledPopoverContent isString={isString(content)}>
+        <StyledPopoverContent isString={isString(content)} opaque={opaque}>
           {isString(content) ? (
             <span className='reqore-popover-text'>{content}</span>
           ) : (

package/src/components/Message/index.tsx

@@ -1,8 +1,10 @@
-import { forwardRef, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IWithReqoreCustomTheme } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 import {
@@ -14,7 +16,9 @@ import {
   typeToIcon,
 } from '../Notifications/notification';
 
-export interface IReqoreMessageProps {
+export interface IReqoreMessageProps
+  extends IWithReqoreCustomTheme,
+    React.HTMLAttributes<HTMLDivElement> {
   intent?: TReqoreIntent;
   title?: string;
   children: any;
@@ -48,10 +52,13 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
       flat,
       inverted,
       size = 'normal',
+      customTheme,
+      ...rest
     },
     ref: any
   ) => {
     const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
+    const theme = useReqoreTheme('main', customTheme, intent);
 
     useMount(() => {
       if (duration) {
@@ -88,6 +95,7 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
     return (
       <ReqoreThemeProvider>
         <StyledReqoreNotification
+          {...rest}
           key={`${duration}${intent}${title}${children}`}
           intent={intent}
           timeout={duration}
@@ -95,13 +103,15 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
           onClick={onClick}
           flat={flat}
           inverted={inverted}
+          asMessage
           fluid
-          className='reqore-message'
+          className={`${rest?.className || ''} reqore-message`}
           ref={ref}
           size={size}
+          theme={theme}
         >
           {leftIcon ? (
-            <StyledIconWrapper intent={intent} size={size}>
+            <StyledIconWrapper intent={intent} size={size} theme={theme}>
               <ReqoreIcon
                 icon={leftIcon}
                 margin={flat && inverted ? undefined : 'left'}
@@ -109,12 +119,13 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
               />
             </StyledIconWrapper>
           ) : null}
-          <StyledNotificationContentWrapper size={size}>
-            {title && <StyledNotificationTitle>{title}</StyledNotificationTitle>}
-            <StyledNotificationContent>{children}</StyledNotificationContent>
+          <StyledNotificationContentWrapper size={size} theme={theme}>
+            {title && <StyledNotificationTitle theme={theme}>{title}</StyledNotificationTitle>}
+            <StyledNotificationContent theme={theme}>{children}</StyledNotificationContent>
           </StyledNotificationContentWrapper>
           {onClose && (
             <StyledIconWrapper
+              theme={theme}
               size={size}
               intent={intent}
               clickable

package/src/components/Notifications/notification.tsx

@@ -46,6 +46,7 @@ export interface IReqoreNotificationStyle {
   flat?: boolean;
   inverted?: boolean;
   size?: TSizes;
+  asMessage?: boolean;
 }
 
 const timeoutAnimation = keyframes`
@@ -67,11 +68,19 @@ export const StyledReqoreNotification = styled(animated.div)<IReqoreNotification
   overflow: auto;
   position: relative;
   transition: all 0.2s ease-out;
-  animation: 0.2s ${fadeIn} ease-in;
+
+  // Do not fade in the component if it's a message
+  ${({ asMessage }) =>
+    asMessage
+      ? undefined
+      : css`
+          animation: 0.2s ${fadeIn} ease-in;
+        `};
+
   font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
 
   &:not(:first-child) {
-    margin-top: 10px;
+    margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
   }
 
   ${({

package/src/components/Panel/index.tsx

@@ -3,7 +3,12 @@ import { rgba } from 'polished';
 import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { RADIUS_FROM_SIZE } from '../../constants/sizes';
+import {
+  ICON_FROM_HEADER_SIZE,
+  RADIUS_FROM_SIZE,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import {
   changeDarkness,
@@ -68,6 +73,7 @@ export interface IReqorePanelProps
   blur?: number;
   minimal?: boolean;
   headerSize?: 1 | 2 | 3 | 4 | 5 | 6;
+  contentSize?: TSizes;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -96,7 +102,10 @@ export const StyledPanel = styled.div<IStyledPanel>`
           cursor: pointer;
 
           &:hover {
-            background-color: ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.06), opacity)};
+            background-color: ${rgba(
+              changeDarkness(getMainBackgroundColor(theme), 0.06),
+              opacity === 0 ? 0.2 : opacity
+            )};
 
             ${StyledCollectionItemContent}:after {
               background: linear-gradient(
@@ -157,12 +166,13 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 export const StyledPanelContent = styled.div<IStyledPanel>`
   display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
   min-height: ${({ isCollapsed }) => (isCollapsed ? undefined : '40px')};
-  padding: ${({ padded }) => (!padded ? undefined : '15px')};
+  padding: ${({ padded, contentSize }) => (!padded ? undefined : TEXT_FROM_SIZE[contentSize])}px;
   // The padding is not needed when the panel is minimal and has title, since
   // the title already has padding and is transparent
   padding-top: ${({ minimal, hasLabel }) => (minimal && hasLabel ? '0px' : undefined)};
   flex: 1;
   overflow: auto;
+  font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
 `;
 
 export const StyledPanelTitleLabel = styled.span`
@@ -205,6 +215,7 @@ export const ReqorePanel = forwardRef(
       padded = true,
       contentStyle,
       headerSize = 4,
+      contentSize = 'normal',
       minimal,
       tooltip,
       ...rest
@@ -344,7 +355,13 @@ export const ReqorePanel = forwardRef(
             opacity={rest.opacity ?? (minimal ? 0 : 1)}
           >
             <StyledPanelTitleHeader>
-              {icon && <ReqoreIcon icon={icon} margin='right' />}
+              {icon && (
+                <ReqoreIcon
+                  size={`${ICON_FROM_HEADER_SIZE[headerSize]}px`}
+                  icon={icon}
+                  margin='right'
+                />
+              )}
               {typeof label === 'string' ? (
                 <StyledPanelTitleLabel as={HTMLheaderElement}>{label}</StyledPanelTitleLabel>
               ) : (
@@ -382,6 +399,7 @@ export const ReqorePanel = forwardRef(
             style={contentStyle}
             padded={padded}
             minimal={minimal}
+            contentSize={contentSize}
           >
             {children}
           </StyledPanelContent>

package/src/components/Tag/index.tsx

@@ -67,15 +67,7 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
       background-color: ${color || changeLightness(theme.main, 0.1)};
       color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
 
-      ${StyledTagContentWrapper} {
-        background-color: ${labelKey ? changeLightness(color || theme.main, 0.05) : undefined};
-      }
-
-      ${StyledTagContent} {
-        background-color: ${labelKey ? changeLightness(color || theme.main, 0.1) : undefined};
-      }
-
-      ${StyledTagContentKey} {
+      ${StyledTagContentKey}, ${StyledTagContentWrapper} {
         background-color: ${labelKey ? changeLightness(color || theme.main, 0.05) : undefined};
       }
     `}
@@ -102,6 +94,8 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
     `}
 `;
 
+const StyledTagRightIcon = styled(ReqoreIcon)``;
+
 const StyledTagContentWrapper = styled.div<{ size: TSizes }>`
   display: flex;
   align-items: center;
@@ -192,24 +186,26 @@ const ReqoreTag = forwardRef(
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
       >
-        <StyledTagContentWrapper size={size} className='reqore-tag-content' onClick={onClick}>
-          {icon && (
-            <ReqoreIcon
-              icon={icon}
-              size={`${TEXT_FROM_SIZE[size]}px`}
-              margin={label || rightIcon ? 'left' : 'both'}
-            />
-          )}
-          {labelKey && <StyledTagContentKey size={size}>{labelKey}</StyledTagContentKey>}
-          {label && <StyledTagContent size={size}>{label}</StyledTagContent>}
-          {rightIcon && (
-            <ReqoreIcon
-              icon={rightIcon}
-              size={`${TEXT_FROM_SIZE[size]}px`}
-              margin={label ? 'left' : undefined}
-            />
-          )}
-        </StyledTagContentWrapper>
+        {icon || labelKey ? (
+          <StyledTagContentWrapper size={size} className='reqore-tag-content' onClick={onClick}>
+            {icon && (
+              <ReqoreIcon
+                icon={icon}
+                size={`${TEXT_FROM_SIZE[size]}px`}
+                margin={label ? 'left' : 'both'}
+              />
+            )}
+            {labelKey && <StyledTagContentKey size={size}>{labelKey}</StyledTagContentKey>}
+          </StyledTagContentWrapper>
+        ) : null}
+        {label && <StyledTagContent size={size}>{label}</StyledTagContent>}
+        {rightIcon && (
+          <StyledTagRightIcon
+            icon={rightIcon}
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            margin={label || icon ? 'right' : 'both'}
+          />
+        )}
         {_size(actions)
           ? actions.map((action) => (
               <>