@qoretechnologies/reqore 0.27.6 → 0.28.1

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAwC;AACxC,8CAAiF;AACjF,0CAAsD;AAEzC,QAAA,mBAAmB,OAAG,uBAAG,4PAAA,MAClC,EAAmB,uFAMnB,EAAqB,uFAKxB,KAXG,4BAAmB,EAMnB,8BAAqB,EAKvB;AAEW,QAAA,iBAAiB,OAAG,uBAAG,oHAAA,MAChC,EAAiB,wCAGpB,KAHG,wBAAiB,EAGnB;AAEW,QAAA,eAAe,OAAG,uBAAG,iHAAA,MAC9B,EAAiB,qCAGpB,KAHG,wBAAiB,EAGnB;AAEW,QAAA,gBAAgB,OAAG,uBAAG,gHAAA,iCAG7B,EAAe,SAEpB,KAFK,uBAAe,EAEnB;AAEW,QAAA,eAAe,OAAG,uBAAG,0IAAA,sEAIjC,KAAC;AAEW,QAAA,eAAe,OAAG,uBAAG,yHAAA,qDAGjC,KAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,uDAAwC;AACxC,8CAAiF;AACjF,0CAAsD;AAEzC,QAAA,mBAAmB,GAAG,IAAI,CAAC;AAC3B,QAAA,iBAAiB,GAAG,CAAC,CAAC;AAEtB,QAAA,mBAAmB,OAAG,uBAAG,4PAAA,MAClC,EAAmB,uFAMnB,EAAqB,uFAKxB,KAXG,4BAAmB,EAMnB,8BAAqB,EAKvB;AAEW,QAAA,iBAAiB,OAAG,uBAAG,oHAAA,MAChC,EAAiB,2BACE,EAAmB,WAEzC,KAHG,wBAAiB,EACE,2BAAmB,EAExC;AAEW,QAAA,eAAe,OAAG,uBAAG,oHAAA,MAC9B,EAAiB,2BACE,EAAiB,WAEvC,KAHG,wBAAiB,EACE,yBAAiB,EAEtC;AAEW,QAAA,gBAAgB,OAAG,uBAAG,gHAAA,iCAG7B,EAAe,SAEpB,KAFK,uBAAe,EAEnB;AAEW,QAAA,eAAe,OAAG,uBAAG,0IAAA,sEAIjC,KAAC;AAEW,QAAA,eAAe,OAAG,uBAAG,yHAAA,qDAGjC,KAAC"}

package/dist/types/global.d.ts

@@ -116,6 +116,19 @@ export interface IWithReqoreFlat {
      */
     flat?: boolean;
 }
+export interface IWithReqoreMinimal {
+    /**
+     * If true, the component will be minimal
+     * @default false
+     * @type boolean
+     * @example
+     * <ReqoreButton minimal />
+     * <ReqoreButton minimal={true} />
+     * <ReqoreButton minimal={false} />
+     *
+     */
+    minimal?: boolean;
+}
 export interface IWithReqoreEffect {
     /**
      * If true, the component will have an effect

package/dist/types/global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.27.6",
+  "version": "0.28.1",
   "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

@@ -4,6 +4,7 @@ import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
 import {
+  ICON_FROM_SIZE,
   MARGIN_FROM_SIZE,
   PADDING_FROM_SIZE,
   TABS_SIZE_TO_PX,
@@ -21,7 +22,7 @@ import ReqoreMenu from '../Menu';
 import ReqoreMenuItem from '../Menu/item';
 import { IReqoreTabsListItem } from '../Tabs';
 import { StyledTabListItem } from '../Tabs/item';
-import ReqoreTabsList, { getTabsLength, StyledReqoreTabsList } from '../Tabs/list';
+import ReqoreTabsList, { StyledReqoreTabsList, getTabsLength } from '../Tabs/list';
 import ReqoreBreadcrumbsItem, { IReqoreBreadcrumbItemProps } from './item';
 
 export interface IReqoreBreadcrumbItemTabs {
@@ -104,7 +105,6 @@ const StyledBreadcrumbsTabsWrapper = styled.div`
 `;
 
 const itemPadding = 27;
-const iconSize = 11;
 const arrowSize = 50;
 
 const getBreadcrumbsLength = (
@@ -128,7 +128,7 @@ const getBreadcrumbsLength = (
     return (
       len +
       itemPadding +
-      iconSize +
+      ICON_FROM_SIZE[size] +
       arrowSize +
       calculateStringSizeInPixels(item.label || '', TEXT_FROM_SIZE[size])
     );
@@ -185,12 +185,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
     if (isArray(item)) {
       return (
         <React.Fragment key={index}>
-          <ReqoreIcon
-            icon='ArrowRightSLine'
-            size={`${TEXT_FROM_SIZE[size]}px`}
-            key={'icon' + index}
-            margin='both'
-          />
+          <ReqoreIcon icon='ArrowRightSLine' size={size} key={'icon' + index} margin='both' />
           <ReqorePopover
             key={index}
             component={ReqoreBreadcrumbsItem}
@@ -229,12 +224,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
     if (item.withTabs) {
       return (
         <StyledBreadcrumbsTabsWrapper key={index}>
-          <ReqoreIcon
-            icon='ArrowRightSLine'
-            size={`${TEXT_FROM_SIZE[size]}px`}
-            key={'icon' + index}
-            margin='both'
-          />
+          <ReqoreIcon icon='ArrowRightSLine' size={size} key={'icon' + index} margin='both' />
           <ReqoreTabsList
             tabs={item.withTabs.tabs}
             onTabChange={item.withTabs.onTabChange}
@@ -251,12 +241,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
     return (
       <React.Fragment key={index}>
         {index !== 0 && (
-          <ReqoreIcon
-            icon='ArrowRightSLine'
-            size={`${TEXT_FROM_SIZE[size]}px`}
-            key={'icon' + index}
-            margin='both'
-          />
+          <ReqoreIcon icon='ArrowRightSLine' size={size} key={'icon' + index} margin='both' />
         )}
         <ReqoreBreadcrumbsItem {...item} key={index} customTheme={customTheme} size={size} />
       </React.Fragment>

package/src/components/Breadcrumbs/item.tsx

@@ -137,13 +137,7 @@ const ReqoreBreadcrumbsItem = forwardRef<HTMLDivElement, IReqoreBreadcrumbItemPr
         theme={theme}
         size={size}
       >
-        {icon && (
-          <ReqoreIcon
-            icon={icon}
-            size={`${TEXT_FROM_SIZE[size]}px`}
-            margin={label ? 'right' : undefined}
-          />
-        )}
+        {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'right' : undefined} />}
         {label && (
           <StyledAnimatedTextWrapper as={as || 'span'} {...props}>
             <StyledActiveContent>{label}</StyledActiveContent>

package/src/components/Button/index.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef, memo, useContext } from 'react';
+import React, { forwardRef, memo, useCallback, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import {
+  ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
@@ -26,6 +27,7 @@ import {
   IReqoreIntent,
   IReqoreReadOnly,
   IWithReqoreEffect,
+  IWithReqoreSize,
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
@@ -33,6 +35,9 @@ import { ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 import { ReqoreSpacer } from '../Spacer';
 import ReqoreTag, { IReqoreTagProps } from '../Tag';
+import ReqoreTagGroup from '../Tag/group';
+
+export type TReqoreBadge = string | number | IReqoreTagProps;
 
 export interface IReqoreButtonProps
   extends React.HTMLAttributes<HTMLButtonElement>,
@@ -51,7 +56,7 @@ export interface IReqoreButtonProps
   rightIcon?: IReqoreIconName;
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
-  badge?: string | number | IReqoreTagProps;
+  badge?: TReqoreBadge | TReqoreBadge[];
   description?: string | number;
   maxWidth?: string;
   textAlign?: 'left' | 'center' | 'right';
@@ -73,7 +78,6 @@ const getButtonMainColor = (theme: IReqoreTheme, color?: string) => {
 export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
-  padding: 4px 0;
   text-align: left;
 `;
 
@@ -85,13 +89,16 @@ export const StyledActiveContent = styled.span`
   filter: blur(10px);
 
   ${({ wrap }) =>
-    !wrap &&
-    css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-    `}
+    !wrap
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 export const StyledInActiveContent = styled.span`
@@ -100,13 +107,16 @@ export const StyledInActiveContent = styled.span`
   transition: all 0.2s ease-out;
 
   ${({ wrap }) =>
-    !wrap &&
-    css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
-    `}
+    !wrap
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 export const StyledInvisibleContent = styled.span`
@@ -115,10 +125,13 @@ export const StyledInvisibleContent = styled.span`
   overflow: hidden;
 
   ${({ wrap }) =>
-    !wrap &&
-    css`
-      white-space: nowrap;
-    `}
+    !wrap
+      ? css`
+          white-space: nowrap;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
@@ -139,7 +152,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   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')};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
 
   border-radius: ${({ size }) => RADIUS_FROM_SIZE[size]}px;
 
@@ -160,8 +173,8 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   ${InactiveIconScale}
 
-  ${({ readOnly, animate }) =>
-    !readOnly
+  ${({ readOnly, animate, active }) =>
+    !readOnly && !active
       ? css`
           &:not(:disabled) {
             ${ScaleIconOnHover}
@@ -174,13 +187,18 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             }
 
             &:hover,
+            &:active,
             &:focus {
-              background-color: ${({ theme, color }: IReqoreButtonStyle) =>
-                changeLightness(getButtonMainColor(theme, color), 0.05)};
-              color: ${({ theme, color }) =>
-                getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
-              border-color: ${({ minimal, theme, color }) =>
-                minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
+              background-color: ${({ theme, color, minimal }: IReqoreButtonStyle) =>
+                minimal ? `#00000030` : changeLightness(getButtonMainColor(theme, color), 0.05)};
+              color: ${({ theme, color, minimal }) =>
+                getReadableColor(
+                  { main: minimal ? '#00000030' : getButtonMainColor(theme, color) },
+                  undefined,
+                  undefined
+                )};
+              border-color: ${({ flat, theme, color }) =>
+                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
 
               ${animate &&
               css`
@@ -199,18 +217,27 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
             }
           }
         `
-      : css`
+      : readOnly
+      ? css`
           ${ReadOnlyElement};
-        `}
+        `
+      : undefined}
 
-  ${({ active, minimal, theme, color }: IReqoreButtonStyle) =>
+  ${({ active, flat, theme, color }: IReqoreButtonStyle) =>
     active &&
     css`
-      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.16)};
+      cursor: pointer;
+      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
       color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
-      border-color: ${minimal
-        ? undefined
-        : changeLightness(getButtonMainColor(theme, color), 0.075)};
+      border-color: ${flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.175)};
+
+      &:hover,
+      &:active,
+      &:focus {
+        border-color: ${flat
+          ? undefined
+          : changeLightness(getButtonMainColor(theme, color), 0.275)};
+      }
 
       ${ActiveIconScale}
     `}
@@ -239,8 +266,10 @@ export const StyledButtonContent = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
+  min-width: ${({ size }) => ICON_FROM_SIZE[size]}px;
   flex: 1;
   flex-shrink: 0;
+  padding: 4px 0;
   min-height: ${({ size, flat }) => (flat ? SIZE_TO_PX[size] : SIZE_TO_PX[size] - 2)}px;
   ${({ wrap, description }) =>
     !wrap && !description
@@ -250,6 +279,47 @@ export const StyledButtonContent = styled.div`
       : null}
 `;
 
+export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
+  color?: string;
+  content?: TReqoreBadge | TReqoreBadge[];
+}
+
+export const ButtonBadge = memo((props: IReqoreButtonBadgeProps) => {
+  const renderTag = useCallback(
+    ({ size, color, content, key }: IReqoreButtonBadgeProps & { key: number }) => (
+      <ReqoreTag
+        key={key}
+        size={getOneLessSize(size)}
+        badge
+        color={color ? `${color}70` : undefined}
+        {...(typeof content === 'string' || typeof content === 'number'
+          ? { label: content }
+          : content)}
+      />
+    ),
+    [props]
+  );
+
+  // If the content is a list
+  if (Array.isArray(props.content)) {
+    return (
+      <>
+        <ReqoreSpacer width={PADDING_FROM_SIZE[props.size]} />
+        <ReqoreTagGroup hasBottomMargin={false}>
+          {props.content.map((badge, index) => renderTag({ ...props, content: badge, key: index }))}
+        </ReqoreTagGroup>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ReqoreSpacer width={PADDING_FROM_SIZE[props.size]} />
+      {renderTag({ ...props, key: 0 })}
+    </>
+  );
+});
+
 const ReqoreButton = memo(
   forwardRef<HTMLButtonElement, IReqoreButtonProps>(
     (
@@ -286,7 +356,7 @@ const ReqoreButton = memo(
       useTooltip(targetRef.current, tooltip);
 
       // If color or intent was specified, set the color
-      const customColor = theme.main;
+      const customColor = intent ? theme.main : changeLightness(theme.main, 0.07);
       const _flat = minimal ? flat : flat !== false;
       const color = customColor
         ? minimal
@@ -294,18 +364,6 @@ const ReqoreButton = memo(
           : 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)}
-          />
-        </>
-      );
-
       return (
         <StyledButton
           {...rest}
@@ -333,7 +391,7 @@ const ReqoreButton = memo(
           <StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
             {icon && (
               <>
-                <ReqoreIcon icon={icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                <ReqoreIcon icon={icon} size={size} />
                 {children || badge || rightIcon ? (
                   <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
                 ) : null}
@@ -344,18 +402,14 @@ const ReqoreButton = memo(
                 <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
                 <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
                 <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
-                {badge && wrap ? renderBadge() : null}
+                {badge && wrap ? <ButtonBadge content={badge} size={size} color={color} /> : null}
               </StyledAnimatedTextWrapper>
             )}
-            {badge && !wrap ? renderBadge() : null}
+            {badge && !wrap ? <ButtonBadge content={badge} size={size} color={color} /> : null}
             {rightIcon && (
               <>
                 {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
-                <ReqoreIcon
-                  icon={rightIcon}
-                  size={`${TEXT_FROM_SIZE[size]}px`}
-                  style={{ marginLeft: 'auto' }}
-                />
+                <ReqoreIcon icon={rightIcon} size={size} style={{ marginLeft: 'auto' }} />
               </>
             )}
           </StyledButtonContent>

package/src/components/Checkbox/index.tsx

@@ -151,7 +151,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
           <StyledSwitch size={size} labelPosition={labelPosition} checked={checked} />
         ) : (
           <ReqoreIcon
-            size={`${TEXT_FROM_SIZE[size]}px`}
+            size={size}
             icon={checked ? checkedIcon : uncheckedIcon}
             margin={labelPosition}
           />

package/src/components/Collection/item.tsx

@@ -182,7 +182,7 @@ export const ReqoreCollectionItem = ({
           { icon: 'CloseLine', onClick: handleItemClick },
         ] as IReqorePanelAction[])
       : size(actions)
-      ? [{ icon: 'More2Fill', actions }]
+      ? [{ icon: 'More2Fill', actions, minimal: true, flat: true }]
       : undefined;
 
     return (

package/src/components/Effect/index.tsx

@@ -72,6 +72,8 @@ export const StyledEffect = styled.span`
     const gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors})`;
     const gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive})`;
 
+    console.log(effect);
+
     return css`
       background-image: ${gradient};
       // Get the first color from the colors object
@@ -86,6 +88,8 @@ export const StyledEffect = styled.span`
 
       ${effect.interactive &&
       css`
+        cursor: pointer;
+
         &:hover,
         &:focus,
         &:active {

package/src/components/Header/index.tsx

@@ -1,7 +1,9 @@
 import { memo, useMemo } from 'react';
 import styled from 'styled-components';
+import { HEADER_SIZE_TO_NUMBER, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
+import { isStringSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IWithReqoreEffect } from '../../types/global';
 import { StyledTextEffect } from '../Effect';
@@ -10,7 +12,7 @@ export interface IReqoreHeadingProps
   extends IWithReqoreEffect,
     React.HTMLAttributes<HTMLHeadingElement> {
   intent?: TReqoreIntent;
-  size?: 1 | 2 | 3 | 4 | 5 | 6;
+  size?: 1 | 2 | 3 | 4 | 5 | 6 | TSizes;
   customTheme?: Partial<IReqoreTheme>;
 }
 
@@ -28,9 +30,10 @@ export const StyledHeader = styled(StyledTextEffect)`
 export const ReqoreHeading = memo(
   ({ size, children, customTheme, intent, ...props }: IReqoreHeadingProps) => {
     const theme = useReqoreTheme('main', customTheme, intent);
+    const _size: number = isStringSize(size) ? HEADER_SIZE_TO_NUMBER[size] : size;
     const HTMLheaderElement = useMemo(() => {
-      return `h${size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    }, [size]);
+      return `h${_size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    }, [_size]);
 
     return (
       <StyledHeader as={HTMLheaderElement} theme={theme} intent={intent} {...props}>

package/src/components/Icon/index.tsx

@@ -4,13 +4,15 @@ import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
+import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
+import { isStringSize } from '../../helpers/utils';
 import { IReqoreIconName } from '../../types/icons';
 
 export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
   icon: IReqoreIconName;
   color?: string;
-  size?: string;
+  size?: TSizes | string;
   iconProps?: IconBaseProps;
   intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
@@ -22,18 +24,26 @@ export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both'
   vertical-align: text-bottom;
   transition: all 0.2s ease-out;
 
-  ${({ margin }) =>
+  ${({ margin, size }) =>
     margin &&
     css`
-      margin-left: ${(margin === 'left' || margin === 'both') && '10px'};
-      margin-right: ${(margin === 'right' || margin === 'both') && '10px'};
+      margin-left: ${margin === 'left' || margin === 'both'
+        ? isStringSize(size)
+          ? `${PADDING_FROM_SIZE[size]}px`
+          : '10px'
+        : undefined};
+      margin-right: ${margin === 'right' || margin === 'both'
+        ? isStringSize(size)
+          ? `${PADDING_FROM_SIZE[size]}px`
+          : '10px'
+        : undefined};
     `}
 `;
 
 const ReqoreIcon = memo(
   ({
     icon,
-    size = '17px',
+    size = 'normal',
     className,
     color,
     margin,
@@ -45,14 +55,16 @@ const ReqoreIcon = memo(
     const theme = useContext(ReqoreThemeContext);
     const Icon: IconType = RemixIcons[`Ri${icon}`];
     const finalColor: string | undefined = intent ? theme.intents[intent] : color;
+    const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
 
     if (!Icon) {
       return (
         <StyledIconWrapper
           {...rest}
+          size={size}
           margin={margin}
           className={`${className || ''} reqore-icon`}
-          style={{ ...style, width: size, height: size }}
+          style={{ ...style, width: finalSize, height: finalSize }}
         />
       );
     }
@@ -61,13 +73,14 @@ const ReqoreIcon = memo(
       <StyledIconWrapper
         {...rest}
         margin={margin}
-        style={{ ...style, width: size, height: size }}
+        size={size}
+        style={{ ...style, width: finalSize, height: finalSize }}
         className={`${className || ''} reqore-icon`}
       >
         <IconContext.Provider
           value={{
             color: finalColor || 'inherit',
-            size,
+            size: finalSize,
             style: {
               verticalAlign: 'super',
             },

package/src/components/Input/index.tsx

@@ -176,7 +176,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       >
         {icon && (
           <StyledIconWrapper _size={size}>
-            <ReqoreIcon size={`${TEXT_FROM_SIZE[size]}px`} icon={icon} />
+            <ReqoreIcon size={size} icon={icon} />
           </StyledIconWrapper>
         )}
         <StyledInput

package/src/components/Menu/index.tsx

@@ -67,18 +67,18 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
     return (
       <ReqoreThemeProvider theme={theme}>
         <StyledReqoreMenu {...rest} position={position} ref={ref} theme={theme}>
-          {React.Children.map(children, (child) =>
-            child
+          {React.Children.map(children, (child) => {
+            return child
               ? // @ts-ignore
                 React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
-                  customTheme: theme,
+                  customTheme: child?.props.customTheme || theme,
                   wrap: wrapText,
-                  flat,
+                  flat: child?.props.flat || flat,
                 })
-              : null
-          )}
+              : null;
+          })}
         </StyledReqoreMenu>
       </ReqoreThemeProvider>
     );