@qoretechnologies/reqore 0.29.4 → 0.29.5

package/src/components/Icon/index.tsx

@@ -6,14 +6,15 @@ 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 { getColorFromMaybeString } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
 import { IWithReqoreEffect } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { StyledEffect, TReqoreEffectColor } from '../Effect';
 
 export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
   icon?: IReqoreIconName;
-  color?: string;
+  color?: TReqoreEffectColor;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
   intent?: TReqoreIntent;
@@ -66,7 +67,9 @@ const ReqoreIcon = memo(
   }: IReqoreIconProps) => {
     const theme = useContext(ReqoreThemeContext);
     const Icon: IconType = RemixIcons[`Ri${icon}`];
-    const finalColor: string | undefined = intent ? theme.intents[intent] : color;
+    const finalColor: string | undefined = intent
+      ? theme.intents[intent]
+      : getColorFromMaybeString(theme, color);
     const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
 
     if (image) {

package/src/components/Input/index.tsx

@@ -22,7 +22,7 @@ import {
   IWithReqoreEffect,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { StyledEffect, TReqoreEffectColor } from '../Effect';
 import ReqoreIcon from '../Icon';
 import ReqoreInputClearButton from '../InputClearButton';
 
@@ -48,6 +48,7 @@ export interface IReqoreInputProps
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
   wrapperStyle?: React.CSSProperties;
+  iconColor?: TReqoreEffectColor;
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -150,6 +151,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       className,
       onClearClick,
       icon,
+      iconColor,
       flat,
       rounded = true,
       minimal,
@@ -185,7 +187,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       >
         {icon && (
           <StyledIconWrapper _size={size}>
-            <ReqoreIcon size={size} icon={icon} />
+            <ReqoreIcon size={size} icon={icon} color={iconColor} />
           </StyledIconWrapper>
         )}
         <StyledInput

package/src/components/Message/index.tsx

@@ -14,6 +14,7 @@ import {
   IWithReqoreSize,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 import {
@@ -35,6 +36,7 @@ export interface IReqoreMessageProps
   title?: string;
   children: any;
   icon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
   onClose?: () => any;
   onClick?: () => any;
   duration?: number;
@@ -64,6 +66,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
       minimal,
       size = 'normal',
       customTheme,
+      iconColor,
       ...rest
     },
     ref: any
@@ -128,7 +131,12 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
         >
           {leftIcon ? (
             <StyledIconWrapper intent={intent} size={size} theme={theme}>
-              <ReqoreIcon icon={leftIcon} margin={flat && minimal ? 'right' : 'both'} size={size} />
+              <ReqoreIcon
+                icon={leftIcon}
+                margin={flat && minimal ? 'right' : 'both'}
+                size={size}
+                color={iconColor}
+              />
             </StyledIconWrapper>
           ) : null}
           <StyledNotificationContentWrapper size={size} theme={theme}>

package/src/components/Panel/index.tsx

@@ -87,6 +87,7 @@ export interface IReqorePanelProps
   contentEffect?: IReqoreEffect;
   headerEffect?: IReqoreEffect;
   transparent?: boolean;
+  iconColor?: TReqoreEffectColor;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -266,6 +267,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       minimal,
       tooltip,
       badge,
+      iconColor,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -455,6 +457,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                   size={`${ICON_FROM_HEADER_SIZE[headerSize]}px`}
                   icon={icon}
                   margin='right'
+                  color={iconColor}
                 />
               )}
               {typeof label === 'string' ? (

package/src/components/Table/helpers.ts

@@ -1,19 +1,25 @@
-import { firstBy } from "thenby";
-import { IReqoreTableSort } from ".";
+import { firstBy } from 'thenby';
+import { IReqoreTableSort } from '.';
 
-export const flipSortDirection = (direction: "asc" | "desc"): "asc" | "desc" =>
-  direction === "asc" ? "desc" : "asc";
+export const flipSortDirection = (direction: 'asc' | 'desc'): 'asc' | 'desc' =>
+  direction === 'asc' ? 'desc' : 'asc';
 
 export const fixSort = (sort?: IReqoreTableSort) => {
-  return { ...(sort || {}), direction: sort?.direction || "desc" };
+  return { ...(sort || {}), direction: sort?.direction || 'desc' };
 };
 
 export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
-  const { by, direction } = sort;
+  const { by, thenBy, direction } = sort;
 
   if (!by) {
     return data;
   }
 
+  if (thenBy) {
+    return [...data].sort(
+      firstBy(by, { ignoreCase: true, direction }).thenBy(thenBy, { ignoreCase: true, direction })
+    );
+  }
+
   return [...data].sort(firstBy(by, { ignoreCase: true, direction }));
 };

package/src/components/Table/index.tsx

@@ -89,6 +89,7 @@ export interface IReqoreTableStyle {
 
 export interface IReqoreTableSort {
   by?: string;
+  thenBy?: string;
   direction?: 'asc' | 'desc';
 }
 

package/src/components/Tabs/item.tsx

@@ -45,8 +45,8 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-right: 0;
             }
             ${StyledButton}:last-child {
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
+              border-top-right-radius: 0 !important;
+              border-bottom-right-radius: 0 !important;
             }
           `
         : css`
@@ -54,10 +54,10 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-bottom: 0;
             }
             ${StyledButton}:first-child {
-              border-bottom-left-radius: 0;
+              border-bottom-left-radius: 0 !important;
             }
             ${StyledButton}:last-child {
-              border-bottom-right-radius: 0;
+              border-bottom-right-radius: 0 !important;
             }
           `}
 

package/src/components/Tabs/list.tsx

@@ -216,6 +216,7 @@ const ReqoreTabsList = ({
                 }
                 closeOnOutsideClick
                 isReqoreComponent
+                noWrapper
                 handler='hoverStay'
                 content={
                   <ReqoreMenu customTheme={theme}>

package/src/components/Tag/index.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
+import { ActiveIconScale, InactiveIconScale } from '../../styles';
 import {
   IReqoreDisabled,
   IReqoreIntent,
@@ -50,6 +51,9 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
+  leftIconColor?: TReqoreEffectColor;
+  rightIconColor?: TReqoreEffectColor;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -81,6 +85,8 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
+  ${InactiveIconScale};
+
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
@@ -106,16 +112,24 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 
   ${({ theme, color, interactive, minimal, effect }) =>
-    interactive && !effect?.gradient
+    interactive
       ? css`
           cursor: pointer;
           &:hover {
-            background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
-            color: ${minimal
-              ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
-              : color
-              ? getReadableColorFrom(color)
-              : getReadableColor(theme, undefined, undefined)};
+            .reqore-tag-content,
+            .reqore-tag-key-content {
+              ${ActiveIconScale}
+            }
+
+            ${!effect?.gradient &&
+            css`
+              background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+              color: ${minimal
+                ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
+                : color
+                ? getReadableColorFrom(color)
+                : getReadableColor(theme, undefined, undefined)};
+            `}
           }
         `
       : undefined}
@@ -130,8 +144,6 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 `;
 
-const StyledTagRightIcon = styled(ReqoreIcon)``;
-
 const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
@@ -227,6 +239,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       minimal,
       wrap = false,
       width,
+      leftIconColor,
+      rightIconColor,
+      iconColor,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -276,7 +291,14 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
-            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
+            {icon && (
+              <ReqoreIcon
+                icon={icon}
+                size={size}
+                margin={label ? 'left' : 'both'}
+                color={leftIconColor || iconColor}
+              />
+            )}
             {labelKey && (
               <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
                 {labelKey}
@@ -299,10 +321,11 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               </StyledTagContent>
             ) : null}
             {rightIcon && (
-              <StyledTagRightIcon
+              <ReqoreIcon
                 icon={rightIcon}
                 size={size}
                 margin={label || icon ? 'right' : 'both'}
+                color={rightIconColor || iconColor}
               />
             )}
           </StyledTagContentWrapper>

package/src/components/Textarea/index.tsx

@@ -143,8 +143,6 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
 
     useTooltip(targetRef?.current, tooltip);
 
-    console.log(fluid);
-
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}

package/src/mock/collectionData.tsx

@@ -32,6 +32,8 @@ export default [
     tooltip: 'This is a test item',
     headerSize: 2,
     contentSize: 'huge',
+    selected: true,
+    icon: 'Hashtag',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     tags: [
@@ -89,6 +91,7 @@ export default [
   {
     label: 'Item with custom content when expanded',
     tooltip: 'Expandable item with custom content',
+    selected: true,
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     expandable: true,

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

@@ -20,7 +20,7 @@ export default {
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
     <>
-      <ReqoreControlGroup size={buttonProps.size}>
+      <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -41,14 +41,21 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup size={buttonProps.size}>
+      <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat={false}>
+        <ReqoreButton
+          {...buttonProps}
+          minimal
+          flat={false}
+          iconColor='#38fdb2'
+          leftIconColor='#33023c:lighten:3'
+          rightIconColor='#0a487b:lighten:3'
+        >
           Minimal not flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
@@ -59,16 +66,17 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup fluid>
+      <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
           description='This is a very interesting description for a button, I like it very much'
+          iconColor='#38fdb2'
         >
           With Default Description
         </ReqoreButton>
@@ -109,7 +117,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -10,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreCheckbox {...args} />
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
         <ReqoreCheckbox {...args} checked tooltip='I am checked' />
@@ -18,7 +18,8 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
-      <ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreControlGroup wrap>
         <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}

package/src/stories/Collection/Collection.stories.tsx

@@ -45,7 +45,7 @@ export default {
       description: 'If true, the collection will be rounded when stacked',
     }),
     ...createArg('height', {
-      defaultValue: '600px',
+      defaultValue: undefined,
       type: 'string',
       name: 'Height',
       description: 'Height of the collection',
@@ -73,6 +73,7 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
     <ReqoreCollection
       {...args}
       badge={10}
+      selectedIcon='CheckLine'
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
@@ -84,6 +85,13 @@ Basic.args = {
   items,
 };
 
+export const WithHeight = Template.bind({});
+WithHeight.args = {
+  label: 'Collection of items',
+  height: '600px',
+  items,
+};
+
 export const Stacked = Template.bind({});
 Stacked.args = {
   label: 'Collection of items',
@@ -97,3 +105,10 @@ Fill.args = {
   fill: true,
   items,
 };
+
+export const SelectedFirst = Template.bind({});
+SelectedFirst.args = {
+  label: 'Collection of items',
+  items,
+  showSelectedFirst: true,
+};

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -1,7 +1,13 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
-import { ReqoreButton, ReqoreCheckbox, ReqoreControlGroup, ReqoreTag } from '../../index';
+import {
+  ReqoreButton,
+  ReqoreCheckbox,
+  ReqoreControlGroup,
+  ReqoreTag,
+  ReqoreVerticalSpacer,
+} from '../../index';
 import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
@@ -35,37 +41,60 @@ export default {
 
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
   return (
-    <ReqoreControlGroup {...args}>
-      <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-      <ReqoreButton
-        icon='PictureInPictureLine'
-        flat={false}
-        effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
-      >
-        Non flat Button
-      </ReqoreButton>
-      <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-      <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-      <ReqoreCheckbox
-        asSwitch
-        label='Switchy switch'
-        margin='both'
-        intent='warning'
-        checkedIcon='CheckFill'
-        checked
-        uncheckedIcon='CheckboxBlankLine'
-      />
-      <ReqoreInput icon='4KFill' value='Hello' />
-      <ReqoreButton disabled fixed>
-        Disabled & Fixed
-      </ReqoreButton>
-      <ReqoreCheckbox checked margin='both'>
-        Checkbox
-      </ReqoreCheckbox>
+    <>
+      <ReqoreControlGroup {...args}>
+        <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+        <ReqoreButton
+          icon='PictureInPictureLine'
+          flat={false}
+          effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
+        >
+          Non flat Button
+        </ReqoreButton>
+        <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+        <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+        <ReqoreCheckbox
+          asSwitch
+          label='Switchy switch'
+          margin='both'
+          intent='warning'
+          checkedIcon='CheckFill'
+          checked
+          uncheckedIcon='CheckboxBlankLine'
+        />
+        <ReqoreInput icon='4KFill' value='Hello' />
+        <ReqoreButton disabled fixed>
+          Disabled & Fixed
+        </ReqoreButton>
+        <ReqoreCheckbox checked margin='both'>
+          Checkbox
+        </ReqoreCheckbox>
 
-      <ReqoreButton minimal>Minimal</ReqoreButton>
-      <ReqoreTag label='smol tag' size='small' />
-    </ReqoreControlGroup>
+        <ReqoreButton minimal>Minimal</ReqoreButton>
+        <ReqoreTag label='smol tag' size='small' />
+      </ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={15} />
+      <ReqoreControlGroup {...args} className='root-group'>
+        <ReqoreControlGroup intent='info' className='group-1'>
+          <ReqoreButton icon='PictureInPictureLine'>Group 1</ReqoreButton>
+          <ReqoreTag icon='PictureInPictureLine' label='Group 1' />
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine'>Root group</ReqoreButton>
+        <ReqoreControlGroup intent='success' className='group-2'>
+          <ReqoreButton icon='PictureInPictureLine'>Group 2</ReqoreButton>
+          <ReqoreControlGroup intent='danger' className='group-3'>
+            <ReqoreButton icon='PictureInPictureLine'>Group 3</ReqoreButton>
+            <ReqoreButton icon='PictureInPictureLine'>Group 3</ReqoreButton>
+          </ReqoreControlGroup>
+          <ReqoreCheckbox label='Group 2' margin='both' />
+        </ReqoreControlGroup>
+        <ReqoreButton icon='PictureInPictureLine'>Root group</ReqoreButton>
+        <ReqoreControlGroup intent='warning' className='group-4'>
+          <ReqoreButton icon='PictureInPictureLine'>Group 4</ReqoreButton>
+          <ReqoreInput icon='PictureInPictureLine' value='Group 4' />
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    </>
   );
 };
 
@@ -85,6 +114,13 @@ Vertical.args = {
   vertical: true,
 };
 
+export const VerticalStacked = Template.bind({});
+VerticalStacked.args = {
+  vertical: true,
+  stack: true,
+  fluid: true,
+};
+
 export const Stacked = Template.bind({});
 Stacked.args = {
   stack: true,

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -159,11 +159,21 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
 
   return (
     <>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreDropdown label='Default Dropdown' {...args} />
         <ReqoreDropdown label='Disabled if empty' {...args} items={[]} />
-        <ReqoreDropdown icon='SunCloudyLine' label='Custom icon' {...args} />
-        <ReqoreDropdown rightIcon='SunCloudyLine' caretPosition='right' {...args}>
+        <ReqoreDropdown
+          icon='SunCloudyLine'
+          label='Custom icon'
+          {...args}
+          leftIconColor='warning:lighten:2'
+        />
+        <ReqoreDropdown
+          rightIcon='SunCloudyLine'
+          caretPosition='right'
+          {...args}
+          iconColor='success:lighten:2'
+        >
           Custom icon with caret on right
         </ReqoreDropdown>
         <ReqoreDropdown

package/src/stories/Input/Input.stories.tsx

@@ -26,7 +26,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 
   return (
     <>
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
         <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
         <ReqoreInput
@@ -38,6 +38,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
         <ReqoreInput
           {...args}
+          iconColor='pending:lighten:2'
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           onChange={handleValueChange}
@@ -51,7 +52,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup>
+      <ReqoreControlGroup wrap>
         <ReqoreInput
           {...args}
           placeholder='Reqore Input'

package/src/stories/Menu/Menu.stories.tsx

@@ -118,6 +118,7 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           {
             icon: 'EmotionUnhappyLine',
             rightIcon: 'Scissors2Fill',
+            leftIconColor: 'danger:lighten',
             wrap: args.wrapText,
             flat: args.flat,
           } as IReqoreMenuItemProps

package/src/stories/Message/Message.stories.tsx

@@ -52,6 +52,13 @@ Minimal.args = {
   intent: 'danger',
 };
 
+export const WithIconColor: Story<IReqoreMessageProps> = Template.bind({});
+WithIconColor.args = {
+  minimal: true,
+  intent: 'success',
+  iconColor: '#00fd9f',
+};
+
 export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
 Opaque.args = {
   opaque: true,