@qoretechnologies/reqore 0.29.0 → 0.29.2

package/src/components/Effect/index.tsx

@@ -1,6 +1,7 @@
 import { rgba } from 'polished';
 import { HTMLAttributes } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
+import { Colors } from '../../constants/colors';
 import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import {
@@ -23,20 +24,41 @@ export type TReqoreEffectColor =
   | `${TReqoreIntent}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
   | 'main'
   | `main:${TReqoreEffectColorManipulation}`
-  | `main:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`;
+  | `main:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
+  | `${TReqoreHexColor}:${TReqoreEffectColorManipulation}`
+  | `${TReqoreHexColor}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`;
 export type TReqoreEffectColorList = [
   'main' | TReqoreIntent | TReqoreColor,
   TReqoreEffectColorManipulation | undefined,
   TReqoreEffectColorManipulationMultiplier | undefined
 ];
+export type TReqoreEffectGradientColors =
+  | 'main'
+  | TReqoreIntent
+  | TReqoreHexColor
+  | TReqoreEffectGradientColorsObject;
+export type TReqoreEffectGradientColorsObject = Record<number, TReqoreEffectColor>;
+export type TReqoreEffectGradientAnimationTrigger = 'always' | 'hover' | 'active' | 'never';
+
+export interface IReqoreEffectFilters {
+  grayscale?: boolean;
+  blur?: number;
+  sepia?: boolean;
+  invert?: boolean;
+  opacity?: number;
+  brightness?: number;
+  contrast?: number;
+  saturate?: number;
+}
 
-export interface IReqoreEffect {
+export interface IReqoreEffect extends IReqoreEffectFilters {
   gradient?: {
     type?: 'linear' | 'radial';
     shape?: 'circle' | 'ellipse';
-    colors: Record<number, TReqoreEffectColor>;
+    colors: TReqoreEffectGradientColors;
     direction?: string;
     borderColor?: TReqoreEffectColor;
+    animate?: TReqoreEffectGradientAnimationTrigger;
   };
   noWrap?: boolean;
   color?: TReqoreEffectColor;
@@ -50,7 +72,6 @@ export interface IReqoreEffect {
     color: TReqoreEffectColor;
     inset?: boolean;
     blur?: number;
-    useBorder?: boolean;
   };
   interactive?: boolean;
 }
@@ -63,13 +84,27 @@ export interface IReqoreTextEffectProps
   as?: React.ElementType;
   theme?: IReqoreTheme;
   active?: boolean;
+  isText?: boolean;
 }
 
+// Animate the gradient
+const StyledGradientKeyframes = keyframes`
+  0% {
+    background-position: 0% 0%;
+  }
+  50% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+`;
+
 export const StyledEffect = styled.span`
   transition: all 0.2s ease-in-out;
 
   // If gradient was supplied
-  ${({ effect, theme, minimal, active }: IReqoreTextEffectProps) => {
+  ${({ effect, theme, minimal, active, isText }: IReqoreTextEffectProps) => {
     if (!effect || !effect.gradient) {
       return undefined;
     }
@@ -79,7 +114,7 @@ export const StyledEffect = styled.span`
       theme,
       effect.gradient.colors,
       0,
-      minimal && !active
+      !isText && minimal && !active
     );
     const gradientColorsActive = createEffectGradient(theme, effect.gradient.colors, 0.05);
 
@@ -107,7 +142,7 @@ export const StyledEffect = styled.span`
         getColorFromMaybeString(theme, effect.gradient.borderColor),
         0.15
       )}`;
-    } else {
+    } else if (!isText) {
       // We will use border-image and create a gradient border
       borderColor = 'transparent';
       borderHoverColor = 'transparent';
@@ -142,6 +177,13 @@ export const StyledEffect = styled.span`
         }
       `}
 
+      ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
+        ? css`
+            background-size: 200% 200%;
+            animation: ${StyledGradientKeyframes} 1.5s linear infinite;
+          `
+        : undefined}
+
       ${effect.interactive &&
       css`
         cursor: pointer;
@@ -151,26 +193,43 @@ export const StyledEffect = styled.span`
         &:active {
           background: ${gradientActive};
           border-color: ${borderHoverColor} !important;
+
+          ${effect.gradient.animate === 'hover' ||
+          (effect.gradient.animate === 'active' && active) ||
+          effect.gradient.animate === 'always'
+            ? css`
+                background-size: 200% 200%;
+                animation: ${StyledGradientKeyframes} 2s linear infinite;
+              `
+            : undefined}
         }
       `}
     `;
   }}
 
-  ${({ effect, theme }: IReqoreTextEffectProps) => {
+  ${({ effect, theme, isText }: IReqoreTextEffectProps) => {
     if (!effect || !effect.glow) {
       return undefined;
     }
 
-    if (effect.glow.useBorder) {
+    if (!isText) {
       return css`
-        border: ${effect.glow.size || 2}px solid
-          ${getColorFromMaybeString(theme, effect.glow.color)} !important;
+        box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
+          ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
       `;
     }
 
+    const color = getColorFromMaybeString(
+      theme,
+      effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
+    );
+    const blur = effect.glow.blur || 0;
+
     return css`
-      box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
-        ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
+      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)};
     `;
   }}
 
@@ -231,16 +290,65 @@ export const StyledEffect = styled.span`
           text-align: ${effect.textAlign};
         `
       : undefined}
+
+  ${({ effect }) =>
+    effect &&
+    effect.grayscale &&
+    css`
+      filter: grayscale(100%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.blur &&
+    css`
+      filter: blur(${effect.blur}px);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.sepia &&
+    css`
+      filter: sepia(100%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.invert &&
+    css`
+      filter: invert(100%);
+    `};
+  ${({ effect }) =>
+    effect && (effect.opacity || effect.opacity === 0)
+      ? css`
+          opacity: ${effect.opacity};
+        `
+      : undefined};
+  ${({ effect }) =>
+    effect &&
+    effect.brightness &&
+    css`
+      filter: brightness(${effect.brightness}%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.contrast &&
+    css`
+      filter: contrast(${effect.contrast}%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.saturate &&
+    css`
+      filter: saturate(${effect.saturate}%);
+    `};
 `;
 
-export const StyledTextEffect = styled(StyledEffect)`
+export const StyledTextEffect = styled(StyledEffect).attrs((props) => ({ ...props, isText: true }))`
   display: inline-block;
 
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.gradient
       ? css`
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
+          -webkit-background-clip: text !important;
+          -webkit-text-fill-color: transparent !important;
         `
       : undefined}
 `;

package/src/components/Icon/index.tsx

@@ -7,9 +7,11 @@ 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 { IWithReqoreEffect } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 
-export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
   icon?: IReqoreIconName;
   color?: string;
   size?: TSizes | string;
@@ -18,17 +20,9 @@ export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
-  grayscale?: boolean;
-  blur?: number;
-  sepia?: boolean;
-  invert?: boolean;
-  opacity?: number;
-  brightness?: number;
-  contrast?: number;
-  saturate?: number;
 }
 
-export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both' }>`
+export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left' | 'both' }>`
   display: inline-block;
   flex: 0 0 auto;
   vertical-align: text-bottom;
@@ -37,48 +31,6 @@ export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both'
 
   border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
 
-  ${({ grayscale }) =>
-    grayscale &&
-    css`
-      filter: grayscale(100%);
-    `};
-  ${({ blur }) =>
-    blur &&
-    css`
-      filter: blur(${blur}px);
-    `};
-  ${({ sepia }) =>
-    sepia &&
-    css`
-      filter: sepia(100%);
-    `};
-  ${({ invert }) =>
-    invert &&
-    css`
-      filter: invert(100%);
-    `};
-  ${({ opacity }) =>
-    opacity || opacity === 0
-      ? css`
-          opacity: ${opacity};
-        `
-      : undefined};
-  ${({ brightness }) =>
-    brightness &&
-    css`
-      filter: brightness(${brightness}%);
-    `};
-  ${({ contrast }) =>
-    contrast &&
-    css`
-      filter: contrast(${contrast}%);
-    `};
-  ${({ saturate }) =>
-    saturate &&
-    css`
-      filter: saturate(${saturate}%);
-    `};
-
   ${({ margin, size }) =>
     margin &&
     css`

package/src/components/InternalPopover/index.tsx

@@ -62,6 +62,8 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   max-height: ${({ maxHeight = '80vh' }) => maxHeight};
   z-index: 999999;
   border-radius: ${RADIUS_FROM_SIZE.normal}px;
+  border: ${({ flat, isString, ...rest }: any) =>
+    !flat && !isString ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
 
   ${({ transparent }) =>
     !transparent &&
@@ -217,6 +219,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         isOpaque={!transparent && !minimal}
         intent={intent}
         flat={flat}
+        isString={isString(content)}
         dim={flat && !transparent && !effect && minimal}
         className='reqore-popover-content'
         ref={(el) => {

package/src/components/Menu/divider.tsx

@@ -11,7 +11,7 @@ export interface IReqoreMenuDividerProps
     IWithReqoreEffect,
     IWithReqoreSize {
   label?: string | number;
-  margin?: 'left' | 'right' | 'both';
+  margin?: 'left' | 'right' | 'both' | 'none';
   align?: 'left' | 'center' | 'right';
 }
 

package/src/components/MultiSelect/index.tsx

@@ -1,4 +1,4 @@
-import { size } from 'lodash';
+import { omit, size } from 'lodash';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import { ReqoreDropdown, ReqoreInput } from '../..';
@@ -13,7 +13,7 @@ import ReqoreTag, { IReqoreTagProps } from '../Tag';
 import ReqoreTagGroup from '../Tag/group';
 
 export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> &
-  Pick<IReqoreTagProps, 'badge'> & { isNew?: boolean };
+  Pick<IReqoreTagProps, 'asBadge' | 'rightIcon' | 'actions'> & { isNew?: boolean };
 
 export interface IReqoreMultiSelectProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
@@ -21,6 +21,7 @@ export interface IReqoreMultiSelectProps
   onValueChange?: (value: string[]) => void;
   items?: TReqoreMultiSelectItem[];
   onItemClick?: (item: IReqoreDropdownItem) => void;
+  onItemClickIcon?: IReqoreTagProps['rightIcon'];
   canRemoveItems?: boolean;
   canCreateItems?: boolean;
   selectedItemEffect?: IReqoreEffect;
@@ -35,6 +36,7 @@ export interface IReqoreMultiSelectItemProps
   item: TReqoreMultiSelectItem;
   onClick?: () => void;
   onRemoveClick?: () => void;
+  onItemClickIcon?: IReqoreTagProps['rightIcon'];
 }
 
 export const ReqoreMultiSelectItem = memo(
@@ -44,6 +46,7 @@ export const ReqoreMultiSelectItem = memo(
     onClick,
     selectedItemEffect,
     selectedItemSize,
+    onItemClickIcon,
   }: IReqoreMultiSelectItemProps) => {
     if (!item) {
       return null;
@@ -58,6 +61,7 @@ export const ReqoreMultiSelectItem = memo(
         effect={!item.intent ? item.effect || selectedItemEffect : undefined}
         size={selectedItemSize}
         onClick={onClick}
+        rightIcon={item.rightIcon || item.disabled ? undefined : onItemClickIcon}
       />
     );
   }
@@ -77,6 +81,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       selectorProps,
       openOnMount,
       enterKeySelects,
+      onItemClickIcon,
       ...rest
     }: IReqoreMultiSelectProps,
     ref
@@ -85,6 +90,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
     const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
     const [query, setQuery] = useState<string>('');
     const popoverData = useRef<IPopoverControls>(undefined);
+    const [focused, setFocused] = useState<boolean>(false);
 
     useUpdateEffect(() => {
       onValueChange?.(_value);
@@ -140,11 +146,11 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
     );
 
     /*
-  This code creates a list of all items that are available
-  for selection in the dropdown. It will include the items
-  that are passed in as props, as well as any items that the
-  user has created.
-  */
+    This code creates a list of all items that are available
+    for selection in the dropdown. It will include the items
+    that are passed in as props, as well as any items that the
+    user has created.
+    */
     const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
       const customItems: TReqoreMultiSelectItem[] = size(createdItems)
         ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
@@ -161,7 +167,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
       // Mark selected items as selected
       filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
-        ...item,
+        ...omit(item, ['actions', 'asBadge', 'rightIcon']),
         selected: _value.includes(item.value),
       }));
 
@@ -205,12 +211,12 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && focused) {
           const item = [...items, ...createdItems].find((item) => item.value === query);
 
           if (item) {
             handleItemSelect(item);
-          } else if (canCreateItems) {
+          } else if (canCreateItems && query) {
             handleItemSelect({
               value: query,
               isNew: true,
@@ -218,7 +224,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
           }
         }
       },
-      [items, createdItems, query, canCreateItems]
+      [items, createdItems, query, canCreateItems, focused]
     );
 
     const getItemByValue = useCallback(
@@ -236,6 +242,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
               <ReqoreMultiSelectItem
                 key={v}
                 item={getItemByValue(v)}
+                onItemClickIcon={onItemClickIcon}
                 onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
                 onClick={
                   onItemClick
@@ -257,6 +264,8 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
             {...selectorProps}
             multiSelect
             handler='focus'
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
             passPopoverData={(data) => (popoverData.current = data)}
             component={ReqoreInput}
             onClearClick={() => setQuery('')}

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -34,7 +34,7 @@ import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
-import { IReqoreEffect, StyledEffect } from '../Effect';
+import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon, { StyledIconWrapper } from '../Icon';
 import { ReqoreSpacer } from '../Spacer';
@@ -275,7 +275,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       'main',
       customTheme ||
         (contentEffect?.gradient && minimal
-          ? { main: Object.values(contentEffect.gradient.colors)[0] }
+          ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
     const { targetRef } = useCombinedRefs(ref);

package/src/components/RadioGroup/index.tsx

@@ -19,6 +19,9 @@ export interface IReqoreRadioGroupProps
   size?: TSizes;
   disabled?: boolean;
   asSwitch?: boolean;
+  onText?: string;
+  offText?: string;
+  margin?: 'left' | 'right' | 'both' | 'none';
 }
 
 const ReqoreRadioGroup = ({
@@ -29,6 +32,9 @@ const ReqoreRadioGroup = ({
   disabled,
   asSwitch,
   vertical = true,
+  onText,
+  offText,
+  margin = 'left',
   ...rest
 }: IReqoreRadioGroupProps) => (
   <ReqoreControlGroup {...rest} vertical={vertical}>
@@ -37,13 +43,15 @@ const ReqoreRadioGroup = ({
         <ReqoreMenuDivider
           {...itemRest}
           size={size || itemRest.size}
-          effect={{ ...itemRest.effect, textAlign: 'left' }}
-          margin='left'
+          effect={{ textAlign: 'left', ...itemRest.effect }}
+          margin={margin}
           label={vertical ? itemRest.label : undefined}
         />
       ) : (
         <ReqoreCheckbox
           asSwitch={asSwitch}
+          onText={onText}
+          offText={offText}
           {...itemRest}
           key={value}
           checked={value === selected}

package/src/components/Tag/index.tsx

@@ -53,7 +53,7 @@ export interface IReqoreTagProps
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
-  badge?: boolean;
+  asBadge?: boolean;
   intent?: TReqoreIntent;
   wrap?: boolean;
 }
@@ -77,17 +77,18 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
+  border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
-          min-height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+          min-height: ${({ size, asBadge }) =>
+            asBadge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size]}px;
         `
       : css`
-          height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+          height: ${({ size, asBadge }) => (asBadge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
         `}
 
   ${({ theme, color, labelKey, minimal }: IReqoreTagStyle) =>
@@ -220,7 +221,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       size = 'normal',
       onRemoveClick,
       actions,
-      badge,
+      asBadge,
       intent,
       color,
       minimal,
@@ -236,10 +237,15 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    let customColor: TReqoreHexColor = intent
-      ? theme.intents[intent]
-      : getColorFromMaybeString(theme, color);
-    customColor = minimal ? `${customColor || '#000000'}40` : customColor;
+    const getCustomColor = (itemIntent?: TReqoreIntent): TReqoreHexColor => {
+      let customColor: TReqoreHexColor = itemIntent
+        ? theme.intents[itemIntent]
+        : getColorFromMaybeString(theme, color);
+
+      customColor = minimal ? `${customColor || '#000000'}40` : customColor;
+
+      return customColor;
+    };
 
     return (
       <StyledTag
@@ -250,11 +256,11 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         }}
         width={width}
         labelKey={labelKey}
-        color={customColor}
+        color={getCustomColor(intent)}
         className={`${className || ''} reqore-tag`}
         size={size}
         ref={targetRef}
-        badge={badge}
+        asBadge={asBadge}
         minimal={minimal}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
@@ -308,7 +314,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                   component={StyledButtonWrapper}
                   componentProps={{
                     size,
-                    color: customColor,
+                    color: getCustomColor(action.intent),
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
                     effect: rest.effect,
@@ -330,7 +336,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             component={StyledButtonWrapper}
             componentProps={{
               size,
-              color: customColor,
+              color: getCustomColor(intent),
               className: 'reqore-tag-remove',
               onClick: onRemoveClick,
               effect: rest.effect,

package/src/components/Textarea/index.tsx

@@ -81,9 +81,9 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
   border: ${({ minimal, theme, flat }) =>
-    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.05)}` : 0};
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
-    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.2)}` : undefined};
 
   transition: all 0.2s ease-out;
 
@@ -94,7 +94,7 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
           &:focus,
           &:hover {
             outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.25)};
           }
         `
       : undefined}

package/src/constants/sizes.ts

@@ -1,6 +1,14 @@
 export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
 export type TWeights = 'soft' | 'normal' | 'heavy';
 
+export const ReqoreSizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  NORMAL: 'normal',
+  BIG: 'big',
+  HUGE: 'huge',
+};
+
 export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
 
 export const SIZE_TO_NUMBER = {